ESP8266 Community Forum

Hi,

I am trying to make a web server that displays an animation of the current state of our garage door. I have a distance sensor and some html code. I take the distance sensor readings and they determine how high the animation is.

I am using AJAX to make the webserver update automatically but it is not changing the size of my html image.

Here is the server.on code any help would be appreciated.

server.on("/", [](){
page = "<h1>Sensor to Node MCU Web Server</h1>
<h1>Data:</h1> <h1 id=\"data\">""</h1>
<div style='width: 0;height: 0;border-left: 150px solid transparent;border-right: 150px solid transparent;border-bottom: 55px solid #A9A9A9;margin: 0 auto;'></div>
<div style='height: 10px;width: 300px;background-color: #DCDCDC;margin: 0 auto;'></div>
<div style='height: 5px;width: 250px;background-color: #DCDCDC;margin: 0 auto;'></div>
<div style='height: '\"data\"'px;width:230px;margin: 0 auto;background: repeating-linear-gradient(to top,#A9A9A9 0px,#A9A9A9 3px,#C0C0C0 0px,#C0C0C0 17px);border-left: 10px solid #DCDCDC;border-right: 10px solid #DCDCDC;'></div>
<div style='height: '\"data\"' px;width: 230px;margin: 0 auto;border-left: 10px solid #DCDCDC;border-right: 10px solid #DCDCDC;'></div>\r\n";
page += "<script>\r\n";
page += "var x = setInterval(function() {loadData(\"data.txt\",updateData)}, 500);\r\n";
page += "function loadData(url, callback){\r\n";
page += "var xhttp = new XMLHttpRequest();\r\n";
page += "xhttp.onreadystatechange = function(){\r\n";
page += " if(this.readyState == 4 && this.status == 200){\r\n";
page += " callback.apply(xhttp);\r\n";
page += " }\r\n";
page += "};\r\n";
page += "xhttp.open(\"GET\", url, true);\r\n";
page += "xhttp.send();\r\n";
page += "}\r\n";
page += "function updateData(){\r\n";
page += " document.getElementById(\"data\").innerHTML = this.responseText;\r\n";
page += "}\r\n";
page += "</script>\r\n";
server.send(200, "text/html", page);
});

Thanks

Sorry, to clarify question. The problem is not in:

<h1 id=\"data\">""</h1>

That part of the html is working correctly and displaying the data.

The problem is in the div I am trying to style with the data as the height value.

<div style='height: '\"data\"'px;

Is not acheiving anything.

The height of the div does not change.

Thanks again, Fin