Introduction
Monitoring environmental conditions is one of the most common IoT applications. In this tutorial, you'll read temperature and humidity from a DHT22 sensor and display it on a live web dashboard.
Components Required
- ESP32 development board
- DHT22 temperature/humidity sensor
- 10kΩ pull-up resistor
- Breadboard and jumper wires
Wiring
| DHT22 Pin | Connection |
|---|---|
| VCC (Pin 1) | 3.3V |
| Data (Pin 2) | GPIO 4 + 10kΩ pull-up to 3.3V |
| GND (Pin 4) | GND |
Install Libraries
In Arduino IDE, install via Library Manager:
- DHT sensor library by Adafruit
- Adafruit Unified Sensor
The Code
#include <WiFi.h>
#include <DHT.h>
#define DHTPIN 4
#define DHTTYPE DHT22
const char* ssid = "YOUR_SSID";
const char* password = "YOUR_PASSWORD";
DHT dht(DHTPIN, DHTTYPE);
WiFiServer server(80);
void setup() {
Serial.begin(115200);
dht.begin();
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
}
Serial.println("IP: " + WiFi.localIP().toString());
server.begin();
}
void loop() {
WiFiClient client = server.available();
if (!client) return;
client.readStringUntil('\r');
client.flush();
float temp = dht.readTemperature();
float hum = dht.readHumidity();
String html = "<!DOCTYPE html><html><head>";
html += "<meta http-equiv='refresh' content='5'>";
html += "<meta name='viewport' content='width=device-width'>";
html += "<style>body{font-family:sans-serif;text-align:center;padding:40px;background:#1a1a2e;color:#eee}";
html += ".card{background:#16213e;padding:30px;border-radius:16px;margin:15px auto;max-width:300px}";
html += ".value{font-size:48px;font-weight:bold}</style></head>";
html += "<body><h1>Environment Monitor</h1>";
html += "<div class='card'><p>Temperature</p>";
html += "<p class='value' style='color:#ff6b6b'>" + String(temp, 1) + "°C</p></div>";
html += "<div class='card'><p>Humidity</p>";
html += "<p class='value' style='color:#4ecdc4'>" + String(hum, 1) + "%</p></div>";
html += "</body></html>";
client.println("HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n");
client.println(html);
client.stop();
}Result
The page auto-refreshes every 5 seconds, showing live temperature and humidity readings in a clean dashboard interface.