Ejemplo de ESP32 WebTable - Tutorial de la Interfaz de la Tabla de Datos
Vista general
El ejemplo WebTable ofrece una interfaz de tabla de datos de dos columnas basada en la web para mostrar información en tiempo real de tus proyectos ESP32. Diseñado para la plataforma educativa ESP32 con capacidades avanzadas de visualización de datos, resaltado inteligente de cambios de valor y una integración fluida con el ecosistema educativo.
Características clave
Funcionalidad Central
- Tabla de datos de dos columnas: pares de atributos y valores limpios para una visualización de datos organizada
- Actualizaciones de valores en tiempo real: recarga instantánea de datos basada en WebSocket sin recargar la página
- Diseño eficiente en memoria: Sin almacenamiento de valores en la memoria del ESP32; todo el seguimiento se realiza en la interfaz web
- Configuración dinámica: Configurar la estructura de la tabla una vez en la función setup() del ESP32
- Controles interactivos: botón de actualización para solicitudes de datos manuales y capacidad de reconexión automática
Sistema de Resaltado Inteligente
- Detección inteligente de cambios: Detecta automáticamente qué valores cambian realmente a lo largo del tiempo
- Seguimiento automático de valores: Compara automáticamente los valores actuales con los valores anteriores
- Resaltado de dos niveles:
- Resaltado en rojo: para valores que están cambiando activamente
- Resaltado en azul: Para valores que se mantienen estables a lo largo del tiempo
- Sin necesidad de configuración: El sistema aprende automáticamente qué valores cambian sin necesidad de configuración
- Retroalimentación visual: Las animaciones suaves proporcionan una retroalimentación visual clara para las actualizaciones de valores
Interfaz Web Moderna
- Diseño adaptable: Funciona sin problemas en computadoras de escritorio, tabletas y dispositivos móviles
- Estilo profesional: Diseño en tarjetas con efectos hover y estética moderna
- Estado de la conexión: Indicadores visuales del estado de la conexión WebSocket
- Integración del pie de página: Con un estilo consistente que se ajuste al diseño de otras aplicaciones web de DIYables
- Manejo del estado vacío: Mensajes amigables para el usuario cuando no hay datos disponibles
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.
Instrucciones de configuración
Pasos R\u00e1pidos
Sigue estas instrucciones paso a paso:
- Si es la primera vez que usa el ESP32, consulte el tutorial sobre configurar el entorno para ESP32 en el IDE de Arduino.
- Conecte la placa ESP32 a su computadora usando un cable USB.
- Inicie el IDE de Arduino en su computadora.
- Seleccione la placa ESP32 adecuada (p. ej. ESP32 Dev Module) y el puerto COM.
- Vaya al icono Bibliotecas en la barra izquierda del IDE de Arduino.
- Busque "DIYables ESP32 WebApps", luego encuentre la Biblioteca DIYables ESP32 WebApps de DIYables
- Haga clic en el botón Instalar para instalar la biblioteca.
- Se le pedirá que instale algunas otras dependencias de la biblioteca.
- Haga clic en Instalar Todo para instalar todas las dependencias de la biblioteca.
- En el IDE de Arduino, vaya a Archivo Ejemplos DIYables ESP32 WebApps WebTable ejemplo, o copie el código y péguelo en el editor del IDE de 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);
}
Configuración de Wi-Fi
Configura las credenciales de WiFi en el código actualizando estas líneas:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Haz clic en el botón Subir en el IDE de Arduino para subir el código al ESP32.
- Abre el Monitor Serial.
- Echa un vistazo al resultado en el Monitor Serial. Se ve como lo que se muestra a continuación.
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 no ves nada, reinicia la placa ESP32.
Usando la interfaz web
- Abre un navegador web en tu computadora o dispositivo móvil conectado a la misma red Wi‑Fi.
- Escribe la dirección IP que se muestra en el Monitor Serial en el navegador web.
- Ejemplo: http://192.168.1.100
- Verás la página de inicio como en la imagen de abajo:
- Haz clic en el enlace Web Table; verás la interfaz de usuario de la aplicación Web Table tal como se muestra a continuación:
- O también puedes acceder a la página directamente mediante la dirección IP, seguida de /web-table. Por ejemplo: http://192.168.1.100/web-table
- Verás la interfaz de Web Table que muestra:
- Tabla de datos en tiempo real: Tabla de dos columnas con atributos y sus valores actuales
- Resaltado inteligente: Codificación por colores automática de valores que cambian frente a valores estables
- Estado de la conexión: Indicador visual que muestra el estado de la conexión WebSocket
- Botón de Actualización: Capacidad de actualizar manualmente los datos más recientes
- Actualizaciones automáticas: Los valores se actualizan en tiempo real a través de WebSocket
Sistema de Resaltado Inteligente
Cómo funciona
WebTable cuenta con un sistema de resaltado avanzado que detecta automáticamente qué valores cambian con el tiempo, sin necesidad de ninguna configuración en tu código ESP32.
Detección automática de cambios
La interfaz web rastrea automáticamente tus datos y proporciona retroalimentación visual:
- Resaltado en rojo: Aplicado a valores que cambian con frecuencia (como las lecturas de sensores, contadores, temporizadores)
- Resaltado en azul: Aplicado a valores que se mantienen estables (como nombres de dispositivos, direcciones IP, configuraciones)
- No se requiere configuración: El sistema aprende automáticamente a medida que tu ESP32 envía actualizaciones
Lo que ves
- Los valores que cambian con el tiempo (temperatura, tiempo de actividad, lecturas de sensores) se resaltarán en rojo
- La información estática (nombre del dispositivo, SSID de WiFi, dirección IP) se resaltará en azul
- Esto te ayuda a identificar rápidamente qué datos están cambiando activamente frente a la información estable
Beneficios clave
- Sin configuración necesaria: Simplemente usa sendValueUpdate() y el resaltado funciona automáticamente
- Aprendizaje visual: Ve fácilmente qué partes de tu sistema están activas
- Amigable para principiantes: Funciona sin ningún conocimiento de programación web
- Eficiente en memoria: Todo el resaltado ocurre en el navegador web, no en tu Arduino
- Actualizaciones en tiempo real: El resaltado cambia de inmediato a medida que los valores se actualizan
Configuración de la estructura de la tabla
La estructura de la tabla se configura una sola vez en la función setup() utilizando el método 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");
}
Actualizaciones de valor en tiempo real
Los valores se actualizan durante la ejecución mediante el método sendValueUpdate():
Método de Actualización Directa (Recomendado)
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));
}
Beneficios de las actualizaciones directas
- Eficiente en memoria: Sin almacenamiento de valores en la memoria del ESP32
- En tiempo real: Actualizaciones instantáneas en la interfaz web
- Resaltado automático: La interfaz web detecta automáticamente los cambios
- Código simplificado: No es necesario gestionar el almacenamiento local de valores
Explicación del código
Componentes clave
#include <DIYablesWebApps.h>
// Initialize web server and table page
DIYablesWebAppServer server;
DIYablesWebTablePage tablePage;
Función de Configuración
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();
}
Actualizaciones en tiempo real en bucle
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);
}
Función de devolución de llamada
// 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
}
Funciones de actualización de valores
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étodos de la API
Métodos de la clase DIYablesWebTablePage
agregarFila(atributo, valorInicial)
- Agrega una nueva fila a la estructura de la tabla
- Parámetros:
- attribute: String - El nombre del atributo (columna izquierda)
- initialValue: String - Valor inicial (columna derecha, opcional)
- Uso: Llamado en setup() para configurar la estructura de la tabla
actualizarValor(atributo, valor)
- Actualiza un valor por nombre de atributo (solo almacenamiento local)
- Parámetros:
- attribute: String - El nombre del atributo a actualizar
- valor: String - Nuevo valor para establecer
- Uso: Actualiza los datos de la tabla local
actualizarValor(indice, valor)
- Actualiza un valor por índice de fila (solo almacenamiento local)
- Parámetros:
- index: int - Índice de fila (base 0)
- value: Cadena - Nuevo valor a establecer
- Uso: Actualiza los datos de la tabla local por posición
enviarActualizacionDeValor(atributo, valor)
- Envía la actualización de valor a los clientes web por nombre de atributo
- Parámetros:
- attribute: String - El nombre del atributo a actualizar
- value: Cadena - Nuevo valor para enviar
- Uso: Actualización en tiempo real de la interfaz web
enviarActualizacionDeValor(indice, valor)
- Envía actualizaciones de valor a los clientes web por índice de fila
- Parámetros:
- índice: int - Índice de fila (base 0)
- value: Cadena - Nuevo valor para enviar
- Uso: Actualización en tiempo real de la interfaz web por posición
enviarDatosDeTabla()
- Envía los datos completos de la tabla a los clientes web
- Uso: Refresca toda la tabla en la interfaz web
limpiarTabla()
- Borra todos los datos de la tabla y restablece el conteo de filas
- Uso: Restablece la estructura de la tabla (rara vez necesaria)
obtenerConteoDeFilas()
- Devuelve el número de filas de la tabla
- Devuelve: int - Número actual de filas
- Uso: Obtener información sobre el tamaño de la tabla
obtenerAtributo(index)
- Obtiene el nombre del atributo por índice de fila
- Parámetros: index: int - Índice de fila (base 0)
- Devuelve: String - Nombre del atributo
- Uso: Acceder a la información de la estructura de la tabla
obtenerValor(indice)
- Obtiene el valor por índice de fila
- Parámetros: index: int - Índice de fila (base 0)
- Devuelve: Cadena - Valor actual
- Uso: Acceda a los valores actuales de la tabla
onTableValueRequest(callback)
- Establece la función de devolución de llamada para las solicitudes de datos de clientes web
- Parámetro: void (*callback)() - Función a llamar cuando se soliciten datos
- Uso: Manejar las solicitudes de datos de clientes web
Comunicación WebSocket
Mensajes desde la Web a Arduino
- TABLE:GET_DATA - Solicitar datos completos de la tabla
- TABLE:UPDATE:attribute:value - Actualizar el valor de un atributo específico
Mensajes desde ESP32 hacia la Web
- TABLE_DATA:attr1:val1|attr2:val2|... - Enviar datos completos de la tabla
- VALUE_UPDATE:attribute:value - Enviar una actualización de un solo valor
Solución de problemas
Problemas comunes
- La tabla no muestra datos
- Problema: Tabla vacía o mensaje 'No hay datos disponibles'
- Causa: La estructura de la tabla no está configurada o hay problemas de conexión Wi-Fi
- Solución:
- Verificar que setupTableStructure() se llame en setup()
- Verificar el estado de la conexión WiFi
- Haz clic en el botón de actualizar para solicitar datos manualmente.
- Revisa el Monitor Serial para mensajes de error
2. Valores que no se actualizan en tiempo real
- Problema: La tabla muestra valores antiguos a pesar de las actualizaciones del ESP32
- Causa: La conexión WebSocket se perdió o no se llamaron las funciones de actualización
- Solución:
- Verificar el indicador de estado de la conexión en la página web
- Actualiza la página web
- Verificar que se llame correctamente a sendValueUpdate()
- Verificar la estabilidad de la red
- El resaltado no funciona
- Problema: Los valores no muestran el resaltado en rojo o azul
- Causa: JavaScript no detecta correctamente los cambios de valor
- Solución:
- Actualiza la página web para restablecer la detección de cambios
- Asegúrate de que los valores estén cambiando realmente (consulta el Monitor Serial)
- Borrar la caché del navegador si el resaltado parece estar atascado
- Los valores requieren múltiples actualizaciones para activar el sistema de resaltado
4. "No está conectado a Arduino" Error
- Problema: Error al hacer clic en el botón de actualizar
- Causa: La conexión WebSocket falló
- Solución:
- Verificar que la dirección IP del ESP32 sea correcta
- Verificar si el ESP32 está en la misma red Wi-Fi
- Reiniciar ESP32 y actualizar la página web
- Verifica la configuración del cortafuegos
- "No está conectado a Arduino" Error
- Problema: Error al hacer clic en el botón de actualizar
- Causa: La conexión WebSocket falló
- Solución:
- Verificar que la dirección IP del ESP32 es correcta.
- Verificar si el ESP32 está en la misma red Wi-Fi
- Reiniciar ESP32 y actualizar la página web
- Verificar la configuración del cortafuegos.
4. Cambios en la estructura de la tabla no se reflejan
- Problema: Las filas agregadas/eliminadas no aparecen en la interfaz web
- Causa: La estructura de la tabla está configurada solo en setup()
- Solución:
- Reiniciar el ESP32 para aplicar cambios en la estructura
- Utiliza clearTable() y addRow() si se requieren cambios dinámicos
- Actualizar la página web tras el reinicio del ESP32
Consejos de depuración
Activar depuración serial:
void onDataRequested() {
Serial.println("Web client requested table data");
Serial.println("Sending table configuration...");
// Send table configuration to web client
tablePage.sendTableConfig();
}
Actualizaciones de valores del monitor:
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");
}
Verificar estado de la conexión:
void setup() {
// ... other setup code
setupTableStructure();
Serial.println("Table configured with real-time highlighting");
Serial.println("Values will be highlighted automatically based on changes");
}
Ejemplos de uso avanzado
Monitoreo de sensores con resaltado inteligente
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");
}
Panel de estado del sistema
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");
}
Actualizaciones de estado condicional
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);
}
Integración de múltiples aplicaciones 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");
}
Aplicaciones y Casos de Uso
Proyectos Educativos
- Monitoreo de sensores: Mostrar lecturas de sensores en tiempo real con resaltado automático de cambios
- Panel de estado del sistema: Mostrar información del sistema ESP32 con retroalimentación visual
- Visualización de datos de IoT: Presentar datos en tiempo real con resaltado inteligente para valores activos frente a valores estáticos
- Herramienta de aprendizaje: Demostrar conceptos de visualización de datos y comunicación en tiempo real
Aplicaciones del mundo real
- Monitoreo Ambiental: Temperatura, humedad, calidad del aire con detección de cambios
- Automatización del hogar: Estado del sistema, estados de los dispositivos y parámetros operativos
- Monitoreo Industrial: Estado del equipo, alertas y métricas de rendimiento
- Sistemas Agrícolas: Condiciones del suelo, datos meteorológicos y estado de riego
Principales beneficios de la educación STEM
- Aprendizaje Visual: Observa qué datos cambian con el tiempo mediante el resaltado automático
- Sistemas en tiempo real: Experimenta la comunicación vía WebSocket y actualizaciones de datos en tiempo real
- No se necesita configuración: El resaltado inteligente funciona automáticamente
- Interfaz Web Moderna: Aprende técnicas modernas de desarrollo web
Especificaciones técnicas
Uso de Memoria (Diseño Optimizado)
- Memoria Flash: ~8KB para la funcionalidad de WebTable (incluyendo resaltado inteligente)
- Uso de SRAM: ~1KB durante la operación (sin almacenamiento de valores en Arduino)
- Buffer de WebSocket: ~1KB para el manejo de mensajes
- Filas Máximas: 20 (configurable mediante MAX_TABLE_ROWS)
- Eficiencia de Memoria: Los valores se rastrean en el navegador web, no en la memoria del ESP32
Características de rendimiento
- Frecuencia de actualización: Tiempo real mediante WebSocket (sin sondeo)
- Tiempo de respuesta: <50 ms para actualizaciones de valores
- Velocidad de resaltado: Retroalimentación visual instantánea ante cambios de valor
- Sobrecarga de red: ~30-50 bytes por actualización de valor
- Detección de cambios: Comparación automática de valores a lo largo del tiempo
Características de Resaltado Inteligente
- Detección automática: Identifica qué valores cambian con el tiempo sin necesidad de configuración
- Sistema de dos niveles: Rojo para valores que cambian, azul para valores estables
- Sin configuración: Funciona sin ninguna configuración manual o codificación ESP32
- Uso eficiente de la memoria: Todo el seguimiento se realiza en el navegador web, no en Arduino
- Apariencia profesional: Animaciones suaves proporcionan una retroalimentación visual clara
Resumen
El ejemplo de WebTable demuestra cómo:
- Crear visualizaciones de datos estructurados con pares atributo-valor
- Implementar actualizaciones de valores en tiempo real mediante WebSocket
- Utilizar un resaltado inteligente que detecte automáticamente cambios de valor
- Construir sistemas eficientes en memoria sin almacenar valores en Arduino
- Configurar la estructura de la tabla una vez en setup() para una organización consistente
- Manejar las solicitudes de clientes web con capacidades de actualización automática de datos
- Proporcionar retroalimentación visual a través de algoritmos inteligentes de detección de cambios
- Crear interfaces web responsivas para aplicaciones modernas de monitoreo de datos
Innovación clave: Resaltado inteligente
La característica destacada de esta implementación de WebTable es su sistema de resaltado inteligente que:
- Aprende automáticamente qué valores cambian sin codificación fija
- Se adapta dinámicamente a medida que los patrones de datos cambian con el tiempo
- Proporciona retroalimentación visual mediante una codificación de color de dos niveles
- Funciona de forma eficiente sin consumir memoria del ESP32
- Funciona de forma universal para cualquier tipo de datos sin configuración
Este ejemplo es perfecto para proyectos que requieren una visualización de datos organizada, tableros de monitoreo en tiempo real con retroalimentación visual, interfaces de estado del sistema con detección automática de cambios y demostraciones educativas de técnicas avanzadas de visualización de datos en aplicaciones de IoT.