Arduino Nano ESP32 Web Monitor com a Biblioteca DIYables ESP32 WebApps
Visão Geral
Este tutorial aborda a classe DIYablesWebMonitorPage da Biblioteca DIYables ESP32 WebApps. A página oferece uma interface no estilo terminal no navegador. O texto enviado pelo sketch aparece na tela do navegador; o texto digitado no navegador é entregue a um callback do sketch. Isso permite monitorar e comandar o Arduino Nano ESP32 a partir de qualquer dispositivo na mesma rede, sem uma conexão serial USB.
Assista a este tutorial em vídeo passo a passo, que demonstra como usar o WebMonitor com o DIYables ESP32 WebApps:
O Que Este Tutorial Aborda
- Enviar a saída do sketch para o monitor do navegador usando sendToWebMonitor()
- Receber, em um callback do sketch, os comandos digitados no navegador
- Processar comandos integrados, como controle do LED e consultas de status
- Acessar a interface do monitor a partir de um celular ou PC
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 for 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 a 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 da Arduino IDE.
- Pesquise por "DIYables ESP32 WebApps" e encontre a DIYables ESP32 WebApps Library, de 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() {
- Será solicitado que você instale algumas outras dependências da biblioteca
- Clique no botão Install All para instalar todas as dependências da biblioteca.
- Na Arduino IDE, vá até File Examples DIYables ESP32 WebApps WebMonitor, ou copie o código acima e cole-o no editor da Arduino IDE
/*
* DIYables WebApp Library - Web Monitor Example
*
* This example demonstrates the Web Monitor feature:
* - Real-time serial monitor in web browser
* - Send commands from browser to Arduino
* - Automatic message timestamping
*
* Hardware: ESP32 Boards
*
* Setup:
* 1. Update WiFi credentials below
* 2. Upload the sketch to your Arduino
* 3. Open Serial Monitor to see the IP address
* 4. Navigate to http://[IP_ADDRESS]/webmonitor
*/
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create WebApp server and page instances
ESP32ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebMonitorPage webMonitorPage;
// Demo variables
unsigned long lastMessage = 0;
int messageCount = 0;
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables ESP32 WebApp - Web Monitor Example");
// Add home and web monitor pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webMonitorPage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Initialize LED for status indication
pinMode(LED_BUILTIN, OUTPUT);
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
// Set up monitor callback for incoming commands
webMonitorPage.onWebMonitorMessage([](const String& message) {
Serial.println("Command from web: " + message);
// Process simple commands
if (message == "LED_ON") {
digitalWrite(LED_BUILTIN, HIGH);
webMonitorPage.sendToWebMonitor("LED turned ON");
return;
}
if (message == "LED_OFF") {
digitalWrite(LED_BUILTIN, LOW);
webMonitorPage.sendToWebMonitor("LED turned OFF");
return;
}
if (message == "STATUS") {
String status = "Arduino Status: LED=" + String(digitalRead(LED_BUILTIN) ? "ON" : "OFF");
webMonitorPage.sendToWebMonitor(status);
return;
}
if (message == "HELP") {
webMonitorPage.sendToWebMonitor("Available commands: LED_ON, LED_OFF, STATUS, HELP");
return;
}
webMonitorPage.sendToWebMonitor("Unknown command: " + message);
});
// Send welcome message
webMonitorPage.sendToWebMonitor("Arduino Web Monitor ready!");
webMonitorPage.sendToWebMonitor("Type HELP for available commands");
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// Send periodic updates to web monitor
if (millis() - lastMessage > 5000) { // Every 5 seconds
messageCount++;
// Send sensor readings or status updates
String message = "Message #" + String(messageCount) + " - Uptime: " + String(millis() / 1000) + "s";
webMonitorPage.sendToWebMonitor(message);
lastMessage = millis();
}
// Add your main application code here
delay(10);
}
- Atualize as credenciais do WiFi no sketch:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Clique no botão Upload na 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 Monitor Example
INFO: Added app /
INFO: Added app /web-monitor
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 Monitor: http://192.168.0.2/web-monitor
==========================================
- Se nada aparecer, pressione o botão de reset da placa.
- Digite o endereço IP do Serial Monitor em um navegador na mesma rede.
- Exemplo: http://192.168.0.2
- A página inicial mostra um card para o aplicativo de monitor:
- Selecione o card Web Monitor para abrir a interface de terminal:
- A página também pode ser acessada diretamente em http://192.168.0.2/web-monitor.
- Digite comandos no campo de entrada e pressione Enter. A placa responde e a resposta aparece no terminal.
Comandos Integrados
O sketch de exemplo reconhece os seguintes comandos digitados no navegador:
| Comando | Ação |
|---|---|
| led on | Liga o LED integrado |
| led off | Desliga o LED integrado |
| led toggle | Alterna o estado do LED |
| blink | Pisca o LED 3 vezes |
| status | Imprime o status e o tempo de funcionamento da placa |
| help | Lista os comandos reconhecidos |
| reset counter | Zera o contador de mensagens |
| memory | Informa a memória heap livre |
| test | Envia uma mensagem de teste |
| echo [text] | Retorna o texto fornecido |
| repeat [n] [text] | Repete o texto n vezes |
Enviando Dados a Partir do Sketch
Chame sendToWebMonitor() em qualquer lugar do sketch para enviar texto ao navegador:
void loop() {
webAppsServer.loop();
// Send a periodic status message
static unsigned long lastSend = 0;
if (millis() - lastSend >= 5000) {
lastSend = millis();
webMonitorPage.sendToWebMonitor("Uptime: " + String(millis() / 1000) + " s");
}
}
Solução de Problemas
O monitor não mostra nenhuma saída do sketch
- Verifique se sendToWebMonitor() está sendo chamado; adicione um Serial.println() ao lado dele para confirmar a execução
- Verifique o indicador de status do WebSocket no navegador
- Certifique-se de que webAppsServer.loop() seja executado a cada iteração de loop() sem delays bloqueantes
Os comandos enviados pelo navegador não são recebidos
- Confirme se onWebMonitorMessage está registrado antes de webAppsServer.begin()
- Verifique no Serial Monitor o texto bruto do comando
Não consigo abrir a página
- Verifique o endereço IP mostrado no Serial Monitor
- Certifique-se de que o dispositivo do navegador e a placa estejam na mesma rede WiFi de 2,4 GHz