ESP32 WebMonitor Voorbeeld - Webgebaseerde Seriële Monitor Handleiding
Overzicht
Het WebMonitor voorbeeld vervangt de traditionele Seriële Monitor door een webgebaseerde interface die vanaf elk apparaat in uw netwerk toegankelijk is. Ontworpen voor het ESP32 educatieve platform met uitgebreide IoT mogelijkheden, ingebouwde sensorbewaking en naadloze integratie in het educatieve ecosysteem.
Functionaliteiten
- Realtime Seriële Output: Bekijk ESP32 berichten direct in de browser
- Command Input: Verstuur commando’s vanuit de webinterface naar Arduino
- Donker Thema: Oogvriendelijke terminal-stijl interface
- Automatisch Scrollen: Scrollt automatisch naar de nieuwste berichten
- Tijdstempel: Alle berichten bevatten timestamps
- Commandogeschiedenis: Navigeer door eerdere commando’s met de pijltjestoetsen
- Wisfunctie: Maak het monitor scherm leeg
- Kopieer/Plak: Volledige tekstselectie en kopieerondersteuning
Benodigde Hardware
Of u kunt de volgende kits kopen:
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Installatie-instructies
Stapsgewijze Instructies
Volg deze instructies stap voor stap:
- Bent u nieuw met ESP32? Volg dan eerst de tutorial over het opzetten van de ESP32 ontwikkelomgeving in de Arduino IDE.
- Verbind de ESP32 board met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer de juiste ESP32 board (bijv. ESP32 Dev Module) en COM-poort.
- Klik op het Libraries-icoon in de linker menubalk van de Arduino IDE.
- Zoek met "DIYables ESP32 WebApps" en vind de DIYables ESP32 WebApps Library van DIYables.
- Klik op de Installeren knop om de library te installeren.
- U krijgt een verzoek om ook afhankelijkheden te installeren.
- Klik op de Installeer Alles knop om alle benodigde libraries te installeren.
- In de Arduino IDE, ga naar Bestand Voorbeelden DIYables ESP32 WebApps WebMonitor voorbeeld, of kopieer de bovenstaande code en plak die in de Arduino IDE editor.
/*
* 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);
}
- Pas de WiFi-inloggegevens in de code aan door deze regels te wijzigen:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klik op de Uploaden knop in de Arduino IDE om de code naar de ESP32 te uploaden.
- Open de Seriële Monitor.
- Bekijk het resultaat in de Seriële Monitor, het zou er als volgt uit moeten zien:
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
- Als u niets ziet, start dan de ESP32 opnieuw op.
- Noteer het weergegeven IP-adres en voer dit adres in de adresbalk van een webbrowser op uw smartphone of PC in.
- Voorbeeld: http://192.168.0.2
- U ziet dan de startpagina zoals in de afbeelding hieronder:
- Klik op de Web Monitor link, u ziet de Web Monitor app gebruikersinterface zoals hieronder:
- U kunt ook direct de pagina openen door het IP-adres te gebruiken gevolgd door /web-monitor. Bijvoorbeeld: http://192.168.0.2/web-monitor
- Probeer commando’s te sturen naar uw ESP32 via de web monitor interface en bekijk realtime seriële output vanaf uw Arduino.
Hoe te Gebruiken
Seriële Output Bekijken
- Open de web monitor interface
- De ESP32 stuurt automatisch statusberichten elke 5 seconden
- Alle Serial.println() output verschijnt in de monitor
- Berichten worden automatisch voorzien van een tijdstempel
Commando’s Verzenden
- Typ commando’s in het invoerveld onderaan
- Druk op Enter of klik op de Verzenden knop
- De ESP32 verwerkt het commando en reageert
Ingebouwde Commando’s
Het voorbeeld bevat de volgende demonstratiecommando’s:
LED-bediening
- "led on" → Zet de ingebouwde LED aan
- "led off" → Zet de ingebouwde LED uit
- "led toggle" → Wisselt de LED status af
- "blink" → Laat de LED 3 keer knipperen
Systeemcommando’s
- "status" → Toont ESP32 status en uptime
- "help" → Geeft een lijst met beschikbare commando’s
- "reset counter" → Reset de berichtenteller
- "memory" → Toont informatie over beschikbare geheugen
Debug Commando’s
- "test" → Stuurt een testbericht
- "echo [message]" → Echo’t uw bericht terug
- "repeat [n] [message]" → Herhaalt het bericht n keer
Interface Functies
Sneltoetsen
- Enter → Verstuur commando
- ↑/↓ Pijltjestoetsen → Navigeer door commandogeschiedenis
- Ctrl+L → Maak monitor leeg (indien geïmplementeerd)
- Ctrl+A → Selecteer alle tekst
Monitorbediening
- Automatisch Scrollen → Scrollt automatisch naar nieuwe berichten
- Wissen → Leeg het monitor scherm
- Kopiëren → Kopieer geselecteerde tekst naar klembord
Creatieve Aanpassingen - Bouw Uw Geavanceerde Debugging Tool
Breid dit webmonitor voorbeeld uit om een krachtig debugging- en controlepaneel voor uw projecten te bouwen! Voeg aangepaste commando’s, sensorbewaking en realtime datavisualisatie toe om aan uw creatieve wensen te voldoen.
Code Structuur
Hoofdcomponenten
- WebApp Server: Beheert HTTP en WebSocket connecties
- Monitorpagina: Biedt terminal-achtige webinterface
- Berichtenverwerker: Verwerkt binnenkomende commando’s
- Seriële Brug: Stuurt seriële output door naar de web interface
Belangrijke Functies
// Verwerk commando’s van webinterface
void handleWebCommand(String command, String clientId) {
// Verwerk commando en voer acties uit
}
// Verstuur bericht naar webmonitor
void sendToWebMonitor(String message) {
// Verzend bericht via WebSocket
}
Aangepaste Commando’s Toevoegen
Om nieuwe commando’s toe te voegen, wijzig de functie handleWebCommand:
if (command.startsWith("your_command")) {
// Haal parameters op
String param = command.substring(12); // Na "your_command"
// Voer uw actie uit
digitalWrite(LED_BUILTIN, HIGH);
// Verstuur respons
sendToWebMonitor("Command executed: " + param);
}
Praktische Toepassingen
Ontwikkeling en Debugging
void loop() {
// Debug sensorwaarden
int sensorValue = analogRead(A0);
sendToWebMonitor("Sensor A0: " + String(sensorValue));
// Debug variabelen
sendToWebMonitor("Loop count: " + String(loopCount++));
delay(1000);
}
Remote Systeemmonitoring
void checkSystemHealth() {
// Monitor geheugen
int freeMemory = getFreeMemory();
sendToWebMonitor("Free memory: " + String(freeMemory) + " bytes");
// Monitor sensoren
float temperature = getTemperature();
sendToWebMonitor("Temperature: " + String(temperature) + "°C");
// Monitor connectiviteit
if (WiFi.status() == WL_CONNECTED) {
sendToWebMonitor("WiFi: Connected (RSSI: " + String(WiFi.RSSI()) + ")");
} else {
sendToWebMonitor("WiFi: Disconnected");
}
}
Configuratiebeheer
// Verwerk configuratiecommando’s
if (command.startsWith("config ")) {
String setting = command.substring(7);
if (setting.startsWith("interval ")) {
int interval = setting.substring(9).toInt();
updateInterval = interval * 1000; // Milliseconden omzetten
sendToWebMonitor("Update interval ingesteld op " + String(interval) + " seconden");
}
if (setting == "save") {
saveConfigToEEPROM();
sendToWebMonitor("Configuratie opgeslagen in EEPROM");
}
}
Geavanceerde Functionaliteiten
Berichtfiltering
Voeg berichttypes en filtering toe:
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);
}
Commandoparsing
Implementeer geavanceerde commandoparsing:
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;
}
Data Logging
Log monitor data naar SD-kaart of 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();
}
}
Problemen Oplossen
Veelvoorkomende Problemen
1. Geen output in webmonitor
- Controleer of Serial.begin() is aangeroepen in setup()
- Controleer WebSocket-verbinding (groene statusindicator)
- Controleer browserconsole op foutmeldingen
2. Commando’s werken niet
- Zorg dat commando’s exact zijn zoals opgegeven
- Let op hoofdlettergevoeligheid bij commando’s
- Zoek naar responsberichten in de monitor
3. Interface laadt langzaam
- Controleer WiFi-signaalsterkte
- Verminder het aantal berichten per tijdseenheid
- Maak browsercache leeg
4. WebSocket-verbinding verbreekt
- Controleer netwerkstabiliteit
- Verminder berichtgrootte
- Implementeer reconnect logica
Debug Tips
Activeer gedetailleerde debugging:
#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
Controleer WebSocket status:
void checkWebSocketStatus() {
if (server.getClientCount() > 0) {
sendToWebMonitor("WebSocket clients connected: " + String(server.getClientCount()));
}
}
Beveiligingsoverwegingen
Commandovalidatie
Valideer altijd binnenkomende commando’s:
bool isValidCommand(String command) {
// Controleer commando lengte
if (command.length() > 100) return false;
// Controleer op gevaarlijke tekens
if (command.indexOf("\\") >= 0 || command.indexOf("/") >= 0) return false;
// Controleer op 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;
}
Toegangscontrole
Implementeer basis authenticatie:
bool isAuthorized(String clientId) {
// Controleer client autorisatie
return authorizedClients.indexOf(clientId) >= 0;
}
Integratievoorbeelden
Sensorbewakingssysteem
void monitorSensors() {
static unsigned long lastSensorRead = 0;
if (millis() - lastSensorRead > 5000) {
// Lees meerdere sensoren
int light = analogRead(A0);
int temp = analogRead(A1);
int humidity = analogRead(A2);
// Verstuur geformatteerde data
String data = "Sensors - Light: " + String(light) +
", Temp: " + String(temp) +
", Humidity: " + String(humidity);
sendToWebMonitor(data);
lastSensorRead = millis();
}
}
Home Automation Monitor
void monitorHome() {
// Deursensoren
if (digitalRead(DOOR_SENSOR) == HIGH) {
sendToWebMonitor("ALERT: Voordeur geopend");
}
// Bewegingsdetectie
if (digitalRead(PIR_SENSOR) == HIGH) {
sendToWebMonitor("Beweging gedetecteerd in woonkamer");
}
// Milieubewaking
float temp = dht.readTemperature();
if (temp > 25.0) {
sendToWebMonitor("WAARSCHUWING: Hoge temperatuur (" + String(temp) + "°C)");
}
}
Volgende Stappen
Na het beheersen van het WebMonitor voorbeeld, probeer eens:
- Chat - Voor interactieve communicatie
- DigitalPins - Voor het aansturen van uitgangen
- Slider - Voor analoge waardecontroles
- MultipleWebApps - Combinatie van monitoring en controle
Ondersteuning
Voor extra hulp:
- Bekijk de API Reference documentatie
- Bezoek DIYables tutorials: https://esp32io.com/tutorials/diyables-esp32-webapps
- ESP32 community forums