Exemplo Arduino WebTable - Tutorial de Interface de Tabela de Dados
Visão Geral
O exemplo WebTable oferece uma interface web de tabela de dados com duas colunas para exibir informações em tempo real dos seus projetos com Arduino. Projetado para a plataforma educacional Arduino Uno R4 WiFi e DIYables STEM V4 IoT com recursos avançados de visualização de dados, destaque inteligente de mudanças de valor e integração perfeita com o ecossistema educacional.
Principais Recursos
Funcionalidade Principal
- Tabela de Dados com Duas Colunas: Pares atributo-valor limpos para uma exibição organizada dos dados
- Atualizações de Valores em Tempo Real: Atualização instantânea dos dados via WebSocket, sem recarregar a página
- Design Eficiente em Memória: Nenhum valor é armazenado na memória do Arduino - todo o rastreamento ocorre na interface web
- Configuração Dinâmica: Configure a estrutura da tabela uma única vez na função setup() do Arduino
- Controles Interativos: Botão de atualização para solicitações manuais de dados e capacidade de reconexão automática
Sistema Inteligente de Destaque
- Detecção Inteligente de Mudanças: Detecta automaticamente quais valores realmente mudam ao longo do tempo
- Rastreamento Automático de Valores: Compara automaticamente os valores atuais com os anteriores
- Destaque em Dois Níveis:
- Destaque vermelho: Para valores que estão mudando ativamente
- Destaque azul: Para valores que permanecem estáveis ao longo do tempo
- Nenhuma Configuração Necessária: O sistema aprende automaticamente quais valores mudam, sem nenhuma configuração
- Retorno Visual: Animações suaves fornecem um retorno visual claro para as atualizações de valores
Interface Web Moderna
- Design Responsivo: Funciona perfeitamente em computadores, tablets e dispositivos móveis
- Estilo Profissional: Layout em estilo de cartão com efeitos de hover e estética moderna
- Status da Conexão: Indicadores visuais do estado da conexão WebSocket
- Integração do Rodapé: Estilo consistente com os outros web apps da DIYables
- Tratamento de Estado Vazio: Mensagens amigáveis quando não há dados disponíveis
- Extensível para Outras Plataformas: Atualmente implementado para o Arduino Uno R4 WiFi, mas pode ser estendido para outras plataformas de hardware. Veja DIYables_WebApps_ESP32
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables STEM V4B IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgação: Alguns dos links desta seção são links de afiliado da Amazon. Podemos receber uma comissão pelas compras feitas por meio desses links, sem custo adicional para você. Agradecemos o seu apoio.
Instruções de Configuração
Passos Rápidos
Siga estas instruções passo a passo:
- Se esta é a sua primeira vez usando o Arduino Uno R4 WiFi/DIYables STEM V4 IoT, consulte o tutorial sobre como configurar o ambiente para o Arduino Uno R4 WiFi/DIYables STEM V4 IoT no Arduino IDE.
- Conecte a placa Arduino Uno R4/DIYables STEM V4 IoT ao seu computador usando um cabo USB.
- Abra o Arduino IDE no seu computador.
- Selecione a placa Arduino Uno R4 apropriada (por exemplo, Arduino Uno R4 WiFi) e a porta COM.
- Vá até o ícone Libraries na barra lateral esquerda do Arduino IDE.
- Pesquise por "DIYables WebApps" e encontre a biblioteca DIYables WebApps da DIYables
- Clique no botão Install para instalar a biblioteca.
- Será solicitado que você instale algumas outras dependências de bibliotecas
- Clique no botão Install All para instalar todas as dependências da biblioteca.
- No Arduino IDE, vá em File Examples DIYables WebApps WebTable, ou copie o código e cole no editor do Arduino IDE
/*
* DIYables WebApps Library - WebTable Example
*
* This example demonstrates how to create a web-based table interface
* that displays real-time data in a two-column format (attribute-value pairs).
*
* Features:
* - Two-column table with attributes and real-time values
* - WebSocket-based real-time updates
* - Configurable table rows in setup()
* - Dynamic value updates during runtime
* - Modern responsive web interface
*
* Hardware: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* Instructions:
* 1. Update WiFi credentials below
* 2. Upload the code to your Arduino
* 3. Open Serial Monitor to get the IP address
* 4. Open web browser and go to:
* - Home page: http://[ARDUINO_IP]/
* - WebTable: http://[ARDUINO_IP]/web-table
* 5. Watch real-time data updates in the table
*
* Created by DIYables
* Visit: https://diyables.com for more tutorials and projects
*/
#include <DIYablesWebApps.h>
// WiFi credentials - Update these with your network details
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Initialize web server and pages
UnoR4ServerFactory serverFactory;
DIYablesWebAppServer server(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebTablePage tablePage;
// Variables to simulate sensor data
float temperature = 20.5;
float humidity = 65.0;
int lightLevel = 512;
unsigned long uptime = 0;
bool ledState = false;
int counter = 0;
void setup() {
Serial.begin(9600);
Serial.println("DIYables WebApp - Web Table Example");
// Initialize built-in LED
pinMode(LED_BUILTIN, OUTPUT);
// Add web apps
server.addApp(&homePage);
server.addApp(&tablePage);
// Optional: Add 404 page for better user experience
server.setNotFoundPage(DIYablesNotFoundPage());
// Start the WebApp server
server.begin(WIFI_SSID, WIFI_PASSWORD);
// Set up callback for data requests
tablePage.onTableValueRequest(onDataRequested);
// Configure table structure in setup - attributes are set once
setupTableStructure();
Serial.println("WebTable Server started!");
}
void loop() {
server.loop();
// Update sensor values every 2 seconds
static unsigned long lastUpdate = 0;
if (millis() - lastUpdate > 2000) {
updateSensorValues();
sendRealTimeUpdates();
lastUpdate = millis();
}
// Toggle LED every 5 seconds
static unsigned long lastLedToggle = 0;
if (millis() - lastLedToggle > 5000) {
ledState = !ledState;
digitalWrite(LED_BUILTIN, ledState);
// Send LED status update to web interface
tablePage.sendValueUpdate("LED Status", ledState ? "ON" : "OFF");
lastLedToggle = millis();
}
delay(10);
}
// Setup table structure - called once in setup()
void setupTableStructure() {
Serial.println("Setting up table structure...");
// Add table rows with attributes only (no values stored)
tablePage.addRow("Device Name");
tablePage.addRow("Temperature");
tablePage.addRow("Humidity");
tablePage.addRow("Light Level");
tablePage.addRow("Uptime");
tablePage.addRow("LED Status");
tablePage.addRow("Counter");
tablePage.addRow("WiFi SSID");
tablePage.addRow("IP Address");
tablePage.addRow("Free Memory");
Serial.println("Table structure configured with " + String(tablePage.getRowCount()) + " rows");
}
// Simulate sensor readings and send values to web interface
void updateSensorValues() {
// Simulate temperature sensor (20-30°C range)
temperature = 20.0 + (sin(millis() / 10000.0) * 5.0) + random(-10, 10) / 10.0;
// Simulate humidity sensor (40-80% range)
humidity = 60.0 + (cos(millis() / 8000.0) * 15.0) + random(-20, 20) / 10.0;
// Simulate light sensor (0-1023 range)
lightLevel = 512 + (sin(millis() / 5000.0) * 400) + random(-50, 50);
if (lightLevel < 0) lightLevel = 0;
if (lightLevel > 1023) lightLevel = 1023;
// Update uptime
uptime = millis() / 1000;
// Increment counter
counter++;
}
// Send real-time updates to web interface
void sendRealTimeUpdates() {
// Send individual value updates to web clients
tablePage.sendValueUpdate("Temperature", String(temperature, 1) + "°C");
tablePage.sendValueUpdate("Humidity", String(humidity, 1) + "%");
tablePage.sendValueUpdate("Light Level", String(lightLevel));
tablePage.sendValueUpdate("Uptime", formatUptime(uptime));
tablePage.sendValueUpdate("Counter", String(counter));
tablePage.sendValueUpdate("Free Memory", String(getFreeMemory()) + " bytes");
}
// Callback function called when web client requests table data
void onDataRequested() {
Serial.println("Web client requested table data");
// Send all current values to web interface
tablePage.sendValueUpdate("Device Name", "Arduino Uno R4");
tablePage.sendValueUpdate("Temperature", String(temperature, 1) + "°C");
tablePage.sendValueUpdate("Humidity", String(humidity, 1) + "%");
tablePage.sendValueUpdate("Light Level", String(lightLevel));
tablePage.sendValueUpdate("Uptime", formatUptime(uptime));
tablePage.sendValueUpdate("LED Status", ledState ? "ON" : "OFF");
tablePage.sendValueUpdate("Counter", String(counter));
tablePage.sendValueUpdate("WiFi SSID", WIFI_SSID);
tablePage.sendValueUpdate("IP Address", WiFi.localIP().toString());
tablePage.sendValueUpdate("Free Memory", String(getFreeMemory()) + " bytes");
}
// Format uptime in human-readable format
String formatUptime(unsigned long seconds) {
unsigned long days = seconds / 86400;
unsigned long hours = (seconds % 86400) / 3600;
unsigned long minutes = (seconds % 3600) / 60;
unsigned long secs = seconds % 60;
String result = "";
if (days > 0) result += String(days) + "d ";
if (hours > 0) result += String(hours) + "h ";
if (minutes > 0) result += String(minutes) + "m ";
result += String(secs) + "s";
return result;
}
// Get approximate free memory
int getFreeMemory() {
// Simple approximation for demonstration
// In a real application, you might use a more accurate method
return 2048 - (counter % 1024);
}
Configuração do WiFi
Configure as credenciais de WiFi no código atualizando estas linhas:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Clique no botão Upload no Arduino IDE para fazer o upload do código para o Arduino UNO R4/DIYables STEM V4 IoT
- Abra o Serial Monitor
- Confira o resultado no Serial Monitor. Ele se parece com o abaixo
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno R4 WiFi' on 'COM15')
New Line
9600 baud
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
==========================================
- Se você não vir nada, reinicie a placa Arduino.
Usando a Interface Web
- Abra um navegador web no seu computador ou dispositivo móvel conectado à mesma rede WiFi
- Digite o endereço IP exibido no Serial Monitor no navegador web
- Exemplo: http://192.168.1.100
- Você verá a página inicial como na imagem abaixo:
- Clique no link Web Table e você verá a interface do app Web Table como abaixo:
- Ou você também pode acessar a página diretamente pelo endereço IP seguido de /web-table. Por exemplo: http://192.168.1.100/web-table
- Você verá a interface Web Table mostrando:
- Tabela de Dados em Tempo Real: Tabela de duas colunas com os atributos e seus valores atuais
- Destaque Inteligente: Codificação automática por cores de valores em mudança versus estáveis
- Status da Conexão: Indicador visual que mostra o estado da conexão WebSocket
- Botão de Atualizar: Capacidade de atualização manual para obter os dados mais recentes
- Atualizações Automáticas: Os valores são atualizados em tempo real via WebSocket
Sistema Inteligente de Destaque
Como Funciona
O WebTable possui um sistema avançado de destaque que detecta automaticamente quais valores mudam ao longo do tempo, sem exigir nenhuma configuração no código do seu Arduino.
Detecção Automática de Mudanças
A interface web rastreia seus dados automaticamente e fornece retorno visual:
- Destaque vermelho: Aplicado a valores que mudam com frequência (como leituras de sensores, contadores, temporizadores)
- Destaque azul: Aplicado a valores que permanecem estáveis (como nomes de dispositivos, endereços IP, configurações)
- Nenhuma configuração necessária: O sistema aprende automaticamente à medida que o Arduino envia atualizações
O Que Você Vê
- Valores que mudam ao longo do tempo (temperatura, tempo de atividade, leituras de sensores) serão destacados em vermelho
- Informações estáticas (nome do dispositivo, SSID do WiFi, endereço IP) serão destacadas em azul
- Isso ajuda você a identificar rapidamente quais dados estão mudando ativamente e quais são informações estáveis
Principais Benefícios
- Nenhuma Configuração Necessária: Basta usar sendValueUpdate() e o destaque funciona automaticamente
- Aprendizado Visual: Veja facilmente quais partes do seu sistema estão ativas
- Amigável para Iniciantes: Funciona sem nenhum conhecimento de programação web
- Eficiente em Memória: Todo o destaque acontece no navegador web, não no seu Arduino
- Atualizações em Tempo Real: O destaque muda imediatamente conforme os valores são atualizados
Configuração da Estrutura da Tabela
A estrutura da tabela é configurada uma única vez na função setup() usando o 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");
}
Atualizações de Valores em Tempo Real
Os valores são atualizados durante a execução usando o método sendValueUpdate():
Método de Atualização Direta (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));
}
Benefícios das Atualizações Diretas
- Eficiente em Memória: Nenhum valor é armazenado na memória do Arduino
- Tempo Real: Atualizações instantâneas na interface web
- Destaque Automático: A interface web detecta as mudanças automaticamente
- Código Simplificado: Não é preciso gerenciar o armazenamento local de valores
Explicação do Código
Componentes Principais
#include <DIYablesWebApps.h>
// Initialize web server and table page
DIYablesWebAppServer server;
DIYablesWebTablePage tablePage;
Função Setup
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();
}
Atualizações em Tempo Real no 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);
}
Função de Callback
// 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
}
Funções de Atualização 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 da API
Métodos da Classe DIYablesWebTablePage
addRow(attribute, initialValue)
- Adiciona uma nova linha à estrutura da tabela
- Parâmetros:
- attribute: String - O nome do atributo (coluna da esquerda)
- initialValue: String - Valor inicial (coluna da direita, opcional)
- Uso: Chamado em setup() para configurar a estrutura da tabela
updateValue(attribute, value)
- Atualiza um valor pelo nome do atributo (somente armazenamento local)
- Parâmetros:
- attribute: String - O nome do atributo a ser atualizado
- value: String - Novo valor a ser definido
- Uso: Atualiza os dados locais da tabela
updateValue(index, value)
- Atualiza um valor pelo índice da linha (somente armazenamento local)
- Parâmetros:
- index: int - Índice da linha (base 0)
- value: String - Novo valor a ser definido
- Uso: Atualiza os dados locais da tabela por posição
sendValueUpdate(attribute, value)
- Envia a atualização de valor para os clientes web pelo nome do atributo
- Parâmetros:
- attribute: String - O nome do atributo a ser atualizado
- value: String - Novo valor a ser enviado
- Uso: Atualização em tempo real da interface web
sendValueUpdate(index, value)
- Envia a atualização de valor para os clientes web pelo índice da linha
- Parâmetros:
- index: int - Índice da linha (base 0)
- value: String - Novo valor a ser enviado
- Uso: Atualização em tempo real da interface web por posição
sendTableData()
- Envia os dados completos da tabela para os clientes web
- Uso: Atualiza a tabela inteira na interface web
clearTable()
- Limpa todos os dados da tabela e zera a contagem de linhas
- Uso: Redefine a estrutura da tabela (raramente necessário)
getRowCount()
- Retorna o número de linhas da tabela
- Retorna: int - Contagem atual de linhas
- Uso: Obtém informações sobre o tamanho da tabela
getAttribute(index)
- Obtém o nome do atributo pelo índice da linha
- Parâmetros: index: int - Índice da linha (base 0)
- Retorna: String - Nome do atributo
- Uso: Acessa informações da estrutura da tabela
getValue(index)
- Obtém o valor pelo índice da linha
- Parâmetros: index: int - Índice da linha (base 0)
- Retorna: String - Valor atual
- Uso: Acessa os valores atuais da tabela
onTableValueRequest(callback)
- Define a função de callback para as solicitações de dados dos clientes web
- Parâmetro: void (*callback)() - Função a ser chamada quando os dados forem solicitados
- Uso: Trata as solicitações de dados dos clientes web
Comunicação WebSocket
Mensagens da Web para o Arduino
- TABLE:GET_DATA - Solicita os dados completos da tabela
- TABLE:UPDATE:attribute:value - Atualiza o valor de um atributo específico
Mensagens do Arduino para a Web
- TABLE_DATA:attr1:val1|attr2:val2|... - Envia os dados completos da tabela
- VALUE_UPDATE:attribute:value - Envia a atualização de um único valor
Tutorial em Vídeo
O vídeo de demonstração abaixo usa o código abaixo:
/*
* Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com
* Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino-uno-r4/diyables-web-apps-web-table
*/
/*
* 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>
#include <DHT.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;
#define DHTPIN 3
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
// 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);
dht.begin();
// 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 3 seconds
static unsigned long lastLedToggle = 0;
if (millis() - lastLedToggle > 3000) {
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;
humidity = dht.readHumidity();
temperature = dht.readTemperature();
// Check if any reads failed and exit early (to try again).
if (isnan(humidity) || isnan(temperature)) {
Serial.println(F("Failed to read from DHT sensor!"));
return;
}
// 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);
}
Solução de Problemas
Problemas Comuns
1. A Tabela Não Exibe Dados
- Problema: Tabela vazia ou mensagem "No Data Available"
- Causa: Estrutura da tabela não configurada ou problemas na conexão WiFi
- Solução:
- Verifique se setupTableStructure() é chamada em setup()
- Verifique o status da conexão WiFi
- Clique no botão de atualizar para solicitar os dados manualmente
- Verifique mensagens de erro no Serial Monitor
- Problema: A tabela mostra valores antigos apesar das atualizações do Arduino
- Causa: Conexão WebSocket perdida ou funções de atualização não chamadas
- Solução:
- Verifique o indicador de status da conexão na página web
- Atualize a página web
- Verifique se sendValueUpdate() é chamada corretamente
- Verifique a estabilidade da rede
- Problema: Os valores não mostram destaque vermelho ou azul
- Causa: O JavaScript não está detectando corretamente as mudanças de valor
- Solução:
- Atualize a página web para reiniciar a detecção de mudanças
- Garanta que os valores estão realmente mudando (verifique o Serial Monitor)
- Limpe o cache do navegador se o destaque parecer travado
- Os valores precisam de várias atualizações para acionar o sistema de destaque
- Problema: Erro ao clicar no botão de atualizar
- Causa: Falha na conexão WebSocket
- Solução:
- Verifique se o endereço IP do Arduino está correto
- Verifique se o Arduino está na mesma rede WiFi
- Reinicie o Arduino e atualize a página web
- Verifique as configurações do firewall
- Problema: Erro ao clicar no botão de atualizar
- Causa: Falha na conexão WebSocket
- Solução:
- Verifique se o endereço IP do Arduino está correto
- Verifique se o Arduino está na mesma rede WiFi
- Reinicie o Arduino e atualize a página web
- Verifique as configurações do firewall
- Problema: Linhas adicionadas/removidas não aparecem na interface web
- Causa: A estrutura da tabela é configurada somente em setup()
- Solução:
- Reinicie o Arduino para aplicar as alterações de estrutura
- Use clearTable() e addRow() se forem necessárias alterações dinâmicas
- Atualize a página web depois de reiniciar o Arduino
2. Os Valores Não Atualizam em Tempo Real
3. O Destaque Não Funciona
4. Erro "Not connected to Arduino"
3. Erro "Not connected to Arduino"
4. Alterações na Estrutura da Tabela Não Aparecem
Dicas de Depuração
Ative a Depuração Serial:
void onDataRequested() {
Serial.println("Web client requested table data");
Serial.println("Sending table configuration...");
// Send table configuration to web client
tablePage.sendTableConfig();
}
Monitore as Atualizações de Valores:
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");
}
Verifique o Status da Conexão:
void setup() {
// ... other setup code
setupTableStructure();
Serial.println("Table configured with real-time highlighting");
Serial.println("Values will be highlighted automatically based on changes");
}
Exemplos de Uso Avançado
Monitoramento de Sensores com Destaque 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");
}
Painel de Status do 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");
}
Atualizações Condicionais de Status
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);
}
Integração com Vários Web Apps
// 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");
}
Aplicações e Casos de Uso
Projetos Educacionais
- Monitoramento de Sensores: Exiba leituras de sensores em tempo real com destaque automático de mudanças
- Painel de Status do Sistema: Mostre informações do sistema Arduino com retorno visual
- Visualização de Dados IoT: Apresente dados ao vivo com destaque inteligente para valores ativos versus estáticos
- Ferramenta de Aprendizado: Demonstre conceitos de visualização de dados e de comunicação em tempo real
Aplicações no Mundo Real
- Monitoramento Ambiental: Temperatura, umidade, qualidade do ar com detecção de mudanças
- Automação Residencial: Status do sistema, estados de dispositivos e parâmetros operacionais
- Monitoramento Industrial: Status de equipamentos, alertas e métricas de desempenho
- Sistemas Agrícolas: Condições do solo, dados meteorológicos e status da irrigação
Principais Benefícios para a Educação STEM
- Aprendizado Visual: Veja quais dados mudam ao longo do tempo por meio do destaque automático
- Sistemas em Tempo Real: Experimente a comunicação WebSocket e as atualizações de dados ao vivo
- Nenhuma Configuração Necessária: O destaque inteligente funciona automaticamente
- Interface Web Moderna: Aprenda técnicas contemporâneas de desenvolvimento web
Especificações Técnicas
Uso de Memória (Design Otimizado)
- Memória Flash: ~8KB para a funcionalidade WebTable (incluindo o destaque inteligente)
- Uso de SRAM: ~1KB durante a operação (nenhum valor armazenado no Arduino)
- Buffer WebSocket: ~1KB para o tratamento de mensagens
- Máximo de Linhas: 20 (configurável via MAX_TABLE_ROWS)
- Eficiência de Memória: Os valores são rastreados no navegador web, não na memória do Arduino
Características de Desempenho
- Frequência de Atualização: Tempo real via WebSocket (sem polling)
- Tempo de Resposta: <50ms para atualizações de valores
- Velocidade do Destaque: Retorno visual instantâneo nas mudanças de valor
- Sobrecarga de Rede: ~30-50 bytes por atualização de valor
- Detecção de Mudanças: Comparação automática dos valores ao longo do tempo
Compatibilidade
- Placas Arduino: Arduino Uno R4 WiFi, DIYables STEM V4 IoT
- Navegadores: Todos os navegadores modernos com suporte a WebSocket
- Dispositivos: Computadores, tablets e dispositivos móveis
- Redes: Redes WiFi com acesso local
Recursos do Destaque Inteligente
- Detecção Automática: Identifica quais valores mudam ao longo do tempo, sem nenhuma configuração
- Sistema de Dois Níveis: Vermelho para valores em mudança, azul para valores estáveis
- Nenhuma Configuração: Funciona sem nenhuma configuração manual ou programação no Arduino
- Eficiente em Memória: Todo o rastreamento é feito no navegador web, não no Arduino
- Aparência Profissional: Animações suaves fornecem um retorno visual claro
Resumo
O exemplo WebTable demonstra como:
- Criar exibições de dados estruturados com pares atributo-valor
- Implementar atualizações de valores em tempo real via comunicação WebSocket
- Utilizar o destaque inteligente que detecta automaticamente as mudanças de valor
- Construir sistemas eficientes em memória sem armazenar valores no Arduino
- Configurar a estrutura da tabela uma única vez em setup() para uma organização consistente
- Tratar as solicitações dos clientes web com recursos de atualização automática de dados
- Fornecer retorno visual por meio de algoritmos inteligentes de detecção de mudanças
- Criar interfaces web responsivas para aplicações modernas de monitoramento de dados
Principal Inovação: Destaque Inteligente
O recurso de destaque desta implementação do WebTable é o seu sistema de destaque inteligente, que:
- Aprende automaticamente quais valores mudam, sem nenhum hard-coding
- Adapta-se dinamicamente conforme os padrões de dados mudam ao longo do tempo
- Fornece retorno visual por meio de codificação de cores em dois níveis
- Opera de forma eficiente sem consumir memória do Arduino
- Funciona universalmente para qualquer tipo de dado, sem configuração
Este exemplo é perfeito para projetos que exigem exibição organizada de dados, painéis de monitoramento em tempo real com retorno visual, interfaces de status do sistema com detecção automática de mudanças e demonstrações educacionais de técnicas avançadas de visualização de dados em aplicações IoT.