ESP32 WebMonitor-Beispiel - Tutorial zum webbasierten seriellen Monitor
Übersicht
Das WebMonitor-Beispiel ersetzt den traditionellen seriellen Monitor durch eine webbasierte Benutzeroberfläche, die von jedem Gerät in Ihrem Netzwerk aus zugänglich ist. Entwickelt für ESP32 – eine Bildungsplattform mit erweiterten IoT-Funktionen, integrierter Sensorüberwachung und nahtloser Integration in das Bildungsökosystem.
Funktionen
- Echtzeit-Seriellausgabe: ESP32-Nachrichten sofort im Browser anzeigen
- Kommandoeingabe: Befehle von der Weboberfläche an Arduino senden
- Dunkles Design: Eine augenschonende Terminal-ähnliche Oberfläche
- Auto-Scroll: Scrollt automatisch zu den neuesten Nachrichten
- Zeitstempel: Alle Nachrichten enthalten Zeitstempel
- Befehlsverlauf: Mit Pfeiltasten zu vorherigen Befehlen navigieren
- Löschfunktion: Monitoranzeige löschen
- Kopieren/Einfügen: Vollständige Textauswahl und Kopierunterstützung
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables ESP32 Starter-Kit (ESP32 enthalten) | |
| 1 | × | DIYables Sensor-Kit (30 Sensoren/Displays) | |
| 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.
Setup-Anweisungen
Schnelle Schritte
Befolge diese Anweisungen Schritt für Schritt:
- Wenn Sie den ESP32 zum ersten Mal verwenden, lesen Sie das Tutorial zur Einrichtung der Entwicklungsumgebung für ESP32 in der Arduino IDE.
- Verbinden Sie das ESP32-Board mit Ihrem Computer über ein USB-Kabel.
- Öffnen Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das passende ESP32-Board (z. B. ESP32 Dev Module) und den COM-Port aus.
- Gehen Sie zu dem Bibliotheken-Symbol in der linken Leiste der Arduino IDE.
- Suchen Sie "DIYables ESP32 WebApps", und finden Sie dann die DIYables ESP32 WebApps-Bibliothek von DIYables.
- Klicken Sie auf die Installieren-Schaltfläche, um die Bibliothek zu installieren.
- Sie werden aufgefordert, einige weitere Bibliotheksabhängigkeiten zu installieren.
- Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.
- In der Arduino-IDE gehen Sie zu Datei Beispiele DIYables ESP32 WebApps WebMonitor Beispiel, oder kopieren Sie den obigen Code und fügen 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);
}
- Konfigurieren Sie die WiFi-Zugangsdaten im Code, indem Sie diese Zeilen aktualisieren:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klicken Sie in der Arduino IDE auf die Hochladen-Schaltfläche, um Code auf den ESP32 hochzuladen.
- Öffnen Sie den seriellen Monitor.
- Überprüfen Sie das Ergebnis im seriellen Monitor. Es sieht so aus wie unten.
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
- Wenn Sie nichts sehen, starten Sie das ESP32-Board neu.
- Notieren Sie sich die angezeigte IP-Adresse und geben Sie diese Adresse in die Adresszeile eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Beispiel: http://192.168.0.2
- Sie sehen die Startseite wie im untenstehenden Bild:
- Klicken Sie auf den Web Monitor-Link, dann sehen Sie die Benutzeroberfläche der Web Monitor-App wie unten dargestellt:
- Oder Sie können die Seite auch direkt über die IP-Adresse aufrufen, gefolgt von /web-monitor. Zum Beispiel: http://192.168.0.2/web-monitor
- Versuchen Sie, Befehle an Ihren ESP32 über die Webmonitor-Oberfläche zu senden und die serielle Ausgabe Ihres Arduino in Echtzeit anzuzeigen.
Wie man es verwendet
Serielle Ausgabe anzeigen
- Öffne die Webmonitor-Oberfläche
- Der ESP32 sendet automatisch Statusmeldungen alle 5 Sekunden
- Alle Ausgaben von Serial.println() erscheinen im Monitor
- Nachrichten werden automatisch mit Zeitstempeln versehen
Befehle senden
- Geben Sie Befehle in das Eingabefeld unten ein
- Drücken Sie die Eingabetaste oder klicken Sie auf die Schaltfläche Senden
- ESP32 verarbeitet den Befehl und antwortet
Eingebaute Befehle
Das Beispiel enthält diese Demonstrationsbefehle:
LED-Steuerung
- "led on" → Schaltet die eingebaute LED ein
- "led off" → Schaltet die eingebaute LED aus
- "led toggle" → Schaltet den Zustand der LED um
- "blink" → Blinkt die LED dreimal
Systembefehle
- "status" → Zeigt den ESP32-Status und die Betriebszeit an
- "help" → Listet verfügbare Befehle auf
- "reset counter" → Setzt den Nachrichten-Zähler zurück
- "memory" → Zeigt Informationen zum freien Speicher an
Debug-Befehle
- "test" → Sendet eine Testnachricht
- "echo [message]" → Gibt Ihre Nachricht zurück
- "repeat [n] [message]" → Wiederholt die Nachricht n-mal
Schnittstellenfunktionen
Tastenkombinationen
- Eingabetaste → Befehl senden
- ↑/↓ Pfeiltasten → Befehlsverlauf navigieren
- Strg+L → Bildschirm löschen (falls implementiert)
- Strg+A → Alles auswählen
Monitorsteuerungen
- Automatisches Scrollen → Scrollt automatisch zu neuen Nachrichten
- Löschen → Löscht die Anzeige des Monitors
- Kopieren → Den ausgewählten Text in die Zwischenablage kopieren
Kreative Anpassung – Bauen Sie Ihr fortgeschrittenes Debugging-Tool
Erweitern Sie dieses Webmonitor-Beispiel, um eine leistungsstarke Debugging- und Steueroberfläche für Ihre Projekte zu erstellen! Fügen Sie benutzerdefinierte Befehle, Sensorüberwachung und Echtzeit-Datenvisualisierung hinzu, um Ihre kreativen Bedürfnisse zu erfüllen.
Code-Struktur
Hauptkomponenten
- WebApp-Server: Verarbeitet HTTP- und WebSocket-Verbindungen
- Monitor-Seite: Bietet eine Terminal-ähnliche Weboberfläche
- Nachrichten-Handler: Verarbeitet eingehende Befehle
- Serielle Brücke: Leitet serielle Ausgaben an die Weboberfläche weiter
Schlüsselfunktionen
// 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
}
Benutzerdefinierte Befehle hinzufügen
Um neue Befehle hinzuzufügen, ändern Sie die Funktion 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);
}
Praktische Anwendungen
Entwicklung und Debugging
void loop() {
// Debug sensor readings
int sensorValue = analogRead(A0);
sendToWebMonitor("Sensor A0: " + String(sensorValue));
// Debug variables
sendToWebMonitor("Loop count: " + String(loopCount++));
delay(1000);
}
Fernüberwachung von Systemen
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");
}
}
Konfigurationsmanagement
// 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");
}
}
Erweiterte Funktionen
Nachrichtenfilterung
Nachrichtenarten hinzufügen und filtern:
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);
}
Befehlsparsing
Implementieren Sie eine anspruchsvolle Befehlsanalyse:
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;
}
Datenerfassung
Protokollieren Sie Monitor-Daten auf SD-Karte oder 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();
}
}
Fehlerbehebung
Häufige Probleme
1. Keine Ausgabe im Webmonitor
- Prüfen, ob Serial.begin() in setup() aufgerufen wird
- WebSocket-Verbindung überprüfen (grüner Statusindikator)
- Browser-Konsole auf Fehler überprüfen
2. Befehle funktionieren nicht
- Stellen Sie sicher, dass Befehle genau wie angegeben sind
- Prüfen Sie die Groß- und Kleinschreibung der Befehle
- Suchen Sie im Monitor nach Antwortmeldungen
3. Benutzeroberfläche lädt langsam
- WLAN-Signalstärke überprüfen
- Nachrichtenhäufigkeit reduzieren
- Browser-Cache leeren
4. WebSocket-Verbindungsabbrüche
- Netzwerkstabilität überprüfen
- Nachrichtenlänge reduzieren
- Wiederverbindungslogik implementieren
Debug-Tipps
Ausführliches Debuggen aktivieren:
#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
WebSocket-Status überwachen:
void checkWebSocketStatus() {
if (server.getClientCount() > 0) {
sendToWebMonitor("WebSocket clients connected: " + String(server.getClientCount()));
}
}
Sicherheitsaspekte
Befehlsvalidierung
Eingehende Befehle immer validieren:
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;
}
Zugriffskontrolle
Basis-Authentifizierung implementieren:
bool isAuthorized(String clientId) {
// Check client authorization
return authorizedClients.indexOf(clientId) >= 0;
}
Integrationsbeispiele
Sensorüberwachungssystem
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();
}
}
Hausautomationsmonitor
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)");
}
}
Nächste Schritte
Nachdem Sie das WebMonitor-Beispiel gemeistert haben, versuchen Sie:
- Chat - Für interaktive Kommunikation
- DigitalPins - Zur Steuerung von Ausgängen
- Slider - Zur Steuerung eines analogen Werts
- MultipleWebApps - Kombination von Überwachung und Steuerung
Unterstützung
Für weitere Hilfe:
- Überprüfen Sie die API-Referenzdokumentation
- Besuchen Sie Tutorials von DIYables: https://esp32io.com/tutorials/diyables-esp32-webapps
- ESP32-Community-Foren