Need help with HTML generation for ESP8266

Chat freely about anything...
 Reply

User avatar

Need help with HTML generation for ESP8266

By kriskasprzak
- Fri Apr 24, 2020 11:02 am #86741 All,


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\"><svg rect id='div4'></svg></td>\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?
User avatar

Re: Need help with HTML generation for ESP8266

By quackmore
- Sun Apr 26, 2020 1:13 pm #86771 checkout https://www.w3schools.com/html/html5_svg.asp

not sure what you really want to do
but probably you are trying to declare a CSS class div4
then you should do it into the head section of the doc
using 'style'
Code: Select all<head>
  <style>
    .div4 {
      fill: blue;
    }
  </style>
</head>


and then use it like this:
Code: Select all<svg>
  <rect width="40" height="10" class="div4">
</svg>
 Reply
Return to General Discussions