Wokwi - Online ESP32, STM32, Arduino Simulator

#include <DHT.h>
#include <ESP8266HTTPClient.h>

const char* ssid = "Test01"; // ไม่มีความหมายใน Wokwi แต่ต้องมี
const char* password = "zccbnm89"; // ไม่มีความหมายใน Wokwi แต่ต้องมี

#define DHTPIN D1 // ใช้ GPIO14 แทน D5 บน ESP-01
#define DHTTYPE DHT22
DHT dht(DHTPIN, DHTTYPE);

ESP8266WebServer server(80);

// const char* host = "192.168.69.54";
// const int port = 8000;

unsigned long lastSent = 0;
const unsigned long sendInterval = 5000; // ลดเวลาส่งเพื่อดูผลลัพธ์เร็วขึ้นใน Simulation

void setup() {
  Serial.begin(9600);
  dht.begin();
  WiFi.begin(ssid, password); // เริ่ม Wi-Fi (จำลอง)
  Serial.println("Connecting to WiFi (simulated)...");
  Serial.println("WiFi connected (simulated)");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP()); // จะแสดง IP address ภายใน Wokwi

  server.on("/", handleRoot);
  server.begin();
  Serial.println("HTTP server started");
}

void loop() {
  server.handleClient();

  if (millis() - lastSent > sendInterval) {
    float t = dht.readTemperature();
    float h = dht.readHumidity();
    if (isnan(t) || isnan(h)) {
      Serial.println("Failed to read from DHT sensor!");
      return;
    }
    Serial.print("Temperature: ");
    Serial.print(t);
    Serial.print(" °C, Humidity: ");
    Serial.print(h);
    Serial.println(" %");

    // // ส่วนของการส่งข้อมูลไปยัง Server (Comment Out สำหรับ Wokwi)
    // WiFiClient client;
    // if (client.connect(host, port)) {
    //   String payload = String(t) + "," + String(h);
    //   client.println(payload);
    //   client.stop();
    //   Serial.println("Data sent to server.");
    // } else {
    //   Serial.println("Failed to connect to server.");
    // }
    lastSent = millis();
  }
}

void handleRoot() {
  float t = dht.readTemperature();
  float h = dht.readHumidity();
  if (isnan(t) || isnan(h)) {
    server.send(500, "text/plain", "Failed to read from DHT sensor!");
    return;
  }

  String html = "<!DOCTYPE html><html><head><meta http-equiv='refresh' content='5'><title>DHT11 Dashboard</title>";
  html += "<script src='https://cdn.jsdelivr.net/npm/chart.js'></script></head><body>";
  html += "<h2>DHT11 Dashboard</h2>";
  html += "<p>Temperature: " + String(t) + " °C</p>";
  html += "<p>Humidity: " + String(h) + " %</p>";
  html += "<canvas id='myChart' width='400' height='200'></canvas>";
  html += "<script>const ctx = document.getElementById('myChart').getContext('2d');";
  html += "const myChart = new Chart(ctx, {type: 'bar', data: {labels: ['Temp','Humidity'], datasets: [{label: 'DHT11 Data', data: [";
  html += String(t) + "," + String(h);
  html += "],backgroundColor: ['rgba(255,99,132,0.5)','rgba(54,162,235,0.5)']}]} });</script>";
  html += "</body></html>";

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