Arduino WebTable-Beispiel – Tutorial zur Datentabellen-Schnittstelle
DIYables WebApps-Bibliothek - WebTable-Beispiel
Überblick
Das WebTable-Beispiel bietet eine webbasierte zweispaltige Datentabellen-Schnittstelle zur Anzeige von Echtzeitdaten aus Ihren Arduino-Projekten. Entworfen für Arduino Uno R4 WiFi und DIYables STEM V4 IoT – eine Bildungsplattform mit fortgeschrittenen Visualisierungsmöglichkeiten, intelligente Hervorhebung von Wertänderungen und nahtlose Integration in das Bildungsökosystem.
Hauptmerkmale
Kernfunktionalität
- Datentabelle mit zwei Spalten: Saubere Attribut-Wert-Paare für eine übersichtliche Datenanzeige
- Wertaktualisierungen in Echtzeit: WebSocket-basierte sofortige Datenaktualisierung ohne Neuladen der Seite
- Speichereffizientes Design: Keine Werte im Arduino-Speicher gespeichert – alles Tracking im Web-Interface
- Dynamische Konfiguration: Struktur der Tabelle einmal in der Arduino-setup()-Funktion festlegen
- Interaktive Steuerelemente: Aktualisierungsschaltfläche für manuelle Datenanfragen und automatische Wiederverbindungsmöglichkeit
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
- Kein Setup erforderlich: Das System lernt automatisch, welche Werte sich ändern, ohne jegliche Konfiguration
- Visuelles Feedback: Sanfte Animationen liefern klares visuelles Feedback für Wertaktualisierungen
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
- Fußzeilen-Integration: Konsistentes Styling, das dem Stil anderer DIYables-Web-Apps entspricht
- Umgang mit leeren Zuständen: Benutzerfreundliche Meldungen, wenn keine Daten verfügbar sind
- Plattform-Erweiterbarkeit: Derzeit implementiert für Arduino Uno R4 WiFi, kann aber auf andere Hardware-Plattformen erweitert werden. Siehe DIYables_WebApps_ESP32
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables STEM V4 IoT Starter-Kit (Arduino 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
Folge diesen Anweisungen Schritt für Schritt:
- Wenn dies Ihre erste Verwendung des Arduino Uno R4 WiFi/DIYables STEM V4 IoT ist, lesen Sie das Tutorial zur Einrichtung der Umgebung für Arduino Uno R4 WiFi/DIYables STEM V4 IoT in der Arduino IDE.
- Verbinden Sie das Arduino Uno R4/DIYables STEM V4 IoT-Board mit Ihrem Computer über ein USB-Kabel.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das passende Arduino Uno R4-Board (z. B. Arduino Uno R4 WiFi) und den COM-Port.
- Navigieren Sie zum Symbol Libraries in der linken Leiste der Arduino IDE.
- Suchen Sie "DIYables WebApps", und finden Sie anschließend die DIYables WebApps-Bibliothek von DIYables.
- Klicken Sie auf die Schaltfläche Install, 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.
- Gehen Sie im Arduino IDE zu Datei Beispiele DIYables WebApps WebTable Beispi el, oder kopieren Sie den Code und fügen ihn in den Editor der Arduino IDE ein
/*
* DIYables 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: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* 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 <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
UnoR4ServerFactory 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 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", "Arduino Uno R4");
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 auf die Hochladen-Schaltfläche in der Arduino IDE, um Code auf den Arduino UNO R4/DIYables STEM V4 IoT hochzuladen
- Öffnen Sie den seriellen Monitor.
- Überprüfen Sie das Ergebnis im seriellen Monitor. 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 Arduino-Board neu.
Verwendung der Weboberfläche
- Öffnen Sie einen Webbrowser auf Ihrem Computer oder mobilen Gerät, das mit demselben WLAN-Netzwerk verbunden ist.
- Geben Sie die im Seriemonitor angezeigte IP-Adresse in den Webbrowser ein.
- Beispiel: http://192.168.1.100
- Sie sehen die Startseite wie im untenstehenden Bild dargestellt:
- Klicken Sie auf den Web Table-Link; Sie sehen dann die Benutzeroberfläche der Web Table-App wie unten:
- Oder Sie können die Seite auch direkt über die IP-Adresse aufrufen, 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: Zweispaltige Tabelle mit Attributen und deren aktuellen Werten
- Intelligente Hervorhebung: Automatische Farbcodierung sich ändernder Werte im Vergleich zu stabilen Werten
- Verbindungsstatus: Visueller Indikator, der den WebSocket-Verbindungsstatus anzeigt
- Aktualisierungsschaltfläche: Manuelle Aktualisierungsmöglichkeit für die neuesten Daten
- Automatische Updates: Werte werden in Echtzeit über WebSocket aktualisiert
Intelligentes Hervorhebungssystem
Wie es funktioniert
Die WebTable verfügt über ein fortschrittliches Hervorhebungssystem, das automatisch erkennt, welche Werte sich im Laufe der Zeit ändern, ohne dass eine Konfiguration in Ihrem Arduino-Code erforderlich ist.
Automatische Änderungserkennung
Die Weboberfläche verfolgt automatisch Ihre Daten und liefert visuelles Feedback:
- Rote Hervorhebung: Angewendet auf Werte, die sich häufig ändern (wie Sensorwerte, Zähler, Timer)
- Blaue Hervorhebung: Angewendet auf Werte, die stabil bleiben (wie Gerätenamen, IP-Adressen, Konfigurationseinstellungen)
- Keine Einrichtung erforderlich: Das System lernt automatisch, während Ihr Arduino Updates sendet
Was Sie sehen
- Werte, die sich im Laufe der Zeit ändern (Temperatur, Laufzeit, 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 stabile Informationen darstellen
Hauptvorteile
- Keine Konfiguration erforderlich: Verwenden Sie einfach sendValueUpdate() und die Hervorhebung funktioniert automatisch
- Visuelles Lernen: Einfach sehen, welche Teile Ihres Systems aktiv sind
- Anfängerfreundlich: Funktioniert ohne jegliche Web-Programmierkenntnisse
- Speichereffizient: Alle Hervorhebungen erfolgen im Webbrowser, nicht auf Ihrem Arduino
- Echtzeit-Updates: Die Hervorhebung ändert sich sofort, wenn Werte aktualisiert werden
Tabellenstruktur-Konfiguration
Die Tabellenstruktur wird einmal in der setup()-Funktion mithilfe der addRow()-Methode konfiguriert:
void setupTableStructure() {
// Add table rows with attributes and initial values
tablePage.addRow("Device Name", "Arduino Uno R4");
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");
}
Wertaktualisierungen 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 direkte Updates
- Speichereffizient: Keine Speicherung von Werten im Arduino-Speicher
- Echtzeit: Sofortige Aktualisierungen der Weboberfläche
- Automatische Hervorhebung: Die Weboberfläche erkennt Änderungen automatisch
- Vereinfachter Code: Keine Notwendigkeit, die lokale Speicherung von Werten zu verwalten
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
}
Wertaktualisierungsfunktionen
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 im lokalen Speicher)
- Parameter:
- attribute: String - Der Attributname, der aktualisiert werden soll
- value: String - Neuer Wert zum Setzen
- Verwendung: Aktualisiert lokale Tabellendaten
aktualisiereWert(index, wert)
- Aktualisiert einen Wert anhand des Zeilenindex (nur lokaler Speicher)
- Parameter:
- index: int - Zeilenindex (0-basiert)
- value: String - Neuer Wert, der gesetzt werden soll
- Verwendung: Aktualisiert lokale Tabellendaten nach Position
sendeWertAktualisierung(attribut, wert)
- Sendet eine Wertaktualisierung 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
wertAktualisierung(index, wert)
- Sendet Wertaktualisierung an Web-Clients nach Zeilenindex
- Parameter:
- index: int - Zeilenindex (0-basiert)
- value: String - Neuer Wert zum Senden
- Verwendung: Echtzeitaktualisierung der Weboberfläche basierend auf der Position
sendeTabellendaten()
- Sendet vollständige Tabellendaten an Web-Clients
- Verwendung: Aktualisieren Sie die gesamte Tabelle auf der Weboberfläche
tabelleLeeren()
- Löscht alle Tabelleninhalte 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 Zeilenindexes
- Parameter: index: int - Zeilenindex (0-basiert)
- Rückgabe: String - Attributname
- Verwendung: Zugriff auf Informationen zur Tabellenstruktur
wertAbrufen(index)
- Wert nach Zeilenindex abrufen
- Parameter: index: int - Zeilenindex (0-basiert)
- Rückgabewert: String - Aktueller Wert
- Verwendung: Zugriff auf aktuelle Tabellenwerte
beiTabellenwertAnfrage(callback)
- Legt eine Callback-Funktion für Datenanforderungen von Web-Clients fest
- Parameter: void (*callback)() - Die Funktion, die aufgerufen wird, wenn Daten angefordert werden
- Verwendung: Verarbeitung von Datenanforderungen von Web-Clients
WebSocket-Kommunikation
Nachrichten vom Web zum Arduino
- TABLE:GET_DATA - Vollständige Tabellendaten anfordern
- TABLE:UPDATE:attribute:value - Wert für ein bestimmtes Attribut aktualisieren
Nachrichten von Arduino ins Web
- TABLE_DATA:attr1:val1|attr2:val2|... - Sende vollständige Tabellendaten
- VALUE_UPDATE:attribute:value - Sende eine einzelne Wertaktualisierung
Fehlerbehebung
Häufige Probleme
1. Tabelle zeigt keine Daten an
- Problem: Leere Tabelle oder "Keine Daten verfügbar" Meldung
- Ursache: Tabellenstruktur nicht konfiguriert oder WLAN-Verbindungsprobleme
- Lösung:
- Überprüfe, ob setupTableStructure() in setup() aufgerufen wird
- Überprüfe den WLAN-Verbindungsstatus
- 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 alte Werte trotz Arduino-Updates
- Ursache: WebSocket-Verbindung verloren oder Update-Funktionen wurden nicht aufgerufen
- Lösung:
- Verbindungsstatusanzeige auf der Webseite prüfen
- Die Seite neu laden
- Überprüfen Sie, ob sendValueUpdate() korrekt aufgerufen wird.
- Netzwerkstabilität überprüfen
3. Hervorhebung funktioniert nicht
- Problem: Werte zeigen keine rote oder blaue Hervorhebung
- Ursache: JavaScript erkennt Werteänderungen nicht richtig
- Lösung:
- Aktualisieren Sie die Webseite, um die Änderungserkennung zurückzusetzen.
- Stellen Sie sicher, dass sich die Werte tatsächlich ändern (den seriellen Monitor überprüfen)
- Leeren Sie den Browser-Cache, falls das Markieren hängen bleibt.
- Werte müssen mehrfach aktualisiert werden, um das Hervorhebungssystem auszulösen.
- "Nicht mit dem Arduino verbunden" Fehler
- Problem: Fehler beim Klicken auf die Schaltfläche 'Aktualisieren'
- Ursache: WebSocket-Verbindung ist fehlgeschlagen
- Lösung:
- Überprüfen Sie, ob die Arduino-IP-Adresse korrekt ist.
- Prüfe, ob Arduino im selben WLAN-Netzwerk ist
- Arduino neu starten und die Webseite aktualisieren
- Überprüfen Sie die Firewall-Einstellungen
3. "Nicht mit Arduino verbunden" Fehler
- Problem: Fehler beim Klicken auf die Aktualisierungsschaltfläche
- Ursache: WebSocket-Verbindung konnte nicht hergestellt werden
- Lösung:
- Überprüfen Sie, ob die Arduino-IP-Adresse korrekt ist
- Prüfe, ob Arduino im selben WLAN-Netzwerk ist
- Starte Arduino neu und lade die Webseite neu.
- Firewall-Einstellungen überprüfen
4. Tabellenstrukturänderungen werden nicht widergespiegelt
- Problem: Hinzugefügte/entfernte Zeilen erscheinen nicht in der Weboberfläche
- Ursache: Die Tabellenstruktur wird ausschließlich in setup() konfiguriert
- Lösung:
- Arduino neu starten, um Strukturänderungen anzuwenden
- Verwenden Sie clearTable() und addRow(), falls dynamische Änderungen erforderlich sind.
- Aktualisiere die Webseite nach dem Neustart des Arduino-Boards.
Tipps zum Debuggen
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();
}
Monitor-Wertaktualisierungen:
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 überprü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");
}
Erweiterte Nutzungsbeispiele
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 Webanwendungen
// 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-Sensordaten mit automatischer Hervorhebung von Änderungen
- Systemstatus-Dashboard: Anzeige von Arduino-Systeminformationen mit visueller Rückmeldung
- IoT-Datenvisualisierung: Darstellung von Live-Daten mit intelligenter Hervorhebung, die zwischen aktiven und statischen Werten unterscheidet
- Lernwerkzeug: Datenvisualisierung und Konzepte 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
Zentrale 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 Techniken der Webentwicklung
Technische Spezifikationen
Speicherverbrauch (Optimiertes Design)
- Flash-Speicher: ~8 KB für WebTable-Funktionalität (einschließlich intelligenter Hervorhebungen)
- SRAM-Verwendung: ~1 KB während des Betriebs (keine Wertspeicherung im Arduino)
- WebSocket-Puffer: ~1 KB zur Nachrichtenverarbeitung
- Maximale Zeilen: 20 (konfigurierbar über MAX_TABLE_ROWS)
- Speichereffizienz: Werte werden im Webbrowser erfasst, nicht im Arduino-Speicher
Leistungsmerkmale
- Aktualisierungsfrequenz: Echtzeit über WebSocket (kein Polling)
- Antwortzeit: <50 ms für Werteaktualisierungen
- Hervorhebungsgeschwindigkeit: Sofortiges visuelles Feedback bei Wertänderungen
- Netzwerk-Overhead: ca. 30-50 Byte pro Werteaktualisierung
- Änderungserkennung: Automatischer Vergleich von Werten im Zeitverlauf
Kompatibilität
- Arduino-Boards: Arduino Uno R4 WiFi, DIYables STEM V4 IoT
- Webbrowser: Alle modernen Webbrowser mit WebSocket-Unterstützung
- Geräte: Desktop-, Tablet- und Mobilgeräte
- Netzwerke: WiFi-Netzwerke mit lokalem Zugriff
Intelligente Hervorhebungsfunktionen
- Automatische Erkennung: Identifiziert, welche Werte sich im Laufe der Zeit ändern, ohne jegliche Einrichtung
- Zweistufiges System: Rot für veränderliche Werte, Blau für stabile Werte
- Keine Konfiguration: Funktioniert ohne jegliche manuelle Einrichtung oder Arduino-Programmierung
- Speichereffizient: Alle Verfolgungen 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 Datendarstellungen mit Attribut-Wert-Paaren
- Implementieren Sie Echtzeit-Wertaktualisierungen über WebSocket-Kommunikation
- Nutzen Sie intelligente Hervorhebungen, die Änderungen der Werte automatisch erkennen
- Erstellen Sie speichereffiziente Systeme, ohne Werte im Arduino zu speichern
- Konfigurieren Sie die Tabellenstruktur einmal in setup() für eine konsistente Organisation
- Bearbeiten Sie Web-Client-Anfragen mit automatischen Datenaktualisierungsfunktionen
- Bieten Sie visuelles Feedback durch intelligente Änderungserkennungsalgorithmen
- Erstellen Sie responsive Weboberflächen für moderne Datenüberwachungsanwendungen
Schlüsselinnovation: Intelligente Hervorhebung
Das herausragende Merkmal dieser WebTable-Implementierung ist sein intelligentes Hervorhebungssystem, das:
- Lernt automatisch welche Werte sich ändern, ohne harte Kodierung
- Passt sich dynamisch an, während sich Datenmuster im Laufe der Zeit ändern
- Bietet visuelles Feedback durch eine zweistufige Farbkodierung
- Arbeitet effizient ohne Arduino-Speicher zu verbrauchen
- Funktioniert universell für jeden Datentyp ohne Konfiguration
Dieses Beispiel eignet sich perfekt für Projekte, die eine organisierte Datenanzeige, Echtzeit-Überwachungs-Dashboards mit visuellem Feedback, Systemstatus-Oberflächen mit automatischer Änderungserkennung sowie didaktische Demonstrationen fortgeschrittener Datenvisualisierungstechniken in IoT-Anwendungen erfordern.