Exemple ESP32 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 ESP32, plateforme éducative avec des capacités IoT améliorées, une surveillance intégrée des capteurs et une intégration transparente avec l'écosystème éducatif.
Fonctionnalités
- Sortie série en temps réel: Afficher les messages ESP32 instantanément dans le navigateur
- Entrée de commandes: Envoyer des commandes depuis l'interface Web vers Arduino
- Thème sombre: Interface de style terminal, agréable pour les yeux
- Défilement automatique: Défilement automatique vers les messages les plus récents
- Horodatage: Tous les messages incluent des horodatages
- Historique des commandes: Naviguer parmi 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
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables ESP32 (ESP32 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 la première fois que vous utilisez l'ESP32, reportez-vous au tutoriel sur Installation du logiciel ESP32..
- Connectez la carte ESP32 à votre ordinateur à l'aide d'un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la bonne carte ESP32 (par exemple ESP32 Dev Module) et le port COM.
- Accédez à l'icône Libraries dans la barre gauche de l'IDE Arduino.
- Recherchez "DIYables ESP32 WebApps", puis trouvez la bibliothèque DIYables ESP32 WebApps par DIYables
- Cliquez sur le bouton Install pour installer la bibliothèque.
- Il vous sera demandé d'installer d'autres dépendances des bibliothèques
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances des bibliothèques
- Dans l'IDE Arduino, allez dans Fichier Exemples DIYables ESP32 WebApps WebMonitor l'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: 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);
}
- Configurez les identifiants WiFi 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 sur l'ESP32
- Ouvrez le Moniteur série
- Consultez le résultat dans le Moniteur série. Il ressemble à ce qui suit.
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 vous ne voyez rien, redémarrez la carte ESP32.
- Notez l'adresse IP affichée et saisissez cette adresse dans la barre d'adresse 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 à la page directement via l'adresse IP suivie de /web-monitor. Par exemple : http://192.168.0.2/web-monitor
- Essayez d'envoyer des commandes à votre ESP32 via l'interface du moniteur Web et affichez 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
- L'ESP32 envoie automatiquement des messages d'état toutes les 5 secondes
- Toute la sortie de Serial.println() s'affiche dans le moniteur
- Les messages sont horodatés automatiquement
Envoi de commandes
- Tapez des commandes dans le champ de saisie en bas
- Appuyez sur la touche Entrée ou cliquez sur le bouton Envoyer
- L'ESP32 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" → Fais clignoter la LED 3 fois
Commandes système
- "statut" → Affiche l'état de l'ESP32 et le temps de fonctionnement
- "aide" → Liste des commandes disponibles
- "réinitialiser le compteur" → Réinitialise le compteur de messages
- "mémoire" → 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 ↑/↓ → Naviguer dans l'historique des commandes
- Ctrl+L → Effacer l'écran (si cela est implémenté)
- Ctrl+A → Sélectionner tout le texte
Contrôles du moniteur
- Défilement automatique → défile automatiquement vers les nouveaux messages
- Effacer → Efface l'affichage du moniteur
- Copier → Copie 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 de débogage et de contrôle puissante 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 style terminal
- Gestionnaire de messages: Traite les commandes entrantes
- Pont série: Transmet la sortie série vers 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 la 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 des commandes sophistiquée :
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;
}
Enregistrement des données
Enregistrer les données du moniteur sur la carte SD ou 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
- Aucune sortie dans le moniteur Web
- Vérifier que Serial.begin() est appelé dans setup()
- Vérifier la connexion WebSocket (indicateur de statut vert)
- Vérifier la console du navigateur pour les erreurs
2. Commandes qui ne fonctionnent pas
- Assurez-vous que les commandes sont exactement telles que 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
- Vider le cache du navigateur
- 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 de 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 de la valeur analogique
- MultipleWebApps - Pour combiner la surveillance et le contrôle
Assistance
Pour obtenir une aide supplémentaire :
- Consultez la documentation de référence de l’API
- Visitez les tutoriels DIYables : https://esp32io.com/tutorials/diyables-esp32-webapps
- Forums de la communauté ESP32