Exemple ESP32 WebTable - Tutoriel sur l'interface du tableau de données
Vue d'ensemble
L'exemple WebTable offre 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 ESP32. Conçu pour la plateforme éducative ESP32 avec des capacités avancées de visualisation des données, une mise en évidence intelligente des variations de valeurs et une intégration transparente avec l'écosystème éducatif.
Principales fonctionnalités
Fonctionnalité centrale
- Table de données à deux colonnes: paires attribut-valeur propres pour un affichage des 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: Aucun stockage des valeurs dans la mémoire de l'ESP32 — tout le suivi se fait dans l'interface Web
- Configuration dynamique: Configurer la structure du tableau une fois dans la fonction setup() de l'ESP32
- Contrôles interactifs: Bouton d'actualisation pour les demandes de données manuelles et la 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 par rapport aux valeurs précédentes
- Mise en évidence à deux niveaux:
- Mise en évidence en rouge : pour les valeurs qui changent activement
- Surlignage bleu: 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 pour les mises à jour des valeurs
Interface Web moderne
- Conception réactive: Fonctionne sans faille sur les ordinateurs de bureau, les tablettes et les appareils mobiles
- Style professionnel: Disposition en cartes avec des effets de survol et une 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 de l’état vide: Messages conviviaux lorsqu'aucune donnée n’est disponible
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables ESP32 (ESP32 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'ESP32, reportez-vous au tutoriel sur Installation du logiciel ESP32..
- Connectez la carte ESP32 à votre ordinateur à l'aide d'un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la carte ESP32 appropriée (par exemple ESP32 Dev Module) et le port COM.
- Accédez à l'icône Libraries dans la barre de gauche de l'IDE Arduino.
- Recherchez "DIYables ESP32 WebApps", puis trouvez la bibliothèque DIYables ESP32 WebApps par DIYables
- Cliquez sur le bouton Install pour installer la bibliothèque.
- On vous demandera d'installer d'autres dépendances de bibliothèque
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances de bibliothèque.
- Dans l'IDE Arduino, allez dans Fichier Exemples DIYables ESP32 WebApps WebTable exemple, ou copiez le code et collez-le dans l'éditeur de l'IDE Arduino
/*
* 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);
}
Configuration Wi-Fi
Configurez les informations d'identification 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 Upload dans l'IDE Arduino pour téléverser le code sur l'ESP32
- Ouvrez le moniteur série
- Vérifiez le résultat sur le moniteur série. Cela ressemble à ce qui suit
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 ESP32.
Utilisation de l'interface Web
- Ouvrez un navigateur web sur votre ordinateur ou 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 à la page directement par une adresse IP suivie de /web-table. Par exemple : http://192.168.1.100/web-table
- Vous verrez l'interface Web Table affichant :
- Tableau de données en temps réel: tableau à deux colonnes présentant les attributs et leurs valeurs actuelles
- Mise en évidence intelligente : codage couleur automatique des valeurs qui changent et des valeurs stables
- État de la connexion: Indicateur visuel montrant l'état de la connexion WebSocket
- Bouton de rafraîchissement : Capacité de rafraîchissement manuel 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 cela fonctionne
Le WebTable est doté d'un système de surlignage avancé qui détecte automatiquement quelles valeurs changent au fil du temps sans nécessiter de configuration dans votre code ESP32.
Détection automatique des modifications
L'interface Web suit automatiquement vos données et fournit des retours visuels :
- Surlignage rouge: Appliqué aux valeurs qui changent fréquemment (comme les lectures de capteurs, les compteurs, les minuteries)
- Surlignage bleu: Appliqué aux valeurs qui restent stables (comme les noms d'appareils, les adresses IP, les paramètres de configuration)
- Aucun paramétrage nécessaire: Le système apprend automatiquement à mesure que votre ESP32 envoie des mises à jour
Ce que vous voyez
- Les valeurs qui évoluent au fil du temps (température, temps de fonctionnement, lectures de 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 aux informations stables
Avantages clés
- Aucune configuration requise: Utilisez simplement sendValueUpdate() et la mise en évidence fonctionne automatiquement
- Apprentissage visuel: Voyez facilement quelles parties de votre système sont actives
- Convient aux 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 change immédiatement à mesure que les valeurs se mettent à jour
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", "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");
}
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: Aucune valeur n'est stockée dans la mémoire de l'ESP32
- Temps réel: Des 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 de configuration
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 la boucle
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, facultatif)
- Utilisation: Appelé dans setup() pour configurer la structure de la table
mettreAJourLaValeur(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: Met à jour les données de la table locale
mettreAJourLaValeur(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 selon la position
envoyerMiseAJourValeur(attribut, valeur)
- Envoie la mise à jour de la valeur aux clients web par nom d'attribut
- Paramètres:
- attribute: chaîne - Le nom de l'attribut à mettre à jour
- valeur: chaîne - Nouvelle valeur à envoyer
- Utilisation: mise à jour en temps réel de l'interface web
envoyerMiseAJourValeur(index, valeur)
- Envoie la mise à jour de la valeur aux clients Web par indice de ligne
- Paramètres:
- index: int - Indice de ligne (à partir de zéro)
- value: String - Nouvelle valeur à envoyer
- Utilisation: Mise à jour en temps réel de l'interface web par position
envoyerDonnéesTableau()
- Envoie les données complètes de la table aux clients web
- Utilisation: Actualiser l'intégralité de la table sur l'interface web
viderTable()
- Supprime 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
- Renvoie: int - Nombre actuel de lignes
- Utilisation: Obtenir des informations sur la taille de la table
obtenirAttribut(index)
- Obtient le nom de l'attribut à partir de l'indice de ligne
- Paramètres : index : int - Indice de ligne (base 0)
- Renvoie : String - Nom de l'attribut
- Utilisation : Accéder aux informations sur la structure de la table
obtenirValeur(index)
- Récupère la valeur par indice de ligne
- Paramètres : index : int - Indice de ligne (base zéro)
- Renvoie : Chaîne de caractères - Valeur actuelle
- Utilisation : Accéder aux valeurs actuelles de la table
surTableValeurDemande(callback)
- Définit la fonction de rappel pour les requêtes 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 de l'ESP32 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 valeur unique
Dépannage
Problèmes courants
- Le tableau n'affiche pas les données
- Problème : tableau vide ou message « Aucune donnée disponible »
- Raison : La structure du tableau n'est pas configurée ou des problèmes de connexion Wi‑Fi
- Solution:
- Vérifier que setupTableStructure() est appelée 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: Le tableau affiche des valeurs anciennes malgré les mises à jour ESP32
- Cause: La connexion WebSocket est perdue ou les fonctions de mise à jour n'ont pas été appelées
- Solution:
- Vérifiez 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 de surlignage en rouge ou en bleu
- Cause: JavaScript ne détecte pas correctement les changements de valeurs
- Solution:
- Actualiser la page web pour réinitialiser la détection des modifications
- Assurez-vous que les valeurs changent réellement (vérifiez le moniteur série)
- Videz 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. "Non connecté à l'Arduino" Erreur
- Problème: Erreur lors du clic sur le bouton d'actualisation
- Cause: La connexion WebSocket a échoué
- Solution:
- Vérifier que l'adresse IP de l'ESP32 est correcte.
- Vérifier si l'ESP32 est sur le même réseau Wi-Fi
- Redémarrer l'ESP32 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
- Cause: La connexion WebSocket a échoué
- Solution:
- Vérifiez que l'adresse IP de l'ESP32 est correcte.
- Vérifier si l'ESP32 est sur le même réseau Wi-Fi
- Redémarrer l'ESP32 et actualiser la page Web
- Vérifier les paramètres du pare-feu
- 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émarrer l'ESP32 pour appliquer les modifications de la structure
- Utilisez clearTable() et addRow() si des modifications dynamiques sont nécessaires.
- Rafraîchir la page web après le redémarrage de l'ESP32
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();
}
Mises à jour des valeurs du moniteur:
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'utilisations avancées
Surveillance des capteurs avec une mise en évidence intelligente
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 d'état conditionnelles
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: Affichage des lectures des capteurs en temps réel avec mise en évidence automatique des variations
- Tableau de bord de l'état du système: Affichage des informations système ESP32 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 pédagogique: 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 direct
- Aucune configuration nécessaire: La mise en évidence intelligente fonctionne automatiquement
- Interface Web moderne: Apprenez les techniques modernes de développement web
Spécifications techniques
Utilisation de la mémoire (Conception optimisée)
- Mémoire Flash: environ 8 Ko pour la fonctionnalité WebTable (y compris la mise en évidence intelligente)
- Utilisation de la SRAM: environ 1 Ko pendant le fonctionnement (aucune valeur stockée dans l'Arduino)
- Tampon WebSocket: environ 1 Ko pour la gestion des messages
- Nombre maximum de lignes: 20 (configurable via MAX_TABLE_ROWS)
- Efficacité mémoire: les valeurs sont suivies dans le navigateur web, et non dans la mémoire ESP32
Caractéristiques de performance
- Fréquence de mise à jour: Temps réel via WebSocket (sans 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 changements de valeur
- Surcharge réseau: ~30-50 octets par mise à jour de valeur
- Détection de changement: Comparaison automatique des valeurs au fil du temps
Fonctionnalités de mise en évidence intelligentes
- Détection automatique: Identifie quelles valeurs évoluent au fil du temps sans aucune configuration
- Système à deux niveaux: Rouge pour les valeurs qui changent, bleu pour les valeurs stables
- Aucune configuration: Fonctionne sans configuration manuelle ni programmation ESP32
- É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 de valeurs en temps réel via une communication WebSocket
- Utiliser un surlignage intelligent qui détecte automatiquement les changements de valeur
- Concevoir des systèmes économes en mémoire sans stocker les valeurs dans une carte Arduino
- Configurer la structure du tableau une seule 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 les applications modernes de surveillance des 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 aucun 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 la mémoire de l'ESP32
- Fonctionne universellement pour tout type de données sans configuration
Cet exemple est parfait pour les projets nécessitant un affichage de données organisé, des tableaux de bord de surveillance en temps réel avec un retour visuel, des interfaces d'état système avec détection automatique de changements, et des démonstrations éducatives de techniques avancées de visualisation des données dans les applications IoT.