Room Environment Monitor code For ESP32
#include <WiFi.h>
#include <WebServer.h>
#include <DHT.h>
#define DHTPIN 4 // GPIO pin for DHT sensor
#define DHTTYPE DHT11 // DHT11 sensor type
DHT dht(DHTPIN, DHTTYPE);
WebServer server(80);
const char* ssid = "RoomMonitorAP";
const char* password = "monitor123";
float temperature = 0;
float humidity = 0;
unsigned long previousMillis = 0;
const long interval = 2000; // Update every 2 seconds
void handleRoot() {
String html = R"=====(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Room Monitor</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<style>
:root {
--temp-color: #FF6B6B;
--humidity-color: #48DBFB;
--bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
--card-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
body {
font-family: 'Poppins', sans-serif;
background: var(--bg-gradient);
margin: 0;
padding: 20px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #333;
}
.dashboard {
width: 100%;
max-width: 800px;
}
.header {
text-align: center;
margin-bottom: 30px;
animation: fadeInDown 0.8s;
}
h1 {
color: #2c3e50;
margin: 0;
font-size: 2.2rem;
font-weight: 600;
}
.sensor-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
}
.sensor-card {
background: white;
border-radius: 16px;
padding: 25px;
box-shadow: var(--card-shadow);
transition: all 0.3s ease;
animation: fadeInUp 0.8s;
}
.sensor-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.card-header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 15px;
font-size: 1.8rem;
}
.temp-icon {
background: rgba(255, 107, 107, 0.15);
color: var(--temp-color);
}
.humidity-icon {
background: rgba(72, 219, 251, 0.15);
color: var(--humidity-color);
}
.card-title {
font-size: 1.2rem;
font-weight: 600;
margin: 0;
color: #2c3e50;
}
.card-value {
font-size: 3rem;
font-weight: 600;
margin: 10px 0;
display: flex;
align-items: flex-end;
}
.temp-value {
color: var(--temp-color);
}
.humidity-value {
color: var(--humidity-color);
}
.unit {
font-size: 1.5rem;
font-weight: 400;
margin-left: 5px;
opacity: 0.8;
}
.updated {
text-align: right;
font-size: 0.9rem;
color: #95a5a6;
margin-top: 10px;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.pulse {
animation: pulse 2s infinite;
}
.progress-container {
height: 8px;
background: #ecf0f1;
border-radius: 4px;
margin-top: 15px;
overflow: hidden;
}
.progress-bar {
height: 100%;
border-radius: 4px;
transition: width 1s ease;
}
.temp-progress {
background: var(--temp-color);
}
.humidity-progress {
background: var(--humidity-color);
}
</style>
</head>
<body>
<div class="dashboard">
<div class="header">
<h1>Room Environment Monitor</h1>
</div>
<div class="sensor-grid">
<div class="sensor-card">
<div class="card-header">
<div class="icon temp-icon pulse">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"></path>
</svg>
</div>
<h2 class="card-title">Temperature</h2>
</div>
<div class="card-value temp-value" id="temperature">--<span class="unit">°C</span></div>
<div class="progress-container">
<div class="progress-bar temp-progress" id="temp-progress" style="width: 0%"></div>
</div>
</div>
<div class="sensor-card">
<div class="card-header">
<div class="icon humidity-icon pulse">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"></path>
</svg>
</div>
<h2 class="card-title">Humidity</h2>
</div>
<div class="card-value humidity-value" id="humidity">--<span class="unit">%</span></div>
<div class="progress-container">
<div class="progress-bar humidity-progress" id="humidity-progress" style="width: 0%"></div>
</div>
</div>
</div>
<div class="updated" id="updated">Last updated: --</div>
</div>
<script>
function updateData() {
fetch('/data')
.then(response => response.json())
.then(data => {
if(data.temperature !== undefined && data.temperature !== null) {
document.getElementById('temperature').innerHTML =
data.temperature.toFixed(1) + '<span class="unit">°C</span>';
// Update progress bar (0-50°C range for DHT11)
const tempPercent = Math.min(100, Math.max(0, (data.temperature / 50) * 100));
document.getElementById('temp-progress').style.width = tempPercent + '%';
}
if(data.humidity !== undefined && data.humidity !== null) {
document.getElementById('humidity').innerHTML =
data.humidity.toFixed(1) + '<span class="unit">%</span>';
// Update progress bar
document.getElementById('humidity-progress').style.width = data.humidity + '%';
}
const now = new Date();
document.getElementById('updated').textContent =
'Last updated: ' + now.toLocaleTimeString();
})
.catch(error => console.error('Error:', error));
}
// Initial update
updateData();
// Update every 2 seconds
setInterval(updateData, 2000);
</script>
</body>
</html>
)=====";
server.send(200, "text/html", html);
}
void handleData() {
String json = "{\"temperature\":" + String(temperature) + ",\"humidity\":" + String(humidity) + "}";
server.send(200, "application/json", json);
}
void setup() {
Serial.begin(115200);
dht.begin();
WiFi.softAP(ssid, password);
IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(IP);
server.on("/", handleRoot);
server.on("/data", handleData);
server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient();
unsigned long currentMillis = millis();
if (currentMillis - previousMillis >= interval) {
previousMillis = currentMillis;
float newTemp = dht.readTemperature();
float newHum = dht.readHumidity();
if (!isnan(newTemp)) temperature = newTemp;
if (!isnan(newHum)) humidity = newHum;
Serial.printf("Temp: %.1f°C, Humidity: %.1f%%\n", temperature, humidity);
}
}
Comments
Post a Comment