#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <ESPmDNS.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include "DHT.h"
// ====== Wi-Fi Credentials ======
const char *ssid = "Wokwi-GUEST";
const char *password = "";
// ====== Web Server ======
WebServer server(80);
// ====== OLED CONFIG ======
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_RESET -1
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);
// ====== DHT CONFIG ======
#define DHTPIN 4 // GPIO4 for DHT22
#define DHTTYPE DHT22
DHT dht(DHTPIN, DHTTYPE);
// ====== Sensor Variables ======
float temperature = 0;
float humidity = 0;
const char HTML_PAGE[] = R"rawliteral(
<html>
<head>
<meta http-equiv='refresh' content='4'/>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.2/css/all.css'>
<title>ESP32 DHT Server</title>
<style>
/* your CSS here */
</style>
</head>
<body>
<h2>ESP32 DHT Server</h2>
<div class='card-container'>
<div class='card'>
<i class='fas fa-thermometer-half' style='color:#ca3517;'></i>
<div class='label'>Temperature</div>
<div class='value'>%.2f <span class='units'>°C</span></div>
</div>
<div class='card'>
<i class='fas fa-tint' style='color:#00add6;'></i>
<div class='label'>Humidity</div>
<div class='value'>%.2f <span class='units'>%</span></div>
</div>
</div>
</body>
</html>
)rawliteral";
// ====== Webpage Handler ======
void handleRoot() {
char msg[1500];
snprintf(msg, sizeof(msg),
"<html>\
<head>\
<meta http-equiv='refresh' content='4'/>\
<meta name='viewport' content='width=device-width, initial-scale=1'>\
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.2/css/all.css'>\
<title>ESP32 DHT Server</title>\
<style>\
html { font-family: Arial; text-align: center;}\
h2 { font-size: 3.0rem; }\
p { font-size: 3.0rem; }\
.units { font-size: 1.2rem; }\
.dht-labels{ font-size: 1.5rem; padding-bottom: 15px;}\
</style>\
</head>\
<body>\
<h2>ESP32 DHT Server</h2>\
<p>\
<i class='fas fa-thermometer-half' style='color:#ca3517;'></i>\
<span class='dht-labels'>Temperature</span>\
<span>%.2f</span>\
<sup class='units'>°C</sup>\
</p>\
<p>\
<i class='fas fa-tint' style='color:#00add6;'></i>\
<span class='dht-labels'>Humidity</span>\
<span>%.2f</span>\
<sup class='units'>%</sup>\
</p>\
</body>\
</html>",
temperature, humidity);
server.send(200, "text/html", msg);
}
void setup() {
Serial.begin(115200);
Serial.println("DHT22 + OLED + Wi-Fi Web Server");
// ===== Initialize OLED =====
if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println("❌ SSD1306 allocation failed");
for (;;);
}
display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0, 0);
display.println("Initializing...");
display.display();
// ===== Initialize DHT =====
dht.begin();
// ===== Connect to Wi-Fi =====
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.print("Connecting to WiFi");
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println();
Serial.print("Connected! IP: ");
Serial.println(WiFi.localIP());
// ===== Start mDNS =====
if (MDNS.begin("esp32")) {
Serial.println("MDNS responder started: http://esp32.local/");
}
// ===== Start Web Server =====
server.on("/", handleRoot);
server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient();
// ===== Read Sensor =====
float newTemp = dht.readTemperature();
float newHum = dht.readHumidity();
if (!isnan(newTemp) && !isnan(newHum)) {
temperature = newTemp;
humidity = newHum;
} else {
Serial.println("❌ Failed to read from DHT sensor!");
}
// ===== Display on OLED =====
display.clearDisplay();
display.setTextSize(1);
display.setCursor(0, 0);
display.println("DHT22 Readings:");
display.setTextSize(2);
display.setCursor(0, 16);
display.print(temperature, 1);
display.println(" C");
display.setCursor(0, 40);
display.print(humidity, 1);
display.println(" %");
display.display();
delay(2000); // update every 2 sec
}