- Thu Jan 19, 2017 4:13 pm
#61243
Hello,
My first post here. I stumbled across this thread while trying to figure out how to program my ESP8266 so it would serve as a dynamic web server for the data collected by Arduino Nano, and also would relay a couple of simple commands (buttons pressed) from the browser to Arduino. (This will be used as a security and monitoring device for my 3D printer:
http://pulsar124.wikia.com/wiki/3D_Guardian). I know C++/Arduino, but unfortunately know almost nothing about web programming (Javascript, XML etc).
The OP's code in the first post here seems like a good start; I managed to run it on my ESP8266, and by making this simple modification to the function buildXML() I can now read serial data (e.g. from my Arduino) and pass it on to javascript:
Code: Select allvoid buildXML() {
String content = "";
char character;
while (Serial.available()) {
character = Serial.read();
content.concat(character);
}
XML = "<?xml version='1.0'?>";
XML += "<response>";
// XML+=millis2time();
XML += content.substring(0,3);
XML += "</response>";
}
Now the stuff fed to the serial port of the ESP is dynamically displayed in the browser.
But I need to display multiple numbers received from Arduino, and can't figure out how to expand the OP's code to have that functionality. I tried to add another section to buildXML(),
Code: Select all XML += "<response2>";
XML += content.substring(3,6);
XML += "</response2>";
and duplicated the three relevant lines in buildJavascript():
Code: Select all javaScript += "function handleServerResponse(){\n";
javaScript += " if(xmlHttp.readyState==4 && xmlHttp.status==200){\n";
javaScript += " xmlResponse=xmlHttp.responseXML;\n";
javaScript += " xmldoc = xmlResponse.getElementsByTagName('response');\n";
javaScript += " message = xmldoc[0].firstChild.nodeValue;\n";
javaScript += " document.getElementById('param1').innerHTML=message;\n";
javaScript += " xmldoc = xmlResponse.getElementsByTagName('response2');\n";
javaScript += " message = xmldoc[0].firstChild.nodeValue;\n";
javaScript += " document.getElementById('param2').innerHTML=message;\n";
(the new lines are the three lines at the bottom). Finally, I added one more line to buildWebsite():
Code: Select allvoid buildWebsite() {
buildJavascript();
webSite = "<!DOCTYPE HTML>\n";
webSite += javaScript;
webSite += "<BODY onload='process()'>\n";
webSite += "<BR>3D Printer control<BR>\n";
webSite += "Param1 = <A id='param1'></A><BR>\n";
webSite += "Param2 = <A id='param2'></A>\n"; // The new line
webSite += "</BODY>\n";
webSite += "</HTML>\n";
}
Unfortunately, this doesn't work: once I add the <response2> stuff to buildXML(), the script no longer works: param1 and param2 fields remain empty in the browser when I send a string to the serial port.
I am sure I am doing something stupid here - could anyone please land me a hand?
Also - is there a simple way to add a couple of buttons to the web script, so I could send commands to Arduino?
Thanks a lot for any help!
