Hey all,
I want to make a remote control system and display sensors parameters so I'm using ThingSpeak to plot graphs and some buttons to control leds, seperatly everything works perfect, but when I add them together ThingSpeak doesnt get a data.
There is a html code:
<html>
<head >
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>title</title>
strLED3 = "";
strLED4 = "";
var LED3_state = 0;
var data_val=0;
var num_updates = 0; // number of 200ms periods used to calculate time to send data to ThingSpeak
function GetArduinoInputs()
{
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseXML != null) {
document.getElementById("input4").innerHTML =
this.responseXML.getElementsByTagName('analog1')[0].childNodes[0].nodeValue;
data_val=this.responseXML.getElementsByTagName('analog1')[0].childNodes[0].nodeValue;
if (this.responseXML.getElementsByTagName('LED')[0].childNodes[0].nodeValue === "on") {
document.getElementById("LED3").innerHTML = "ON (TURN OFF)";
LED3_state = 1;
}
else {
document.getElementById("LED3").innerHTML = "OFF (TURN ON)";
LED3_state = 0;
}
if (this.responseXML.getElementsByTagName('LED1')[0].childNodes[0].nodeValue === "on") {
document.getElementById("LED4").innerHTML = "ON (TURN OFF)";
LED4_state = 1;
}
else {
document.getElementById("LED4").innerHTML = "OFF (TURN ON)";
LED4_state = 0;
}
if (num_updates >= 100) {
num_updates = 0;
// send voltage to ThingSpeak
ThingSpeakSend("XXXXXXXXXXXXX",data_val); // insert your ThingSpeak Write API Key here
}
num_updates++;
}
}
}
}
request.open("GET", "ajax_inputs" + nocache, true); //request.open("GET", "ajax_inputs" + strLED3 + strLED4 + nocache, true);
request.send(null);
setTimeout('GetArduinoInputs()', 200);
strLED3 = "";
strLED4 = "";
}
function GetButton1()
{
if (LED3_state === 1) {
LED3_state = 0;
strLED3 = "&LED3=0";
}
else {
LED3_state = 1;
strLED3 = "&LED3=1";
}
}
function GetButton2()
{
if (LED4_state === 1) {
LED4_state = 0;
strLED4 = "&LED4=0";
}
else {
LED4_state = 1;
strLED4 = "&LED4=1";
}
}
// function to send data to ThingSpeak
function ThingSpeakSend(api_write_key, data)
{
var ts_req = new XMLHttpRequest();
// GET request string - modify if more fields are needed
var req_str = "http://api.thingspeak.com/update?key=" + api_write_key + "&field1=" + data;
ts_req.onreadystatechange = function()
{
// not doing anything with response from ThingSpeak
}
// send the data to ThingSpeak
ts_req.open("GET", req_str, true);
ts_req.send(null);
}
</head>
<body onload="GetArduinoInputs()">
<button type="button" id="LED3" onclick="GetButton1()"> OFF (TURN ON) </button>
<button type="button" id="LED4" onclick="GetButton2()"> OFF (TURN ON) </button>
src="https://thingspeak.com/channels/235349/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=7&title=%C5%BDem%C4%97s+dr%C4%97gm%C4%97&type=line&xaxis=Data&yaxis=%25&yaxismax=100&yaxismin=0">
</body>
How I figured out its a problem with a GET message, when I simply write:
request.open("GET", "ajax_inputs" + nocache, true);
graph is plotted, but when I add to this request strings which keep LED states values it doesnt work.
[code]request.open("GET", "ajax_inputs" + strLED3 + strLED4 + nocache, true);
[/code]
So maybe you could help me?