Arduino Nano ESP32 Web Monitor avec la Bibliothèque DIYables ESP32 WebApps
Aperçu
Ce tutoriel couvre la classe DIYablesWebMonitorPage de la bibliothèque DIYables ESP32 WebApps. La page fournit une interface de type terminal dans le navigateur. Le texte envoyé depuis le sketch apparaît dans l'affichage du navigateur ; le texte tapé dans le navigateur est transmis à un callback du sketch. Cela permet de surveiller et de commander l'Arduino Nano ESP32 depuis n'importe quel appareil sur le même réseau sans connexion série USB.
Regardez ce tutoriel vidéo étape par étape montrant comment utiliser WebMonitor avec les DIYables ESP32 WebApps :
Ce que ce Tutoriel Couvre
- Envoyer la sortie du sketch vers le moniteur du navigateur avec sendToWebMonitor()
- Recevoir les commandes tapées dans le navigateur via un callback du sketch
- Traiter les commandes intégrées telles que le contrôle LED et les requêtes de statut
- Accéder à l'interface du moniteur depuis un smartphone ou un PC
Matériel Requis
Ou vous pouvez acheter les kits suivants:
| 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.
Étapes
Suivez ces instructions étape par étape :
- Si c'est la première fois que vous utilisez l'Arduino Nano ESP32, consultez le tutoriel sur Installation du logiciel Arduino Nano ESP32..
- Connectez la carte Arduino Nano ESP32 à votre ordinateur avec un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la carte appropriée (ex. Arduino Nano ESP32) et le port COM.
- Naviguez vers l'icône Bibliothèques dans la barre gauche de l'IDE Arduino.
- Cherchez "DIYables ESP32 WebApps", puis trouvez la bibliothèque DIYables ESP32 WebApps de DIYables
- Cliquez sur le bouton Installer pour installer la bibliothèque.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- On vous demandera d'installer d'autres dépendances de bibliothèques
- Cliquez sur le bouton Installer tout pour installer toutes les dépendances de bibliothèques.
- Dans l'IDE Arduino, allez dans Fichier Exemples DIYables ESP32 WebApps WebMonitor, 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);
}
- Mettez à jour les identifiants WiFi dans le sketch :
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Cliquez sur le bouton Téléverser dans l'IDE Arduino pour téléverser le code sur l'Arduino Nano ESP32
- Ouvrez le Moniteur Série
- La sortie du Moniteur Série devrait ressembler à ceci :
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
DIYables WebApp - Web Monitor Example
INFO: Added app /
INFO: Added app /web-monitor
DIYables WebApp Library
Platform: Arduino Nano 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
==========================================
- Si rien n'apparaît, appuyez sur le bouton de réinitialisation de la carte.
- Entrez l'adresse IP du Moniteur Série dans un navigateur sur le même réseau.
- Exemple : http://192.168.0.2
- La page d'accueil affiche une carte pour l'application de moniteur :
- Sélectionnez la carte Web Monitor pour ouvrir l'interface terminal :
- La page est également directement accessible à http://192.168.0.2/web-monitor.
- Tapez des commandes dans le champ de saisie et appuyez sur Entrée. La carte répond et la réponse apparaît dans le terminal.
Commandes Intégrées
L'exemple de sketch reconnaît les commandes suivantes saisies dans le navigateur :
| Commande | Action |
|---|---|
| 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 |
| status | Affiche le statut de la carte et la durée de fonctionnement |
| help | Liste les commandes reconnues |
| reset counter | Réinitialise le compteur de messages |
| memory | Rapporte la mémoire heap libre |
| test | Envoie un message de test |
| echo [text] | Retourne le texte fourni |
| repeat [n] [text] | Répète le texte n fois |
Envoi de Données depuis le Sketch
Appelez sendToWebMonitor() n'importe où dans le sketch pour pousser du texte vers le navigateur :
void loop() {
webAppsServer.loop();
// Send a periodic status message
static unsigned long lastSend = 0;
if (millis() - lastSend >= 5000) {
lastSend = millis();
webMonitorPage.sendToWebMonitor("Uptime: " + String(millis() / 1000) + " s");
}
}
Dépannage
Le moniteur n'affiche aucune sortie du sketch
- Vérifiez que sendToWebMonitor() est appelé ; ajoutez un Serial.println() à côté pour confirmer l'exécution
- Vérifiez l'indicateur de statut WebSocket dans le navigateur
- Assurez-vous que webAppsServer.loop() s'exécute à chaque itération de loop() sans délais bloquants
Les commandes envoyées depuis le navigateur ne sont pas reçues
- Confirmez que onWebMonitorMessage est enregistré avant webAppsServer.begin()
- Vérifiez le Moniteur Série pour le texte de commande brut
Impossible d'ouvrir la page
- Vérifiez l'adresse IP affichée dans le Moniteur Série
- Assurez-vous que l'appareil du navigateur et la carte sont sur le même réseau WiFi 2,4 GHz