HTML / Script question

Thanks chaps.... I will have a go at this

You can have javascript anywhere in your html. I prefer making an html template and referencing javascript source in another file. This keeps the html template clean and lets the javascript source line select which file to include.

An example:

I have been using w3schools as a resource, I just struggle sometimes to convert what they show you into code that will compile.

It's all a learning curve...

you're not interested with raw string literal ? kind of look like this below

server.send_P(200, "text/html", home_page, sizeof(home_page) - 1 );

and somewhere you define your home_page array

const char home_page[]  = R"=====(

<html>

All your HTML script goes here

</html>

)=====";
1 Like

Try not to confuse "markup language" with "javascript"... by saying "All your HTML goes here"

Yes, I think I am getting a bit confused here.

Anyway, I never noticed the incorrect head and body statements. I have tidied those up.

I didn't think you could have if statements in that HTML list, but I was wrong.

Your suggestion above has worked well. Thank you

   if (datacol == 0) {
      page += "<h4 style='color: #FF0000; font-size: 200px; margin-top: 120px; margin-bottom: 25px;' id=\"data\">""</h4>\r\n";          // Display the data in red
    }
    else if (datacol == 1) {
      page += "<h4 style='color: #00FF00; font-size: 200px; margin-top: 120px; margin-bottom: 25px;' id=\"data\">""</h4>\r\n";          // Display the data in green
    }
    else if (datacol == 2) {
      page += "<h4 style='color: #FFFF00; font-size: 200px; margin-top: 120px; margin-bottom: 25px;' id=\"data\">""</h4>\r\n";          // Display the data in yellow
    }
    else {
      page += "<h4 style='color: #000000; font-size: 200px; margin-top: 120px; margin-bottom: 25px;' id=\"data\">""</h4>\r\n";           // Display the data in black
    }

Hey all

OK. Still tinkering with this. The solution above worked, but only when the page first loads.
Otherwise, you have to refresh the page to get the colour to change (because only the data is updating via the script).

So, I kept on playing about. How do you learn this? The code in the script is just baffling and I have no idea how you even learn this stuff.
Happy to buy a book, but I somehow doubt it will help.

For instance, I decide to try updating three variables on the page, rather than one.
Two for text and the third for the colour of the text.

So I tried various additions to that script, but nothing worked. Not surprising when I don't really understand how it works.

This horror show kinda works for 3 updated .txt files....

  server.on("/", []() {

    //<meta http-equiv="refresh" content="10"> in HTML (where 10 = 10 seconds)   Auto page refresh

    page = "<!DOCTYPE html><html>";
    page += "<head><meta name=\"viewport\" content=\"width=device-width, user-scalable=yes, initial-scale=1\">";
    page += "<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center; background-color: black;}</style></head>";

    page += "<body>";

    page += "<img src='Test.co.uk/wp-content/uploads/2017/08/TEST.png'>\r\n";                         

    page += "<h1 style='color: #FFFFFF; font-size: 120px; margin-top: 25px; margin-bottom: 5px' >TEST PAGE</h1>\r\n";     
    page += "<h2 style='color: #C0C0C0; font-size: 60px; margin-top: 5px; margin-bottom: 20px' >TIMING SYSTEM</h2>\r\n";    

    page += "<h4 style='color: #00FF00; font-size: 200px; margin-top: 5px; margin-bottom: 5px;' id = \"title\">""</h4>\r\n";                            
    page += "<h4 style='color: #00FF00; font-size: 200px; margin-top: 5px; margin-bottom: 5px;' id = \"time\">""</h4>\r\n";                          

    page += "<script>\r\n";

    page += "var x = setInterval(function() {loadData(\"colour.txt\",updateData)}, 1000);\r\n";                                          // Script to retrieve the colour data
    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(\"colour\").innerHTML = this.responseText;\r\n";
    page += "}\r\n";

    page += "var x = setInterval(function() {loadData1(\"title.txt\",updateData1)}, 1000);\r\n";                                          
    page += "function loadData1(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 updateData1(){\r\n";
    page += " document.getElementById(\"title\").innerHTML = this.responseText;\r\n";
    page += "}\r\n";

    page += "var x = setInterval(function() {loadData2(\"time.txt\",updateData2)}, 1000);\r\n";                                          // Script to retrieve the live time data
    page += "function loadData2(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 updateData2(){\r\n";
    page += " document.getElementById(\"time\").innerHTML = this.responseText;\r\n";
    page += "}\r\n";
    page += "</script>\r\n";

    page += "</body>";

    server.send(200, "text/html", page);
  });

So this gets me 3x live updated .txt files to the screen every second I believe (I assume that is what the 1000 is in the setInterval line).
But, all I did is repeat the script 3 times and randomly change variable names until it works. Not very scientific and I am sure this could be achieved in a single script (rather than 3 repeats of the same code).

My clearly wrong thinking is that I could use that third .txt file to set the colour of the header But I never got that working.

I think I have reached the limit of my abilities here....

The script is fine. The problem is with how web pages work.

When the page loads, the browser interprets the HTML, runs any scripts that are invoked, and displays the page. If the HTML changes (like the script does), then you need to refresh the page (load it again) to see any updates.

What you need to do is directly access the text whose color you want to change using a script. That will allow it to update at any time.

Not an arduino topic. Web page behavior is probably the subject that is most widely covered online :slight_smile: Start with the W3Schools tutorials on javascript. Also, it helps to remember that software has become very specialized. People who do web applications rarely do embedded systems, and vice versa. So there's not a lot of crossover. Most complex projects that require both typically have engineers of each specialty working on their own areas.

This should work. Right after this line:

document.getElementById(\"data\").innerHTML = this.responseText;\r\n";

insert

page += " document.getElementById(\"data\").style.color= '#00FF00';\r\n";

That should dynamically update the color of the data.

Thanks. I do realise this isn't an Arduino thing (its hosted on an ESP32).

I use the W3Schools pages a lot, and i usually get there in the end.... it's just a bit painful!

page += " document.getElementById(\"data\").style.color= '#00FF00';\r\n

Not sure I get that?
I would have data arriving as colour (which I assume is colour.txt).
I was sending that as:

  server.on("/colour.txt", []() { 
    text1 = (String)"RED";
    server.send(200, "text/html", text1);
  });

I thought I needed to insert a line before the script updates the title data and the time data that would update the colour of the h4 header style first.

Anyway, I don't want to waste your time. I'll just carry on Googling and playing.

Thanks for all your advice!

can you summarize what you want to update finally?

  • 2 innerHTML, title and time (?)
  • the color of which element?

If you could provide a simple sketch with your page, which can be entered in the IDE, you might get a proposal.

Dynamic color changes (as opposed to refreshing the screen) can occur using javascript; onRollover() of the pointing device.

Same difference. Uses Arduino framework.

Just try it. I specifically chose that color so it would be obvious if it worked. Once that works, then you can worry about what specific color to assign to the text.

That doesn't work.
I am tinkering as we speak (although I currently appear to have entirely messed it up)...

OK. Lets call it a day

I can't even get it to let me declare the colour in a different line.

page += "<h4 style='color: #00FFFF;'">""</h4>\r\n";

page += "<h4 style=' font-size: 200px; margin-top: 5px; margin-bottom: 5px;' id = \"time\">""</h4>\r\n"; 

I thought you could declare the colour in it's own style line, but no combination seems to work.
Unless I can get the colour command out of the main print to the page line, I can't see me getting any further.
Spent far too much time on it already, I just don't know enough about this stuff.

I have tried all the suggestions above and none work.

Thanks for all your help anyway

That is not a correct String
There is a '"' somewhere halfway without a ''

You can remove the \r\n at the end of every line, and it is better to eb consistent with the " & '
HTML entered in a sketch like this is tricky and there is no real error checking.

Tell me about it! Frustrating as hell. That's why I suggested the alternate method on post #88

I'm disgusted with myself.....

After literally a whole week of trying different things. I tried putting my code in to ChatGPT and asking it the following:

To add the ability to change the colour of the html text 'title' and 'time' by changing the String variable htmlcol. This colour update must be made each time the title and time are updated, not when the html page is first created.

it spat out a perfect working piece of code. My code, but corrected where it needed to be.

Basically it updated the script correctly....

    page += "<script>\r\n";
    page += "var htmlcol = '" + htmlcol + "';\r\n"; // Pass color to JS
    page += "var x = setInterval(function() {loadData1(\"title.txt\",updateData1)}, 1000);\r\n";                                          
    page += "function loadData1(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 updateData1(){\r\n";
    page += " document.getElementById(\"title\").innerHTML = this.responseText;\r\n";
    page += " document.getElementById(\"title\").style.color = htmlcol;\r\n"; // Set title color
    page += "}\r\n";

    page += "var x = setInterval(function() {loadData2(\"time.txt\",updateData2)}, 1000);\r\n";                                          
    page += "function loadData2(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 updateData2(){\r\n";
    page += " document.getElementById(\"time\").innerHTML = this.responseText;\r\n";
    page += " document.getElementById(\"time\").style.color = htmlcol;\r\n"; // Set time color
    page += "}\r\n";
    page += "</script>\r\n";

    page += "</body>";
    server.send(200, "text/html", page);
  });

And then the HTML lines are:

    page += "<h4 style='color: " + htmlcol + "; font-size: 200px; margin-top: 5px; margin-bottom: 5px;' id='title'></h4>\r\n";              
    page += "<h4 style='color: " + htmlcol + "; font-size: 200px; margin-top: 5px; margin-bottom: 5px;' id='time'></h4>\r\n"; 

I feel dirty.... but at least it works
Thanks all

I lied..... it still doesn't work.

I'm out

EDIT; Good thing about AI.... Just keep asking lol
All working now. Lets put this to bed

It's not "AI" if it requires endless corrections.

Wow... this place really hates AI.
I have come to love it. Fixed so many problems I have been having with various libraries.
Each to their own