HTML / Script question

Using Arduino Networking, Protocols, and Devices
1

Not entirely sure we are allowed to ask HTML questions in here???

Anyway, here we are...

I won't post the entire HTML for the webpage my ESP32 displays because it's all a bit long.

But, I need to change the colour of one line of text, so I wrote this script.... but it doesn't work.

Any obvious reason why?

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

This single line works fine:

page += "<h4 style='color: #FF0000; font-size: 200px; margin-top: 120px; margin-bottom: 25px;' id=\"data\">""</h4>\r\n";

Bit stumped (it doesn't display the text at all)
I am only just starting out with HTML etc, so a lot of this comes from good old Google

2

How about adding that single line conditionally to the head ?

You are allowed, but there are better places for html.
I tend to use the TryIt editor to work out how to do these things before i add them to a webpage on a small MCU simply for easy of experimentation.

3

Not sure what you mean by add it to the head (I know what the head is).
I will continue to tinker....

4

If you have single line of HTML that works then try printing what you are sending from your sketch to the Serial monitor to see whether it matches the single line

5

The issue is the actual script

Nothing works between:

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

Yet, further down the HTML is this script that loads the live data...

    page += "<script>\r\n";                                                                                                        
    page += "var x = setInterval(function() {loadData(\"data.txt\",updateData)}, 1000);\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";

This works fine. Not sure I see the difference

6

I'll confess to not being a javascript expert, but I've written enough of it that I'm pretty sure your syntax is wrong. Open the browser in Developer Mode (ctrl-shift-i in Chrome) and load that page. I'm positive it will show script errors.

What you want to do is certainly possible, but it would be a detailed explanation and I really don't think this is the forum for it.

HInt: you'll need to give the line of text an ID, get the element using that ID and change the color attribute. Similar to what you do here

page += " document.getElementById(\"data\")
7

Yea, this is the trouble when you learn by Google.... it might 'appear' to work fine

8

Here's a different way to format the code so it's easier (IMO) to read. This isn't a solution to your problem, just an example. It actually reads a temperature sensor and dynamically updates the screen.

It also does the variable substitution that you were asking about yesterday (puts the value of temp into the page).

char* buildPage(float temp)
{
    const char *page =
        "<head>\
            <style>\
                body{background-color:black; color:yellow;font-family:sans-serif;font-size:12}\
                .status{margin-left:30vw;padding-left:1vw;background-color:darkslateblue; color:white;width:30vw;font-size:24}\
                .control{margin-left:30vw;padding-left:1vw;background-color:darkslateblue; color:white;width:30vw;font-size:24}\
            </style>\
            <script>\
                setInterval(function()\
                {\
                    getData();\
                }, 5000); \
                function getData() {\
                  var xhttp = new XMLHttpRequest();\
                  xhttp.onreadystatechange = function() {\
                    if (this.readyState == 4 && this.status == 200) {\
                      document.getElementById('temperature').innerHTML =\
                      this.responseText;\
                    }\
                  };\
                  xhttp.open('GET', 'tempRead', true);\
                  xhttp.send();\
                }\
            </script>\
         </head>\
         <body>\
             <div id='temperature' class='status'>%5.1fF</div>\
             <div class='control'>\
                <form action='/updateSetpoint' method='GET'>\
                    <input type = 'button' id = 'increase' value= '+'>\
                    <input type = 'button' id = 'decrease' value= '-'>\
                    <input type='submit' value='Change Setpoint'/>\
                </form>\
            </div>\
         </body>";

    sprintf(pageBuffer, page, temp);
    return pageBuffer;
}

BTW: there's an arduino library that keeps HTML in Flash/SD card and allows variable substitution. I have completely forgotten what it's called, but it makes this kind of stuff much easier.

9

contain Javascript.

contain not java, A.K.A. empty condition

10

Tried it in the web developer..... didn't see any errors.

Not sure what that last post means.... I think you mean my text code isn't javascript?

11 
<script></script>

allow no HTML between.
so at the end its looks like

<script>                                                                                                             
    var col = 1
    if (col > 1) {
                 // Display the data in red
    } else {
                 // Display the data in green
    }
</script>

legit. no errors.

12

as far as i know there should be only a single script per page. You should include the other part in between those script tags

13

I did look up whether you could have more than one script and it said is was fine.
But... I can try it

14

This is the template processor I was thinking of... I think

15

You guys are solving the wrong problem!

Yes, there is an issue with the script's syntax. But even after fixing that, what he has won't work.

@baffled2023 here's an example of what you're trying to do. How to change the font color of a text using JavaScript?

16

Yea...

I think we have moved beyond my hobby brain. I just don't understand HTML etc enough to grasp this.

At the top of my HTML I have:

page += "<head><meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1\">";

That should auto-scale the page to a mobile device (I believe), and yet it doesn't.

Thanks for all the advice anyhow

17

that so depends on the browser you are using. is there a </head> ?

As a recommendation i would change all \" within ".." to a ' which is the same for html, but greatly improves readability within a sketch.

anyway without the complete page it is all a tad hard to find what you did and how it does or doesn't work. Not that i will promise to go through it all though, i still recommend w3schools TryIt editor to check on functionality before incorporating it into a page.

18

The whole page...

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

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

    page += "<img src='https://www.google.co.uk/wp-content/uploads/2017/08/Logo.png'>";                             

    page += "<h1 style='color: #FFFFFF; font-size: 120px; margin-top: 25px; margin-bottom: 5px' >Test text</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: #FF0000; font-size: 200px; margin-top: 120px; margin-bottom: 25px;' id=\"data\">""</h4>\r\n";            

    page += "<script>\r\n";       
    page += "var x = setInterval(function() {loadData(\"data.txt\",updateData)}, 1000);\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);
  });

Had to change the webpage for obvious reasons.
This all works fine. The timer updates and I can control the page from my ESP32.

I wanted to be able to change the colour of the live changing timer value (data), depending on an external influence (e.g. the time value or a flag value)

19 
if(Flag) page += "<h4 style='color: #FF0000; font-size: 200px; margin-top: 120px; margin-bottom: 25px;' id=\"data\">""</h4>\r\n";            
else page += "<h4 style='color: #00FF00; font-size: 200px; margin-top: 120px; margin-bottom: 25px;' id=\"data\">""</h4>\r\n";            
//or 
page += "<h4 style='color: #";
if(Flag) page +="FF0000";
else page +="00FF00";
page +="; font-size: 200px; margin-top: 120px; margin-bottom: 25px;' id=\"data\">""</h4>\r\n";
20

Though at a first glance both </body> & </html> as well as there being an extra </head> without <head>
These things will cause unpredictable behavior.

What @kolaha is showing is what i meant by my suggestion in #2