arduino + ajax + xml + ThingSpeak

Other Hardware Home Automation
1

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>
        <script>
		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);
		}
		
		
		</script>
    </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>
		 
		 
		  <iframe width="450" height="260" style="border: 1px solid #cccccc; margin: 0 0 10px 10px;"
		 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"></iframe>
		 
		 
		 
		  </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.

request.open("GET", "ajax_inputs" + strLED3 + strLED4 + nocache, true);

So maybe you could help me?

2

What is the responseXML with and without the extra parameters? You can examine whats being sent and received from a webpage using Firebug (for Firefox) or the Chrome developer tools- look for the 'Network' tab.

3

thanks, somehow it started to work even I did nothing to fix it :smiley: