Wokwi - Online ESP32, STM32, Arduino Simulator

#include <WiFi.h>
#include <OneWire.h>
#include <DallasTemperature.h>
#include <WebServer.h>

// Pins
#define ONE_WIRE_BUS 4

// Netzwerk-Name (SSID) und Passwort
const char* ssid = "ESP32_TempNet";
const char* password = "123456789";

// OneWire und DS18B20 Initialisierung
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);

// Webserver auf Port 80
WebServer server(80);

// Variablen für die Temperaturmessung
float temperatureC = 0.0;
unsigned long previousMillis = 0;
const long interval = 10000;  // 10 Sekunden
String tableData = "";
String labelsData = "";
String dataPoints = "";

void setup() {
  // Serieller Monitor
  Serial.begin(115200);

  // Sensoren starten
  sensors.begin();

  // WiFi Access Point starten
  WiFi.softAP(ssid, password);
  Serial.println("Access Point gestartet.");
  Serial.print("IP-Adresse: ");
  Serial.println(WiFi.softAPIP());

  // Root-Seite
  server.on("/", handleRoot);

  // Server starten
  server.begin();
}

void loop() {
  server.handleClient();  // Bearbeite eingehende HTTP-Anfragen

  unsigned long currentMillis = millis();
  if (currentMillis - previousMillis >= interval) {
    previousMillis = currentMillis;
    sensors.requestTemperatures();
    temperatureC = sensors.getTempCByIndex(0);

    // Daten für Tabelle und Diagramm hinzufügen
    String time = String((previousMillis / 1000) / 60) + ":" + String((previousMillis / 1000) % 60);
    tableData += "<tr><td>" + time + "</td><td>" + String(temperatureC, 2) + "</td></tr>";
    labelsData += "\"" + time + "\",";
    dataPoints += String(temperatureC) + ",";
  }
}

void handleRoot() {
  String html = "<html><head><title>Temperaturmessung</title>"
                "<meta http-equiv='refresh' content='5'>"
                "<script src='https://cdn.jsdelivr.net/npm/chart.js'></script>"
                "<style>body { font-family: Arial; text-align: center; } "
                "table { margin: auto; } "
                "td, th { padding: 8px 12px; border: 1px solid #ddd; }</style></head>"
                "<body><h2>Aktuelle Temperatur: " + String(temperatureC, 2) + " °C</h2>"
                "<h3>Messungen</h3><table><tr><th>Zeit</th><th>Temperatur (°C)</th></tr>" + tableData + 
                "</table><h3>Temperaturverlauf</h3><canvas id='tempChart'></canvas>"
                "<script>"
                "var ctx = document.getElementById('tempChart').getContext('2d');"
                "var chart = new Chart(ctx, {type: 'line', data: {labels: [" + labelsData + "], "
                "datasets: [{label: 'Temperatur (°C)', backgroundColor: 'rgb(255, 99, 132)', "
                "borderColor: 'rgb(255, 99, 132)', data: [" + dataPoints + "]}]}});"
                "</script></body></html>";
  server.send(200, "text/html", html);
}