Transferring data from Web page(table) to ESP8622

The use of the ESP8266 in the world of IoT
 Reply

User avatar

Transferring data from Web page(table) to ESP8622

By PeterLm
- Mon Apr 08, 2019 1:55 pm #81623 Hi Group
Im looking for some guidance - perhaps some links to tutorials.
My new project has a lot of variables that can be set. Im using a display and a rotary encoderfor this, and It just works fine.
Now I want to include a mode with the ESP as a AP, and a homepage that hosts the same data in a table. I want the table to be editable, so the data can be changed via a browser, and submitted to the ESP.
How can I make this? We are talking about a 15 x 15 matrix of integers and some string values

I cannot really find any good and understandable way of doing this.

Any link to guides or tutorials is highly appreciated.

In short: How does one make a way to host a homepage with a table, and transfer altered data back to the ESP8622. (does this make sense)

Peter
User avatar

Re: Transferring data from Web page(table) to ESP8622

By RichardS
- Mon Apr 08, 2019 2:38 pm #81626 No its not all that easy.

You need to send the data to the webpage, could be websockets or the webpage could be generated with the values at runtime.

Then this webpage would need editable array entries and when they change you would either need to send them back again over websockets, or make a form of the whole page and submit all the changes at once with a button click.... this used the POST method.

Start by looking for simple one box text input examples and work from there.

RichardS
User avatar

Re: Transferring data from Web page(table) to ESP8622

By btidey
- Mon Apr 08, 2019 5:12 pm #81629 Assuming you want to persist the variables on the ESP8266 itself then one overall scheme would be

1. Use SPIFFS to hold a variable file containing the values. JSON would be a good format for the file and can be easily supported using the ArduinoJSON library

2. Write a routine to load the file contents into the variables and use this at start up time.

3) Write Web server handlers to supply the JSON file contents and also to accept new JSON contents and write the file.

4. Construct a web page to request the JSON file contents and use embedded javascript to parse it and display it. An html table of input boxes may be a method of doing this.

5) On a button press use embedded javascript to construct the updated JSON representing the current web page content and post it back to the handler which will save it to the variables file. The save routine can call the load routine so that the updated variables get loaded back into the esp8266.

More sophisticated version could allow partial updates but if this is not happening often then the complexity may not be worth it.
 Reply
Return to IoT (Internet of Things)