Arduino WebMonitor-Beispiel – Webbasierter serieller Monitor Tutorial
WebMonitor-Beispiel - Installationsanleitung
Überblick
Das WebMonitor-Beispiel ersetzt den herkömmlichen Serial Monitor durch eine webbasierte Oberfläche, die von jedem Gerät in Ihrem Netzwerk erreichbar ist. Entwickelt für Arduino Uno R4 WiFi und DIYables STEM V4 IoT Bildungsplattform mit erweiterten IoT-Fähigkeiten, integrierter Sensorüberwachung und nahtloser Integration in das Bildungsökosystem.
Funktionen
- Echtzeit-Seriellausgabe: Arduino-Nachrichten sofort im Browser anzeigen
- Befehlseingabe: Befehle von der Weboberfläche an Arduino senden
- Dunkles Design: Eine augenfreundliche Terminal-ähnliche Oberfläche
- Automatisches Scrollen: Scrollt automatisch zu den neuesten Meldungen
- Zeitstempel: Alle Meldungen enthalten Zeitstempel
- Befehlshistorie: Mit Pfeiltasten zu vorherigen Befehlen navigieren
- Löschfunktion: Die Monitoranzeige löschen
- Kopieren/Einfügen: Vollständige Textauswahl und Kopierunterstützung
- Plattform-Erweiterbarkeit: Derzeit für Arduino Uno R4 WiFi implementiert, aber kann auf andere Hardware-Plattformen erweitert werden. Siehe DIYables_WebApps_ESP32
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables STEM V4 IoT Starter-Kit (Arduino 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.
Installationsanleitung
Schnelle Schritte
Befolgen Sie diese Anweisungen Schritt für Schritt:
- Wenn dies das erste Mal ist, dass Sie den Arduino Uno R4 WiFi/DIYables STEM V4 IoT verwenden, lesen Sie das Tutorial zur Einrichtung der Umgebung für den Arduino Uno R4 WiFi/DIYables STEM V4 IoT in der Arduino IDE (BASE_URL/tutorials/arduino-uno-r4/arduino-uno-r4-software-installation).
- Schließen Sie das Arduino Uno R4/DIYables STEM V4 IoT-Board mit einem USB-Kabel an Ihren Computer an.
- Öffnen Sie die Arduino-IDE auf Ihrem Computer.
- Wählen Sie das passende Arduino Uno R4-Board (z. B. Arduino Uno R4 WiFi) und den COM-Port aus.
- Navigieren Sie zum Symbol Bibliotheken in der linken Seitenleiste der Arduino-IDE.
- Suchen Sie "DIYables WebApps", dann finden Sie die DIYables WebApps-Bibliothek von DIYables.
- Klicken Sie auf die Schaltfläche Installieren, 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 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: 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);
}
- Konfigurieren Sie die WLAN-Anmeldeinformationen im Code, indem Sie diese Zeilen aktualisieren:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klicken Sie auf die Schaltfläche Hochladen in der Arduino-IDE, um Code auf den Arduino UNO R4/DIYables STEM V4 IoT hochzuladen
- Öffnen Sie den seriellen Monitor
- Schauen Sie sich das Ergebnis im seriellen Monitor an. Es sieht wie folgt aus
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
- Wenn Sie nichts sehen, starten Sie das Arduino-Board neu.
- Merken Sie sich die angezeigte IP-Adresse, und geben Sie diese Adresse in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Beispiel: http://192.168.0.2
- Sie sehen die Startseite wie im unten gezeigten Bild:
- Klicken Sie auf den Web Monitor-Link, dann sehen Sie die Benutzeroberfläche der Web Monitor-App wie unten:
- 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 Arduino über die Web-Monitor-Oberfläche zu senden und die serielle Ausgabe Ihres Arduino in Echtzeit anzuzeigen.
Wie man es verwendet
Serielle Ausgabe anzeigen
- Öffnen Sie die Web-Monitor-Oberfläche.
- Arduino sendet alle 5 Sekunden automatisch Statusmeldungen.
- Alle Serial.println()-Ausgaben erscheinen im Monitor.
- Nachrichten werden automatisch mit Zeitstempeln versehen.
Befehle senden
- Geben Sie Befehle in das Eingabefeld unten ein
- Drücken Sie die Enter-Taste oder klicken Sie auf die Senden-Schaltfläche
- Arduino verarbeitet den Befehl und antwortet
Integrierte Befehle
Das Beispiel enthält diese Demonstrationsbefehle:
LED-Steuerung
- "LED einschalten" → Schaltet die eingebaute LED ein
- "LED ausschalten" → Schaltet die eingebaute LED aus
- "LED umschalten" → Schaltet den Zustand der LED um
- "LED dreimal blinken" → Blinkt die LED dreimal
Systembefehle
- "status" → Zeigt Arduino-Status und 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 deine 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 → Text auswählen
Monitoreinstellungen
- Automatisches Scrollen → Scrollt automatisch zu neuen Nachrichten
- Löschen → Löscht die Monitoranzeige
- Kopieren → Ausgewählten Text in die Zwischenablage kopieren
Kreative Anpassung - Baue dein fortschrittliches Debugging-Tool
Erweitern Sie dieses Webmonitor-Beispiel, um eine leistungsstarke Debugging- und Kontrolloberfläche für Ihre Projekte zu erstellen! Fügen Sie benutzerdefinierte Befehle, Sensorüberwachung und Echtzeit-Datenvisualisierung hinzu, um Ihren kreativen Bedürfnissen gerecht zu werden.
Quellcode-Struktur
Hauptkomponenten
- WebApp-Server: Verarbeitet HTTP- und WebSocket-Verbindungen
- Monitor-Seite: Bietet eine Terminal-ähnliche Weboberfläche
- Nachrichten-Handler: Verarbeitet eingehende Befehle
- Serielle Bridge: Leitet serielle Ausgaben an die Weboberfläche weiter
Kernfunktionen
// 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
Nachrichtenfilter
Nachrichtentypen hinzufügen und Filterung:
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);
}
Befehlsanalyse
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;
}
Datenprotokollierung
Monitordaten auf SD-Karte oder EEPROM protokollieren:
#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
- Überprüfe, ob Serial.begin() in setup() aufgerufen wird.
- Überprüfe die WebSocket-Verbindung (grüne Statusanzeige).
- Überprüfe die Browser-Konsole auf Fehler.
2. Befehle funktionieren nicht
- Stellen Sie sicher, dass die Befehle genau so angegeben sind.
- Überprüfen Sie die Groß-/Kleinschreibung der Befehle.
- Suchen Sie nach Antwortmeldungen im Monitor.
3. Die Benutzeroberfläche lädt langsam
- WLAN-Signalstärke überprüfen
- Nachrichtenhäufigkeit reduzieren
- Den Browser-Cache leeren
4. WebSocket-Verbindungsabbrüche
- Netzwerkstabilität überprüfen
- Nachrichtenlänge reduzieren
- Logik zur Wiederverbindung implementieren
Tipps zum Debuggen
Detailliertes Debugging 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();
}
}
Monitor der Heimautomatisierung
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 - Zur interaktiven Kommunikation
- DigitalPins - Zur Steuerung von Ausgängen
- Slider - Zur Steuerung analoger Werte
- MultipleWebApps - Zur Kombination von Überwachung und Steuerung
Unterstützung
Für weitere Hilfe:
- Überprüfen Sie die API-Referenzdokumentation
- Besuchen Sie die DIYables-Tutorials: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Arduino-Community-Foren