Exemplo Arduino WebMonitor - Tutorial de Serial Monitor Baseado em 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 Arduino Uno R4 WiFi e DIYables STEM V4 IoT, com recursos IoT avançados, monitoramento de sensores integrado e integração perfeita com o ecossistema educacional.
Assista a este tutorial em vídeo passo a passo que mostra como usar o WebMonitor com o app DIYables WebApps:
Recursos
- Saída Serial em Tempo Real: Veja as mensagens do Arduino na hora, no navegador
- Entrada de Comandos: Envie comandos da interface web para o Arduino
- Tema Escuro: Interface estilo terminal, que cansa menos os olhos
- Rolagem Automática: Rola automaticamente até as mensagens mais recentes
- Marcação de Horário: 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 tela do monitor
- Copiar/Colar: Suporte completo para selecionar e copiar texto
- Plataforma Extensível: Atualmente implementada para o Arduino Uno R4 WiFi, mas pode ser estendida para outras plataformas de hardware. Veja DIYables_WebApps_ESP32
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables STEM V4B IoT Starter Kit (Arduino 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 Arduino Uno R4 WiFi/DIYables STEM V4 IoT, consulte o tutorial sobre como configurar o ambiente para o Arduino Uno R4 WiFi/DIYables STEM V4 IoT no Arduino IDE.
- Conecte a placa Arduino Uno R4/DIYables STEM V4 IoT ao seu computador usando um cabo USB.
- Abra o Arduino IDE no seu computador.
- Selecione a placa Arduino Uno R4 apropriada (por exemplo, Arduino Uno R4 WiFi) e a porta COM.
- Navegue até o ícone Libraries na barra esquerda do Arduino IDE.
- Pesquise "DIYables WebApps" e encontre a biblioteca DIYables WebApps, da DIYables
- Clique no botão Install para instalar a biblioteca.
- Você será perguntado se quer instalar outras bibliotecas das quais ela depende
- Clique no botão Install All para instalar todas as dependências da biblioteca.
- No Arduino IDE, vá em File Examples DIYables WebApps WebMonitor para abrir o exemplo, ou copie o código acima e cole no editor do 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: 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);
}
- Configure as credenciais do 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 no Arduino IDE para carregar o código no Arduino UNO R4/DIYables STEM V4 IoT
- Abra o Serial Monitor
- Veja o resultado no Serial Monitor. Ele deve ficar parecido com o abaixo
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno R4 WiFi' on 'COM15')
New Line
9600 baud
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
==========================================
- Se você não vir nada, reinicie a placa Arduino.
- 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
- Tente enviar comandos ao seu Arduino pela interface do web monitor e veja a saída serial do Arduino em tempo real.
Como Usar
Visualizando a Saída Serial
- Abra a interface do web monitor
- O Arduino 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 Arduino processa o comando e responde
Comandos Integrados
O exemplo inclui estes comandos de demonstração:
Controle de LED
- "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
Comandos do Sistema
- "status" → Mostra o status e o tempo de atividade do Arduino
- "help" → Lista os comandos disponíveis
- "reset counter" → Zera o contador de mensagens
- "memory" → Mostra informações sobre a 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
- Auto-scroll → Rola automaticamente até as novas mensagens
- Clear → Limpa a tela do monitor
- Copy → Copia o texto selecionado para a área de transferência
Personalização Criativa - Crie a Sua Ferramenta Avançada de Depuração
Expanda este exemplo de web monitor para criar uma interface poderosa 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 (Command Parsing)
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 (Data Logging)
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 no setup()
- Confirme 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 diferença entre maiúsculas e minúsculas nos comandos
- Procure as 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)");
}
}
Arduino Uno R4 WebMonitor com DIYables WebApps
O código abaixo é uma adaptação do exemplo WebMonitor, e o resultado é mostrado no vídeo de demonstração abaixo:
#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);
}
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 obter mais ajuda:
- Consulte a documentação de Referência da API
- Visite os tutoriais da DIYables: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Fóruns da comunidade Arduino