Plotting Real Time Sensor Readings on Web Servers using ESP32 and Arduino IDE

Hello there!

Today I will be posting 4 articles, each about experiments with the ESP32. This one, is the first. 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, so I apologise for the poor documentation job. Alright here we go!

These are the 4 experiments I'm gonna be 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 dive into the first topic!

Alright, what will be done in this project is very similar to the weather station project I did before. Difference: the HTML form is located in the ESP's memory and the measurements (and its timestamp) will be recorded and sent periodically to a much more interesting display.

Step 1 - Hardware Requirements

Depending on what weather sensor is being used, we need to prepare the proper equipment to support it. Down below and in future posts you will find out that I switched from using a BME280 to a DHT11 and then back to the BME280. I know, it's confusing.

Step 2 - Software Requirements

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, this is what will appear:



Due to the damage on my beautifully soldered BME280 (which apparently lied on the I2C communications), we switched to using a DHT11. But because this sensor has fewer reading abilities we had to modify the HTML file to only display what our sensor could read (simply delete the part with the Pressure readings). Unfortunately the readings of the DHT11 sensor seemed also a little off. But, never mind.


3.2 The Arduino sketch (.ino)

This is the Arduino sketch we need for BME280, and for DHT11 we used this:




What it does in simple words is nothing but connecting to Wi-Fi, creating the web server and then put the HTML in it.

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


3.3 Organizing the files



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 message:




3.5 Upload sketch

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

Step 4 - Circuit

Again, the equipments and the circuit depend on what type of sensor we are using. This was the circuit I used to use before we realised my BME280 I2C communications were damaged. Check out this post of mine for a closer look.



This is the circuit we used on the DHT11:



Obviously its very unclear, so here is an old post of mine about using the DHT11 where you can find a better look on the circuit.

Step 5 - Observe and Troubleshoot!

When we first used my BME280 sensor it kept failing to find the sensor. After we tried an I2C scanning it turned out that it was not able to detect any I2C device. So we decided to hold the wirings as tight as possible to the sensors communication pins (SCL and SDA). At first it worked (if you ignore the soreness of my fingers), but then the uploading of the .html file failed! So it was one or the other error that kept happening.



That made us switch to the DHT11 and except for the weird numbers it gave us and also despite of the sometimes occurring events where it decides not send any measurements at all, we finally succeeded to plot the readings on a browser!




That's all for this one, see you on my next article!