Visualizing ESP32 + DHT11 Data
I’m back with my new project. In this project, I would like to display data visualization of measurement that ESP32 does. The ESP32 equipped with temperature and humidity sensors that I have, DHT11. I got a reference from this link but the source using BME280 for the sensor. It was quite different from what I want to do because I just have DHT11. But it’s okay, everything will be okay because the link explains well about what inside the code so I can do modification by myself.
The equipment that you need is:
1. ESP32
2. Jumping wires
3. Breadboard (this is optional because without using this you still can do the project in a good way)
4. USB Type-A Cable
5. Laptop with Arduino IDE
And this is the circuit for the ESP32 and DHT11:
DHT11:
+ port to 3V3
out to GPIO port
- to ground
The library that you need to install to your IDE:
1. ESP Board (of course! you can look at this link for installation)
2. Filesystem uploader plugin (click this link for installation)
3. AsyncWebServer (click here to download and after you download it, unzip and rename the ESPAsyncWebServer-master file to ESPAsyncWebServer, and move the folder to your Arduino IDE installation libraries folder)
4. AsyncTCP (click here to download and after you download it, unzip and rename the AsyncTCP-master file to AsyncTCP and follow the next step as what I do in number 3)
5. DHT11 and AdaFruit library (you can check on your Arduino IDE and install it from the IDE by clicking Ctrl+Shift+I)
After that, you can follow the next instruction according to this link. I just make a little modification because I’m using the DHT11 sensor. But if you using BME280 you can directly go to the link and do all the instruction. But if you using DHT11 like me, okay be patient with me hehe.
The next step is you need to organize the HTML file (you can see on the source link), creating an HTML file, and last the Arduino Sketch! The code is quite different because I use the different sensor and here’s my code:
/*********
Rui Santos
Complete project details at https://RandomNerdTutorials.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
*********/
// Import required libraries
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>
#include <Adafruit_Sensor.h>
#include <DHT.h>
// Replace with your network credentials
const char* ssid = "";
const char* password = "";
#define DHTPIN 4
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
String readDHTTemperature() {
// Read temperature as Celsius (the default)
float t = dht.readTemperature();
// Convert temperature to Fahrenheit
//t = 1.8 * t + 32;
if (isnan(t)) {
Serial.println("Failed to read from DHT11 sensor!");
return "--";
}
else {
Serial.println(t);
return String(t);
}
}
String readDHTHumidity() {
float h = dht.readHumidity();
if (isnan(h)) {
Serial.println("Failed to read from DHT11 sensor!");
return "--";
}
else {
Serial.println(h);
return String(h);
}
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
dht.begin();
// default settings
// (you can also pass in a Wire library object like &Wire2)
// Initialize SPIFFS
if(!SPIFFS.begin(true)){
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP32 Local IP Address
Serial.println(WiFi.localIP());
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/index.html");
});
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readDHTTemperature().c_str());
});
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readDHTHumidity().c_str());
});
// Start server
server.begin();
}
Don’t forget to replace the network credentials!
After copying the code to the IDE, upload the data (I mean HTML that we made before) to the IDE. You can click tools --> ESP32 sketch data upload. At my first try, I forgot to do this step so after I open the IP address that serial monitor gives, I didn’t see anything at my browser. The error message is: “HTTP Error”. If you found the same problem with me, it probably wrong with the data upload.
After you upload the data, you can compile and open the serial monitor to get the IP address then copy the IP address to your browser and you can see the miracle (?) in a second if there’s no problem with anything.
And this is my miracle (ok it sounds weird)
Note: in the HTML file, the sensor does the measurement every 30 seconds. But if you don’t want to wait too long, you can change this code:
1000 means 1000 milliseconds or 1 second and you can change the number freely. Don’t forget to apply for every sensor (temperature and humidity). Because I use the HTML for BME280, the title that you’ll see when you open the IP address is “BME280 Temperature”. You can change by yourself in the HTML code.
Okay, this is my project for last week and hope you can do perfectly as I do (but I found obstacles hehe). Note from me, you need to make sure the instruction is completely implemented to your project. So you need to be careful!
See you on my next project, in shaa Allah.
