Ejemplo de Arduino WebTable - Tutorial de la Interfaz de la Tabla de Datos
Resumen
El ejemplo de WebTable proporciona una interfaz de tabla de datos de dos columnas basada en la web para mostrar información en tiempo real de tus proyectos de Arduino. Diseñado para Arduino Uno R4 WiFi y DIYables STEM V4 IoT, una plataforma educativa 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 atributo-valor limpios para una visualización de datos organizada
- Actualizaciones de valores en tiempo real: Actualización instantánea de datos basada en WebSocket sin recargar la página
- Diseño eficiente en memoria: Sin almacenamiento de valores en la memoria de Arduino, todo el seguimiento en la interfaz web
- Configuración dinámica: Configurar la estructura de la tabla una vez en la función setup() de Arduino
- 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
- No se requiere 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 responsivo: Funciona sin problemas en computadoras de escritorio, tabletas y dispositivos móviles
- Estilo profesional: disposición en tarjetas con efectos al pasar el cursor 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: estilo coherente que coincide con otras aplicaciones web de DIYables
- Manejo del estado vacío: Mensajes fáciles de entender para el usuario cuando no hay datos disponibles
- Plataforma extensible: Actualmente implementada para Arduino Uno R4 WiFi, pero puede extenderse a otras plataformas de hardware. Ver DIYables_WebApps_ESP32
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino 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
Siga estas instrucciones paso a paso:
- Si es la primera vez que usas Arduino Uno R4 WiFi/DIYables STEM V4 IoT, consulta el tutorial sobre configurar el entorno para Arduino Uno R4 WiFi/DIYables STEM V4 IoT en el IDE de Arduino.
- Conecta la placa Arduino Uno R4/DIYables STEM V4 IoT a tu computadora usando un cable USB.
- Abre el IDE de Arduino en tu computadora.
- Selecciona la placa Arduino Uno R4 adecuada (p. ej., Arduino Uno R4 WiFi) y el puerto COM.
- Navega hasta el icono Bibliotecas en la barra izquierda del IDE de Arduino.
- Busca "DIYables WebApps", luego localiza la biblioteca DIYables WebApps de DIYables.
- Haz clic en el botón Instalar para instalar la biblioteca.
- Se le pedirá instalar algunas otras dependencias de la biblioteca.
- Haga clic en el botón Instalar todo para instalar todas las dependencias de la biblioteca.
- En el IDE de Arduino, ve a Archivo Ejemplos DIYables WebApps WebTable ejemplo, o copia el código y pégalo en el editor del IDE de 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);
}
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 Arduino UNO R4/DIYables STEM V4 IoT
- Abre el Monitor Serial
- Consulta el resultado en el Monitor Serial. 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 Arduino.
Usando la interfaz web
- Abra un navegador web en su computadora o dispositivo móvil conectado a la misma red Wi‑Fi
- Escriba la dirección IP que se muestra en el Monitor de serie en el navegador
- Ejemplo: http://192.168.1.100
- Verá la página de inicio como se muestra en la imagen a continuación:
- Haz clic en el enlace de Web Table; verás la interfaz de usuario de la aplicación Web Table, como la que aparece 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 se muestra:
- Tabla de datos en tiempo real: una tabla de dos columnas con atributos y sus valores actuales
- Resaltado inteligente: Codificación automática por colores 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 actualización manual para 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 configurar nada en tu código de Arduino.
Detección automática de cambios
La interfaz web rastrea automáticamente tus datos y proporciona retroalimentación visual:
- Resaltado en rojo: Se aplica a valores que cambian con frecuencia (como lecturas de sensores, contadores, temporizadores)
- Resaltado en azul: Se aplica a valores que permanecen estables (como nombres de dispositivos, direcciones IP, configuraciones)
- Sin configuración necesaria: El sistema aprende automáticamente a medida que tu Arduino envía actualizaciones
Lo que ves
- 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 necesidad de configuración: Simplemente use sendValueUpdate() y el resaltado funciona automáticamente
- Visualización: 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", "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");
}
Actualizaciones de valor en tiempo real
Los valores se actualizan en tiempo de 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
- Memoria eficiente: Sin almacenamiento de valores en la memoria de Arduino
- Tiempo real: Actualizaciones instantáneas en la interfaz web
- Resaltado automático: La interfaz web detecta los cambios automáticamente
- 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
addRow(atributo, valorInicial)
- Añade 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: Se llama 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
- value: 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: entero - Índice de fila (empezando desde 0)
- value: String - Nuevo valor para establecer
- Uso: Actualiza los datos de la tabla local por posición
enviarActualizacionDeValor(atributo, valor)
- Envía actualizaciones de valor a los clientes web por nombre de atributo
- Parámetros:
- attribute: Cadena - 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 una actualización de valor a los clientes web por índice de fila
- Parámetros:
- index: int - Índice de fila (base cero)
- value: String - Nuevo valor para enviar
- Uso: Actualización en tiempo real de la interfaz web por posición
enviarTablaDatos()
- Envía todos los datos de la tabla a los clientes web
- Uso: Actualiza toda la tabla en la interfaz web
limpiarTabla()
- Borra todos los datos de la tabla y restablece el número de filas
- Uso: Restablecer la estructura de la tabla (rara vez es necesario)
obtenerConteoDeFilas()
- Devuelve el número de filas en la tabla
- Devuelve: int - Conteo actual de filas
- Uso: Obtener información sobre el tamaño de la tabla
obtenerAtributo(indice)
- 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 valor por índice de fila
- Parámetros: index: int - Índice de fila (base 0)
- Devuelve: String - Valor actual
- Uso: Acceder a los valores actuales de la tabla
onTableValueRequest(callback)
- Configura la función de devolución de llamada para las solicitudes de datos de los clientes web
- Parámetro: void (*callback)() - Función a llamar cuando se solicitan 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 de Arduino a la Web
- TABLE_DATA:attr1:val1|attr2:val2|... - Enviar los 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 WiFi
- Solución:
- Verifica que se llame a setupTableStructure() en setup()
- Verificar el estado de la conexión WiFi
- Haz clic en el botón de actualizar para solicitar datos manualmente
- Ver el Monitor Serial para mensajes de error
2. Los valores no se actualizan en tiempo real
- Problema: La tabla muestra valores antiguos a pesar de las actualizaciones de Arduino
- 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
3. El resaltado no funciona
- Problema: Los valores no muestran resaltado en rojo ni en azul
- Causa: JavaScript no detecta correctamente los cambios de valor
- Solución:
- Actualiza la página para restablecer la detección de cambios
- Asegúrate de que los valores realmente estén cambiando (ver Monitor Serial)
- Borrar la caché del navegador si el resaltado parece estar atascado
- Los valores necesitan múltiples actualizaciones para activar el sistema de resaltado.
- "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:
- Verifique que la dirección IP de Arduino sea correcta.
- Verificar si Arduino está en la misma red Wi-Fi
- Reinicia Arduino y actualiza la página web
- Verificar la configuración del cortafuegos
3. "No conectado al Arduino" Error
- Problema: Error al hacer clic en el botón de actualizar
- Causa: La conexión WebSocket falló
- Solución:
- Verifique que la dirección IP de Arduino sea correcta
- Verificar si Arduino está en la misma red WiFi
- Reinicia Arduino y actualiza la página web
- Verificar la configuración del cortafuegos
- Cambios en la estructura de la tabla no se reflejan
- Problema: Las filas añadidas/eliminadas no aparecen en la interfaz web
- Causa: La estructura de la tabla está configurada solo en setup().
- Solución:
- Reinicia Arduino para aplicar cambios en la estructura.
- Usa clearTable() y addRow() si se requieren cambios dinámicos
- Actualizar la página web después de reiniciar Arduino
Consejos de depuración
Habilitar la 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 el 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 Avanzados
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: Muestra lecturas de sensores en tiempo real con resaltado automático de cambios.
- Panel de estado del sistema: Muestra información del sistema Arduino con retroalimentación visual.
- Visualización de datos de IoT: Presenta datos en tiempo real con resaltado inteligente para valores activos frente a valores estáticos.
- Herramienta de aprendizaje: Demuestra 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 de los equipos, 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: Vea qué datos cambian a lo largo del tiempo mediante el resaltado automático
- Sistemas en tiempo real: Experimente la comunicación WebSocket y actualizaciones de datos en tiempo real
- Sin necesidad de configuración: El resaltado inteligente funciona automáticamente
- Interfaz web moderna: Aprenda técnicas contemporáneas 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 (no se almacena ningún valor en Arduino)
- Buffer de WebSocket: ~1KB para el manejo de mensajes
- Filas máximas: 20 (configurable vía MAX_TABLE_ROWS)
- Eficiencia de memoria: Los valores se rastrean en el navegador web, no en la memoria de Arduino
Características de rendimiento
- Frecuencia de actualización: En tiempo real a través de WebSocket (sin sondeo)
- Tiempo de respuesta: <50 ms para las actualizaciones de valores
- Rapidez de resaltado: retroalimentación visual instantánea ante cambios de valor
- Sobrecarga de red: aproximadamente 30-50 bytes por actualización de valor
- Detección de cambios: comparación automática de valores a lo largo del tiempo
Compatibilidad
- Placas Arduino: Arduino Uno R4 WiFi, DIYables STEM V4 IoT
- Navegadores: Todos los navegadores modernos con soporte para WebSocket
- Dispositivos: Dispositivos de escritorio, tabletas y dispositivos móviles
- Redes: redes WiFi con acceso local
Características de resaltado inteligente
- Detección automática: Identifica qué valores cambian con el tiempo sin ninguna configuración
- Sistema de dos niveles: Rojo para valores que cambian, azul para valores estables
- Sin configuración: Funciona sin ninguna configuración manual ni programación en Arduino
- 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 paneles de datos estructurados con pares atributo-valor
- Implementar actualizaciones de valores en tiempo real mediante WebSocket
- Utilizar resaltado inteligente que detecte automáticamente cambios de valor
- Construir sistemas eficientes en memoria sin almacenar valores en la memoria de Arduino
- Configurar la estructura de la tabla una vez en setup() para una organización consistente
- Gestionar 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 sobresaliente 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
- Opera de manera eficiente sin consumir memoria de Arduino
- Funciona de forma universal para cualquier tipo de dato sin necesidad de configuración
Este ejemplo es perfecto para proyectos que requieren una visualización de datos organizada, paneles 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.