Need help with HTML generation from Arduino


I’m create the web page from the MCU, where it builds the page then sends to clients, and so far it works perfectly. I’m reading sensor, and sending the results to a web page using java and html. The page is a table with read values and with java just the values update so it’s nice and fast.

Now i’m tying to draw a filled rectangle with varying width inside a cell–basically a status bar showing battery percent. I can draw a varying rectangle outside the table and it works but I really want the little rectangle to be drawn inside a cell.

Here my java section

Javascript += “xmlResponse=xmlHttp.responseXML;\n”;
Javascript += “xmldoc = xmlResponse.getElementsByTagName(‘ERem’);\n”;
Javascript += “message = xmldoc[0].firstChild.nodeValue;\n”;
Javascript += “document.getElementById(‘div4’).style.width=message;\n”;

here’s my div section

Website += “div4 {”
“background-color: #00FF22;”;
Website += “}”;

here’s my table section

Website += “<td style=“color:white; text-align:right”>\n”;

The other data in the table updates as it gets updates through Java, but the cute little filled rect will not display.

Help anyone?

Sounds like an HTML question, not really an Arduino question. You would probably get more help in a HTML forum.

Probably the easiest would be to develop the web page using your computer browser for checking. When that is done, then port it to the arduino environment.

Nah. I am a Web developer myself. I looked on this "Code" for five Minutes. And this is a mess. You create a Javascript string with string concat. You will also Not get any help in HTML forum..

It raised redflags as you called Javascript Java though.

So what I can offer you is, explaining, how this would be done without Javascript and you can try that.

You create a div
You give this div css (inline css also fine) border: 1px Solid yourColorInHexCode
You give this div another css: Position: relative
You create another div inside the above div
You give this div css: width: (battery percentage) % (probably inline css required)
You give this div css: background-color: yourColorInHexCode

That is all. No js needed.

sending the results to a web page using java and html.

Java and Javascript are two completely different things.

Javascript is what is normally used with web pages.