Receiving Data on ESP32 from a HTML form of its Web Server using Arduino IDE

Hello there!

As you probably already read two times before now (or not): Today I am posting 4 articles, each about experiments with the ESP32. This one, is the third. All of these experiments (as well as the 2 previous ones I did: this and this one) were held during this awful pandemic. To complete them me and my 2 friends went to several GoogleMeets. Sometimes, my equipment failed sometimes theirs did, and sometimes something else did so I apologise for the poor documentation job. Alright here we go!

These are the 4 experiments I'm writing about:
1. Plotting Real Time Sensor Readings on a web server from an ESP32
2. Publishing Sensor Readings from an ESP32 to Google Sheets
3. Receiving data on an ESP32 from an HTML form on a web server
4. Inserting and Displaying recorded sensor readings from an ESP to a MySQL database
All of them are based on https://randomnerdtutorials.com.

Let's jump right into this third project!

The basic idea of this project is to create an HTML form that will let us insert anything our keyboard can type and comes with a submission button. Pressing it will result in sending what we have typed right into the Serial Monitor of our Arduino IDE.

Step 1 - Hardware Requirements

All you need is your ESP32 and your computer. Thank god!

Step 2 - Software Requirements

Same as the first article today, this is what has to be on your computer:

As always the 3 essentials we need on our computer is:

1. The Arduino IDE itself
2. Installing a correct board on it
3. The correct data transfer port configured

You can find a detailed procedure on setting all that up in this post on Step 2.

Once we have that figured out, next we need:
1. ESPAsyncWebServer library which you can find here
2. AsyncTCP library which you can find here
3. A filesystem Uploader Plugin which you can find there

Step 3 - Code and Compile

3.1 The HTML file (.html)

Basically we will use this file to adjust what we want to see on our browser and how we want it to look like.

If you wanna try saving this code and drag it to your browser to get an understanding about what it does, something like this is what will appear:



We did some modifications on our HTML file to make it look a little different and provide only one submit button, more about this in the .ino sketch!






3.2 The Arduino sketch (.ino)

We did notice that every time we press a submit button we received an individual input. If you take a look at our modified HTML file you will see that we provide only one submit button. Its job is to make sure all of the inputs (username, email, and password) will be sent at once.

Alright, moving on to the sketch file. The original .ino file from randomnerdstutorial is completely fine for .html file that has 3 submit buttons.

We had to adjust our sketch our modified .html file. At last, it looked like this:

Note: Always make sure to set up the Wi-Fi SSID and password you are gonna use.


3.3 Organizing the files *same procedure in first article*



First, create the new Arduino sketch, (on this chart it is named ESP_Chart_Web_Server), then go to Sketch > Open Sketch Folder and organise your files like so:




3.4 Upload .html

Next we want our .html file to be uploaded into the ESP32's memory. To do so, we go to Tools > ESP32 Sketch Data Upload.

 

Once it landed in the ESP32 memory succesfully, the IDE will tell you this "kind" of message:




3.5 Upload sketch

Lastly, we plug our ESP32 to our computer and compile and upload our .ino file to our ESP32. 

Step 4 - Observe!

Here is the IP address that the ESP32 has generated:

 

This is what we'll see on the browser by accessing that IP:



This is what will be showed each time a submit was done:



And here the Serial Monitor proudly presents what we submitted!




That's it and see you soon!