Exemple Arduino WebMonitor - Tutoriel du moniteur série basé sur le Web
Vue d'ensemble
L'exemple WebMonitor remplace le moniteur série traditionnel par une interface Web accessible depuis n'importe quel appareil sur votre réseau. Conçu pour la plateforme éducative Arduino Uno R4 WiFi et DIYables STEM V4 IoT, offrant des capacités IoT améliorées, une surveillance des capteurs intégrée et une intégration transparente avec l'écosystème éducatif.
Fonctionnalités
- Sortie Série en Temps Réel: Voir les messages Arduino instantanément dans le navigateur
- Saisie de Commandes: Envoyer des commandes depuis l'interface Web vers l'Arduino
- Thème sombre: Interface de style terminal facile pour les yeux
- Défilement automatique: Se déplace automatiquement vers les messages les plus récents
- Horodatage: Tous les messages incluent des horodatages
- Historique des commandes: Parcourez les commandes précédentes avec les touches fléchées
- Fonction d'effacement: Effacer l'affichage du moniteur
- Copier/Coller: Support complet de la sélection et de la copie du texte
- Plateforme extensible: Actuellement implémentée pour Arduino Uno R4 WiFi, mais peut être étendue à d'autres plates-formes matérielles. Voir DIYables_WebApps_ESP32
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables STEM V4 IoT (Arduino inclus) | |
| 1 | × | Kit de Capteurs DIYables (30 capteurs/écrans) | |
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
Instructions d'installation
Étapes rapides
Suivez ces instructions étape par étape :
- Si c’est votre première utilisation de l’Arduino Uno R4 WiFi/DIYables STEM V4 IoT, reportez-vous au tutoriel sur la configuration de l’environnement pour Arduino Uno R4 WiFi/DIYables STEM V4 IoT dans l’IDE Arduino (BASE_URL/tutorials/arduino-uno-r4/arduino-uno-r4-software-installation).
- Connectez la carte Arduino Uno R4/DIYables STEM V4 IoT à votre ordinateur à l’aide d’un câble USB.
- Lancez l’IDE Arduino sur votre ordinateur.
- Sélectionnez la carte Arduino Uno R4 appropriée (par exemple Arduino Uno R4 WiFi) et le port COM.
- Accédez à l’icône Libraries dans la barre de gauche de l’IDE Arduino.
- Recherchez «DIYables WebApps», puis trouvez la bibliothèque DIYables WebApps de DIYables.
- Cliquez sur le bouton Install pour installer la bibliothèque.
- On vous demandera d'installer d'autres dépendances de bibliothèque.
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances de bibliothèque.
- Dans l'IDE Arduino, allez dans Fichier Exemples DIYables WebApps WebMonitor exemple, ou copiez le code ci-dessus et collez-le dans l'éditeur de l'IDE 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);
}
- Configurer les identifiants Wi‑Fi dans le code en mettant à jour ces lignes :
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Cliquez sur le bouton Upload dans l'IDE Arduino pour téléverser le code vers l'Arduino UNO R4/DIYables STEM V4 IoT
- Ouvrez le moniteur série
- Consultez le résultat dans le moniteur série. Il est indiqué ci-dessous
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 vous ne voyez rien, redémarrez la carte Arduino.
- Notez l'adresse IP affichée et saisissez cette adresse dans la barre d'adresses d'un navigateur Web sur votre smartphone ou votre PC.
- Exemple : http://192.168.0.2
- Vous verrez la page d'accueil comme sur l'image ci-dessous :
- Cliquez sur le lien Web Monitor, vous verrez l'interface utilisateur de l'application Web Monitor comme ci-dessous :
- Ou vous pouvez également accéder directement à la page via l'adresse IP suivie de /web-monitor. Par exemple : http://192.168.0.2/web-monitor
- Essayez d'envoyer des commandes à votre Arduino via l'interface du moniteur Web et d'afficher la sortie série en temps réel de votre Arduino.
Comment utiliser
Affichage de la sortie série
- Ouvrez l'interface du moniteur Web
- Arduino envoie automatiquement des messages d'état toutes les 5 secondes
- Toute la sortie Serial.println() apparaît dans le moniteur
- Les messages sont horodatés automatiquement
Envoi des commandes
- Tapez les commandes dans le champ de saisie en bas
- Appuyez sur Entrée ou cliquez sur le bouton Envoyer
- Arduino traite la commande et répond
Commandes intégrées
L'exemple comprend ces commandes de démonstration :
Contrôle des LED
- "led on" → Allume la LED intégrée
- "led off" → Éteint la LED intégrée
- "led toggle" → Bascule l'état de la LED
- "blink" → Fait clignoter la LED 3 fois
Commandes système
- "status" → Affiche l'état et le temps de fonctionnement d'Arduino
- "help" → Liste les commandes disponibles
- "reset counter" → Réinitialise le compteur de messages
- "memory" → Affiche les informations sur la mémoire libre
Commandes de débogage
- "test" → Envoie un message de test
- "echo [message]" → Renvoie votre message
- "repeat [n] [message]" → Répète le message n fois
Fonctionnalités de l'interface
Raccourcis clavier
- Entrée → Envoyer la commande
- Touches fléchées Haut/Bas → Naviguer dans l'historique des commandes
- Ctrl+L → Effacer l'écran (si implémenté)
- Ctrl+A → Sélectionner tout le texte
Contrôles du moniteur
- Défilement automatique → Se déplace automatiquement vers les nouveaux messages
- Effacer → Efface l'affichage du moniteur
- Copier → Copier le texte sélectionné dans le presse-papiers
Personnalisation créative - Construisez votre outil de débogage avancé
Élargissez cet exemple de moniteur Web pour créer une interface puissante de débogage et de contrôle pour vos projets ! Ajoutez des commandes personnalisées, une surveillance des capteurs et une visualisation des données en temps réel pour répondre à vos besoins créatifs.
Structure du code
Composants principaux
- Serveur WebApp : Gère les connexions HTTP et WebSocket
- Page de surveillance : Fournit une interface Web de type terminal
- Gestionnaire de commandes : Traite les commandes entrantes
- Pont série : Transmet la sortie série à l'interface Web
Fonctions clés
// 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
}
Ajout de commandes personnalisées
Pour ajouter de nouvelles commandes, modifiez la fonction 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);
}
Applications pratiques
Développement et débogage
void loop() {
// Debug sensor readings
int sensorValue = analogRead(A0);
sendToWebMonitor("Sensor A0: " + String(sensorValue));
// Debug variables
sendToWebMonitor("Loop count: " + String(loopCount++));
delay(1000);
}
Surveillance à distance du système
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");
}
}
Gestion de configuration
// 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");
}
}
Fonctionnalités avancées
Filtrage des messages
Ajouter les types de messages et le filtrage :
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);
}
Analyse des commandes
Implémentez une analyse sophistiquée des commandes :
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;
}
Journalisation des données
Enregistrer les données du moniteur sur une carte SD ou sur l'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();
}
}
Dépannage
Problèmes courants
1. Aucune sortie dans le moniteur Web
- Vérifier que Serial.begin() est appelé dans setup()
- Vérifier la connexion WebSocket (indicateur d'état vert)
- Vérifier la console du navigateur pour les erreurs
2. Commandes qui ne fonctionnent pas
- Assurez-vous que les commandes sont exactement telles qu'elles sont spécifiées
- Vérifiez la sensibilité à la casse des commandes
- Recherchez les messages de réponse dans le moniteur
3. L'interface se charge lentement
- Vérifier la force du signal Wi-Fi
- Réduire la fréquence des messages
- Effacer le cache du navigateur
4. Déconnexions WebSocket
- Vérifier la stabilité du réseau
- Réduire la taille des messages
- Implémenter la logique de reconnexion
Astuces de débogage
Activer le débogage détaillé :
#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
Surveiller l'état du WebSocket :
void checkWebSocketStatus() {
if (server.getClientCount() > 0) {
sendToWebMonitor("WebSocket clients connected: " + String(server.getClientCount()));
}
}
Considérations de sécurité
Validation de la commande
Toujours valider les commandes 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;
}
Contrôle d'accès
Implémenter l'authentification de base:
bool isAuthorized(String clientId) {
// Check client authorization
return authorizedClients.indexOf(clientId) >= 0;
}
Exemples d'intégration
Système de surveillance des capteurs
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();
}
}
Moniteur domotique
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)");
}
}
Prochaines étapes
Après avoir maîtrisé l'exemple WebMonitor, essayez :
- Chat - Pour une communication interactive
- DigitalPins - Pour le contrôle des sorties
- Slider - Pour le contrôle d'une valeur analogique
- MultipleWebApps - Combiner la surveillance et le contrôle
Assistance
Pour obtenir une aide supplémentaire :
- Consultez la documentation de l’API
- Visitez les tutoriels DIYables : https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Forums de la communauté Arduino