Exemplo WebTable com ESP32 - 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 ESP32. Projetado para a plataforma educacional ESP32, 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 limpos de atributo e valor para uma exibição organizada dos dados
- Atualizações de Valor 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 ESP32 - todo o rastreamento é feito na interface web
- Configuração Dinâmica: Defina a estrutura da tabela uma única vez na função setup() do ESP32
- 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
- Sem Necessidade de Configuração: O sistema aprende automaticamente quais valores mudam, sem nenhuma configuração
- Feedback Visual: Animações suaves dão um feedback visual claro para as atualizações de valor
Interface Web Moderna
- Design Responsivo: Funciona perfeitamente em desktop, tablet 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 apps web da DIYables
- Tratamento de Estado Vazio: Mensagens amigáveis quando não há dados disponíveis
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables ESP32 S3 Starter Kit (ESP32 S3 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 primeira vez que você usa o ESP32, consulte o tutorial sobre como configurar o ambiente para ESP32 no Arduino IDE.
- Conecte a placa ESP32 ao seu computador usando um cabo USB.
- Abra o Arduino IDE no seu computador.
- Selecione a placa ESP32 apropriada (por exemplo, ESP32 Dev Module) e a porta COM.
- Navegue até o ícone Libraries na barra esquerda do Arduino IDE.
- Pesquise "DIYables ESP32 WebApps" e encontre a biblioteca DIYables ESP32 WebApps da DIYables
- Clique no botão Install para instalar a biblioteca.
- Você será solicitado a instalar algumas outras dependências da biblioteca
- Clique no botão Install All para instalar todas as dependências da biblioteca.
- No Arduino IDE, vá em File Examples DIYables ESP32 WebApps WebTable, ou copie o código e cole no editor do Arduino IDE
/*
* 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);
}
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 ESP32
- Abra o Serial Monitor
- Veja o resultado no Serial Monitor. Ele deve ser parecido com o abaixo
8
Serial.println("Hello World!");
Message (Enter to send message to 'ESP32 Dev Module' 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 ESP32.
Usando a Interface Web
- Abra um navegador web no seu computador ou dispositivo móvel conectado à mesma rede WiFi
- Digite no navegador o endereço IP mostrado no Serial Monitor
- 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:
- 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 que mudam e valores estáveis
- Status da Conexão: Indicador visual que mostra o estado da conexão WebSocket
- Botão de Atualização: 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 ESP32.
Detecção Automática de Mudanças
A interface web rastreia seus dados automaticamente e oferece feedback 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)
- Sem necessidade de configuração: O sistema aprende automaticamente conforme o seu ESP32 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", "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");
}
Atualizações de Valor 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 ESP32
- 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 Valor
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 no 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 atualizar
- value: String - Novo valor a definir
- 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 (começa em 0)
- value: String - Novo valor a definir
- Uso: Atualiza os dados locais da tabela pela posição
sendValueUpdate(attribute, value)
- Envia a atualização de valor aos clientes web pelo nome do atributo
- Parâmetros:
- attribute: String - O nome do atributo a atualizar
- value: String - Novo valor a enviar
- Uso: Atualização em tempo real na interface web
sendValueUpdate(index, value)
- Envia a atualização de valor aos clientes web pelo índice da linha
- Parâmetros:
- index: int - Índice da linha (começa em 0)
- value: String - Novo valor a enviar
- Uso: Atualização em tempo real na interface web pela posição
sendTableData()
- Envia os dados completos da tabela aos clientes web
- Uso: Atualiza a tabela inteira na interface web
clearTable()
- Limpa todos os dados da tabela e zera a contagem de linhas
- Uso: Reinicia a estrutura da tabela (raramente necessário)
getRowCount()
- Retorna o número de linhas da tabela
- Retorna: int - Contagem atual de linhas
- Uso: Obter 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 (começa em 0)
- Retorna: String - Nome do atributo
- Uso: Acessar informações da estrutura da tabela
getValue(index)
- Obtém o valor pelo índice da linha
- Parâmetros: index: int - Índice da linha (começa em 0)
- Retorna: String - Valor atual
- Uso: Acessar os valores atuais da tabela
onTableValueRequest(callback)
- Define a função de callback para solicitações de dados dos clientes web
- Parâmetro: void (*callback)() - Função a ser chamada quando os dados forem solicitados
- Uso: Tratar 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 ESP32 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
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 no setup()
- Verifique o status da conexão WiFi
- Clique no botão de atualização para solicitar os dados manualmente
- Verifique se há mensagens de erro no Serial Monitor
- Problema: A tabela mostra valores antigos apesar das atualizações do ESP32
- 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() está sendo chamada corretamente
- Verifique a estabilidade da rede
- Problema: Os valores não aparecem com 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
- Certifique-se de que os valores realmente estão 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 atualização
- Causa: Falha na conexão WebSocket
- Solução:
- Verifique se o endereço IP do ESP32 está correto
- Verifique se o ESP32 está na mesma rede WiFi
- Reinicie o ESP32 e atualize a página web
- Verifique as configurações do firewall
- Problema: Erro ao clicar no botão de atualização
- Causa: Falha na conexão WebSocket
- Solução:
- Verifique se o endereço IP do ESP32 está correto
- Verifique se o ESP32 está na mesma rede WiFi
- Reinicie o ESP32 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 no setup()
- Solução:
- Reinicie o ESP32 para aplicar as mudanças de estrutura
- Use clearTable() e addRow() se forem necessárias mudanças dinâmicas
- Atualize a página web após reiniciar o ESP32
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. Mudanças na Estrutura da Tabela Não Aparecem
Dicas de Depuração
Ative a Depuração pela 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 Valor:
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 de Status Condicionais
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 de Vários Apps 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");
}
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 as informações do sistema ESP32 com feedback visual
- Visualização de Dados IoT: Apresente dados ao vivo com destaque inteligente para valores ativos e estáticos
- Ferramenta de Aprendizado: Demonstre conceitos de visualização de dados e comunicação em tempo real
Aplicações no Mundo Real
- Monitoramento Ambiental: Temperatura, umidade e 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 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 do 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: Valores rastreados no navegador web, não na memória do ESP32
Características de Desempenho
- Frequência de Atualização: Tempo real via WebSocket (sem polling)
- Tempo de Resposta: <50ms para atualizações de valor
- Velocidade do Destaque: Feedback 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
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 que mudam, azul para valores estáveis
- Sem Configuração: Funciona sem nenhuma configuração manual ou programação no ESP32
- Eficiente em Memória: Todo o rastreamento é feito no navegador web, não no Arduino
- Aparência Profissional: Animações suaves dão um feedback visual claro
Tutorial em Vídeo
O vídeo de demonstração abaixo usa o código abaixo:
/*
* Este código de ESP32 foi desenvolvido por pt.newbiely.com
* Este código de ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp32/diyables-esp32-web-apps-web-table
*/
/*
* 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>
#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
ESP32ServerFactory serverFactory;
DIYablesWebAppServer server(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebTablePage tablePage;
#define LED_BUILTIN 22
#define DHTPIN 23
#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 ESP32 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", "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);
}
Resumo
O exemplo WebTable demonstra como:
- Criar exibições de dados estruturados com pares de atributo e valor
- Implementar atualizações de valor em tempo real via comunicação WebSocket
- Utilizar o destaque inteligente que detecta automaticamente mudanças de valor
- Construir sistemas eficientes em memória sem armazenar valores no Arduino
- Configurar a estrutura da tabela uma única vez no setup() para uma organização consistente
- Tratar solicitações de clientes web com capacidade de atualização automática dos dados
- Fornecer feedback visual por meio de algoritmos inteligentes de detecção de mudanças
- Criar interfaces web responsivas para aplicações modernas de monitoramento de dados
Inovação Principal: 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 valor fixo no código
- Se adapta dinamicamente conforme os padrões dos dados mudam ao longo do tempo
- Fornece feedback visual por meio de codificação de cores em dois níveis
- Opera com eficiência sem consumir memória do ESP32
- 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 feedback 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.