Cara Membuat Web Server Monitoring Suhu ESP32 — Simulasi Online
Template ini mengubah ESP32 menjadi stasiun pemantau suhu yang halamannya bisa dibuka dari browser. Halaman web virtual menampilkan suhu dan kelembapan yang diperbarui otomatis, dan LED di GPIO2 menyala saat suhu dianggap panas.
Komponen yang dipakai
- ESP32
- Breadboard (setengah)
- LED
- Resistor
Cara kerja
- ESP32 terhubung ke WiFi virtual dan menjalankan WebServer di port 80.
- Nilai suhu dan kelembapan disimulasikan di dalam kode: berubah naik-turun perlahan seperti ruangan sungguhan.
- Halaman web yang disajikan ter-refresh otomatis, sehingga angka yang tampil selalu yang terbaru.
- LED di GPIO2 menyala sebagai indikator saat suhu melewati ambang panas.
Konsep yang dipelajari
Kode program
#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#define WIFI_SSID "NOVIOT"
#define WIFI_PASSWORD "12345678"
WebServer server(80);
const int LED_PANAS = 2;
// Nilai sensor disimulasikan di dalam kode: naik-turun perlahan
// seperti suhu ruangan sungguhan sepanjang hari.
int suhu = 29;
int kelembapan = 62;
int arahSuhu = 1;
void perbaruiSensor() {
suhu += arahSuhu;
if (suhu >= 33) arahSuhu = -1;
if (suhu <= 27) arahSuhu = 1;
kelembapan += (arahSuhu > 0 ? -1 : 1);
if (kelembapan > 70) kelembapan = 70;
if (kelembapan < 55) kelembapan = 55;
}
void kirimHalaman() {
String halaman = R"(
<!DOCTYPE html><html>
<head>
<title>Monitoring Suhu ESP32</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="2">
<style>
body { font-family: sans-serif; text-align: center; background: #f4f6f8; }
.kartu { background: #fff; border-radius: 12px; padding: 1em 2em;
display: inline-block; margin-top: 2em; }
.angka { font-size: 3em; margin: 0.1em; }
</style>
</head>
<body>
<div class="kartu">
<h1>Monitoring Ruangan</h1>
<p>Suhu</p>
<p class="angka">SUHU_TEXT °C</p>
<p>Kelembapan: LEMBAP_TEXT %</p>
<p>Status: STATUS_TEXT</p>
</div>
</body>
</html>
)";
halaman.replace("SUHU_TEXT", String(suhu));
halaman.replace("LEMBAP_TEXT", String(kelembapan));
halaman.replace("STATUS_TEXT", suhu >= 31 ? "PANAS" : "Normal");
server.send(200, "text/html", halaman);
}
void setup() {
Serial.begin(115200);
pinMode(LED_PANAS, OUTPUT);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
Serial.print("Menghubungkan ke WiFi");
while (WiFi.status() != WL_CONNECTED) {
delay(100);
Serial.print(".");
}
Serial.println(" Terhubung!");
Serial.print("Buka panel Web Server, IP: ");
Serial.println(WiFi.localIP());
server.on("/", kirimHalaman);
server.begin();
Serial.println("Web server monitoring berjalan");
}
void loop() {
server.handleClient();
// Sensor "dibaca" ulang setiap 2 detik; LED menyala bila panas.
static unsigned long terakhir = 0;
if (millis() - terakhir >= 2000) {
terakhir = millis();
perbaruiSensor();
digitalWrite(LED_PANAS, suhu >= 31 ? HIGH : LOW);
Serial.print("Suhu: ");
Serial.print(suhu);
Serial.print(" C, Kelembapan: ");
Serial.print(kelembapan);
Serial.println(" %");
}
delay(2);
}