Arduino Nano ESP32 Web Monitor mit DIYables ESP32 WebApps-Bibliothek
Übersicht
Dieses Tutorial behandelt die Klasse DIYablesWebMonitorPage aus der DIYables ESP32 WebApps-Bibliothek. Die Seite bietet eine terminalähnliche Schnittstelle im Browser. Text, der aus der Skizze gesendet wird, wird in der Browser-Anzeige angezeigt; Text, der im Browser eingegeben wird, wird an einen Skizzen-Callback geliefert. Dies ermöglicht die Überwachung und Steuerung des Arduino Nano ESP32 von jedem Gerät im selben Netzwerk ohne USB-Serienverbindung.
Sehen Sie sich dieses Schritt-für-Schritt-Video-Tutorial an, das zeigt, wie man WebMonitor mit dem DIYables ESP32 WebApps verwendet:
Was dieses Tutorial behandelt
- Senden von Skizzenausgaben an den Browser-Monitor mit sendToWebMonitor()
- Empfangen von im Browser eingegebenen Befehlen in einem Skizzen-Callback
- Verarbeitung eingebauter Befehle wie LED-Steuerung und Statusabfragen
- Zugriff auf die Monitorschnittstelle von einem Smartphone oder PC
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.
Schritte
Befolgen Sie diese Anweisungen Schritt für Schritt:
- Wenn Sie Arduino Nano ESP32 zum ersten Mal verwenden, beziehen Sie sich auf das Tutorial zum Einrichten der Arduino Nano ESP32-Entwicklungsumgebung.
- Verbinden Sie das Arduino Nano ESP32-Board mit Ihrem Computer über ein USB-Kabel.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das entsprechende Board (z. B. Arduino Nano ESP32) und den COM-Port aus.
- Navigieren Sie zu dem Symbol Libraries in der linken Leiste der Arduino IDE.
- Suchen Sie nach "DIYables ESP32 WebApps", dann finden Sie die DIYables ESP32 WebApps-Bibliothek von DIYables
- Klicken Sie auf die Schaltfläche Install, um die Bibliothek zu installieren.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- Sie werden aufgefordert, einige andere Bibliotheksabhängigkeiten zu installieren
- Klicken Sie auf die Schaltfläche Install All, um alle Bibliotheksabhängigkeiten zu installieren.
- Gehen Sie in Arduino IDE zu File Examples DIYables ESP32 WebApps WebMonitor Beispiel, oder kopieren Sie den obigen Code und fügen Sie ihn in den Editor der Arduino IDE ein
/*
* 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);
}
- Aktualisieren Sie die WiFi-Anmeldedaten in der Skizze:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klicken Sie auf die Schaltfläche Upload in Arduino IDE, um Code auf Arduino Nano ESP32 hochzuladen
- Öffnen Sie den Serial Monitor
- Die Serial Monitor-Ausgabe sollte wie folgt aussehen:
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
==========================================
- Wenn nichts angezeigt wird, drücken Sie die Reset-Taste auf dem Board.
- Geben Sie die IP-Adresse aus dem Serial Monitor in einen Browser im selben Netzwerk ein.
- Beispiel: http://192.168.0.2
- Die Startseite zeigt eine Karte für die Monitor-Anwendung:
- Wählen Sie die Web Monitor-Karte, um die Terminalschnittstelle zu öffnen:
- Die Seite ist auch direkt unter http://192.168.0.2/web-monitor erreichbar.
- Geben Sie Befehle in das Eingabefeld ein und drücken Sie Enter. Das Board antwortet und die Antwort wird im Terminal angezeigt.
Eingebaute Befehle
Die Beispielskizze erkennt die folgenden Befehle an, die im Browser eingegeben werden:
| Befehl | Aktion |
|---|---|
| led on | Schaltet die eingebaute LED ein |
| led off | Schaltet die eingebaute LED aus |
| led toggle | Wechselt den LED-Status |
| blink | Blinkt die LED 3 mal |
| status | Druckt Board-Status und Betriebszeit |
| help | Listet erkannte Befehle auf |
| reset counter | Setzt den Nachrichtenzähler zurück |
| memory | Meldet freien Heap-Speicher |
| test | Sendet eine Test-Nachricht |
| echo [text] | Gibt den bereitgestellten Text zurück |
| repeat [n] [text] | Wiederholt den Text n mal |
Daten aus der Skizze senden
Rufen Sie sendToWebMonitor() überall in der Skizze auf, um Text an den Browser zu drücken:
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");
}
}
Befehle vom Browser empfangen
Registrieren Sie einen Callback, um Text zu verarbeiten, der im Browser-Eingabefeld eingegeben wird:
webMonitorPage.onWebMonitorMessage([](const String& command) {
Serial.println("Received: " + command);
if (command == "led on") {
digitalWrite(LED_BUILTIN, HIGH);
webMonitorPage.sendToWebMonitor("LED is now ON");
} else if (command == "led off") {
digitalWrite(LED_BUILTIN, LOW);
webMonitorPage.sendToWebMonitor("LED is now OFF");
} else {
webMonitorPage.sendToWebMonitor("Unknown command: " + command);
}
});
Fehlerbehebung
Monitor zeigt keine Ausgabe aus der Skizze
- Überprüfen Sie, ob sendToWebMonitor() aufgerufen wird; fügen Sie ein Serial.println() daneben hinzu, um die Ausführung zu bestätigen
- Überprüfen Sie den WebSocket-Statusindikator im Browser
- Stellen Sie sicher, dass webAppsServer.loop() auf jeder loop()-Iteration ohne blockierende Verzögerungen ausgeführt wird
Befehle, die vom Browser gesendet werden, werden nicht empfangen
- Bestätigen Sie, dass onWebMonitorMessage vor webAppsServer.begin() registriert ist
- Überprüfen Sie den Serial Monitor auf den rohen Befehlstext
Die Seite kann nicht geöffnet werden
- Überprüfen Sie die im Serial Monitor angezeigte IP-Adresse
- Stellen Sie sicher, dass sich das Browser-Gerät und das Board im selben 2,4-GHz-WiFi-Netzwerk befinden