Webserver, page store

Hi

I am working with an M5Stack Core to run a webserver.
It will show a page with a few buttons and then about 60 rows of data in a number of columns.

Each row contains some text decscriptors/name and some data variables in different columns.

When a button i pushed the M5 will reread the data and present it on the web page.

Any suggestions on a good technique for representing the web-page in code so that it is easy to rewrite the data onto the page?

You can use place holders and replace the placeholders by values when the page is requested. A placeholder will be something that is unique in the text; e.g. %1%, %2% etc.

When sending the page to the browser, you seach for %1% and replace it with e.g. the result of analogRead(A1), %2% by the result of analogRead(A2).

On my ESP based projects (assuming M5Stack is the same?) For simple web pages I find creating the HTML on the fly in the code is the easiest way to do it
see example here: misc/VeryBasicWebserver.ino at main · alanesq/misc · GitHub

1 Like

Yes, that's an idea.

However, since I know where each dataitem should go, I find it inefficient to search. Also, once the identifier has been overwritten, it won't work the next time.

The sensible way to handle it is a template processor that parses the HTML on-the-fly, as it is being sent to the client, to locate "placeholders" for the "live" data items, and replaces those placeholders with the latest data. The placeholders will have a unique format, like %placeholderename%, so they can be easily located.

The ESP32 AsyncWebServer has a built-in function for this, and you need only provide a trivial callback to do the data lookup. Writing a similar function for any other server is pretty straight-forward.

This seems to be what I am looking for. Thanks!