#11 — ESP32 Input Data on HTML Form
Let’s utilize HTML in a different way.
The only buttons that we’ve used in HTML are the buttons that control LEDs. It’s kinda lame now that we’ve learned all these cool stuff. One thing buttons can be useful for is for confirming inputs. And that’s exactly what we’re going to do now. Bear with me now, because we’re gonna start simple.
I will do two types of sub-projects here. Firstly, we’re going to create an asynchronous web server using the ESPAsyncWebServer library. The webpage will display 3 input fields in which we can pass values. The values will update the values stored in the respective variables in the code. Secondly, still the same web server and 3 input fields, but now we’re going to add SPIFFS (yay spiffs!) as a means to store the values permanently. With both methods, we can avoid hardcoding the variables on the code (hooray reusability!).
We’re going to skip the ingredients part because all we need to do this project is an ESP32 board, a cable, and a laptop only :) If you haven’t installed the ESPAsyncWebServer and the AsyncTCP libraries you should do it beforehand. And then, you’re ready to go!
1. Handle Input Fields on Web Page with HTML Form
This is a straightforward sub-project so I’m going to copy the code from the randomnerdtutorials.com website and upload it to the ESP32.
We create the form using the <form> tag. In each form, the action attribute specifies where to send the data inserted on the form after pressing submit. In this case, it makes an HTTP GET request to /get?input<num of input>=value. The value refers to the text we enter in the input field. Then, we define two input fields: one text field and one submit button. The type indicates that the respective field and buttons are of text and submit type.
The next part of the code handles the HTTP GET requests. It sends the index HTML page to the client and created two variables: inputMessage and inputParam to save the input value and the input field. The code checks whether the HTTP GET request contains the input1, input2, or input3 parameters. These are saved on the PARAM_INPUT_1, PARAM_INPUT_2 and PARAM_INPUT_3 variables.
Upload the code to the ESP32 and see it in action.
2. Save Input Fields to SPIFFS
This time, the code saves the data inserted on the input fields permanently on SPIFFS. There’s also added placeholders on the web page to show the current values.
This time the inputs are specified to string, integer, and float data types. The readFile() and writeFile() functions read the content from a file and write the content to a file in the SPIFFS, while the processor() is tasked to search for placeholders in the HTML text and replacing them with actual values saved on SPIFFS. Lastly, in the loop(), the code prints those variables in the Serial Monitor.
Upload the code and we’re done!
