Hi to everyone,
I am newbie on the ESP32, and I would like to create a simple HTML page that I can use for different projects.
The page shall include:
- user authentication;
- real-time plots for telemetries;
- toggle switches (to send telecommand);
- some buttons (to send telecommand);
- some textbox with related submit buttons (to pass same input values to the server).
With this structure, I could easily customize the HTML page for different applications.
Currently, following your tutorials, I succesfully integrated together the highcharts (different telemetries on the same plot), the toggle switches, but I am facing a lot of problems with buttons and textbox; the tutorial that I have followed are these:
- ESP32 Async Web Server – Control Outputs with Arduino IDE (ESPAsyncWebServer library)
- ESP32/ESP8266 Plot Sensor Readings in Real Time Charts – Web Server
- Input Data on HTML Form ESP32/ESP8266 Web Server using Arduino IDE
I would like to avoid the page refreshing when I push a button, in order to not reset the real-time plots.
Here, the Arduino code:
Here, the HTML code:
Thanks in advance for any suggestion!
I recommend that you use websockets to control your outputs and to display its state. There’s no need to refresh the web page to keep things updated.
We have this free tutorial about websocket protocol and how to build a web server with it: https://randomnerdtutorials.com/esp32-websocket-server-arduino/
I hope this helps.
Then, let me know if you need further help.