Web Table com Arduino Nano ESP32 e a Biblioteca DIYables ESP32 WebApps
Visão Geral
Este tutorial aborda a classe DIYablesWebTablePage da Biblioteca DIYables ESP32 WebApps. A página exibe no navegador uma tabela de atributo-valor com duas colunas. As linhas são definidas uma única vez no Arduino Nano ESP32, na inicialização, usando addRow(). Durante o funcionamento, os valores individuais são atualizados por WebSocket chamando updateValue(). O navegador destaca automaticamente os valores que estão mudando ativamente (vermelho) em relação aos valores que se estabilizaram (azul), sem nenhum código adicional no sketch.
O Que Este Tutorial Aborda
- Definir as linhas da tabela com nomes de atributos em setup()
- Enviar atualizações de valores em tempo de execução
- Entender o destaque automático de detecção de mudanças do navegador
- Limites de quantidade de linhas da tabela
Hardware Necessário
Or you can buy the following kits:
| 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.
Passos
Siga estas instruções passo a passo:
- Se esta é a primeira vez que você usa o Arduino Nano ESP32, consulte o tutorial sobre como configurar o ambiente de desenvolvimento do Arduino Nano ESP32.
- Conecte a placa Arduino Nano ESP32 ao seu computador usando um cabo USB.
- Abra o Arduino IDE no seu computador.
- Selecione a placa apropriada (por exemplo, Arduino Nano ESP32) e a porta COM.
- Vá 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.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- 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á até o exemplo File Examples DIYables ESP32 WebApps WebTable, ou copie o código acima 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);
}
- Atualize as credenciais de WiFi no sketch:
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 Nano ESP32
- Abra o Serial Monitor
- A saída do Serial Monitor deve ser parecida com esta:
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
DIYables WebApp - Web Table Example
INFO: Added app /
INFO: Added app /web-table
DIYables WebApp Library
Platform: Arduino Nano ESP32
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
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 nada aparecer, pressione o botão de reset da placa.
- Digite o endereço IP exibido no Serial Monitor em um navegador na mesma rede.
- Exemplo: http://192.168.0.2
- A página inicial mostra um card para o aplicativo table:
- Selecione o card Web Table para abrir a página da tabela de dados:
- A página também pode ser acessada diretamente em http://192.168.0.2/web-table.
Definindo a Estrutura da Tabela
Chame addRow() dentro de setupTableStructure() para definir o nome de cada atributo. A ordem das chamadas de addRow() determina a ordem de exibição no navegador.
void setupTableStructure() {
tablePage.addRow("Device Name");
tablePage.addRow("Firmware Version");
tablePage.addRow("Uptime (s)");
tablePage.addRow("Temperature (C)");
tablePage.addRow("Free Heap (bytes)");
}
O número máximo de linhas é 20.
Enviando Atualizações de Valores
Valores Iniciais na Inicialização
Defina os valores iniciais de cada linha logo após definir a estrutura:
tablePage.updateValue("Device Name", "Arduino Nano ESP32");
tablePage.updateValue("Firmware Version", "1.0.0");
Atualizações em Tempo de Execução no Loop
Envie novos valores durante o funcionamento. Cada chamada atualiza no navegador a linha do atributo correspondente, sem reconstruir a tabela inteira:
void loop() {
webAppsServer.loop();
tablePage.updateValue("Uptime (s)", String(millis() / 1000));
tablePage.updateValue("Temperature (C)", String(readTemperature(), 1));
delay(1000);
}
Destaque por Detecção de Mudanças
O navegador acompanha internamente o histórico de valores de cada linha. Nenhum estado no lado do sketch é necessário:
| Cor | Significado |
|---|---|
| Vermelho | O valor mudou no último intervalo de atualização |
| Azul | O valor está estável há vários intervalos |
| Branco | O valor foi enviado uma vez e não foi reenviado |
O acompanhamento dos valores é feito inteiramente no lado do cliente. O Arduino Nano ESP32 não armazena nenhum valor anterior.
Solução de Problemas
As linhas da tabela aparecem fora de ordem
- As linhas são exibidas na ordem em que addRow() é chamado em setupTableStructure()
- Não chame addRow() depois de webAppsServer.begin()
Os valores param de atualizar
- Confirme que webAppsServer.loop() é chamado a cada iteração de loop()
- Evite valores de delay() maiores que o seu intervalo de atualização
A quantidade de linhas excede o máximo
- A biblioteca suporta até 20 linhas
- Combine valores relacionados em uma única string para reduzir a quantidade de linhas, se necessário
Página inacessível
- Verifique o endereço IP exibido no Serial Monitor
- Confirme que o dispositivo com o navegador e a placa estão na mesma rede WiFi