Exemple Arduino WebTable - Tutoriel sur l'interface du tableau de données
Vue d'ensemble
L’exemple WebTable fournit une interface de tableau de données à deux colonnes basée sur le Web pour afficher des informations en temps réel issues de vos projets Arduino. Conçu pour Arduino Uno R4 WiFi et DIYables STEM V4 IoT, une plateforme éducative dotée de capacités avancées de visualisation des données, d’un surlignage intelligent des variations de valeurs et d’une intégration transparente avec l’écosystème éducatif.
Fonctionnalités clés
Fonctionnalité principale
- Table de données à deux colonnes: Paires attribut-valeur propres pour un affichage de données organisé
- Mises à jour des valeurs en temps réel: Actualisation instantanée des données via WebSocket sans rechargement de la page
- Conception économe en mémoire: Pas de stockage des valeurs dans la mémoire Arduino — tout le suivi se fait dans l’interface Web
- Configuration dynamique: Configurez la structure du tableau une seule fois dans la fonction setup() d'Arduino
- Contrôles interactifs: Bouton de rafraîchissement pour les demandes de données manuelles et capacité de reconnexion automatique
Système de surlignage intelligent
- Détection intelligente des changements : détecte automatiquement quelles valeurs changent réellement au fil du temps
- Suivi automatique des valeurs : compare automatiquement les valeurs actuelles et les valeurs précédentes
- Surlignage à double niveau:
- Surlignage en rouge : Pour les valeurs qui évoluent activement
- Mise en évidence bleue : Pour les valeurs qui restent stables au fil du temps
- Aucune configuration requise: Le système apprend automatiquement quelles valeurs changent sans aucune configuration
- Rétroaction visuelle: Des animations fluides offrent un retour visuel clair lors des mises à jour des valeurs
Interface web moderne
- Conception réactive: Fonctionne sans problème sur les ordinateurs de bureau, les tablettes et les appareils mobiles
- Style professionnel:Disposition en cartes avec effets de survol et esthétique moderne
- État de la connexion: Indicateurs visuels de l'état de la connexion WebSocket
- Intégration du pied de page: Style cohérent correspondant aux autres applications web de DIYables
- Gestion des états vides: Messages conviviaux lorsque aucune donnée n'est disponible
- Plateforme extensible: Actuellement implémentée pour Arduino Uno R4 WiFi, mais peut être étendue à d'autres plateformes matérielles. Voir DIYables_WebApps_ESP32
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables STEM V4 IoT (Arduino inclus) | |
| 1 | × | Kit de Capteurs DIYables (30 capteurs/écrans) | |
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
Instructions d'installation
Étapes rapides
Suivez ces instructions étape par étape:
- Si c'est la première fois que vous utilisez l'Arduino Uno R4 WiFi/DIYables STEM V4 IoT, reportez-vous au tutoriel sur Arduino UNO R4 - Installation du logiciel..
- Connectez la carte Arduino Uno R4/DIYables STEM V4 IoT à votre ordinateur à l'aide d'un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la carte Arduino Uno R4 appropriée (par exemple, Arduino Uno R4 WiFi) et le port COM.
- Accédez à l'icône Libraries dans la barre de gauche de l'IDE Arduino.
- Recherchez "DIYables WebApps", puis trouvez la bibliothèque DIYables WebApps par DIYables.
- Cliquez sur le bouton Install pour installer la bibliothèque.
- Il vous sera demandé d'installer d'autres dépendances de la bibliothèque.
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances de la bibliothèque.
- Dans l'IDE Arduino, allez dans Fichier Exemples DIYables WebApps WebTable comme exemple, ou copiez le code et collez-le dans l'éditeur de l'IDE Arduino
/*
* 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);
}
Configuration du Wi-Fi
Configurez les identifiants Wi-Fi dans le code en mettant à jour ces lignes :
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Cliquez sur le bouton Téléverser de l'IDE Arduino pour téléverser le code vers l'Arduino UNO R4/DIYables STEM V4 IoT
- Ouvrez le moniteur série
- Vérifiez le résultat dans le moniteur série. Il est affiché ci-dessous
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
- Si vous ne voyez rien, redémarrez la carte Arduino.
Utilisation de l'interface Web
- Ouvrez un navigateur Web sur votre ordinateur ou votre appareil mobile connecté au même réseau Wi‑Fi
- Saisissez l'adresse IP affichée dans le Moniteur série dans le navigateur Web
- Exemple : http://192.168.1.100
- Vous verrez la page d'accueil comme sur l'image ci-dessous :
- Cliquez sur le lien Web Table, vous verrez l’interface utilisateur de l’application Web Table comme ci-dessous :
- Ou vous pouvez également accéder directement à la page en utilisant l'adresse IP suivie de /web-table. Par exemple : http://192.168.1.100/web-table
- Vous verrez l'interface Web Table s'afficher :
- Tableau de données en temps réel: tableau à deux colonnes avec les attributs et leurs valeurs actuelles
- Surlignage intelligent: Codage couleur automatique des valeurs changeantes et stables
- État de la connexion: Indicateur visuel montrant l'état de la connexion WebSocket
- Bouton d’actualisation: Actualisation manuelle des données les plus récentes
- Mises à jour automatiques: Les valeurs se mettent à jour en temps réel via WebSocket
Système de surlignage intelligent
Comment Ça Marche
WebTable dispose d'un système de surlignage avancé qui détecte automatiquement quelles valeurs évoluent au fil du temps, sans nécessiter aucune configuration dans votre code Arduino.
Détection automatique des changements
L'interface web suit automatiquement vos données et fournit un retour visuel :
- Surlignage en rouge: Appliqué à des valeurs qui changent fréquemment (comme les lectures de capteurs, les compteurs, les minuteries)
- Surlignage en bleu: Appliqué à des valeurs qui restent stables (comme les noms d'appareils, les adresses IP, les paramètres de configuration)
- Aucune configuration requise: Le système apprend automatiquement à mesure que votre Arduino envoie des mises à jour
Ce que vous voyez
- Les valeurs qui changent au fil du temps (température, temps de fonctionnement, mesures des capteurs) seront mises en évidence en rouge
- Les informations statiques (nom de l'appareil, SSID WiFi, adresse IP) seront mises en évidence en bleu
- Cela vous aide à identifier rapidement quelles données changent activement par rapport à des informations stables
Avantages clés
- Aucune configuration requise: Utilisez simplement sendValueUpdate() et la surbrillance fonctionne automatiquement
- Apprentissage visuel: Voyez facilement quelles parties de votre système sont actives
- Facile pour les débutants: Fonctionne sans aucune connaissance en programmation web
- Économe en mémoire: Tout le surlignage se fait dans le navigateur web, pas sur votre Arduino
- Mises à jour en temps réel: Le surlignage se met à jour immédiatement lorsque les valeurs changent
Configuration de la structure de la table
La structure du tableau est configurée une seule fois dans la fonction setup() en utilisant la méthode addRow():
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");
}
Mises à jour des valeurs en temps réel
Les valeurs sont mises à jour pendant l'exécution en utilisant la méthode sendValueUpdate() :
Méthode de mise à jour directe (recommandée)
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));
}
Avantages des mises à jour directes
- Économe en mémoire: Pas de stockage de valeur dans la mémoire Arduino
- Temps réel: Mises à jour instantanées de l'interface Web
- Surlignage automatique: L'interface Web détecte automatiquement les changements
- Code simplifié: Pas besoin de gérer le stockage local des valeurs
Explication du code
Composants clés
#include <DIYablesWebApps.h>
// Initialize web server and table page
DIYablesWebAppServer server;
DIYablesWebTablePage tablePage;
Fonction d'initialisation
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();
}
Mises à jour en temps réel dans Loop
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);
}
Fonction de rappel
// 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
}
Fonctions de mise à jour des valeurs
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) + "%");
}
Méthodes de l'API
Méthodes de la classe DIYablesWebTablePage
ajouterLigne(attribut, valeurInitiale)
- Ajoute une nouvelle ligne à la structure de la table
- Paramètres:
- attribute: String - Le nom de l'attribut (colonne de gauche)
- initialValue: String - Valeur initiale (colonne de droite, optionnelle)
- Utilisation: Appelé dans setup() pour configurer la structure de la table
mettreAJourValeur(attribut, valeur)
- Met à jour une valeur par nom d'attribut (stockage local uniquement)
- Paramètres:
- attribute: String - Le nom de l'attribut à mettre à jour
- value: Chaîne - Nouvelle valeur à définir
- Utilisation : Mise à jour des données de la table locale
actualiserValeur(indice, valeur)
- Met à jour une valeur par indice de ligne (stockage local uniquement)
- Paramètres:
- index: int - Indice de ligne (base 0)
- value: String - Nouvelle valeur à définir
- Utilisation : Met à jour les données de la table locale en fonction de la position
envoyerMiseAJourValeur(attribut, valeur)
- Envoie une mise à jour de valeur aux clients Web par nom d'attribut
- Paramètres:
- attribute: String - Le nom de l'attribut à mettre à jour
- value: Chaîne - Nouvelle valeur à envoyer
- Utilisation: mise à jour en temps réel de l'interface Web
envoyerMiseAJour(indice, valeur)
- Envoie une mise à jour de valeur aux clients Web par indice de ligne
- Paramètres:
- index: int - Indice de ligne (base zéro)
- value: Chaîne - Nouvelle valeur à envoyer
- Utilisation: Mise à jour en temps réel de l'interface web par position
envoyerDonneesTableau()
- Envoie l'intégralité des données de la table aux clients Web
- Utilisation: Actualiser l'intégralité de la table sur l'interface Web
viderTable()
- Efface toutes les données de la table et réinitialise le nombre de lignes
- Utilisation : Réinitialiser la structure de la table (rarement nécessaire)
obtenirNombreDeLignes()
- Renvoie le nombre de lignes de la table
- Retourne: int - Nombre actuel de lignes
- Utilisation: Obtenir les informations sur la taille de la table
obtenirAttribut(indice)
- Obtient le nom de l'attribut par indice de ligne
- Paramètres: index: int - Indice de ligne (base zéro)
- Retour: Chaîne - Nom de l'attribut
- Utilisation: Accéder aux informations sur la structure de la table
obtenirValeur(index)
- Obtient la valeur par indice de ligne
- Paramètres: index : int - Indice de ligne (à partir de zéro)
- Retour: Chaîne - Valeur actuelle
- Utilisation: Accéder aux valeurs actuelles de la table
onTableValueRequest(callback)
- Définit la fonction de rappel pour les demandes de données des clients web
- Paramètre: void (*callback)() - Fonction à appeler lorsque des données sont demandées
- Utilisation: Gérer les demandes de données des clients web
Communication WebSocket
Messages du Web vers Arduino
- TABLE:GET_DATA - Demander les données complètes de la table
- TABLE:UPDATE:attribute:value - Mettre à jour la valeur d'un attribut spécifique
Messages d'Arduino vers le Web
- TABLE_DATA:attr1:val1|attr2:val2|... - Envoyer l'ensemble des données de la table
- VALUE_UPDATE:attribute:value - Envoyer une mise à jour d'une seule valeur
Dépannage
Problèmes courants
1. Le tableau n'affiche pas les données
- Problème: Tableau vide ou message « Aucune donnée disponible »
- Cause: La structure du tableau n'est pas configurée ou des problèmes de connexion Wi‑Fi
- Solution:
- Vérifier que setupTableStructure() est appelé dans setup()
- Vérifier l'état de la connexion Wi-Fi
- Cliquez sur le bouton d'actualisation pour demander manuellement des données.
- Vérifiez le moniteur série pour les messages d'erreur
2. Les valeurs ne se mettent pas à jour en temps réel
- Problème: La table affiche d'anciennes valeurs malgré les mises à jour d'Arduino
- Cause: Connexion WebSocket perdue ou les fonctions de mise à jour non appelées
- Solution:
- Vérifier l'indicateur d'état de la connexion sur la page Web
- Actualiser la page web
- Vérifier que sendValueUpdate() est appelée correctement
- Vérifier la stabilité du réseau
3. La mise en évidence ne fonctionne pas
- Problème: Les valeurs n'affichent pas le surlignage rouge ou bleu
- Raison: JavaScript ne détecte pas correctement les changements de valeur
- Solution:
- Actualisez la page Web pour réinitialiser la détection des changements
- Assurez-vous que les valeurs changent réellement (vérifiez le Moniteur série)
- Vider le cache du navigateur si le surlignage semble bloqué
- Les valeurs nécessitent plusieurs mises à jour pour déclencher le système de surlignage
4. Erreur « Non connecté à l'Arduino »
- Problème: Erreur lors du clic sur le bouton de rafraîchissement
- Cause: La connexion WebSocket a échoué
- Solution:
- Vérifier que l'adresse IP de l'Arduino est correcte
- Vérifier si l'Arduino est sur le même réseau Wi‑Fi.
- Redémarrer l'Arduino et actualiser la page web
- Vérifier les paramètres du pare-feu
3. "Non connecté à Arduino" Erreur
- Problème: Erreur lors du clic sur le bouton d’actualisation
- Raison: La connexion WebSocket a échoué
- Solution:
- Vérifiez que l'adresse IP de l'Arduino est correcte
- Vérifier si l'Arduino est sur le même réseau Wi-Fi
- Redémarrez Arduino et actualisez la page web
- Vérifier les paramètres du pare-feu.
4. Les modifications de la structure de la table ne sont pas reflétées
- Problème: Les lignes ajoutées/supprimées n'apparaissent pas sur l'interface Web
- Raison: La structure de la table est configurée uniquement dans setup()
- Solution:
- Redémarrez Arduino pour appliquer les modifications de la structure.
- Utilisez clearTable() et addRow() si des changements dynamiques sont nécessaires
- Actualiser la page Web après le redémarrage de l'Arduino
Astuces de débogage
Activer le débogage série :
void onDataRequested() {
Serial.println("Web client requested table data");
Serial.println("Sending table configuration...");
// Send table configuration to web client
tablePage.sendTableConfig();
}
Surveillance des mises à jour des valeurs:
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");
}
Vérifier l'état de la connexion :
void setup() {
// ... other setup code
setupTableStructure();
Serial.println("Table configured with real-time highlighting");
Serial.println("Values will be highlighted automatically based on changes");
}
Exemples d'utilisation avancée
Surveillance des capteurs avec surlignage intelligent
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");
}
Tableau de bord de l'état du système
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");
}
Mises à jour conditionnelles du statut
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);
}
Intégration de plusieurs applications web
// 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");
}
Applications et cas d'utilisation
Projets éducatifs
- Surveillance des capteurs: Afficher les lectures des capteurs en temps réel avec une mise en évidence automatique des changements
- Tableau de bord de l'état du système Arduino: Afficher les informations système Arduino avec un retour visuel
- Visualisation des données IoT: Présenter des données en temps réel avec une mise en évidence intelligente des valeurs actives par rapport aux valeurs statiques
- Outil d'apprentissage: Démontrer les concepts de visualisation des données et de communication en temps réel
Applications du monde réel
- Surveillance environnementale: Température, humidité, qualité de l'air avec détection de variations
- Domotique: État du système, états des appareils et paramètres opérationnels
- Surveillance industrielle: État des équipements, alertes et indicateurs de performance
- Systèmes agricoles: Conditions du sol, données météorologiques et état d'irrigation
Principaux avantages de l'éducation STEM
- Apprentissage Visuel: Voir quelles données évoluent au fil du temps grâce à la mise en évidence automatique
- Systèmes en Temps Réel: Découvrez la communication WebSocket et les mises à jour de données en temps réel
- Aucune Configuration Nécessaire: Le surlignage intelligent fonctionne automatiquement
- Interface Web Moderne: Découvrez les techniques de développement Web contemporaines
Spécifications techniques
Utilisation de la mémoire (Conception optimisée)
- Mémoire Flash: ~8 Ko pour la fonctionnalité WebTable (y compris la mise en évidence intelligente)
- Utilisation de la SRAM: ~1 Ko pendant le fonctionnement (aucun stockage de valeurs dans l'Arduino)
- Tampon WebSocket: ~1 Ko pour la gestion des messages
- Nombre maximal de lignes: 20 (configurable via MAX_TABLE_ROWS)
- Efficacité mémoire: Les valeurs sont suivies dans le navigateur Web, pas dans la mémoire de l'Arduino
Caractéristiques de performance
- Fréquence de mise à jour: en temps réel via WebSocket (pas de polling)
- Temps de réponse: <50 ms pour les mises à jour des valeurs
- Vitesse de mise en évidence: Rétroaction visuelle instantanée sur les variations de valeur
- Surcharge réseau: ~30-50 octets par mise à jour des valeurs
- Détection des changements: Comparaison automatique des valeurs au fil du temps
Compatibilité
- Cartes Arduino: Arduino Uno R4 WiFi, DIYables STEM V4 IoT
- Navigateurs: Tous les navigateurs modernes prenant en charge WebSocket
- Appareils: Ordinateur de bureau, tablette et appareils mobiles
- Réseaux: Réseaux WiFi avec accès local
Fonctionnalités de surlignage intelligent
- Détection automatique: Identifie quelles valeurs changent au fil du temps sans configuration
- Système à deux niveaux: Rouge pour les valeurs qui changent, bleu pour les valeurs stables
- Aucune configuration: Fonctionne sans aucune configuration manuelle ni codage Arduino
- Économe en mémoire: Tout le suivi est effectué dans le navigateur web, et non sur l'Arduino
- Aspect professionnel: Des animations fluides offrent un retour visuel clair
Résumé
L'exemple WebTable montre comment :
- Créer des affichages de données structurées avec des paires attribut-valeur
- Mettre en œuvre des mises à jour en temps réel des valeurs via une communication WebSocket
- Utiliser un surlignage intelligent qui détecte automatiquement les changements de valeur
- Construire des systèmes économes en mémoire sans stocker les valeurs sur Arduino
- Configurer la structure du tableau une fois dans setup() pour une organisation cohérente
- Gérer les requêtes des clients Web avec des capacités de rafraîchissement automatique des données
- Fournir un retour visuel grâce à des algorithmes intelligents de détection des changements
- Créer des interfaces web réactives pour des applications modernes de surveillance de données
Innovation clé : Mise en évidence intelligente
La fonctionnalité phare de cette implémentation de WebTable est son système de surlignage intelligent qui :
- Apprend automatiquement quelles valeurs changent sans codage en dur
- S'adapte dynamiquement à mesure que les motifs de données évoluent au fil du temps
- Fournit un retour visuel grâce à un codage couleur à deux niveaux
- Fonctionne efficacement sans consommer de mémoire Arduino
- Fonctionne universellement pour tout type de données sans configuration
Cet exemple est parfait pour des projets nécessitant un affichage organisé des données, des tableaux de bord de surveillance en temps réel avec retour visuel, des interfaces d'état système avec détection automatique de changements, et des démonstrations pédagogiques des techniques avancées de visualisation des données dans les applications IoT.