'Active' HTML Status Page

I've successfully coded my first project that includes a webpage interface when a user is connected. My next "nice-to-have" is an active status page with codes received by the Arduino. There is a constant stream of data between the Arduino and my Serial Device (slot machine). I would like to capture this status code each time it's produced to update the webpage with an indicator that changes color depending on the code received back.

I've tried grabbing the code from the webpage, but nothing is displayed and the Arduino gets caught in an endless loop. I'm wondering if I'm expecting too much from it.

How are you doing the webpage and the communication between arduino/server?

I've had success on previous projects using NodeJS, with serial-node library, by connecting the board just with the USB.

If you are not using NodeJS for your page, you may use it to build a REST API with express, and then just use javascript's fetch() on your webpage.

electricsoldier96:
How are you doing the webpage and the communication between arduino/server?

The Arduino is the webserver as well. It generates all the HTML (no index.htm on the SD Card). The connection between the Arduino and Serial Device (slot machine) is RS232.

I've had success on previous projects using NodeJS, with serial-node library, by connecting the board just with the USB.

The Arduino will be standalone supporting the slot machine to complete tasks such as ticket printing and redemption. The only connections will be the USB for power only, the serial cable to the machine, and the Ethernet connection to the network (local only, no internet) when I want to make adjustments through a web browser. I'll have to research NodeJS to see if that'll work for me.

If you are not using NodeJS for your page, you may use it to build a REST API with express, and then just use javascript's fetch() on your webpage.

So fetch() keeps the client connection active? Sounds like I'm doing some 'Googling' on REST API really soon as well.

Sorry if I sounded confusing with fecth(), it is a JavaScript function to make the web client retrieve data from another web page.

You can ready about it here: Introduction to fetch()  |  Web  |  Google Developers

I've never done a webserver with the arduino itself, i'm afraid I can't help you with it.

If you wanna work with NodeJS feel free to ask me anything, though.

Good luck!

Maybe not quite what you asked but adding the below to the head section of your html page might be a simple solution

<meta http-equiv="refresh" content="5">

.
This will tell the browser to refresh the page after 5 seconds.

peasoup:
I’ve tried grabbing the code from the webpage, but nothing is displayed and the Arduino gets caught in an endless loop.

What do you mean by ‘grabbing the code from the webpage’?

sterretje:
What do you mean by 'grabbing the code from the webpage'?

I had a few lines to show, but it seems that I deleted it from the code since it didn't work. I was having the webpage do, client.print(SASEvent[0]). It would show the value, then stop the program. Still trying to figure that one.

So I successfully implemented ArduinoJson and was sending to the client. I removed it because I couldn’t extract the data I specifically needed. So I moved on to another method.

My understanding is that you can call a JavaScript from inside the , so I tried and get no color change to green. Am I missing something here??

FYI, StatusInt[0] == 0 and the default color (grey) for buttons is set.

            client.print(F("<body style='font-family: Calibri'>\n"
                               "<h2>Status of Machine - </h2>\n"
                               "
<hr>"
                               "<button class='button' id='btn1'>Connected</button>\n"
                               ));
                if (client.available()) {
                  getStatusCode();
                  client.print(F("<script>"));
                  if (StatusInt[0] == 0) {
                    client.print(F("<document.getElementById('btn1').style.bgcolor='green'></script>\n"));
                  }
                  delay(2);
                 }
                client.print(F("</body></html>\n"));
                client.stop();

Write a simple sketch that just tries to change a colour; first unconditionally, next with conditions). If it does not work, post it here.

Logic dictates that client.print(F("")); should be within the if (StatusInt[0] == 0) {. As it is now, you have a script tag that might never be closed. Not saying that it’s the cause of the problem.

Further, browsers have the option to show you the page source (I think it’s U for all of them); you can use it to see what is actually in the page. You can also copy that source code in the browser and paste it in an online HTML validator.

sterretje:
Write a simple sketch that just tries to change a colour; first unconditionally, next with conditions). If it does not work, post it here.

Logic dictates that client.print(F("")); should be within the if (StatusInt[0] == 0) {. As it is now, you have a script tag that might never be closed. Not saying that it’s the cause of the problem.

Further, browsers have the option to show you the page source (I think it’s U for all of them); you can use it to see what is actually in the page. You can also copy that source code in the browser and paste it in an online HTML validator.

I discovered late last night I actually had ‘<>’ around the JavaScript and wasn’t allowing the script to run. I was too tired to come back and update at that time. After removing them, the program ran perfectly.