Exemplo ESP32 WebMonitor - Tutorial de Serial Monitor Baseado na Web
Visão Geral
O exemplo WebMonitor substitui o Serial Monitor tradicional por uma interface web acessível de qualquer dispositivo da sua rede. Projetado para a plataforma educacional ESP32, com recursos avançados de IoT, monitoramento de sensores embutido e integração perfeita com o ecossistema educacional.
Assista a este tutorial em vídeo passo a passo mostrando como usar o WebMonitor com o DIYables ESP32 WebApps:
Recursos
- Saída Serial em Tempo Real: Veja as mensagens do ESP32 instantaneamente no navegador
- Entrada de Comandos: Envie comandos da interface web para o Arduino
- Tema Escuro: Interface estilo terminal, confortável para os olhos
- Rolagem Automática: Rola automaticamente até as mensagens mais recentes
- Timestamp: Todas as mensagens incluem o horário
- Histórico de Comandos: Navegue pelos comandos anteriores com as setas do teclado
- Função Limpar: Limpe a exibição do monitor
- Copiar/Colar: Suporte completo à seleção e cópia de texto
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 sua primeira vez usando o ESP32, consulte o tutorial sobre como configurar o ambiente para ESP32 na Arduino IDE.
- Conecte a placa ESP32 ao seu computador usando um cabo USB.
- Abra a Arduino IDE no seu computador.
- Selecione a placa ESP32 apropriada (por exemplo, ESP32 Dev Module) e a porta COM.
- Vá até o ícone Libraries na barra lateral esquerda da 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 bibliotecas de dependência
- Clique no botão Install All para instalar todas as dependências da biblioteca.
- Na Arduino IDE, vá em File Examples DIYables ESP32 WebApps WebMonitor, ou copie o código acima e cole 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);
}
- 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 na Arduino IDE para carregar o código no ESP32
- Abra o Serial Monitor
- Veja o resultado no Serial Monitor. Ele 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
DIYables WebApp - Web Monitor Example
INFO: Added app /
INFO: Added app /web-monitor
DIYables WebApp Library
Platform: 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 você não vir nada, reinicie a placa ESP32.
- Anote o endereço IP exibido e digite esse endereço na barra de endereços de um navegador web no seu celular ou PC.
- Exemplo: http://192.168.0.2
- Você verá a home page como na imagem abaixo:
- Clique no link Web Monitor e você verá a interface do app Web Monitor como abaixo:
- Você também pode acessar a página diretamente pelo endereço IP seguido de /web-monitor. Por exemplo: http://192.168.0.2/web-monitor
- Experimente enviar comandos ao seu ESP32 pela interface do web monitor e veja a saída serial do seu Arduino em tempo real.
Como Usar
Visualizando a Saída Serial
- Abra a interface do web monitor
- O ESP32 envia mensagens de status automaticamente a cada 5 segundos
- Toda a saída de Serial.println() aparece no monitor
- As mensagens recebem o horário automaticamente
Enviando Comandos
- Digite os comandos no campo de entrada na parte inferior
- Pressione Enter ou clique no botão Send
- O ESP32 processa o comando e responde
Comandos Integrados
O exemplo inclui estes comandos de demonstração:
Controle de LED
- "led on" → Liga o LED embutido
- "led off" → Desliga o LED embutido
- "led toggle" → Alterna o estado do LED
- "blink" → Pisca o LED 3 vezes
Comandos do Sistema
- "status" → Mostra o status e o tempo de atividade do ESP32
- "help" → Lista os comandos disponíveis
- "reset counter" → Reinicia o contador de mensagens
- "memory" → Mostra informações da memória livre
Comandos de Depuração
- "test" → Envia uma mensagem de teste
- "echo [message]" → Devolve a sua mensagem
- "repeat [n] [message]" → Repete a mensagem n vezes
Recursos da Interface
Atalhos de Teclado
- Enter → Enviar comando
- ↑/↓ Setas → Navegar pelo histórico de comandos
- Ctrl+L → Limpar o monitor (se implementado)
- Ctrl+A → Selecionar todo o texto
Controles do Monitor
- Rolagem automática → Rola automaticamente para as novas mensagens
- Limpar → Limpa a exibição do monitor
- Copiar → Copia o texto selecionado para a área de transferência
Personalização Criativa - Crie a Sua Ferramenta Avançada de Depuração
Amplie este exemplo de web monitor para criar uma poderosa interface de depuração e controle para os seus projetos! Adicione comandos personalizados, monitoramento de sensores e visualização de dados em tempo real para atender às suas necessidades criativas.
Estrutura do Código
Componentes Principais
- Servidor WebApp: Gerencia as conexões HTTP e WebSocket
- Página do Monitor: Fornece a interface web estilo terminal
- Tratador de Mensagens: Processa os comandos recebidos
- Ponte Serial: Encaminha a saída Serial para a interface web
Funções Principais
// Handle commands from web interface
void handleWebCommand(String command, String clientId) {
// Process command and execute actions
}
// Send message to web monitor
void sendToWebMonitor(String message) {
// Forward message via WebSocket
}
Adicionando Comandos Personalizados
Para adicionar novos comandos, modifique a função handleWebCommand:
if (command.startsWith("your_command")) {
// Extract parameters
String param = command.substring(12); // After "your_command"
// Execute your action
digitalWrite(LED_BUILTIN, HIGH);
// Send response
sendToWebMonitor("Command executed: " + param);
}
Aplicações Práticas
Desenvolvimento e Depuração
void loop() {
// Debug sensor readings
int sensorValue = analogRead(A0);
sendToWebMonitor("Sensor A0: " + String(sensorValue));
// Debug variables
sendToWebMonitor("Loop count: " + String(loopCount++));
delay(1000);
}
Monitoramento Remoto do Sistema
void checkSystemHealth() {
// Monitor memory
int freeMemory = getFreeMemory();
sendToWebMonitor("Free memory: " + String(freeMemory) + " bytes");
// Monitor sensors
float temperature = getTemperature();
sendToWebMonitor("Temperature: " + String(temperature) + "°C");
// Monitor connectivity
if (WiFi.status() == WL_CONNECTED) {
sendToWebMonitor("WiFi: Connected (RSSI: " + String(WiFi.RSSI()) + ")");
} else {
sendToWebMonitor("WiFi: Disconnected");
}
}
Gerenciamento de Configuração
// Handle configuration commands
if (command.startsWith("config ")) {
String setting = command.substring(7);
if (setting.startsWith("interval ")) {
int interval = setting.substring(9).toInt();
updateInterval = interval * 1000; // Convert to milliseconds
sendToWebMonitor("Update interval set to " + String(interval) + " seconds");
}
if (setting == "save") {
saveConfigToEEPROM();
sendToWebMonitor("Configuration saved to EEPROM");
}
}
Recursos Avançados
Filtragem de Mensagens
Adicione tipos de mensagem e filtragem:
enum MessageType { INFO, WARNING, ERROR, DEBUG };
void sendToWebMonitor(String message, MessageType type = INFO) {
String prefix;
switch(type) {
case WARNING: prefix = "[WARN] "; break;
case ERROR: prefix = "[ERROR] "; break;
case DEBUG: prefix = "[DEBUG] "; break;
default: prefix = "[INFO] ";
}
webMonitorPage.sendMessage(prefix + message);
}
Análise de Comandos
Implemente uma análise de comandos mais sofisticada:
struct Command {
String name;
String parameters[5];
int paramCount;
};
Command parseCommand(String input) {
Command cmd;
int spaceIndex = input.indexOf(' ');
if (spaceIndex > 0) {
cmd.name = input.substring(0, spaceIndex);
// Parse parameters...
} else {
cmd.name = input;
cmd.paramCount = 0;
}
return cmd;
}
Registro de Dados
Registre os dados do monitor em um cartão SD ou na EEPROM:
#include <SD.h>
void logMessage(String message) {
File logFile = SD.open("monitor.log", FILE_WRITE);
if (logFile) {
logFile.print(millis());
logFile.print(": ");
logFile.println(message);
logFile.close();
}
}
Solução de Problemas
Problemas Comuns
1. Sem saída no web monitor
- Verifique se Serial.begin() é chamado em setup()
- Confira a conexão WebSocket (indicador de status verde)
- Verifique o console do navegador em busca de erros
2. Os comandos não funcionam
- Garanta que os comandos estejam exatamente como especificado
- Verifique a diferenciação entre maiúsculas e minúsculas nos comandos
- Procure mensagens de resposta no monitor
3. A interface carrega devagar
- Verifique a intensidade do sinal WiFi
- Reduza a frequência das mensagens
- Limpe o cache do navegador
4. Desconexões do WebSocket
- Verifique a estabilidade da rede
- Reduza o tamanho das mensagens
- Implemente lógica de reconexão
Dicas de Depuração
Ative a depuração detalhada:
#define DEBUG_WEBMONITOR 1
#if DEBUG_WEBMONITOR
#define DEBUG_PRINT(x) Serial.print(x)
#define DEBUG_PRINTLN(x) Serial.println(x)
#else
#define DEBUG_PRINT(x)
#define DEBUG_PRINTLN(x)
#endif
Monitore o status do WebSocket:
void checkWebSocketStatus() {
if (server.getClientCount() > 0) {
sendToWebMonitor("WebSocket clients connected: " + String(server.getClientCount()));
}
}
Considerações de Segurança
Validação de Comandos
Sempre valide os comandos recebidos:
bool isValidCommand(String command) {
// Check command length
if (command.length() > 100) return false;
// Check for dangerous characters
if (command.indexOf("\\") >= 0 || command.indexOf("/") >= 0) return false;
// Check against whitelist
String allowedCommands[] = {"led", "status", "help", "test"};
String cmdName = command.substring(0, command.indexOf(' '));
for (String allowed : allowedCommands) {
if (cmdName.equals(allowed)) return true;
}
return false;
}
Controle de Acesso
Implemente uma autenticação básica:
bool isAuthorized(String clientId) {
// Check client authorization
return authorizedClients.indexOf(clientId) >= 0;
}
Exemplos de Integração
Sistema de Monitoramento de Sensores
void monitorSensors() {
static unsigned long lastSensorRead = 0;
if (millis() - lastSensorRead > 5000) {
// Read multiple sensors
int light = analogRead(A0);
int temp = analogRead(A1);
int humidity = analogRead(A2);
// Send formatted data
String data = "Sensors - Light: " + String(light) +
", Temp: " + String(temp) +
", Humidity: " + String(humidity);
sendToWebMonitor(data);
lastSensorRead = millis();
}
}
Monitor de Automação Residencial
void monitorHome() {
// Door sensors
if (digitalRead(DOOR_SENSOR) == HIGH) {
sendToWebMonitor("ALERT: Front door opened");
}
// Motion detection
if (digitalRead(PIR_SENSOR) == HIGH) {
sendToWebMonitor("Motion detected in living room");
}
// Environmental monitoring
float temp = dht.readTemperature();
if (temp > 25.0) {
sendToWebMonitor("WARNING: Temperature high (" + String(temp) + "°C)");
}
}
ESP32 WebMonitor com DIYables ESP32 WebApps
O código abaixo é uma adaptação do exemplo WebMonitor, e o resultado é mostrado na demonstração em vídeo abaixo:
#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";
#define LED_BUILTIN 2
// 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);
}
Próximos Passos
Depois de dominar o exemplo WebMonitor, experimente:
- Chat - Para comunicação interativa
- DigitalPins - Para controlar saídas
- Slider - Para controle de valores analógicos
- MultipleWebApps - Combinando monitoramento com controle
Suporte
Para ajuda adicional:
- Consulte a documentação de Referência da API
- Visite os tutoriais DIYables: https://esp32io.com/tutorials/diyables-esp32-webapps
- Fóruns da comunidade ESP32