ESP32 WebTable-Beispiel – Tutorial zur Datentabellen-Schnittstelle
Überblick
Das WebTable-Beispiel bietet eine webbasierte Datentabellen-Schnittstelle mit zwei Spalten zur Anzeige von Echtzeitdaten aus Ihren ESP32-Projekten. Für die ESP32-Bildungsplattform entwickelt mit fortschrittlichen Visualisierungsmöglichkeiten von Daten, intelligenter Hervorhebung von Wertänderungen und nahtloser Integration in das Bildungsökosystem.
Schlüsselmerkmale
Kernfunktionalität
- Zweispaltige Datentabelle: Saubere Attribut-Wert-Paare für eine übersichtliche Datenanzeige
- Echtzeit-Wertaktualisierungen: WebSocket-basierte sofortige Datenaktualisierung ohne Neuladen der Seite
- Speichereffizientes Design: Keine Wertspeicherung im ESP32-Speicher – alles Tracking erfolgt in der Weboberfläche
- Dynamische Konfiguration: Die Tabellenstruktur einmal in der ESP32-setup()-Funktion festlegen
- Interaktive Steuerelemente: Aktualisierungsschaltfläche für manuelle Datenanfragen und automatische Wiederverbindungsfähigkeit
Intelligentes Hervorhebungssystem
- Intelligente Änderungserkennung: Erkennt automatisch, welche Werte sich im Laufe der Zeit tatsächlich ändern
- Automatische Werteverfolgung: Vergleicht automatisch aktuelle und vorherige Werte
- Zweistufige Hervorhebung:
- Rote Hervorhebung: Für Werte, die sich aktiv ändern
- Blaue Hervorhebung: Für Werte, die im Laufe der Zeit stabil bleiben
- Keine Einrichtung erforderlich: Das System lernt automatisch, welche Werte sich ändern, ohne jegliche Konfiguration
- Visuelles Feedback: Sanfte Animationen liefern klares visuelles Feedback für Werteaktualisierungen
Moderne Weboberfläche
- Responsives Design: Funktioniert nahtlos auf Desktop-, Tablet- und Mobilgeräten
- Professionelles Styling: Kartenlayout mit Hover-Effekten und moderner Ästhetik
- Verbindungsstatus: Visuelle Indikatoren für den WebSocket-Verbindungsstatus
- Footer-Integration: Konsistente Stilgebung, die mit anderen DIYables-Web-Apps übereinstimmt
- Umgang mit leeren Zuständen: Benutzerfreundliche Meldungen, wenn keine Daten verfügbar sind
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables ESP32 Starter-Kit (ESP32 enthalten) | |
| 1 | × | DIYables Sensor-Kit (30 Sensoren/Displays) | |
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.
Anweisungen zur Einrichtung
Schnelle Schritte
Folgen Sie diesen Anweisungen Schritt für Schritt:
- Wenn Sie den ESP32 zum ersten Mal verwenden, lesen Sie das Tutorial zur Einrichtung der Entwicklungsumgebung für den ESP32 in der Arduino IDE.
- Verbinden Sie das ESP32-Board mit Ihrem Computer über ein USB-Kabel.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das passende ESP32-Board (z. B. ESP32 Dev Module) und den COM-Port aus.
- Gehen Sie zum Bibliotheken-Symbol in der linken Leiste der Arduino IDE.
- Suchen Sie "DIYables ESP32 WebApps", und finden Sie anschließend die DIYables ESP32 WebApps-Bibliothek von DIYables.
- Klicken Sie auf die Install-Schaltfläche, um die Bibliothek zu installieren.
- Sie werden aufgefordert, weitere Bibliotheksabhängigkeiten zu installieren.
- Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.
- Im Arduino IDE gehen Sie zu Datei Beispiele DIYables ESP32 WebApps WebTable Beispiel, oder kopieren Sie den Code und fügen Sie ihn in den Editor der Arduino IDE ein
/*
* DIYables ESP32 WebApps Library - WebTable Example
*
* This example demonstrates how to create a web-based table interface
* that displays real-time data in a two-column format (attribute-value pairs).
*
* Features:
* - Two-column table with attributes and real-time values
* - WebSocket-based real-time updates
* - Configurable table rows in setup()
* - Dynamic value updates during runtime
* - Modern responsive web interface
*
* Hardware: ESP32 Boards
*
* Instructions:
* 1. Update WiFi credentials below
* 2. Upload the code to your Arduino
* 3. Open Serial Monitor to get the IP address
* 4. Open web browser and go to:
* - Home page: http://[ARDUINO_IP]/
* - WebTable: http://[ARDUINO_IP]/web-table
* 5. Watch real-time data updates in the table
*
* Created by DIYables
* Visit: https://diyables.com for more tutorials and projects
*/
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
// WiFi credentials - Update these with your network details
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Initialize web server and pages
ESP32ServerFactory serverFactory;
DIYablesWebAppServer server(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebTablePage tablePage;
// Variables to simulate sensor data
float temperature = 20.5;
float humidity = 65.0;
int lightLevel = 512;
unsigned long uptime = 0;
bool ledState = false;
int counter = 0;
void setup() {
Serial.begin(9600);
Serial.println("DIYables ESP32 WebApp - Web Table Example");
// Initialize built-in LED
pinMode(LED_BUILTIN, OUTPUT);
// Add web apps
server.addApp(&homePage);
server.addApp(&tablePage);
// Optional: Add 404 page for better user experience
server.setNotFoundPage(DIYablesNotFoundPage());
// Start the WebApp server
server.begin(WIFI_SSID, WIFI_PASSWORD);
// Set up callback for data requests
tablePage.onTableValueRequest(onDataRequested);
// Configure table structure in setup - attributes are set once
setupTableStructure();
Serial.println("WebTable Server started!");
}
void loop() {
server.loop();
// Update sensor values every 2 seconds
static unsigned long lastUpdate = 0;
if (millis() - lastUpdate > 2000) {
updateSensorValues();
sendRealTimeUpdates();
lastUpdate = millis();
}
// Toggle LED every 5 seconds
static unsigned long lastLedToggle = 0;
if (millis() - lastLedToggle > 5000) {
ledState = !ledState;
digitalWrite(LED_BUILTIN, ledState);
// Send LED status update to web interface
tablePage.sendValueUpdate("LED Status", ledState ? "ON" : "OFF");
lastLedToggle = millis();
}
delay(10);
}
// Setup table structure - called once in setup()
void setupTableStructure() {
Serial.println("Setting up table structure...");
// Add table rows with attributes only (no values stored)
tablePage.addRow("Device Name");
tablePage.addRow("Temperature");
tablePage.addRow("Humidity");
tablePage.addRow("Light Level");
tablePage.addRow("Uptime");
tablePage.addRow("LED Status");
tablePage.addRow("Counter");
tablePage.addRow("WiFi SSID");
tablePage.addRow("IP Address");
tablePage.addRow("Free Memory");
Serial.println("Table structure configured with " + String(tablePage.getRowCount()) + " rows");
}
// Simulate sensor readings and send values to web interface
void updateSensorValues() {
// Simulate temperature sensor (20-30°C range)
temperature = 20.0 + (sin(millis() / 10000.0) * 5.0) + random(-10, 10) / 10.0;
// Simulate humidity sensor (40-80% range)
humidity = 60.0 + (cos(millis() / 8000.0) * 15.0) + random(-20, 20) / 10.0;
// Simulate light sensor (0-1023 range)
lightLevel = 512 + (sin(millis() / 5000.0) * 400) + random(-50, 50);
if (lightLevel < 0) lightLevel = 0;
if (lightLevel > 1023) lightLevel = 1023;
// Update uptime
uptime = millis() / 1000;
// Increment counter
counter++;
}
// Send real-time updates to web interface
void sendRealTimeUpdates() {
// Send individual value updates to web clients
tablePage.sendValueUpdate("Temperature", String(temperature, 1) + "°C");
tablePage.sendValueUpdate("Humidity", String(humidity, 1) + "%");
tablePage.sendValueUpdate("Light Level", String(lightLevel));
tablePage.sendValueUpdate("Uptime", formatUptime(uptime));
tablePage.sendValueUpdate("Counter", String(counter));
tablePage.sendValueUpdate("Free Memory", String(getFreeMemory()) + " bytes");
}
// Callback function called when web client requests table data
void onDataRequested() {
Serial.println("Web client requested table data");
// Send all current values to web interface
tablePage.sendValueUpdate("Device Name", "ESP32");
tablePage.sendValueUpdate("Temperature", String(temperature, 1) + "°C");
tablePage.sendValueUpdate("Humidity", String(humidity, 1) + "%");
tablePage.sendValueUpdate("Light Level", String(lightLevel));
tablePage.sendValueUpdate("Uptime", formatUptime(uptime));
tablePage.sendValueUpdate("LED Status", ledState ? "ON" : "OFF");
tablePage.sendValueUpdate("Counter", String(counter));
tablePage.sendValueUpdate("WiFi SSID", WIFI_SSID);
tablePage.sendValueUpdate("IP Address", WiFi.localIP().toString());
tablePage.sendValueUpdate("Free Memory", String(getFreeMemory()) + " bytes");
}
// Format uptime in human-readable format
String formatUptime(unsigned long seconds) {
unsigned long days = seconds / 86400;
unsigned long hours = (seconds % 86400) / 3600;
unsigned long minutes = (seconds % 3600) / 60;
unsigned long secs = seconds % 60;
String result = "";
if (days > 0) result += String(days) + "d ";
if (hours > 0) result += String(hours) + "h ";
if (minutes > 0) result += String(minutes) + "m ";
result += String(secs) + "s";
return result;
}
// Get approximate free memory
int getFreeMemory() {
// Simple approximation for demonstration
// In a real application, you might use a more accurate method
return 2048 - (counter % 1024);
}
WLAN-Konfiguration
Konfigurieren Sie die WLAN-Zugangsdaten im Code, indem Sie diese Zeilen aktualisieren:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klicken Sie in der Arduino-IDE auf die Upload-Schaltfläche, um Code auf den ESP32 hochzuladen.
- Öffnen Sie den seriellen Monitor.
- Schauen Sie sich das Ergebnis im seriellen Monitor an. Es sieht wie folgt aus.
COM6
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
📱 Web Interface: http://192.168.0.2
🔗 WebSocket: ws://192.168.0.2:81
📋 Available Applications:
🏠 Home Page: http://192.168.0.2/
📊 Web Table: http://192.168.0.2/web-table
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Wenn Sie nichts sehen, starten Sie das ESP32-Board neu.
Die Weboberfläche verwenden
- Öffnen Sie einen Webbrowser auf Ihrem Computer oder Mobilgerät, das mit demselben WLAN-Netzwerk verbunden ist.
- Geben Sie die im Serial Monitor angezeigte IP-Adresse in den Webbrowser ein.
- Beispiel: http://192.168.1.100
- Sie sehen die Startseite wie im folgenden Bild:
- Klicken Sie auf den Web Table-Link, dann sehen Sie die Benutzeroberfläche der Web Table-App wie unten gezeigt:
- Oder greifen Sie direkt über die IP-Adresse zu, gefolgt von /web-table. Zum Beispiel: http://192.168.1.100/web-table
- Sie sehen die Web Table-Oberfläche, die Folgendes zeigt:
- Echtzeit-Datentabelle: Zwei-Spalten-Tabelle mit Attributen und deren aktuellen Werten
- Intelligente Hervorhebung: Automatische Farbcodierung von sich ändernden Werten im Vergleich zu stabilen Werten
- Verbindungsstatus: visuelle Anzeige des WebSocket-Verbindungszustandes
- Aktualisieren-Schaltfläche: Manuelle Aktualisierung der neuesten Daten
- Automatische Updates: Werte werden in Echtzeit über WebSocket aktualisiert
Intelligentes Hervorhebungssystem
Wie es funktioniert
WebTable verfügt über ein fortschrittliches Hervorhebungssystem, das automatisch erkennt, welche Werte sich im Laufe der Zeit ändern, ohne dass in Ihrem ESP32-Code eine Konfiguration erforderlich ist.
Automatische Änderungserkennung
Die Weboberfläche verfolgt automatisch Ihre Daten und liefert visuelles Feedback:
- Rote Hervorhebung: Wird auf Werte angewendet, die sich häufig ändern (wie Sensorwerte, Zähler, Timer)
- Blaue Hervorhebung: Wird auf Werte angewendet, die stabil bleiben (wie Gerätenamen, IP-Adressen, Konfigurationseinstellungen)
- Keine Einrichtung erforderlich: Das System lernt automatisch, während Ihr ESP32 Updates sendet
Was Sie sehen
- Werte, die sich im Laufe der Zeit ändern (Temperatur, Betriebszeit, Sensorwerte), werden in Rot hervorgehoben
- Statische Informationen (Gerätename, WiFi-SSID, IP-Adresse) werden in Blau hervorgehoben
- Dies hilft Ihnen schnell zu erkennen, welche Daten sich aktiv ändern und welche stabil bleiben
Hauptvorteile
- Keine Konfiguration erforderlich: Verwenden Sie einfach sendValueUpdate() und die Hervorhebung funktioniert automatisch
- Visuelles Lernen: Sehen Sie einfach, welche Teile Ihres Systems aktiv sind
- Für Anfänger geeignet: Funktioniert ohne jegliche Kenntnisse in Web-Programmierung
- Speichereffizient: Alle Hervorhebungen erfolgen im Webbrowser, nicht auf Ihrem Arduino
- Aktualisierungen in Echtzeit: Die Hervorhebung erfolgt sofort, wenn Werte aktualisiert werden
Tabellenstruktur-Konfiguration
Die Tabellenstruktur wird einmal in der Funktion setup() konfiguriert, wobei die Methode addRow() verwendet wird:
void setupTableStructure() {
// Add table rows with attributes and initial values
tablePage.addRow("Device Name", "ESP32");
tablePage.addRow("Temperature", "0.0°C");
tablePage.addRow("LED Status", "OFF");
tablePage.addRow("Uptime", "0 seconds");
tablePage.addRow("WiFi Signal", "0 dBm");
tablePage.addRow("Free Memory", "0 bytes");
}
Werteaktualisierungen in Echtzeit
Werte werden während der Laufzeit mit der Methode sendValueUpdate() aktualisiert:
Direkte Aktualisierungsmethode (Empfohlen)
void updateSensorValues() {
// Read sensor data
float temperature = readTemperature();
bool ledStatus = digitalRead(LED_BUILTIN);
// Send updates directly to web interface
tablePage.sendValueUpdate("Temperature", String(temperature, 1) + "°C");
tablePage.sendValueUpdate("LED Status", ledStatus ? "ON" : "OFF");
tablePage.sendValueUpdate("Uptime", formatUptime(millis() / 1000));
}
Vorteile direkter Aktualisierungen
- Speichereffizient: Keine Speicherung von Werten im ESP32-Speicher
- Echtzeit: Sofortige Aktualisierungen der Weboberfläche
- Automatische Hervorhebung: Die Weboberfläche erkennt automatisch Änderungen
- Vereinfachter Code: Kein Bedarf, lokale Werte zu speichern
Code-Erklärung
Schlüsselkomponenten
#include <DIYablesWebApps.h>
// Initialize web server and table page
DIYablesWebAppServer server;
DIYablesWebTablePage tablePage;
Setup-Funktion
void setup() {
Serial.begin(9600);
// Setup WiFi connection
server.setupWiFi(WIFI_SSID, WIFI_PASSWORD);
// Add table page to server
server.addWebApp(tablePage);
// Set up callback for data requests
tablePage.onTableValueRequest(onDataRequested);
// Configure table structure
setupTableStructure();
// Start the server
server.begin();
}
Echtzeit-Updates in der Schleife
void loop() {
server.handleClient();
// Update sensor values every 2 seconds
static unsigned long lastUpdate = 0;
if (millis() - lastUpdate > 2000) {
updateSensorValues();
sendRealTimeUpdates();
lastUpdate = millis();
}
delay(10);
}
Callback-Funktion
// Called when web interface requests table data
void onDataRequested() {
Serial.println("Web client requested table data");
// Update all current values before sending
updateSensorValues();
// The table data is automatically sent by the library
}
Funktionen zur Aktualisierung von Werten
void updateSensorValues() {
// Update sensor readings
temperature = readTemperatureSensor();
humidity = readHumiditySensor();
// Update values in table
tablePage.updateValue("Temperature", String(temperature, 1) + "°C");
tablePage.updateValue("Humidity", String(humidity, 1) + "%");
}
void sendRealTimeUpdates() {
// Send updates to web clients
tablePage.sendValueUpdate("Temperature", String(temperature, 1) + "°C");
tablePage.sendValueUpdate("Humidity", String(humidity, 1) + "%");
}
API-Methoden
DIYablesWebTablePage Klassenmethoden
addRow(Attribut, Initialwert)
- Fügt eine neue Zeile zur Tabellenstruktur hinzu
- Parameter:
- attribute: String - Der Attributname (linke Spalte)
- initialValue: String - Initialwert (rechte Spalte, optional)
- Verwendung: Wird in setup() aufgerufen, um die Tabellenstruktur zu konfigurieren
aktualisiereWert(attribut, wert)
- Aktualisiert einen Wert anhand des Attributnamens (nur lokaler Speicher)
- Parameter:
- attribute: String - Der Attributname, der aktualisiert werden soll
- value: String - Neuer Wert, der gesetzt werden soll
- Verwendung: Aktualisiert lokale Tabellendaten
aktualisiereWert(index, wert)
- Aktualisiert einen Wert anhand des Zeilenindexes (nur im lokalen Speicher)
- Parameter:
- index: int - Zeilenindex (0-basiert)
- value: String - Neuer Wert, der festgelegt werden soll
- Verwendung: Aktualisiert lokale Tabellendaten nach Position
sendeWertAktualisierung(attribut, wert)
- Sendet eine Aktualisierung des Wertes an Web-Clients anhand des Attributnamens
- Parameter:
- attribute: String - Der Attributname, der aktualisiert werden soll
- value: String - Neuer Wert zum Senden
- Verwendung: Echtzeitaktualisierung der Weboberfläche
sendeWertAktualisierung(Index, wert)
- Sendet eine Wertaktualisierung an Web-Clients anhand des Zeilenindexes
- Parameter:
- index: int - Zeilenindex (0-basiert)
- value: String - Neuer Wert zum Senden
- Verwendung: Echtzeitaktualisierung der Weboberfläche basierend auf der Position
sendTableData()
- Sendet vollständige Tabellendaten an Webclients
- Verwendung: Aktualisieren Sie die gesamte Tabelle auf der Weboberfläche
tabelleLeeren()
- Löscht alle Tabellendaten und setzt die Zeilenanzahl zurück
- Verwendung: Tabellenstruktur zurücksetzen (selten erforderlich)
Zeilenanzahl abrufen()
- Gibt die Anzahl der Zeilen in der Tabelle zurück
- Rückgabewert: int - Aktuelle Zeilenanzahl
- Verwendung: Informationen zur Tabellengröße abrufen
Attribut abrufen(index)
- Ermittelt den Attributnamen anhand des Zeilenindex
- Parameter: index: int - Zeilenindex (0-basiert)
- Rückgabewert: String - Attributname
- Verwendung: Zugriff auf Tabellenstrukturinformationen
WertAbrufen(Index)
- Wert nach Zeilenindex abrufen
- Parameter: index: int - Zeilenindex (0-basiert)
- Rückgabe: String - Aktueller Wert
- Verwendung: Zugriff auf aktuelle Tabellenwerte
onTableValueRequest(callback)
- Setzt eine Callback-Funktion für Datenanfragen von Web-Clients
- Parameter: void (*callback)() - Funktion, die aufgerufen wird, wenn Daten angefordert werden
- Verwendung: Bearbeitung von Datenanfragen von Web-Clients
WebSocket-Kommunikation
Nachrichten vom Web an Arduino
- TABLE:GET_DATA - Vollständige Tabellendaten anfordern
- TABLE:UPDATE:attribute:value - Wert für ein bestimmtes Attribut aktualisieren
Nachrichten vom ESP32 zum Web
- TABLE_DATA:attr1:val1|attr2:val2|... - Vollständige Tabellendaten senden
- VALUE_UPDATE:attribute:value - Aktualisierung eines einzelnen Werts senden
Fehlerbehebung
Häufige Probleme
- Tabelle zeigt keine Daten an
- Problem: Leere Tabelle oder Meldung „Keine Daten verfügbar“
- Ursache: Tabellenstruktur nicht konfiguriert oder WLAN-Verbindungsprobleme
- Lösung:
- Überprüfen Sie, ob setupTableStructure() in setup() aufgerufen wird.
- WLAN-Verbindungsstatus überprüfen
- Klicken Sie auf die Schaltfläche Aktualisieren, um Daten manuell abzurufen.
- Überprüfen Sie den seriellen Monitor auf Fehlermeldungen
2. Werte werden nicht in Echtzeit aktualisiert
- Problem: Tabelle zeigt trotz ESP32-Updates alte Werte
- Ursache: WebSocket-Verbindung verloren oder Update-Funktionen wurden nicht aufgerufen
- Lösung:
- Überprüfen Sie den Verbindungsstatus-Indikator auf der Webseite.
Seite neu laden.
- Prüfen Sie, ob sendValueUpdate() ordnungsgemäß aufgerufen wird.
- Netzwerkstabilität prüfen
- Hervorhebung funktioniert nicht
- Problem: Werte zeigen keine rote oder blaue Hervorhebung
- Ursache: JavaScript erkennt Wertänderungen nicht korrekt
- Lösung:
- Laden Sie die Webseite neu, um die Änderungserkennung zurückzusetzen
- Stellen Sie sicher, dass sich die Werte tatsächlich ändern (prüfen Sie den Serial Monitor).
- Leeren Sie den Browser-Cache, wenn die Hervorhebung festhängt.
- Werte benötigen mehrere Aktualisierungen, um das Hervorhebungssystem auszulösen
- „Nicht mit Arduino verbunden“ Fehler
- Problem: Fehler beim Klicken auf die Aktualisierungsschaltfläche
- Ursache: Die WebSocket-Verbindung konnte nicht hergestellt werden
- Lösung:
- Überprüfen Sie, ob die ESP32-IP-Adresse korrekt ist.
- Prüfe, ob sich der ESP32 im gleichen WLAN-Netzwerk befindet.
- ESP32 neu starten und die Webseite aktualisieren.
- Firewall-Einstellungen prüfen
3. "Nicht mit Arduino verbunden" Fehler
- Problem: Fehler beim Klicken auf die Aktualisierungsschaltfläche
- Ursache: WebSocket-Verbindung fehlgeschlagen
- Lösung:
- Überprüfen Sie, ob die IP-Adresse des ESP32 korrekt ist.
- Prüfe, ob der ESP32 im selben WLAN-Netzwerk ist
- ESP32 neu starten und die Webseite neu laden
- Überprüfe die Firewall-Einstellungen
4. Tabellenstrukturänderungen werden nicht widergespiegelt
- Problem: Hinzugefügte/entfernte Zeilen erscheinen nicht auf der Weboberfläche
- Ursache: Die Tabellenstruktur wird nur in setup() konfiguriert
- Lösung:
- Starten Sie den ESP32 neu, um Strukturänderungen anzuwenden.
- Verwenden Sie clearTable() und addRow(), falls dynamische Änderungen erforderlich sind.
- Webseite nach dem ESP32-Neustart aktualisieren
Debug-Tipps
Serielles Debugging aktivieren:
void onDataRequested() {
Serial.println("Web client requested table data");
Serial.println("Sending table configuration...");
// Send table configuration to web client
tablePage.sendTableConfig();
}
Wertaktualisierungen des Monitors:
void updateSensorValues() {
float temperature = readTemperature();
Serial.print("Updating temperature: ");
Serial.println(String(temperature, 1) + "°C");
// Send update to web interface (highlighting will be handled automatically)
tablePage.sendValueUpdate("Temperature", String(temperature, 1) + "°C");
}
Verbindungsstatus prüfen:
void setup() {
// ... other setup code
setupTableStructure();
Serial.println("Table configured with real-time highlighting");
Serial.println("Values will be highlighted automatically based on changes");
}
Fortgeschrittene Anwendungsbeispiele
Sensorüberwachung mit intelligenter Hervorhebung
void updateEnvironmentalSensors() {
// Read various sensors
float temperature = readTemperatureSensor();
float humidity = readHumiditySensor();
int lightLevel = analogRead(A0);
bool motionDetected = digitalRead(2);
// Send updates - highlighting happens automatically
tablePage.sendValueUpdate("Temperature", String(temperature, 1) + "°C");
tablePage.sendValueUpdate("Humidity", String(humidity, 1) + "%");
tablePage.sendValueUpdate("Light Level", String(lightLevel));
tablePage.sendValueUpdate("Motion", motionDetected ? "DETECTED" : "CLEAR");
}
Systemstatus-Dashboard
void updateSystemStatus() {
// System information that changes over time gets red highlighting
tablePage.sendValueUpdate("Uptime", formatUptime(millis() / 1000));
tablePage.sendValueUpdate("Free Memory", String(ESP.getFreeHeap()) + " bytes");
tablePage.sendValueUpdate("WiFi Signal", String(WiFi.RSSI()) + " dBm");
// Static information that doesn't change gets blue highlighting
tablePage.sendValueUpdate("Device ID", "Arduino-" + String(ESP.getChipId()));
tablePage.sendValueUpdate("Firmware", "v1.0.0");
}
Bedingte Statusaktualisierungen
void updateStatusWithConditions() {
float temperature = readTemperature();
// Format status messages based on conditions
String tempStatus;
if (temperature > 30.0) {
tempStatus = String(temperature, 1) + "°C (HIGH)";
} else if (temperature < 10.0) {
tempStatus = String(temperature, 1) + "°C (LOW)";
} else {
tempStatus = String(temperature, 1) + "°C (NORMAL)";
}
// The highlighting system will automatically detect if status changes
tablePage.sendValueUpdate("Temperature Status", tempStatus);
}
Integration mehrerer Web-Apps
// Combine WebTable with other web apps
void setup() {
// Add multiple web apps
server.addWebApp(tablePage); // Data table with smart highlighting
server.addWebApp(monitorPage); // Serial monitor
server.addWebApp(sliderPage); // Control interface
// Configure table for system monitoring
tablePage.addRow("System Status", "Running");
tablePage.addRow("Active Connections", "0");
tablePage.addRow("Data Points Logged", "0");
}
Anwendungen und Anwendungsfälle
Bildungsprojekte
- Sensorüberwachung: Anzeige von Echtzeit-Sensorwerten mit automatischer Hervorhebung von Änderungen
- Systemstatus-Dashboard: ESP32-Systeminformationen mit visuellem Feedback anzeigen
- IoT-Datenvisualisierung: Live-Daten mit intelligenter Hervorhebung für aktive und statische Werte anzeigen
- Lernwerkzeug: Konzepte der Datenvisualisierung und der Echtzeitkommunikation demonstrieren
Anwendungen in der realen Welt
- Umweltüberwachung: Temperatur, Luftfeuchtigkeit, Luftqualität mit Veränderungserkennung
- Hausautomation: Systemstatus, Gerätezustände und Betriebsparameter
- Industrielle Überwachung: Anlagestatus, Alarme und Leistungskennzahlen
- Landwirtschaftliche Systeme: Bodenbedingungen, Wetterdaten und Bewässerungsstatus
Wesentliche Vorteile der MINT-Bildung
- Visuelles Lernen: Sehen Sie, welche Daten sich im Laufe der Zeit durch automatische Hervorhebung ändern
- Echtzeitsysteme: Erleben Sie WebSocket-Kommunikation und Live-Datenaktualisierungen
- Keine Konfiguration erforderlich: Intelligente Hervorhebung funktioniert automatisch
- Moderne Weboberfläche: Lernen Sie zeitgemäße Webentwicklungstechniken
Technische Spezifikationen
Speicherverbrauch (optimiertes Design)
- Flash-Speicher: ~8KB für WebTable-Funktionalität (einschließlich intelligenter Hervorhebung)
- SRAM-Verwendung: ~1KB während des Betriebs (keine Wertspeicherung im Arduino)
- WebSocket-Puffer: ~1KB zur Nachrichtenbearbeitung
- Maximale Zeilen: 20 (konfigurierbar über MAX_TABLE_ROWS)
- Speichereffizienz: Werte werden im Webbrowser nachverfolgt, nicht im ESP32-Speicher
Leistungsmerkmale
- Aktualisierungsfrequenz: Echtzeit über WebSocket (kein Polling)
- Antwortzeit: <50 ms bei Werteaktualisierungen
- Hervorhebungsgeschwindigkeit: Sofortiges visuelles Feedback bei Wertänderungen
- Netzwerk-Overhead: ca. 30–50 Bytes pro Werteaktualisierung
- Änderungserkennung: Automatischer Vergleich von Werten über die Zeit
Intelligente Hervorhebungsfunktionen
- Automatische Erkennung: Identifiziert, welche Werte sich im Laufe der Zeit ändern, ohne jegliche Einrichtung
- Zweistufiges System: Rot für sich ändernde Werte, Blau für stabile Werte
- Keine Konfiguration: Funktioniert ohne jegliche manuelle Einrichtung oder ESP32-Programmierung
- Speichereffizienz: Alle Aufzeichnungen erfolgen im Webbrowser, nicht auf dem Arduino
- Professionelles Erscheinungsbild: Sanfte Animationen liefern klares visuelles Feedback
Zusammenfassung
Das WebTable-Beispiel zeigt, wie man:
- Erstellen Sie strukturierte Datenanzeigen mit Attribut-Wert-Paaren
- Implementieren Sie Echtzeit-Wertaktualisierungen über WebSocket-Kommunikation
- Nutzen Sie intelligente Hervorhebungen, die automatisch Werteänderungen erkennen
- Erstellen Sie speichereffiziente Systeme, bei denen Werte nicht im Arduino gespeichert werden
- Konfigurieren Sie die Tabellenstruktur einmal in setup() für eine konsistente Organisation
- Verarbeiten Sie Anfragen von Webclients mit automatischen Datenaktualisierungen
- Bieten Sie visuelles Feedback durch intelligente Veränderungserkennungsalgorithmen
- Erstellen Sie responsive Weboberflächen für moderne Datenüberwachungsanwendungen
Schlüsselinnovation: Intelligentes Hervorheben
Das herausragende Merkmal dieser WebTable-Implementierung ist sein intelligentes Hervorhebungssystem, das:
- Lernt automatisch, welche Werte sich ändern, ohne Hardcodierung
- Passt sich dynamisch an, während sich Datenmuster im Laufe der Zeit ändern
- Bietet visuelles Feedback durch eine zweistufige Farbkodierung
- Funktioniert effizient, ohne den ESP32-Speicher zu beanspruchen
- Funktioniert universell für jeden Datentyp ohne Konfiguration
Dieses Beispiel ist perfekt für Projekte, die eine geordnete Datendarstellung, Dashboards zur Echtzeitüberwachung mit visuellem Feedback, Systemstatusschnittstellen mit automatischer Änderungserkennung sowie pädagogische Demonstrationen fortschrittlicher Techniken der Datenvisualisierung in IoT-Anwendungen erfordern.