Monitoring environmental conditions like temperature and humidity is a key component of many IoT projects. In this tutorial, we’ll walk you through creating a simple yet powerful ESP32 DHT11 webserver. This project allows you to track temperature and humidity data from anywhere via a web browser, making it ideal for home automation, greenhouses, and more.
Why Choose ESP32 and DHT11?
The ESP32 is a versatile microcontroller with built-in Wi-Fi and Bluetooth capabilities, making it perfect for IoT applications. Coupled with the DHT11 sensor, which measures temperature and humidity efficiently, this duo offers an affordable and scalable solution for environmental monitoring.
Materials Needed for the Project
Before diving into the setup, gather the following components. You can purchase these through the provided links to ensure you get the best products:
- ESP32 Development Board – Affordable and powerful IoT microcontroller with built-in Wi-Fi.
- DHT11 Temperature and Humidity Sensor – Reliable sensor for measuring environmental conditions.
- Jumper Wires – Essential for connecting components securely.
- Breadboard – Simplifies circuit assembly and testing.
- USB Cable – For programming and powering the ESP32.
- A computer with Arduino IDE installed (free software).
Pro Tip: Purchasing components as a kit, like this IoT Starter Kit, can save you time and money.
Circuit Diagram: ESP32 with DHT11 Sensor
Steps to Connect the Components
- Connect the VCC pin of the DHT11 to the 3.3V pin of the ESP32.
- Connect the GND pin of the DHT11 to the GND of the ESP32.
- Attach the DATA pin of the DHT11 to GPIO4 (or any other GPIO pin) on the ESP32.
- Use a pull-up resistor (4.7k–10k ohms) between the DATA and VCC pins for stability.
Setting Up the ESP32 in Arduino IDE
For this tutorial, we’ll program the ESP32 board using the Arduino core. So, make sure you have the ESP32 add-on installed in your Arduino IDE:
- Go to Tools > Board > Boards Manager, search for ESP32, and install it.
- Install the following libraries via Sketch > Include Library > Manage Libraries:
- DHT sensor library by Adafruit.
- Adafruit Unified Sensor.
Programming the ESP32 Webserver
Sample Code for ESP32 DHT11 Webserver
#include <WiFi.h>
#include <WebServer.h>
#include <DHT.h>
// WiFi Configuration
const char* ssid = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";
// DHT11 Sensor Configuration
#define DHT_PIN 4 // GPIO pin connected to DHT11 data line
#define DHTML_TYPE DHT11 // DHT 11 sensor type
// Create DHT sensor object
DHT dht(DHT_PIN, DHTML_TYPE);
// Create web server object on port 80
WebServer server(80);
void setup() {
// Initialize serial communication
Serial.begin(115200);
// Initialize DHT sensor
dht.begin();
// Connect to WiFi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
// Print local IP address
Serial.println("WiFi Connected");
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
// Define server routes
server.on("/", handleRoot);
server.on("/temperature", handleTemperature);
server.on("/humidity", handleHumidity);
// Start server
server.begin();
}
void loop() {
// Handle client requests
server.handleClient();
delay(100);
}
// Root page handler
void handleRoot() {
// Read temperature and humidity
float temperature = dht.readTemperature();
float humidity = dht.readHumidity();
// Create HTML response
String html = "<!DOCTYPE html>"
"<html>"
"<head>"
"<title>ESP32 DHT11 Monitor</title>"
"<meta http-equiv='refresh' content='5'>"
"<style>"
"body { font-family: Arial, sans-serif; text-align: center; }"
"h1 { color: #333; }"
".reading { font-size: 2em; margin: 20px; }"
"</style>"
"</head>"
"<body>"
"<h1>ESP32 Temperature and Humidity Monitor</h1>";
// Check if reading is valid
if (isnan(temperature) || isnan(humidity)) {
html += "<p>Failed to read from DHT sensor!</p>";
} else {
html += "<div class='reading'>Temperature: " + String(temperature, 1) + " °C</div>"
"<div class='reading'>Humidity: " + String(humidity, 1) + " %</div>";
}
html += "<p>Last Updated: " + String(millis()/1000) + " seconds ago</p>"
"</body>"
"</html>";
// Send HTML response
server.send(200, "text/html", html);
}
// Temperature endpoint
void handleTemperature() {
float temperature = dht.readTemperature();
if (isnan(temperature)) {
server.send(500, "text/plain", "Error reading temperature");
} else {
server.send(200, "text/plain", String(temperature, 1));
}
}
// Humidity endpoint
void handleHumidity() {
float humidity = dht.readHumidity();
if (isnan(humidity)) {
server.send(500, "text/plain", "Error reading humidity");
} else {
server.send(200, "text/plain", String(humidity, 1));
}
}Testing Your ESP32 DHT11 Webserver
- Upload the code to your ESP32 using Arduino IDE.
- Open the Serial Monitor to find the ESP32’s IP address.
- Enter the IP address in a browser to view the temperature and humidity data.
Recommended Tools and Accessories
Make your IoT project smoother with these highly rated accessories:
- Multimeter – Test your connections and troubleshoot circuits.
- Soldering Kit – For making durable, permanent connections.
- Power Supply Module – Provides reliable power for your ESP32 and sensor.
What is the range of the DHT11 sensor?
The DHT11 can measure temperatures between 0–50°C and humidity levels from 20–90%.
Can I use DHT22 instead of DHT11?
Yes, the DHT22 offers higher accuracy and a broader range. Check out the DHT22 sensor here.
How do I make the webserver accessible over the internet?
You can configure port forwarding on your router or use an IoT platform like ThingSpeak.
Is this setup suitable for outdoor monitoring?
For outdoor use, ensure the components are housed in a weatherproof enclosure.
Conclusion
Congratulations! You’ve successfully built an ESP32 DHT11 webserver to monitor temperature and humidity. This project is a stepping stone to more advanced IoT systems. Consider enhancing it with features like data logging or integrating it with platforms like Blynk for mobile app monitoring.
Ready to get started? Order your components now:
