ESP32 WebTable Voorbeeld - Data Table Interface Tutorial
Overzicht
Het WebTable voorbeeld biedt een webgebaseerde tweekoloms data table interface om realtime informatie van uw ESP32-projecten weer te geven. Ontworpen voor het ESP32 educatieve platform met geavanceerde datavisualisatie mogelijkheden, intelligente markering van waardeveranderingen en naadloze integratie in het educatieve ecosysteem.
Belangrijkste kenmerken
Kernfunctionaliteit
- Tweekoloms Data Table: Schone attribuut-waarde paren voor georganiseerde datavoorstelling
- Realtime Waarde-updates: Directe data verversing via WebSocket zonder pagina herladen
- Geheugenefficiënt Ontwerp: Geen opslag van waarden in ESP32-geheugen – alle tracking gebeurt in de webinterface
- Dynamische Configuratie: Tabelstructuur eenmaal instellen in de ESP32 setup() functie
- Interactieve Bediening: Vernieuw-knop voor handmatige dataverzoeken en automatische herverbinding
Intelligent Markersysteem
- Slimme Veranderdetectie: Detecteert automatisch welke waarden daadwerkelijk veranderen in de tijd
- Automatische Waardebijhouding: Vergelijkt automatisch huidige met vorige waarden
- Twee-niveaus Markering:
- Rode markering: Waarden die actief aan het veranderen zijn
- Blauwe markering: Waarden die stabiel blijven over tijd
- Geen Configuratie Nodig: Het systeem leert vanzelf welke waarden veranderen zonder extra instellingen
- Visuele Feedback: Soepele animaties geven heldere visuele indicatie van waarde-updates
Moderne Webinterface
- Responsief Ontwerp: Werkt naadloos op desktop, tablet en mobiele apparaten
- Professionele Styling: Kaartstijl layout met hover-effecten en moderne uitstraling
- Verbindingsstatus: Visuele indicatoren voor WebSocket verbindingsstatus
- Footer-integratie: Consistente styling passend bij andere DIYables webapps
- Handeling bij Lege Data: Gebruiksvriendelijke meldingen wanneer er geen data beschikbaar is
Benodigdheden Hardware
Of u kunt de volgende kits kopen:
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Installatie-instructies
Snelle stappen
Volg deze stappen zorgvuldig:
- Als u voor het eerst met ESP32 werkt, raadpleeg dan de tutorial over het opzetten van de omgeving voor ESP32 in de Arduino IDE.
- Verbind de ESP32 met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste ESP32-bord (bijvoorbeeld ESP32 Dev Module) en de juiste COM-poort.
- Ga naar het Libraries icoon in de linkerzijbalk van de Arduino IDE.
- Zoek naar "DIYables ESP32 WebApps" en vind de DIYables ESP32 WebApps Library van DIYables.
- Klik op de Installeren knop om de bibliotheek te installeren.
- U wordt gevraagd om enkele andere bibliotheekafhankelijkheden te installeren.
- Klik op de Alles installeren knop om alle afhankelijkheden te installeren.
- In de Arduino IDE, ga naar Bestand Voorbeelden DIYables ESP32 WebApps WebTable voorbeeld, of kopieer de code en plak deze in de editor van de Arduino IDE
/*
* 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);
}
WiFi Configuratie
Pas de WiFi-gegevens aan in de code door deze regels te wijzigen:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klik op de Uploaden knop in de Arduino IDE om de code naar de ESP32 te uploaden
- Open de Seriële Monitor
- Bekijk het resultaat in de Seriële Monitor. Het ziet er ongeveer zo uit:
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
- Als u niets ziet, herstart dan de ESP32.
Gebruik van de Webinterface
- Open een webbrowser op uw computer of mobiel apparaat dat verbonden is met hetzelfde WiFi-netwerk
- Typ het IP-adres dat in de Seriële Monitor wordt weergegeven in de webbrowser
- Voorbeeld: http://192.168.1.100
- U ziet de startpagina zoals in de onderstaande afbeelding:
- Klik op de Web Table link, dan ziet u de gebruikersinterface van de Web Table app zoals hieronder:
- U kunt de pagina ook direct bereiken via het IP-adres gevolgd door /web-table. Bijvoorbeeld: http://192.168.1.100/web-table
- U ziet de Web Table interface met:
- Realtime Data Table: Tweekolomstabel met attributen en hun huidige waardes
- Intelligente Markering: Automatische kleurcodering van veranderende vs stabiele waarden
- Verbindingsstatus: Visuele indicator van WebSocket-verbinding
- Vernieuw-knop: Handmatige verversingsmogelijkheid voor nieuwste data
- Automatische Updates: Waarden worden realtime bijgewerkt via WebSocket
Intelligent Markersysteem
Hoe het werkt
De WebTable heeft een geavanceerd markersysteem dat automatisch detecteert welke waarden in de tijd veranderen zonder dat u iets hoeft in te stellen in uw ESP32-code.
Automatische Veranderdetectie
De webinterface houdt automatisch uw data bij en geeft visuele feedback:
- Rode markering: Voor waarden die vaak veranderen (zoals sensorwaarden, tellers, timers)
- Blauwe markering: Voor waarden die stabiel blijven (zoals apparaatnamen, IP-adressen, instellingen)
- Geen setup vereist: Het systeem leert vanzelf mee naarmate uw ESP32 updates stuurt
Wat u ziet
- Waarden die veranderen in de tijd (temperatuur, uptime, sensorwaarden) worden gemarkeerd in rood
- Statische informatie (apparaatnaam, WiFi SSID, IP-adres) wordt gemarkeerd in blauw
- Dit helpt u snel te zien welke data actief verandert en welke informatie stabiel is
Belangrijkste voordelen
- Geen Configuratie Nodig: Gebruik gewoon sendValueUpdate() en markering werkt automatisch
- Visueel Leren: Zie makkelijk welke onderdelen van uw systeem actief zijn
- Beginnervriendelijk: Werkt zonder enige kennis van webprogrammering
- Geheugenefficiënt: Alle markering gebeurt in de webbrowser, niet in uw Arduino-geheugen
- Realtime Updates: Markering verandert direct mee met waarde-updates
Configuratie van de Tabelstructuur
De tabelstructuur wordt één keer ingesteld in de setup() functie met de addRow() methode:
void setupTableStructure() {
// Voeg tabelrijen toe met attributen en beginwaarden
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");
}
Realtime Waarde-updates
Waarden worden tijdens runtime geüpdatet met de sendValueUpdate() methode:
Directe Update Methode (Aanbevolen)
void updateSensorValues() {
// Lees sensorgegevens
float temperature = readTemperature();
bool ledStatus = digitalRead(LED_BUILTIN);
// Stuur updates direct naar webinterface
tablePage.sendValueUpdate("Temperature", String(temperature, 1) + "°C");
tablePage.sendValueUpdate("LED Status", ledStatus ? "ON" : "OFF");
tablePage.sendValueUpdate("Uptime", formatUptime(millis() / 1000));
}
Voordelen van Directe Updates
- Geheugenefficiënt: Geen opslag van waarden in ESP32-geheugen
- Realtime: Directe updates naar de webinterface
- Automatische Markering: Webinterface detecteert veranderingen automatisch
- Eenvoudige Code: Geen lokaal beheer van waardeopslag nodig
Uitleg van de Code
Belangrijke Componenten
#include <DIYablesWebApps.h>
// Initialiseer webserver en tabelpagina
DIYablesWebAppServer server;
DIYablesWebTablePage tablePage;
Setup-functie
void setup() {
Serial.begin(9600);
// Stel WiFi-verbinding in
server.setupWiFi(WIFI_SSID, WIFI_PASSWORD);
// Voeg tabelpagina toe aan server
server.addWebApp(tablePage);
// Stel callback in voor dataverzoeken
tablePage.onTableValueRequest(onDataRequested);
// Configureer tabelstructuur
setupTableStructure();
// Start de server
server.begin();
}
Realtime Updates in Loop
void loop() {
server.handleClient();
// Update sensorwaarden elke 2 seconden
static unsigned long lastUpdate = 0;
if (millis() - lastUpdate > 2000) {
updateSensorValues();
sendRealTimeUpdates();
lastUpdate = millis();
}
delay(10);
}
Callbackfunctie
// Wordt aangeroepen wanneer webinterface tabeldata opvraagt
void onDataRequested() {
Serial.println("Web client requested table data");
// Update alle huidige waarden voordat verzonden wordt
updateSensorValues();
// Tabeldata wordt automatisch door de bibliotheek verzonden
}
Functies voor Waarde-updates
void updateSensorValues() {
// Update sensorwaarden
temperature = readTemperatureSensor();
humidity = readHumiditySensor();
// Update waarden in tabel
tablePage.updateValue("Temperature", String(temperature, 1) + "°C");
tablePage.updateValue("Humidity", String(humidity, 1) + "%");
}
void sendRealTimeUpdates() {
// Verstuur updates naar webclients
tablePage.sendValueUpdate("Temperature", String(temperature, 1) + "°C");
tablePage.sendValueUpdate("Humidity", String(humidity, 1) + "%");
}
API Methods
DIYablesWebTablePage Klasse Methoden
addRow(attribute, initialValue)
- Voegt een nieuwe rij toe aan de tabelstructuur
- Parameters:
- attribute: String - Attribuutnaam (linkerkolom)
- initialValue: String - Beginwaarde (rechterkolom, optioneel)
- Gebruik: Aangeroepen in setup() om tabelstructuur te configureren
updateValue(attribute, value)
- Update een waarde op attribuutnaam (alleen lokaal geheugen)
- Parameters:
- attribute: String - Naam van te updaten attribuut
- value: String - Nieuwe waarde om in te stellen
- Gebruik: Update de lokale tabeldata
updateValue(index, value)
- Update een waarde op rijindex (alleen lokaal geheugen)
- Parameters:
- index: int - Rijindex (nul-gebaseerd)
- value: String - Nieuwe waarde
- Gebruik: Update lokale tabeldata op positie
sendValueUpdate(attribute, value)
- Stuurt waarde-update naar webclients op attribuutnaam
- Parameters:
- attribute: String - Naam van attribuut om te updaten
- value: String - Nieuwe waarde om te sturen
- Gebruik: Realtime update naar webinterface
sendValueUpdate(index, value)
- Stuurt waarde-update naar webclients op rijindex
- Parameters:
- index: int - Rijindex (nul-gebaseerd)
- value: String - Nieuwe waarde om te sturen
- Gebruik: Realtime update naar webinterface op positie
sendTableData()
- Stuurt complete tabeldata naar webclients
- Gebruik: Vernieuw hele tabel in webinterface
clearTable()
- Leegt alle tabeldata en reset rijaantal
- Gebruik: Resetten tabelstructuur (zeldzaam nodig)
getRowCount()
- Geeft het aantal rijen in de tabel terug
- Return: int - Huidig aantal rijen
- Gebruik: Hulp bij tabelgrootte-informatie
getAttribute(index)
- Geeft attribuutnaam terug op rijindex
- Parameters: index: int - Rijindex (nul-gebaseerd)
- Return: String - Attribuutnaam
- Gebruik: Toegang tot tabelstructuur
getValue(index)
- Geeft de waarde terug op rijindex
- Parameters: index: int - Rijindex (nul-gebaseerd)
- Return: String - Huidige waarde
- Gebruik: Toegang tot actuele tabelwaarden
onTableValueRequest(callback)
- Stelt callbackfunctie in voor dataverzoeken van webclients
- Parameter: void (*callback)() - Functie die wordt aangeroepen bij datapront
- Gebruik: Afhandelen van webclient dataverzoeken
WebSocket Communicatie
Berichten van Web naar Arduino
- TABLE:GET_DATA - Vraag volledige tabeldata aan
- TABLE:UPDATE:attribute:value - Update waarde voor specifieke attribuut
Berichten van ESP32 naar Web
- TABLE_DATA:attr1:val1|attr2:val2|... - Stuur volledige tabeldata
- VALUE_UPDATE:attribute:value - Stuur update van één waarde
Probleemoplossing
Veelvoorkomende problemen
1. Tabel Toont Geen Data
- Probleem: Lege tabel of "Geen Data Beschikbaar" melding
- Oorzaak: Tabelstructuur niet ingesteld of WiFi-verbinding werkt niet
- Oplossing:
- Controleer of setupTableStructure() in setup() is aangeroepen
- Controleer WiFi-verbindingstatus
- Klik op vernieuwing knop om data handmatig op te vragen
- Controleer Seriële Monitor voor foutmeldingen
- Probleem: Tabel toont oude waarden ondanks ESP32-updates
- Oorzaak: WebSocket verbinding verbroken of updatefuncties niet aangeroepen
- Oplossing:
- Controleer verbindingsstatus indicator op webpage
- Vernieuw de webpage
- Controleer of sendValueUpdate() correct wordt aangeroepen
- Controleer netwerkstabiliteit
- Probleem: Waarden worden niet rood of blauw gemarkeerd
- Oorzaak: Javascript detecteert waardeveranderingen niet correct
- Oplossing:
- Vernieuw de webpage om veranderingdetectie te resetten
- Zorg dat waarden daadwerkelijk veranderen (zie Seriële Monitor)
- Wis browsercache als markering vast lijkt te zitten
- Meerdere updates zijn nodig om het markersysteem te triggeren
- Probleem: Foutmelding bij klikken op vernieuw-knop
- Oorzaak: WebSocket verbinding mislukt
- Oplossing:
- Controleer of ESP32 IP-adres juist is
- Zorg dat ESP32 op hetzelfde WiFi-netwerk zit
- Herstart ESP32 en vernieuw webpage
- Controleer firewall-instellingen
- Probleem: Toegevoegde of verwijderde rijen verschijnen niet in webinterface
- Oorzaak: Tabelstructuur wordt alleen ingesteld in setup()
- Oplossing:
- Herstart ESP32 om structuurwijzigingen toe te passen
- Gebruik clearTable() en addRow() bij dynamische wijzigingen
- Vernieuw webpage na ESP32 herstart
2. Waarden Verversen Niet Realtime
3. Markering Werkt Niet
4. "Niet verbonden met Arduino" fout
5. Wijzigingen in Tabelstructuur Niet Zichtbaar
Debug Tips
Seriële Debugging inschakelen:
void onDataRequested() {
Serial.println("Web client requested table data");
Serial.println("Sending table configuration...");
// Stuur tabelconfiguratie naar webclient
tablePage.sendTableConfig();
}
Waarde-updates monitoren:
void updateSensorValues() {
float temperature = readTemperature();
Serial.print("Updating temperature: ");
Serial.println(String(temperature, 1) + "°C");
// Stuur update naar webinterface (markering wordt automatisch verwerkt)
tablePage.sendValueUpdate("Temperature", String(temperature, 1) + "°C");
}
Verbindingsstatus controleren:
void setup() {
// ... overige setup code
setupTableStructure();
Serial.println("Table configured with real-time highlighting");
Serial.println("Values will be highlighted automatically based on changes");
}
Geavanceerde Voorbeelden
Sensor Monitoring met Slimme Markering
void updateEnvironmentalSensors() {
// Lees verschillende sensoren
float temperature = readTemperatureSensor();
float humidity = readHumiditySensor();
int lightLevel = analogRead(A0);
bool motionDetected = digitalRead(2);
// Stuur updates – markering gebeurt automatisch
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");
}
System Status Dashboard
void updateSystemStatus() {
// Systeeminformatie die verandert krijgt rode markering
tablePage.sendValueUpdate("Uptime", formatUptime(millis() / 1000));
tablePage.sendValueUpdate("Free Memory", String(ESP.getFreeHeap()) + " bytes");
tablePage.sendValueUpdate("WiFi Signal", String(WiFi.RSSI()) + " dBm");
// Statische informatie krijgt blauwe markering
tablePage.sendValueUpdate("Device ID", "Arduino-" + String(ESP.getChipId()));
tablePage.sendValueUpdate("Firmware", "v1.0.0");
}
Status Updates op Voorwaarden
void updateStatusWithConditions() {
float temperature = readTemperature();
// Format statusberichten op basis van voorwaarden
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)";
}
// Het markersysteem detecteert automatisch of status verandert
tablePage.sendValueUpdate("Temperature Status", tempStatus);
}
Integratie van Meerdere Web Apps
// Combineer WebTable met andere webapps
void setup() {
// Voeg meerdere webapps toe
server.addWebApp(tablePage); // Datatabel met slimme markering
server.addWebApp(monitorPage); // Seriële monitor
server.addWebApp(sliderPage); // Bedieningsinterface
// Configureer tabel voor systeemmonitoring
tablePage.addRow("System Status", "Running");
tablePage.addRow("Active Connections", "0");
tablePage.addRow("Data Points Logged", "0");
}
Toepassingen en Gebruiksscenario's
Educatieve Projecten
- Sensor Monitoring: Toon realtime sensormetingen met automatische verandering markering
- System Status Dashboard: Presenteer ESP32-systeeminformatie met visuele feedback
- IoT Data Visualisatie: Live data weergeven met intelligente markering voor actieve vs statische waarden
- Leermiddel: Demonstreer datavisualisatie en realtime communicatieconcepten
Praktische Toepassingen
- Milieubewaking: Temperatuur, luchtvochtigheid, luchtkwaliteit met veranderingdetectie
- Domotica: Systeemstatus, apparaatstaat en bedienparameters
- Industriële Monitoring: Apparatuurstatus, waarschuwingen en prestatiegegevens
- Landbouwsystemen: Bodemcondities, weerdata en irrigatiestatus
Belangrijkste Voordelen voor STEM Educatie
- Visueel Leren: Zie welke data in de tijd verandert door automatische markering
- Realtime Systemen: Ervaar WebSocket-communicatie en live data-updates
- Geen Configuratie Nodig: Slimme markering werkt vanzelf
- Moderne Webinterface: Leer hedendaagse webtechnieken
Technische Specificaties
Geheugengebruik (Geoptimaliseerd Ontwerp)
- Flashgeheugen: ~8KB voor WebTable functionaliteit (inclusief intelligente markering)
- SRAM Gebruik: ~1KB tijdens werking (geen opslag van waarden in Arduino)
- WebSocket Buffer: ~1KB voor berichtverwerking
- Maximum Rijen: 20 (instelbaar via MAX_TABLE_ROWS)
- Geheugenefficiëntie: Waarden worden bijgehouden in de webbrowser, niet in ESP32-geheugen
Prestatie Kenmerken
- Update Frequentie: Realtime via WebSocket (geen polling)
- Responstijd: <50ms voor waarde-updates
- Markering Snelheid: Directe visuele feedback bij waarde wijzigingen
- Netwerkbelasting: ~30-50 bytes per waarde-update
- Veranderdetectie: Automatische vergelijking van waarden over tijd
Intelligente Markering Kenmerken
- Automatische Detectie: Identificeert welke waarden veranderen zonder configuratie
- Twee-niveau Systeem: Rood voor veranderende waarden, blauw voor stabiele waarden
- Geen Configuratie: Werkt zonder handmatige instellingen of ESP32-code
- Geheugenefficiënt: Alle tracking gebeurt in browser, niet in Arduino
- Professionele Uiterlijk: Soepele animaties voor heldere visuele feedback
Samenvatting
Het WebTable voorbeeld toont hoe u:
- Gestructureerde datavoorstellingen maakt met attribuut-waarde paren
- Realtime waarde-updates implementeert via WebSocket communicatie
- Intelligente markering gebruikt die waardeveranderingen automatisch detecteert
- Geheugenefficiënte systemen bouwt zonder waarden in Arduino op te slaan
- Tabelstructuur één keer configureert in setup() voor consistente organisatie
- Webclient verzoeken afhandelt met automatische data verversing
- Visuele feedback geeft door slimme veranderdetectie-algoritmes
- Responsieve webinterfaces bouwt voor moderne datamonitoring toepassingen
Belangrijkste Innovatie: Intelligente Markering
De bijzondere functie van deze WebTable implementatie is het intelligente markersysteem dat:
- Automatisch leert welke waarden veranderen zonder harde codering
- Dynamisch aanpast wanneer datapatronen in de tijd veranderen
- Visuele feedback biedt met tweekleurige markering
- Efficiënt werkt zonder ESP32-geheugen te gebruiken
- Universeel toepasbaar is voor elk type data zonder configuratie
Dit voorbeeld is perfect voor projecten die gestructureerde dataweergave, realtime monitoring dashboards met visuele feedback, systeemstatus interfaces met automatische veranderingdetectie en educatieve demonstraties van geavanceerde datavisualisatie in IoT-toepassingen vereisen.