Ejemplo de ESP32 WebMonitor - Tutorial del Monitor Serial Basado en la Web
Visión general
El ejemplo WebMonitor reemplaza al Monitor Serial tradicional con una interfaz basada en la web accesible desde cualquier dispositivo en tu red. Diseñado para ESP32, plataforma educativa con capacidades IoT mejoradas, monitoreo de sensores integrado y una integración fluida con el ecosistema educativo.
Características
- Salida serie en tiempo real: Ver mensajes ESP32 al instante en el navegador
- Entrada de comandos: Enviar comandos desde la interfaz web al Arduino
- Tema oscuro: Interfaz de estilo terminal suave para la vista
- Desplazamiento automático: Se desplaza automáticamente a los mensajes más recientes
- Marca de tiempo: Todos los mensajes incluyen marcas de tiempo
- Historial de comandos: Navega por los comandos anteriores con las teclas de flecha
- Función de limpieza: Limpiar la pantalla del monitor
- Copiar/Pegar: Soporte completo para seleccionar todo el texto y copiar
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.
Instrucciones de Configuración
Pasos Rápidos
Siga estas instrucciones paso a paso:
- Si es la primera vez que usas el ESP32, consulta el tutorial sobre configurar el entorno para ESP32 en el IDE de Arduino.
- Conecta la placa ESP32 a tu computadora usando un cable USB.
- Inicia el IDE de Arduino en tu computadora.
- Selecciona la placa ESP32 adecuada (p. ej. ESP32 Dev Module) y el puerto COM.
- Navega al icono Bibliotecas en la barra izquierda del IDE de Arduino.
- Busca "DIYables ESP32 WebApps", luego localiza la DIYables ESP32 WebApps Library de DIYables
- Haz clic en el botón Instalar para instalar la biblioteca.
- Se le pedirá instalar algunas otras dependencias de la biblioteca
- Haga clic en el botón Instalar todo para instalar todas las dependencias de la biblioteca.
- En el IDE de Arduino, ve a Archivo Ejemplos DIYables ESP32 WebApps WebMonitor ejemplo, o copia el código anterior y pégalo en el editor del IDE de Arduino
/*
* 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);
}
- Configura las credenciales de WiFi en el código actualizando estas líneas:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Haz clic en el botón Subir en el IDE de Arduino para subir código al ESP32
- Abre el monitor serie
- Consulta el resultado en el monitor serie. Se parece a lo que se muestra a continuación
COM6
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
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Si no ves nada, reinicia la placa ESP32.
- Toma nota de la dirección IP que se muestre y escribe esta dirección en la barra de direcciones de un navegador web en tu teléfono inteligente o PC.
- Ejemplo: http://192.168.0.2
- Verás la página de inicio como en la imagen a continuación:
- Haz clic en el enlace de Web Monitor; verás la interfaz de usuario de la aplicación Web Monitor como se muestra a continuación:
- O también puedes acceder a la página directamente mediante la dirección IP seguida de /web-monitor. Por ejemplo: http://192.168.0.2/web-monitor
- Intenta enviar comandos a tu ESP32 mediante la interfaz del monitor web y ver la salida serie en tiempo real de tu Arduino.
Cómo usar
Visualización de la salida serial
- Abrir la interfaz del monitor web
- ESP32 envía automáticamente mensajes de estado cada 5 segundos
- Toda la salida de Serial.println() aparece en el monitor
- Los mensajes llevan marca de tiempo automáticamente
Enviando comandos
- Escribe comandos en el campo de entrada en la parte inferior
- Presiona Enter o haz clic en el botón Enviar
- ESP32 procesa el comando y responde
Comandos integrados
El ejemplo incluye estos comandos de demostración:
Control de LED
- "LED encendido" → Enciende el LED incorporado
- "LED apagado" → Apaga el LED incorporado
- "Conmutar LED" → Alterna el estado del LED
- "Parpadea" → Parpadea el LED 3 veces
Comandos del sistema
- "status" → Muestra el estado del ESP32 y el tiempo de actividad
- "help" → Enumera los comandos disponibles
- "reset counter" → Restablece el contador de mensajes
- "memory" → Muestra información de memoria libre
Comandos de depuración
- "test" → Envía un mensaje de prueba
- "echo [message]" → Devuelve tu mensaje
- "repeat [n] [message]" → Repite el mensaje n veces
Características de la interfaz
Atajos de teclado
- Intro → Enviar comando
- ↑/↓ Teclas de flecha → Navegar por el historial de comandos
- Ctrl+L → Limpiar la consola (si está implementado)
- Ctrl+A → Seleccionar todo el texto
Controles del monitor
- Desplazamiento automático → Se desplaza automáticamente a los mensajes nuevos
- Limpiar → Limpia la pantalla del monitor
- Copiar → Copia el texto seleccionado al portapapeles
Personalización creativa - Construye tu herramienta de depuración avanzada
Amplía este ejemplo de monitor web para crear una potente interfaz de depuración y control para tus proyectos. ¡Añade comandos personalizados, monitorización de sensores y visualización de datos en tiempo real para satisfacer tus necesidades creativas!
Estructura del código
Componentes Principales
- Servidor de la aplicación web: Maneja conexiones HTTP y WebSocket
- Página de Monitor: Proporciona una interfaz web de estilo terminal
- Manejador de mensajes: Procesa comandos entrantes
- Puente Serial: Reenvía la salida serial a la interfaz web
Funciones clave
// 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
}
Añadir comandos personalizados
Para agregar nuevos comandos, modifique la función 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);
}
Aplicaciones Prácticas
Desarrollo y Depuración
void loop() {
// Debug sensor readings
int sensorValue = analogRead(A0);
sendToWebMonitor("Sensor A0: " + String(sensorValue));
// Debug variables
sendToWebMonitor("Loop count: " + String(loopCount++));
delay(1000);
}
Monitoreo remoto del 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");
}
}
Gestión de la configuración
// 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");
}
}
Características avanzadas
Filtrado de mensajes
Agregar tipos de mensajes y filtrado:
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álisis de comandos
Implementar un análisis de comandos sofisticado:
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 datos
Grabar datos de monitorización en la tarjeta SD o 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();
}
}
Solución de problemas
Problemas comunes
- Sin salida en el monitor web
- Verificar que Serial.begin() se llame en setup()
- Verificar la conexión WebSocket (indicador de estado verde)
- Verificar la consola del navegador en busca de errores
2. Comandos que no funcionan
- Asegúrate de que los comandos sean exactamente como se especifican
- Verifica la sensibilidad de los comandos a mayúsculas y minúsculas
- Busca mensajes de respuesta en el monitor
3. La interfaz se está cargando lentamente
- Comprobar la intensidad de la señal WiFi
- Reducir la frecuencia de mensajes
- Borrar la caché del navegador
4. Desconexiones de WebSocket
- Verificar la estabilidad de la red
- Reducir el tamaño del mensaje
- Implementar la lógica de reconexión
Consejos de depuración
Habilitar depuración detallada:
#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
Monitorear el estado de WebSocket:
void checkWebSocketStatus() {
if (server.getClientCount() > 0) {
sendToWebMonitor("WebSocket clients connected: " + String(server.getClientCount()));
}
}
Consideraciones de Seguridad
Validación de comandos
Siempre valide los comandos entrantes:
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;
}
Control de acceso
Implementar la autenticación básica:
bool isAuthorized(String clientId) {
// Check client authorization
return authorizedClients.indexOf(clientId) >= 0;
}
Ejemplos de Integración
Sistema de Monitoreo 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 Domótica
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)");
}
}
Próximos pasos
Después de dominar el ejemplo WebMonitor, prueba:
- Chat - Para comunicación interactiva
- DigitalPins - Para controlar salidas
- Slider - Para control de valor analógico
- MultipleWebApps - Combinando monitoreo con control
Soporte
Para obtener ayuda adicional:
- Consulta la documentación de la API
- Visita los tutoriales de DIYables: https://esp32io.com/tutorials/diyables-esp32-webapps
- Foros de la comunidad ESP32