#9— The ESP32 Real Time Chart
Back again with WiFi and web server… on a whole new level.
Back from a long absence full of assignments! Whoo.
So far, we’ve dabbled with ESP32’s WiFi module to create a functional web server with which we can control LEDs and display web readings. But what if we can create a chart, with which we can track the sensor readings real-time?
This project references the one from randomnerdtutorials.com’s website with changes. TL;DR: we’ll create an asynchronous web server using the ESPAsyncWebServer library in which we display a web page stored in the SPIFFS. The web page itself contains two charts: temperature and pressure readings from the BMP180 sensor which will be updated with new data points every 30 seconds.
Asynchronous Web Server
You read it right: asynchronous web server. So what is this weird thing?
As you’d guess, there are two kinds of web server. The legacy web applications are usually served in a synchronous way, meaning you do something in a website (click a picture, click a button, etc) and the website makes you wait for the server’s response before you can interact with it again. What this suggests is that the user is given a snapshot of a given point in time of what supposed to be a dynamic system working in the backstage.
Asynchronous makes it possible to deliver spontaneous changes as the system changes without needing the user to interact with the interface. This notion applies to the web server we’re about to build because the chart on the web page will be updated without the need for user to interact with any interface.
SPIFFS
SPIFFS? Spiffs? (Sorry, can’t help it lol)
Two web servers which we’ve built in the previous projects code the HTML for the website directly on the sketch (.ino) file. It would be okay to do it in simple situation but as our code becomes more complex, it will make it very hard to read and debug, and of course, unreusable.
SPIFFS is the solution to this. It stands for Serial Peripheral Interface Flash File System, a light-weight file system for microcontrollers with an SPI flash chip. SPIFFS functions the same as any file system would (but much simpler of course). It can read and write files, create folders, so on. In this case, we can use SPIFFS to store our HTML code so that it doesn’t clutter the sketch file (hooray readability 😁).
OK, enough the theory. Let’s jump into the project.
1. The ingredients and the wiring
(I’ve been using this pic for like 3 times already(?) There really is no difference in terms of the things we need — which, obviously, is good for the pockets 😉)
Self-explanatory. We’ll need an ESP32 board, a breadboard, jumper wires, a BMP180 sensor, a MicroUSB to USB cable, and a laptop.
You can follow the wiring on this post.
2. Libraries, libraries
A few additional libraries that we need are:
- The FileSystem Uploader Plugin for Arduino IDE. This one is needed to upload the HTML file to the ESP32's SPIFFS. Following the tutorial in the link will correctly install the library.
- The ESPAsyncWebServer and the AsyncTCP libraries. This is needed to build the asynchronous web server. It is installed by simply putting them in the libraries folder inside the Arduino installation folder.
3. File organization
For the program to run smoothly, we need to properly organize the files. The sketch file (.ino) must be inside the folder of the same name and the HTML file in the data folder located inside the said folder.
4. Index.html
My partner, Kevin Cahyadi Giri, modified the index.html file on the randomnerdtutorials.com website because the BMP180 cannot sense humidity. We end up having 2 charts: one for temperature and one for pressure. The code is as below.
5. The sketch code
Now onto the main program. The code is also modified from the randomnerdtutorials.com to suit the BMP180 sensor.
In the code, we create an AsyncWebServer on port 80. We also create 2 functions which are readBMP180Temperature() and readBMP180Pressure() . The lower parts of the program handles what happens when the ESP receives a request. When it receives a request on the root URL, we send the HTML that is saved in the SPIFFS. When we receive a request on the /temperature or /pressure URLs, call the functions that return the sensor readings. Change the ssid and password variables according to your WiFi credentials.
6. The last steps
Before uploading the code to the ESP32, we need to upload the HTML file to the ESP32 SPIFFS. Heading to Tools > ESP32/ESP8266 Data Sketch Upload will do just the thing we need. Wait for the files to be uploaded. Then upload the code to the ESP32 and open the serial monitor at baud rate 115200. You should see the webpage IP address after pressing the ESP32's enable button.
Copy and paste the IP address. The chart will look empty at first but soon enough, points will be added according to the sensor readings. When we hover over the points, it will show us the timestamp of the reading.
See it in video!
7. Afterword
As per usual, my partner Kevin Cahyadi Giri and I divided the tasks between both of us. Kevin works on the coding of both the HTML and the sketch while I installed the needed libraries, wired the circuit, and uploaded the code. I do miss working together face to face with him — perhaps later when the situation allows. For now, calling each other is the best we can do. Lastly, there is no significant problem that we face here — just a tiny little thing that we haven’t been able to fix. The timestamp shown seems to be wrong — Kevin deduces that it was shown in UTC, but as he tried to fix it into displaying GMT+7, it doesn’t improve. So we left it as it is.
Until next time. We’re gonna blow your mind with storing sensor readings in google spreadsheet ;))
