WEB SERVER ESP32 ENERGY METER

on

 #include <WiFi.h>

#include <WebServer.h>

#include <ESPmDNS.h> // Untuk akses mudah via hostname.local


// Ganti dengan kredensial WiFi Anda

const char* ssid = "NAMA_WIFI_ANDA";     // <-- GANTI INI

const char* password = "PASSWORD_WIFI_ANDA"; // <-- GANTI INI


WebServer server(80); // Web server di port 80 (HTTP default)


// Definisikan hostname untuk mDNS Anda

const char* mdnsHostname = "esp32monitor"; // Akan diakses via http://esp32monitor.local


// Variabel untuk menyimpan data sensor (simulasi)

float voltage = 0.0;

float current = 0.0;

float power = 0.0;

unsigned long lastSensorReadTime = 0;

const long sensorReadInterval = 2000; // Baca sensor setiap 2 detik (simulasi)


// Fungsi untuk membaca/mensimulasikan data sensor

void readSensors() {

  // Simulasikan pembacaan sensor yang berubah

  // Dalam aplikasi nyata, ini adalah tempat Anda membaca ADC atau sensor eksternal

  voltage = random(2200, 2400) / 10.0; // Dari 220.0V hingga 240.0V

  current = random(50, 200) / 100.0;   // Dari 0.5A hingga 2.0A

  power = voltage * current;           // Hitung daya


  Serial.print("Sensor Read: V="); Serial.print(voltage);

  Serial.print("V, I="); Serial.print(current);

  Serial.print("A, P="); Serial.print(power); Serial.println("W");

}


// Handler untuk halaman utama (root)

void handleRoot() {

  String html = R"rawliteral(

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta charset="UTF-8">

<title>ESP32 Power Monitor</title>

<style>

  html { font-family: Arial, Helvetica, sans-serif; text-align: center; }

  body { margin: 0; background-color: #f4f4f4; }

  .header { background-color: #4CAF50; color: white; padding: 15px; font-size: 24px; }

  .card-container { display: flex; flex-wrap: wrap; justify-content: center; padding: 20px; }

  .card {

    background-color: white;

    border-radius: 8px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    margin: 10px;

    padding: 20px;

    width: 280px;

    text-align: left;

  }

  .card h2 { color: #333; margin-top: 0; }

  .card p { font-size: 1.2em; color: #666; }

  .value { font-size: 2.5em; font-weight: bold; color: #007bff; margin-top: 10px; }

  .unit { font-size: 0.8em; color: #888; margin-left: 5px; }

</style>

</head>

<body>

<div class="header">

  <h1>ESP32 Power Monitor</h1>

</div>

<div class="card-container">

  <div class="card">

    <h2>Tegangan</h2>

    <p class="value"><span id="voltageVal">0.00</span><span class="unit">V</span></p>

  </div>

  <div class="card">

    <h2>Arus</h2>

    <p class="value"><span id="currentVal">0.00</span><span class="unit">A</span></p>

  </div>

  <div class="card">

    <h2>Daya</h2>

    <p class="value"><span id="powerVal">0.00</span><span class="unit">W</span></p>

  </div>

</div>


<script>

  function updateSensorData() {

    fetch('/data') // Mengambil data dari endpoint /data

      .then(response => response.json()) // Menguraikan respons sebagai JSON

      .then(data => {

        document.getElementById('voltageVal').innerText = data.voltage.toFixed(2);

        document.getElementById('currentVal').innerText = data.current.toFixed(2);

        document.getElementById('powerVal').innerText = data.power.toFixed(2);

      })

      .catch(error => console.error('Error fetching data:', error));

  }


  // Perbarui data setiap 2 detik

  setInterval(updateSensorData, 2000); 

  // Panggil pertama kali saat halaman dimuat

  updateSensorData(); 

</script>


</body>

</html>

)rawliteral";

  server.send(200, "text/html", html);

}


// Handler untuk mengirim data sensor dalam format JSON

void handleData() {

  String json = "{";

  json += "\"voltage\": " + String(voltage) + ",";

  json += "\"current\": " + String(current) + ",";

  json += "\"power\": " + String(power);

  json += "}";

  server.send(200, "application/json", json);

}


void setup() {

  Serial.begin(115200);


  Serial.print("Connecting to ");

  Serial.println(ssid);

  WiFi.begin(ssid, password);


  while (WiFi.status() != WL_CONNECTED) {

    delay(500);

    Serial.print(".");

  }


  Serial.println("");

  Serial.println("WiFi connected.");

  Serial.print("IP address: ");

  Serial.println(WiFi.localIP());


  // Inisialisasi mDNS

  if (!MDNS.begin(mdnsHostname)) {

    Serial.println("Error setting up MDNS responder!");

  } else {

    Serial.print("mDNS responder started with hostname: ");

    Serial.print(mdnsHostname);

    Serial.println(".local");

    MDNS.addService("http", "tcp", 80); // Tambahkan service HTTP

  }


  // Atur handler

  server.on("/", handleRoot); // Halaman utama HTML

  server.on("/data", handleData); // Endpoint API untuk data JSON


  server.begin();

  Serial.println("Web Server started");


  // Baca sensor pertama kali saat setup

  readSensors();

}


void loop() {

  server.handleClient(); // Tangani permintaan klien


  // Perbarui data sensor secara periodik

  if (millis() - lastSensorReadTime >= sensorReadInterval) {

    readSensors();

    lastSensorReadTime = millis();

  }

}

Comments

Post a Comment