I have a MKR 1010 that monitors 4 different sensor variables (temperature, pressure, weight, speed) with each variable being read at a different rate. The MKR 1010 also runs the WiFiNINA web server/library.
As a test, I loaded this example: https://docs.arduino.cc/tutorials/mkr-wifi-1010/hosting-a-webserver
And tried to extend it to print 4 variables but they would never show up on the client side. More over, the one value that was displayed was static.
I want to create a simple webpage such that when a client connection is made to the webserver, it will display the values of the 4 variables. While I am somewhat familiar with HTML I can’t figure out how to populate a webpage with the data.
Am looking for some pointers on how to do this.
I am guessing one way to do this is by using Server Side Includes – I basically know the concept but no clue about how to do this on the MKR1010.
Are there other ways to do this instead of SSI? Pointers to examples?
I am sure there are ‘standard’ ways to do this but I have no clue what the mechanisms are called or how they work. Any guidance is really appreciated. –
Thanks! J
the basic way the web works is that your browser sends a request, your arduino receives the request and generates a web page as an answer. At that point the communication is stopped.
if you want to see an updated value (page), then the browser needs to request the data again. ➜ it's browser initiated, the server does not have any way to reach out to the browser (unless you start using advanced stuff).
One easy way to get the browser to refresh the data is to embed in the response a javascript timer that will submit a new page request x seconds after receiving the page. this way the page keeps being refreshed. (google "javascript auto refresh page" and you'll see tons of examples and tutorials)
(you can use AJAX, web sockets etc but it's more advanced)
The way I have done this before is have a few very small web pages stored as sprintf() functions that are called when the request for that page is received. and these specific pages fill i-frames inside a normal web page. Since the interface (i.e. NAV menu etc.) is on the normal web page, the small i-frames can auto-refresh themselves, so they immitate real time down to a resolution of 1 second.