Ejemplo de Arduino WebMonitor - Tutorial de Monitor Serial Basado en la Web
Visión general
El ejemplo WebMonitor reemplaza el Monitor Serial tradicional por una interfaz basada en la web, accesible desde cualquier dispositivo en su red. Diseñado para Arduino Uno R4 WiFi y DIYables STEM V4 IoT plataforma educativa con capacidades IoT mejoradas, monitoreo de sensores integrado y una integración perfecta con el ecosistema educativo.
Características
- Salida Serial en tiempo real: Ver mensajes de Arduino al instante en el navegador
- Entrada de comandos: Enviar comandos desde la interfaz web al Arduino
- Tema oscuro: Interfaz de estilo terminal fácil 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 borrar: Borra la pantalla del monitor
- Copiar/Pegar: Soporte completo para selección y copia de texto
- Plataforma extensible: Actualmente implementado para Arduino Uno R4 WiFi, pero puede ampliarse para otras plataformas de hardware. Ver DIYables_WebApps_ESP32
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino 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 Arduino Uno R4 WiFi/DIYables STEM V4 IoT, consulta el tutorial sobre configurar el entorno para Arduino Uno R4 WiFi/DIYables STEM V4 IoT en el IDE de Arduino.
- Conecta la placa Arduino Uno R4/DIYables STEM V4 IoT a tu computadora usando un cable USB.
- Inicia el IDE de Arduino en tu computadora.
- Selecciona la placa adecuada Arduino Uno R4 (p. ej., Arduino Uno R4 WiFi) y el puerto COM.
- Navega hasta el ícono Librerías en la barra izquierda del IDE de Arduino.
- Busca "DIYables WebApps", luego localiza la librería DIYables WebApps de DIYables.
- Haz clic en el botón Instalar para instalar la librería.
- Se le pedirá que instale algunas dependencias de bibliotecas adicionales.
- Haga clic en el botón Instalar todo para instalar todas las dependencias de bibliotecas.
- En el IDE de Arduino, vaya a Archivo Ejemplos DIYables WebApps WebMonitor ejemplo, o copie el código anterior y péguelo 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: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* 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 <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
UnoR4ServerFactory 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 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);
}
- Configurar 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 Arduino UNO R4/DIYables STEM V4 IoT
- Abre el Monitor Serial
- Revisa el resultado en el Monitor Serial. Se ve como lo siguiente
COM6
DIYables WebApp - Web Monitor Example
INFO: Added app /
INFO: Added app /web-monitor
DIYables WebApp Library
Platform: Arduino Uno R4 WiFi
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 Arduino.
- Toma nota de la dirección IP que se muestra 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 se muestra 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 puede acceder a la página directamente mediante la dirección IP seguida de /web-monitor. Por ejemplo: http://192.168.0.2/web-monitor
- Intente enviar comandos a su Arduino a través de la interfaz del monitor web y vea la salida serial en tiempo real de su Arduino.
Cómo usar
Visualización de la salida serial
- Abrir la interfaz del monitor web
- Arduino envía automáticamente mensajes de estado cada 5 segundos
- Toda la salida de Serial.println() aparece en el monitor
- Los mensajes se registran automáticamente con una marca de tiempo
Envío de comandos
- Escribe comandos en el campo de entrada en la parte inferior
- Pulsa Enter o haz clic en el botón Enviar
- Arduino procesa el comando y responde
Comandos integrados
El ejemplo incluye estos comandos de demostración:
Control de LED
- "led on" → Enciende el LED incorporado
- "led off" → Apaga el LED incorporado
- "led toggle" → Alterna el estado del LED
- "blink" → Parpadea el LED 3 veces
Comandos del sistema
- "status" → Muestra el estado de Arduino 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á implementada)
- Ctrl+A → Seleccionar todo el texto
Controles del monitor
- Desplazamiento automático → Se desplaza automáticamente a los nuevos mensajes
- Limpiar → Limpia la pantalla del monitor
- Copiar → Copia el texto seleccionado al portapeles
Personalización creativa - Construye tu herramienta de depuración avanzada
Expande este ejemplo de monitor web para crear una poderosa interfaz de depuración y control para tus proyectos. Agrega comandos personalizados, monitoreo de sensores y visualización de datos en tiempo real para satisfacer tus necesidades creativas.
Estructura del código
Componentes Principales
- Servidor WebApp: Gestiona conexiones HTTP y WebSocket
- Página de Monitoreo: 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
}
Agregar comandos personalizados
Para agregar nuevos comandos, modifica 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 de sistemas
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");
}
}
Funciones avanzadas
Filtrado de mensajes
Añadir 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
Registrar datos del monitor 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
1. Sin salida en el monitor web
- Verificar que se llame a Serial.begin() en setup()
- Verificar la conexión WebSocket (indicador de estado verde)
- Verificar la consola del navegador en busca de errores
2. Los comandos no funcionan
- Asegúrate de que los comandos sean exactamente tal como se especifican
- Verifica si los comandos distinguen entre mayúsculas y minúsculas
- Busca mensajes de respuesta en el monitor
3. La interfaz se está cargando lentamente
- Ver la intensidad de la señal WiFi
- Reducir la frecuencia de los 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
Activar 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 del WebSocket:
void checkWebSocketStatus() {
if (server.getClientCount() > 0) {
sendToWebMonitor("WebSocket clients connected: " + String(server.getClientCount()));
}
}
Consideraciones de seguridad
Validación de comandos
Siempre valida 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
Implementa 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 de WebMonitor, intenta:
- Chat - Para comunicación interactiva
- DigitalPins - Para controlar salidas
- Slider - Para controlar el 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://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Foros de la comunidad de Arduino