In today's world of IoT and smart home automation, having real-time weather data at your fingertips can be extremely useful. Whether you want to monitor your room’s temperature or build a weather station, the ESP32 microcontroller is a powerful tool to achieve this. In this blog, we’ll walk you through building a simple ESP32 Weather Monitoring that fetches real-time temperature and humidity readings using a DHT22 sensor and displays them as a web page.
Components Required
To get started, you’ll need the following components:1. ESP32 Development Board
2. DHT22 Sensor (or DHT11, but with lower accuracy)
3. Jumper Wires
4. Breadboard
5. 5V Power Source (USB or Battery)
ESP32 Development Board
The ESP32 is a powerful and versatile microcontroller with built-in Wi-Fi and Bluetooth capabilities. Here are its key specifications:- Processor : Dual-core Tensilica LX6 microprocessor
- Clock Speed : Up to 240 MHz
- RAM : 520 KB SRAM
- Flash Storage : Varies (typically 4MB to 16MB)
- Wi-Fi : 802.11 b/g/n
- Bluetooth : Bluetooth 4.2 (Classic + BLE)
- GPIO Pins : Up to 36 GPIOs
- ADC : 12-bit ADC (18 channels)
- DAC : 8-bit DAC (2 channels)
- Communication Interfaces : SPI, I2C, UART, PWM
- Operating Voltage : 3.3V
- Power Consumption : Low-power modes available for battery efficiency
Why Use an ESP32 for Weather Monitoring?
The ESP32 is a powerful microcontroller with built-in WiFi capabilities, making it perfect for IoT projects. When combined with a DHT22 sensor, it allows real-time weather monitoring with minimal components.
Setting Up the ESP32 Web Server
We’ll use the WiFi and WebServer libraries to set up a basic web server. The server will host an HTML page that fetches temperature and humidity data from the DHT22 sensor.
DHT22 Sensor
The DHT22 is a high-precision digital temperature and humidity sensor. Here are its key specifications:
- Temperature Range : -40°C to 80°C
- Temperature Accuracy : ±0.5°C
- Humidity Range : 0% to 100% RH
- Humidity Accuracy : ±2% RH
- Operating Voltage : 3.3V to 5.5V
- Sampling Rate : 0.5Hz (1 reading every 2 seconds)
- Communication Protocol : Digital single-wire communication
- Response Time : ~2 seconds
Procedure
1. Assemble the Hardware:
- Connect the DHT22 sensor’s data pin to GPIO4 of the ESP32.
- Connect the power (VCC) and ground (GND) pins to the ESP32 accordingly.
2. Prepare the Software Environment:
- Install the Arduino IDE (or PlatformIO) and set up the ESP32 board support package.
- Install the necessary libraries (WiFi, WebServer, DHT).
- Implement WiFi connection and web server handling.
- Configure the DHT22 sensor and fetch temperature/humidity data.
- Develop a simple HTML page to display sensor readings.
- Connect the ESP32 to your computer via USB.
- Upload the program using the Arduino IDE.
- Open the serial monitor to check the WiFi connection status and retrieve the ESP32’s IP address.
- Open a browser and enter the ESP32’s IP address to view the temperature and humidity readings.
- The page refreshes every 5 seconds to provide real-time updates.
Code
C++
#include <WiFi.h>
#include <WebServer.h>
#include <DHT.h>
#include <WebServer.h>
#include <DHT.h>
const char* ssid = "your_SSID";
const char* password = "your_PASSWORD";
#define DHTPIN 4
#define DHTTYPE DHT22
DHT dht(DHTPIN, DHTTYPE);
WebServer server(80);
void handleRoot() {
float temperature = dht.readTemperature();
float humidity = dht.readHumidity();
String html = "<html><head><title>ESP32 Weather Blog</title>";
html += "<meta http-equiv='refresh' content='5'>";
html += "<style>body { font-family: Arial, sans-serif; text-align: center; }";
html += "</style></head><body>";
html += "<h1>ESP32 Weather Blog</h1>";
if (isnan(temperature) || isnan(humidity)) {
html += "<p><strong>Error:</strong> Sensor reading failed!</p>";
} else {
html += "<p>🌡️ Temperature: " + String(temperature, 1) + " °C</p>";
html += "<p>💧 Humidity: " + String(humidity, 1) + " %</p>";
}
html += "</body></html>";
server.send(200, "text/html", html);
}
void setup() {
Serial.begin(115200);
dht.begin();
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.print("."); }
Serial.println("Connected!");
Serial.println(WiFi.localIP());
server.on("/", handleRoot);
server.begin();
}
void loop() {
server.handleClient();
}
const char* password = "your_PASSWORD";
#define DHTPIN 4
#define DHTTYPE DHT22
DHT dht(DHTPIN, DHTTYPE);
WebServer server(80);
void handleRoot() {
float temperature = dht.readTemperature();
float humidity = dht.readHumidity();
String html = "<html><head><title>ESP32 Weather Blog</title>";
html += "<meta http-equiv='refresh' content='5'>";
html += "<style>body { font-family: Arial, sans-serif; text-align: center; }";
html += "</style></head><body>";
html += "<h1>ESP32 Weather Blog</h1>";
if (isnan(temperature) || isnan(humidity)) {
html += "<p><strong>Error:</strong> Sensor reading failed!</p>";
} else {
html += "<p>🌡️ Temperature: " + String(temperature, 1) + " °C</p>";
html += "<p>💧 Humidity: " + String(humidity, 1) + " %</p>";
}
html += "</body></html>";
server.send(200, "text/html", html);
}
void setup() {
Serial.begin(115200);
dht.begin();
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.print("."); }
Serial.println("Connected!");
Serial.println(WiFi.localIP());
server.on("/", handleRoot);
server.begin();
}
void loop() {
server.handleClient();
}
Code Breakdown
1. Include Required Libraries
We begin by including the necessary libraries:
C++
#include <WiFi.h>
#include <WebServer.h>
#include <DHT.h>
#include <WebServer.h>
#include <DHT.h>
2. Define WiFi Credentials
Replace your_SSID and your_PASSWORD with your actual WiFi credentials.
Replace your_SSID and your_PASSWORD with your actual WiFi credentials.
C++
const char* ssid = "your_SSID";
const char* password = "your_PASSWORD";
const char* password = "your_PASSWORD";
3. Initialize the DHT Sensor
C++
#define DHTPIN 4 // GPIO4
#define DHTTYPE DHT22
DHT dht(DHTPIN, DHTTYPE);
#define DHTTYPE DHT22
DHT dht(DHTPIN, DHTTYPE);
The ESP32 will host an HTML page that displays temperature and humidity readings. The page refreshes every 5 seconds.
C++
WebServer server(80);
void handleRoot() {
float temperature = dht.readTemperature();
float humidity = dht.readHumidity();
String html = "<html><head><title>ESP32 Weather Blog</title>";
html += "<meta http-equiv='refresh' content='5'>";
html += "<style>body { font-family: Arial, sans-serif; text-align: center; }";
html += "</style></head><body>";
html += "<h1>ESP32 Weather Blog</h1>";
if (isnan(temperature) || isnan(humidity)) {
html += "<p><strong>Error:</strong> Sensor reading failed!</p>";
}
void handleRoot() {
float temperature = dht.readTemperature();
float humidity = dht.readHumidity();
String html = "<html><head><title>ESP32 Weather Blog</title>";
html += "<meta http-equiv='refresh' content='5'>";
html += "<style>body { font-family: Arial, sans-serif; text-align: center; }";
html += "</style></head><body>";
html += "<h1>ESP32 Weather Blog</h1>";
if (isnan(temperature) || isnan(humidity)) {
html += "<p><strong>Error:</strong> Sensor reading failed!</p>";
}
else
{
html += "<p>🌡️ Temperature: " + String(temperature, 1) + " °C</p>";
html += "<p>💧 Humidity: " + String(humidity, 1) + " %</p>";
}
html += "</body></html>";
server.send(200, "text/html", html);
}
html += "<p>🌡️ Temperature: " + String(temperature, 1) + " °C</p>";
html += "<p>💧 Humidity: " + String(humidity, 1) + " %</p>";
}
html += "</body></html>";
server.send(200, "text/html", html);
}
5. Connect to WiFi and Start the Server
C++
void setup() {
Serial.begin(115200);
dht.begin();
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.print("."); }
Serial.println("Connected!");
Serial.println(WiFi.localIP());
server.on("/", handleRoot);
server.begin();
}
Serial.begin(115200);
dht.begin();
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.print("."); }
Serial.println("Connected!");
Serial.println(WiFi.localIP());
server.on("/", handleRoot);
server.begin();
}
C++
void loop() {
server.handleClient();
}
server.handleClient();
}
With just a few lines of code, we’ve built a web-based weather monitoring system using the ESP32 and DHT22 sensor. This setup is ideal for DIY weather stations, smart home automation, and IoT projects. Try this project yourself and experiment with additional features like graphing temperature trends or sending alerts when readings exceed predefined thresholds! Let us know in the comments if you have any questions or improvements!