Arduino WebTable Voorbeeld - Data Tabel Interface Tutorial
Overzicht
Het WebTable voorbeeld biedt een webgebaseerde tweekolommentabel interface voor het weergeven van realtime informatie van uw Arduino-projecten. Ontworpen voor Arduino Uno R4 WiFi en DIYables STEM V4 IoT educatief platform met geavanceerde data visualisatiemogelijkheden, intelligente waardeverandering-highlighting, en naadloze integratie met het educatieve ecosysteem.
Belangrijkste Kenmerken
Kernfunctionaliteit
- Tweekolommentabel: Nette eigenschap-waarde paren voor georganiseerde gegevenspresentatie
- Realtime Waarde Updates: WebSocket-gebaseerde onmiddellijke data verversing zonder pagina herladen
- Geheugenefficiënt Ontwerp: Geen waardeopslag in Arduino geheugen - alle tracking in web interface
- Dynamische Configuratie: Tabelstructuur eenmalig instellen in Arduino setup() functie
- Interactieve Bediening: Ververs-knop voor handmatige data aanvragen en automatische herverbinding
Intelligent Highlighting Systeem
- Slimme Veranderingsdetectie: Detecteert automatisch welke waarden daadwerkelijk veranderen over tijd
- Automatische Waarde Tracking: Vergelijkt huidige vs vorige waarden automatisch
- Dubbelniveau Highlighting:
- Rode highlighting: Voor waarden die actief veranderen
- Blauwe highlighting: Voor waarden die stabiel blijven over tijd
- Geen Setup Vereist: Systeem leert automatisch welke waarden veranderen zonder enige configuratie
- Visuele Feedback: Vloeiende animaties bieden duidelijke visuele feedback voor waarde updates
Moderne Web Interface
- Responsief Ontwerp: Werkt naadloos op desktop, tablet en mobiele apparaten
- Professionele Styling: Kaart-stijl layout met hover effecten en moderne esthetiek
- Verbindingsstatus: Visuele indicatoren voor WebSocket verbindingsstatus
- Footer Integratie: Consistente styling passend bij andere DIYables web apps
- Lege Status Behandeling: Gebruiksvriendelijke berichten wanneer er geen data beschikbaar is
- Platform Uitbreidbaar: Momenteel geïmplementeerd voor Arduino Uno R4 WiFi, maar kan worden uitgebreid voor andere hardware platforms. Zie DIYables_WebApps_ESP32
Benodigde Hardware
Of u kunt de volgende kits kopen:
| 1 | × | DIYables STEM V4 IoT Starterskit (Arduino inbegrepen) | |
| 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.
Setup Instructies
Snelle Stappen
Volg deze instructies stap voor stap:
- Nieuw bij Arduino Uno R4 WiFi/DIYables STEM V4 IoT? Begin met de tutorial over het opzetten van de omgeving voor Arduino Uno R4 WiFi/DIYables STEM V4 IoT in de Arduino IDE.
- Verbind het Arduino Uno R4/DIYables STEM V4 IoT board met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste Arduino Uno R4 board (bijv., Arduino Uno R4 WiFi) en COM-poort.
- Ga naar het Libraries pictogram in de linker balk van de Arduino IDE.
- Zoek "DIYables WebApps", vind dan de DIYables WebApps bibliotheek door DIYables
- Klik op de Install knop om de bibliotheek te installeren.
- U wordt gevraagd om enkele andere bibliotheekafhankelijkheden te installeren
- Klik op de Install All knop om alle bibliotheekafhankelijkheden te installeren.
- In de Arduino IDE, ga naar File Examples DIYables WebApps WebTable voorbeeld, of kopieer de code en plak het in de editor van Arduino IDE
/*
* 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);
}
WiFi Configuratie
Configureer WiFi-inloggegevens in de code door deze regels bij te werken:
const char WIFI_SSID[] = "UW_WIFI_NETWERK";
const char WIFI_PASSWORD[] = "UW_WIFI_WACHTWOORD";
- Klik op de Upload knop in Arduino IDE om code naar Arduino UNO R4/DIYables STEM V4 IoT te uploaden
- Open de Serial Monitor
- Bekijk het resultaat in de Serial Monitor. Het ziet er als volgt 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 het Arduino board.
Gebruik van de Web Interface
- Open een webbrowser op uw computer of mobiele apparaat verbonden met hetzelfde WiFi-netwerk
- Typ het IP-adres zoals getoond in de Serial Monitor in de webbrowser
- Voorbeeld: http://192.168.1.100
- U ziet de homepagina zoals in onderstaande afbeelding:
- Klik op de Web Table link, u ziet de Web Table app's UI zoals hieronder:
- Of u kunt ook direct toegang krijgen tot de pagina via het IP-adres gevolgd door /web-table. Bijvoorbeeld: http://192.168.1.100/web-table
- U ziet de Web Table interface die het volgende toont:
- Realtime Data Tabel: Tweekolommentabel met eigenschappen en hun huidige waarden
- Intelligente Highlighting: Automatische kleurcodering van veranderende vs stabiele waarden
- Verbindingsstatus: Visuele indicator die WebSocket verbindingsstatus toont
- Ververs Knop: Handmatige verversmogelijkheid voor nieuwste data
- Automatische Updates: Waarden updaten in realtime via WebSocket
Intelligent Highlighting Systeem
Hoe het Werkt
De WebTable heeft een geavanceerd highlighting systeem dat automatisch detecteert welke waarden veranderen over tijd zonder enige configuratie in uw Arduino code te vereisen.
Automatische Veranderingsdetectie
De web interface volgt automatisch uw data en biedt visuele feedback:
- Rode highlighting: Toegepast op waarden die vaak veranderen (zoals sensorwaarden, tellers, timers)
- Blauwe highlighting: Toegepast op waarden die stabiel blijven (zoals apparaatnamen, IP-adressen, configuratie-instellingen)
- Geen setup vereist: Het systeem leert automatisch terwijl uw Arduino updates verstuurt
Wat U Ziet
- Waarden die veranderen over tijd (temperatuur, uptime, sensorwaarden) worden gemarkeerd in rood
- Statische informatie (apparaatnaam, WiFi SSID, IP-adres) wordt gemarkeerd in blauw
- Dit helpt u snel te identificeren welke data actief verandert vs stabiele informatie
Belangrijkste Voordelen
- Geen Configuratie Vereist: Gebruik gewoon sendValueUpdate() en highlighting werkt automatisch
- Visueel Leren: Zie gemakkelijk welke onderdelen van uw systeem actief zijn
- Beginnersvriendelijk: Werkt zonder enige webprogrammeerkennis
- Geheugenefficiënt: Alle highlighting gebeurt in de webbrowser, niet op uw Arduino
- Realtime Updates: Highlighting verandert onmiddellijk wanneer waarden updaten
Tabelstructuur Configuratie
De tabelstructuur wordt eenmalig geconfigureerd in de setup() functie met behulp van de addRow() methode:
void setupTableStructure() {
// Voeg tabelrijen toe met eigenschappen en initiële waarden
tablePage.addRow("Apparaatnaam", "Arduino Uno R4");
tablePage.addRow("Temperatuur", "0.0°C");
tablePage.addRow("LED Status", "UIT");
tablePage.addRow("Uptime", "0 seconden");
tablePage.addRow("WiFi Signaal", "0 dBm");
tablePage.addRow("Vrij Geheugen", "0 bytes");
}
Realtime Waarde Updates
Waarden worden tijdens runtime bijgewerkt met behulp van de sendValueUpdate() methode:
Directe Update Methode (Aanbevolen)
void updateSensorValues() {
// Lees sensor data
float temperature = readTemperature();
bool ledStatus = digitalRead(LED_BUILTIN);
// Verstuur updates direct naar web interface
tablePage.sendValueUpdate("Temperatuur", String(temperature, 1) + "°C");
tablePage.sendValueUpdate("LED Status", ledStatus ? "AAN" : "UIT");
tablePage.sendValueUpdate("Uptime", formatUptime(millis() / 1000));
}
Voordelen van Directe Updates
- Geheugenefficiënt: Geen waardeopslag in Arduino geheugen
- Realtime: Onmiddellijke updates naar web interface
- Automatische Highlighting: Web interface detecteert automatisch veranderingen
- Vereenvoudigde Code: Geen noodzaak om lokale waardeopslag te beheren
Code Uitleg
Belangrijke Componenten
#include <DIYablesWebApps.h>
// Initialiseer webserver en tabelpagina
DIYablesWebAppServer server;
DIYablesWebTablePage tablePage;
Setup Functie
void setup() {
Serial.begin(9600);
// Setup WiFi verbinding
server.setupWiFi(WIFI_SSID, WIFI_PASSWORD);
// Voeg tabelpagina toe aan server
server.addWebApp(tablePage);
// Stel callback in voor data aanvragen
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);
}
Callback Functie
// Aangeroepen wanneer web interface tabeldata aanvraagt
void onDataRequested() {
Serial.println("Web client vroeg tabeldata aan");
// Update alle huidige waarden voor verzending
updateSensorValues();
// De tabeldata wordt automatisch verzonden door de bibliotheek
}
Waarde Update Functies
void updateSensorValues() {
// Update sensorwaarden
temperature = readTemperatureSensor();
humidity = readHumiditySensor();
// Update waarden in tabel
tablePage.updateValue("Temperatuur", String(temperature, 1) + "°C");
tablePage.updateValue("Vochtigheid", String(humidity, 1) + "%");
}
void sendRealTimeUpdates() {
// Verstuur updates naar web clients
tablePage.sendValueUpdate("Temperatuur", String(temperature, 1) + "°C");
tablePage.sendValueUpdate("Vochtigheid", String(humidity, 1) + "%");
}
API Methoden
DIYablesWebTablePage Klasse Methoden
addRow(attribute, initialValue)
- Voegt een nieuwe rij toe aan de tabelstructuur
- Parameters:
- attribute: String - De eigenschapsnaam (linker kolom)
- initialValue: String - Initiële waarde (rechter kolom, optioneel)
- Gebruik: Aangeroepen in setup() om tabelstructuur te configureren
updateValue(attribute, value)
- Werkt een waarde bij op eigenschapsnaam (alleen lokale opslag)
- Parameters:
- attribute: String - De eigenschapsnaam om bij te werken
- value: String - Nieuwe waarde om in te stellen
- Gebruik: Werkt lokale tabeldata bij
updateValue(index, value)
- Werkt een waarde bij op rij-index (alleen lokale opslag)
- Parameters:
- index: int - Rij-index (0-gebaseerd)
- value: String - Nieuwe waarde om in te stellen
- Gebruik: Werkt lokale tabeldata bij op positie
sendValueUpdate(attribute, value)
- Verstuurt waarde update naar web clients op eigenschapsnaam
- Parameters:
- attribute: String - De eigenschapsnaam om bij te werken
- value: String - Nieuwe waarde om te versturen
- Gebruik: Realtime update naar web interface
sendValueUpdate(index, value)
- Verstuurt waarde update naar web clients op rij-index
- Parameters:
- index: int - Rij-index (0-gebaseerd)
- value: String - Nieuwe waarde om te versturen
- Gebruik: Realtime update naar web interface op positie
sendTableData()
- Verstuurt volledige tabeldata naar web clients
- Gebruik: Ververs hele tabel op web interface
clearTable()
- Wist alle tabeldata en reset rijaantal
- Gebruik: Reset tabelstructuur (zelden nodig)
getRowCount()
- Retourneert het aantal rijen in de tabel
- Retourneert: int - Huidig rijaantal
- Gebruik: Krijg tabelgrootte-informatie
getAttribute(index)
- Krijgt eigenschapsnaam op rij-index
- Parameters: index: int - Rij-index (0-gebaseerd)
- Retourneert: String - Eigenschapsnaam
- Gebruik: Toegang tot tabelstructuur-informatie
getValue(index)
- Krijgt waarde op rij-index
- Parameters: index: int - Rij-index (0-gebaseerd)
- Retourneert: String - Huidige waarde
- Gebruik: Toegang tot huidige tabelwaarden
onTableValueRequest(callback)
- Stelt callback functie in voor data aanvragen van web clients
- Parameter: void (*callback)() - Functie om aan te roepen wanneer data wordt aangevraagd
- Gebruik: Behandel web client data aanvragen
WebSocket Communicatie
Berichten van Web naar Arduino
- TABLE:GET_DATA - Vraag volledige tabeldata aan
- TABLE:UPDATE:attribute:value - Werk waarde bij voor specifieke eigenschap
Berichten van Arduino naar Web
- TABLE_DATA:attr1:val1|attr2:val2|... - Verstuur volledige tabeldata
- VALUE_UPDATE:attribute:value - Verstuur enkele waarde update
Probleemoplossing
Veelvoorkomende Problemen
1. Tabel Toont Geen Data
- Probleem: Lege tabel of "Geen Data Beschikbaar" bericht
- Oorzaak: Tabelstructuur niet geconfigureerd of WiFi verbindingsproblemen
- Oplossing:
- Verifieer dat setupTableStructure() wordt aangeroepen in setup()
- Controleer WiFi verbindingsstatus
- Klik op ververs knop om handmatig data aan te vragen
- Controleer Serial Monitor voor foutmeldingen
- Probleem: Tabel toont oude waarden ondanks Arduino updates
- Oorzaak: WebSocket verbinding verloren of update functies niet aangeroepen
- Oplossing:
- Controleer verbindingsstatus indicator op webpagina
- Ververs de webpagina
- Verifieer dat sendValueUpdate() correct wordt aangeroepen
- Controleer netwerkstabiliteit
- Probleem: Waarden tonen geen rode of blauwe highlighting
- Oorzaak: JavaScript detecteert waardeveranderingen niet goed
- Oplossing:
- Ververs de webpagina om veranderingsdetectie te resetten
- Zorg ervoor dat waarden daadwerkelijk veranderen (controleer Serial Monitor)
- Wis browser cache als highlighting vastloopt
- Waarden hebben meerdere updates nodig om highlighting systeem te activeren
- Probleem: Fout bij klikken op ververs knop
- Oorzaak: WebSocket verbinding mislukt
- Oplossing:
- Verifieer dat Arduino IP-adres correct is
- Controleer of Arduino op hetzelfde WiFi netwerk is
- Herstart Arduino en ververs webpagina
- Controleer firewall instellingen
- Probleem: Fout bij klikken op ververs knop
- Oorzaak: WebSocket verbinding mislukt
- Oplossing:
- Verifieer dat Arduino IP-adres correct is
- Controleer of Arduino op hetzelfde WiFi netwerk is
- Herstart Arduino en ververs webpagina
- Controleer firewall instellingen
- Probleem: Toegevoegde/verwijderde rijen verschijnen niet op web interface
- Oorzaak: Tabelstructuur wordt alleen in setup() geconfigureerd
- Oplossing:
- Herstart Arduino om structuurwijzigingen toe te passen
- Gebruik clearTable() en addRow() als dynamische wijzigingen nodig zijn
- Ververs webpagina na Arduino herstart
2. Waarden Updaten Niet in Realtime
3. Highlighting Werkt Niet
4. "Niet verbonden met Arduino" Fout
3. "Niet verbonden met Arduino" Fout
4. Tabelstructuur Wijzigingen Niet Zichtbaar
Debug Tips
Schakel Serial Debugging In:
void onDataRequested() {
Serial.println("Web client vroeg tabeldata aan");
Serial.println("Verstuur tabelconfiguratie...");
// Verstuur tabelconfiguratie naar web client
tablePage.sendTableConfig();
}
Monitor Waarde Updates:
void updateSensorValues() {
float temperature = readTemperature();
Serial.print("Temperatuur bijwerken: ");
Serial.println(String(temperature, 1) + "°C");
// Verstuur update naar web interface (highlighting wordt automatisch afgehandeld)
tablePage.sendValueUpdate("Temperatuur", String(temperature, 1) + "°C");
}
Controleer Verbindingsstatus:
void setup() {
// ... andere setup code
setupTableStructure();
Serial.println("Tabel geconfigureerd met realtime highlighting");
Serial.println("Waarden worden automatisch gemarkeerd op basis van veranderingen");
}
Geavanceerde Gebruik Voorbeelden
Sensormonitoring met Slimme Highlighting
void updateEnvironmentalSensors() {
// Lees verschillende sensoren
float temperature = readTemperatureSensor();
float humidity = readHumiditySensor();
int lightLevel = analogRead(A0);
bool motionDetected = digitalRead(2);
// Verstuur updates - highlighting gebeurt automatisch
tablePage.sendValueUpdate("Temperatuur", String(temperature, 1) + "°C");
tablePage.sendValueUpdate("Vochtigheid", String(humidity, 1) + "%");
tablePage.sendValueUpdate("Lichtniveau", String(lightLevel));
tablePage.sendValueUpdate("Beweging", motionDetected ? "GEDETECTEERD" : "VRIJ");
}
Systeemstatus Dashboard
void updateSystemStatus() {
// Systeeminformatie die verandert over tijd krijgt rode highlighting
tablePage.sendValueUpdate("Uptime", formatUptime(millis() / 1000));
tablePage.sendValueUpdate("Vrij Geheugen", String(ESP.getFreeHeap()) + " bytes");
tablePage.sendValueUpdate("WiFi Signaal", String(WiFi.RSSI()) + " dBm");
// Statische informatie die niet verandert krijgt blauwe highlighting
tablePage.sendValueUpdate("Apparaat ID", "Arduino-" + String(ESP.getChipId()));
tablePage.sendValueUpdate("Firmware", "v1.0.0");
}
Conditionele Status Updates
void updateStatusWithConditions() {
float temperature = readTemperature();
// Formatteer statusberichten op basis van condities
String tempStatus;
if (temperature > 30.0) {
tempStatus = String(temperature, 1) + "°C (HOOG)";
} else if (temperature < 10.0) {
tempStatus = String(temperature, 1) + "°C (LAAG)";
} else {
tempStatus = String(temperature, 1) + "°C (NORMAAL)";
}
// Het highlighting systeem zal automatisch detecteren of status verandert
tablePage.sendValueUpdate("Temperatuur Status", tempStatus);
}
Meerdere Web Apps Integratie
// Combineer WebTable met andere web apps
void setup() {
// Voeg meerdere web apps toe
server.addWebApp(tablePage); // Data tabel met slimme highlighting
server.addWebApp(monitorPage); // Serial monitor
server.addWebApp(sliderPage); // Controle interface
// Configureer tabel voor systeemmonitoring
tablePage.addRow("Systeemstatus", "Actief");
tablePage.addRow("Actieve Verbindingen", "0");
tablePage.addRow("Gelogde Datapunten", "0");
}
Toepassingen en Gebruikscases
Educatieve Projecten
- Sensormonitoring: Toon realtime sensorwaarden met automatische verandering-highlighting
- Systeemstatus Dashboard: Toon Arduino systeeminformatie met visuele feedback
- IoT Data Visualisatie: Presenteer live data met intelligente highlighting voor actieve vs statische waarden
- Leermiddel: Demonstreer data visualisatie en realtime communicatie concepten
Real-World Toepassingen
- Omgevingsmonitoring: Temperatuur, vochtigheid, luchtkwaliteit met veranderingsdetectie
- Domotica: Systeemstatus, apparaatstaten en operationele parameters
- Industriële Monitoring: Apparatuurstatus, waarschuwingen en prestatiemetingen
- Landbouwsystemen: Bodemcondities, weerdata en irrigatiestatus
Belangrijkste Voordelen voor STEM Onderwijs
- Visueel Leren: Zie welke data verandert over tijd door automatische highlighting
- Realtime Systemen: Ervaar WebSocket communicatie en live data updates
- Geen Configuratie Nodig: Intelligente highlighting werkt automatisch
- Moderne Web Interface: Leer hedendaagse webontwikkelingstechnieken
Technische Specificaties
Geheugengebruik (Geoptimaliseerd Ontwerp)
- Flash Memory: ~8KB voor WebTable functionaliteit (inclusief intelligente highlighting)
- SRAM Gebruik: ~1KB tijdens werking (geen waardeopslag in Arduino)
- WebSocket Buffer: ~1KB voor berichtafhandeling
- Maximum Rijen: 20 (configureerbaar via MAX_TABLE_ROWS)
- Geheugenefficiëntie: Waarden bijgehouden in webbrowser, niet Arduino geheugen
Prestatie Kenmerken
- Update Frequentie: Realtime via WebSocket (geen polling)
- Responstijd: <50ms voor waarde updates
- Highlighting Snelheid: Onmiddellijke visuele feedback bij waardeveranderingen
- Netwerk Overhead: ~30-50 bytes per waarde update
- Veranderingsdetectie: Automatische vergelijking van waarden over tijd
Compatibiliteit
- Arduino Boards: Arduino Uno R4 WiFi, DIYables STEM V4 IoT
- Browsers: Alle moderne browsers met WebSocket ondersteuning
- Apparaten: Desktop, tablet en mobiele apparaten
- Netwerken: WiFi netwerken met lokale toegang
Intelligente Highlighting Kenmerken
- Automatische Detectie: Identificeert welke waarden veranderen over tijd zonder enige setup
- Tweeniveau Systeem: Rood voor veranderende waarden, blauw voor stabiele waarden
- Geen Configuratie: Werkt zonder enige handmatige setup of Arduino programmering
- Geheugenefficiënt: Alle tracking gedaan in webbrowser, niet op Arduino
- Professionele Verschijning: Vloeiende animaties bieden duidelijke visuele feedback
Samenvatting
Het WebTable voorbeeld demonstreert hoe u:
- Gestructureerde gegevenspresentaties creëert met eigenschap-waarde paren
- Realtime waarde updates implementeert via WebSocket communicatie
- Intelligente highlighting gebruikt die automatisch waardeveranderingen detecteert
- Geheugenefficiënte systemen bouwt zonder waarden op te slaan in Arduino
- Tabelstructuur eenmalig configureert in setup() voor consistente organisatie
- Web client aanvragen afhandelt met automatische data verversmogelijkheden
- Visuele feedback biedt door slimme veranderingsdetectie algoritmen
- Responsieve web interfaces creëert voor moderne data monitoring toepassingen
Belangrijkste Innovatie: Intelligente Highlighting
Het opvallende kenmerk van deze WebTable implementatie is het intelligente highlighting systeem dat:
- Automatisch leert welke waarden veranderen zonder hard-coding
- Dynamisch aanpast naarmate datapatronen veranderen over tijd
- Visuele feedback biedt door tweeniveau kleurcodering
- Efficiënt werkt zonder Arduino geheugen te verbruiken
- Universeel werkt voor elk type data zonder configuratie
Dit voorbeeld is perfect voor projecten die georganiseerde gegevenspresentatie vereisen, realtime monitoring dashboards met visuele feedback, systeemstatus interfaces met automatische veranderingsdetectie, en educatieve demonstraties van geavanceerde data visualisatietechnieken in IoT-toepassingen.