DIYables ESP32 WebApps-Bibliothek – Vollständiges ESP32-Webanwendungs-Framework
DIYables ESP32 Web-Apps Bibliothek
Eine umfassende ESP32-Bibliothek zur Erstellung von WebSocket-basierten Webanwendungen auf dem ESP32. Diese Bibliothek bietet mehrere einsatzbereite Webanwendungen zur Überwachung, Steuerung und Interaktion mit Ihren ESP32-Projekten über eine moderne Weboberfläche.
Mit dieser Bibliothek können Sie über einen Webbrowser auf Ihrem Smartphone oder PC mit Ihrem ESP32 interagieren, und zwar entweder durch:
- Verwenden Sie vorkonfigurierte Web-Apps aus 11 bereitgestellten Anwendungen, ohne jegliche Kenntnisse in der Web-Programmierung
- Passen Sie die vorkonfigurierten Web-Apps an, um Ihre spezifischen Projektanforderungen zu erfüllen
- Erstellen und fügen Sie Ihre eigenen Web-Apps hinzu, basierend auf der flexiblen Framework-Architektur
🚀 Funktionen
- Modulare Architektur: Fügen Sie nur die Web-Apps hinzu, die Sie benötigen, um den Speicherverbrauch zu optimieren
- Speichereffizient: Jede Web-App kann unabhängig voneinander aktiviert oder deaktiviert werden
- Speicheroptimiert: HTML-, JavaScript- und CSS-Codes werden minimiert, um die Codegröße zu reduzieren, während Benutzeroberfläche (UI) und Funktionalität erhalten bleiben. Der ursprüngliche unminifizierte Quellcode ist in der Bibliothek zu Referenz- und Anpassungszwecken enthalten
- 11 vorgefertigte Webanwendungen: Vollständige ESP32-Steuerung, für die keine Webprogrammierkenntnisse erforderlich sind
- Startseite: Zentraler Hub mit Links zu allen Webanwendungen
- Web Monitor: Serieller Monitor in Echtzeit in Ihrem Browser über WebSocket
- Web-Chat: Interaktive Chat-Schnittstelle mit Ihrem Arduino
- Web-Digitale Pins: Steuern und überwachen Sie alle digitalen Pins über eine Weboberfläche
- Web-Schieberegler: Duale Schieberegler zur Steuerung von analogen und PWM-Ausgängen
- Web-Joystick: Interaktiver Joystick zur Steuerung von Robotern und Fahrzeugen
- Web-Analoganzeige: Kreisförmige Anzeige zur Sensorüberwachung
- Web Rotator: Rotierbare Scheibensteuerung mit kontinuierlichen und begrenzten Modi
- Web-Temperatur: Thermometer-Visualisierung mit konfigurierbaren Bereichen
- Web RTC: Echtzeituhr mit Zeitsynchronisation und Zeitzonenverwaltung
- Webtabelle: Zwei-Spalten-Attribut-Wert-Tabelle mit Echtzeit-Updates
- Web-Plotter: Echtzeit-Datenvisualisierung und Diagrammerstellung
- Eigene Web-App-Vorlage: Vollständige Vorlage zur Erstellung eigener Webanwendungen mit Echtzeit-WebSocket-Kommunikation
- Responsives Design: Funktioniert auf Desktop- und Mobilgeräten
- Echtzeit-Kommunikation: WebSocket-basierte Lösung für sofortige Aktualisierungen
- Einfache Integration: Callback-basierte API
- Unterstützung mehrerer Apps: Gleichzeitiges Hinzufügen mehrerer Web-Apps wird unterstützt
- Automatische Integration in der Startseite: Die hinzugefügte Web-App wird automatisch als Link auf der Startseite angezeigt
📦 Installation - Arduino IDE Bibliotheks-Manager
- Öffne die Arduino IDE
- Navigiere zum Bibliotheken-Symbol in der linken Leiste der Arduino IDE.
- Suche "DIYables ESP32 WebApps", dann finde die DIYables ESP32 WebApps-Bibliothek von DIYables
- Klicke 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.
🔧 Abhängigkeiten
Diese Bibliothek benötigt Folgendes:
- DIYables_ESP32_WebServer Bibliothek (für WebSocket-Unterstützung)
🎯 Schnellstart
Für detaillierte Installationsanleitungen und Codebeispiele verweisen Sie bitte auf:
- API-Referenzdokumentation - Vollständige API-Dokumentation
- Beispiel-Tutorials - Umfassende Leitfäden für jede Webanwendung:
- Web-Chat-Beispiel - Interaktive Chat-Schnittstelle mit Arduino
- Web-Monitor-Beispiel - Echtzeit-Seriemonitor über einen Webbrowser
- Web-Plotter-Beispiel - Echtzeit-Datenvisualisierung und Plotten
- Beispiel für Web-Digitale-Pins - Digitale Pin-Steuerung und Überwachung
- Web-Schieberegler-Beispiel - Duale Schieberegler-Steuerungen für analoge und PWM-Ausgänge
- Web-Joystick-Beispiel - Virtueller Joystick zur Richtungssteuerung
- Web-Analoganzeige-Beispiel - Professionelle kreisförmige Anzeige zur Sensorüberwachung
- Web Rotator Example - Interaktive drehbare Scheibensteuerung für Servo-/Schrittmotoren
- Web-Temperaturbeispiel - Visuelle Thermometeranzeige zur Temperaturüberwachung
- WebRTC-Beispiel - Echtzeituhr mit der webbasierten Zeitsynchronisierung und Zeitzonenverwaltung
- Beispiel für eine Webtabelle - Zweispaltige Datentabelle mit Echtzeit-Updates von Attribut-Wert-Paaren
- CustomWebApp-Vorlage - Vollständige Vorlage zum Erstellen eigener benutzerdefinierter Webanwendungen
- Beispiel für mehrere Webanwendungen - Umfassende Integrationsanleitung, die alle Funktionen vereint
📱 Webanwendungen
1. Startseite (`/)
- Zentrales Navigationszentrum
- Links zu allen Webanwendungen
- Nur aktivierte/hinzugefügte Apps werden auf der Startseite angezeigt
- Verbindungsstatusanzeige
- Responsives Design
2. Web-Monitor (`/web-monitor`)
- Webbasierter serieller Monitor
- Echtzeit bidirektionale Kommunikation
- Zeitstempelung und Zählung
- Kommandoeingabe mit Verlauf
3. Web-Plotter (`/web-plotter`)
- Echtzeit-Datenvisualisierung und -Plotting
- Unterstützung mehrerer Datenreihen (bis zu 8 Linien)
- Automatische Skalierung der Y-Achse oder feste Bereiche
- Anpassbare Plot-Titel und Achsenbeschriftungen
- WebSocket-Streaming für minimale Latenz
- Perfekt geeignet für Sensorüberwachung und Debugging
4. WebChat (`/chat`)
- Interaktive Chat-Oberfläche
- Antworten in natürlicher Sprache
- LED-Steuerung über Chat-Befehle
- Unterhaltsame und lehrreiche Interaktionen
5. Web-Digitale Pins (`/web-digital-pins`)
- Individuelle Pinsteuerung (Pins 0-13)
- Jeder Pin kann im INPUT- oder OUTPUT-Modus aktiviert werden
- Nur aktivierte Pins werden in der Weboberfläche angezeigt
- Überwachung von Eingangs- und Ausgangspins
- Massenoperationen (Alle AN/AUS, Umschalten)
- Pinstatus in Echtzeit
6. Web-Schieberegler (`/web-slider`)
- Duale Bereichsschieberegler (0–255)
- PWM-Ausgangssteuerung
- Voreinstellungs-Schaltflächen
- Synchronisierte Steuerungsoptionen
7. Web-Joystick (`/web-joystick`)
- Interaktive Joystick-Steuerung mit Touch-/Maus-Unterstützung
- X-/Y-Koordinatenwerte (-100 bis +100)
- Echtzeit-Positionsrückmeldung
- Die automatische Zentrierung kann über den ESP32-Code aktiviert oder deaktiviert werden
- Perfekt zur Steuerung von Robotern und Fahrzeugen
8. Web-Analoganzeige (`/web-gauge`)
- Professionelle Rundanzeige zur Echtzeit-Sensorüberwachung
- Konfigurierbarer Wertebereich, Einheiten und Präzision
- Sanfte Nadel-Animation mit visuellem Feedback
- Farbcodierte Zonen (Grün, Gelb, Rot) zur Statusanzeige
- Automatische Konfiguration – Bereich einmal im Konstruktor festlegen
- Ideal für Drucksensoren, Spannungsüberwachung und analoge Messwerte
9. Web-Rotator (`/web-rotator`)
- Interaktives rotierendes Scheiben-Steuerelement mit visueller Rückmeldung
- Zwei Betriebsmodi: Kontinuierlich (0–360°) und Begrenzt (benutzerdefinierter Bereich)
- Echtzeit-Winkelrückmeldung mit sanfter Rotation
- Touch- und Mausunterstützung für Desktop und Mobilgeräte
- Professionelles Design mit konischem Verlauf und Positionsanzeige
- Ideal für Servomotoren, Schrittmotoren und Rotationssteuerungen
10. Web-Temperatur (`/web-temperature`)
- Visuelle Thermometeranzeige mit Echtzeit-Temperaturüberwachung
- Konfigurierbarer Temperaturbereich und Einheiten (°C, °F, K)
- Interaktive Thermometer-Visualisierung mit Quecksilber-Animation
- Automatische Konfigurationsverarbeitung – Bereich einmal im Konstruktor festlegen
- Echtzeit-Wertaktualisierungen über WebSocket
- Ideal geeignet für Temperatursensoren und Umweltüberwachung
11. WebRTC (`/web-rtc`)
- Anzeige der Echtzeituhr für die RTC des ESP32 und die Uhrzeit des Client-Geräts
- Zeit-Synchronisierung mit einem Klick vom Webbrowser zum ESP32 RTC
- Visueller Zeitdifferenz-Indikator, der die Synchronisationsgenauigkeit in Minuten anzeigt
- Zweizeiliges Zeitformat mit 12-Stunden-AM/PM-Anzeige und vollständigem Datum
- WebSocket-basierte Echtzeit-Updates für eine sofortige Zeitsynchronisierung
- Modernes Gradient-UI mit responsivem Kartenlayout
- Zeitzonenbewusste Synchronisierung unter Verwendung der lokalen Gerätszeit
- Integrierte RTC-Unterstützung speziell für den ESP32
- Verbindungsstatus-Überwachung mit visuellen WebSocket-Indikatoren
- Automatische Zeitabfragen beim Laden der Seite für sofortige Anzeige
- Perfekt geeignet für Zeitstempel-Erstellung, Datenerfassung, Planung und zeitbasierte Automatisierung
12. Web-Tabelle (`/web-table`)
- Datentabelle mit zwei Spalten mit Attribut-Wert-Paaren zur übersichtlichen Anzeige der Daten
- Echtzeit-Wertaktualisierungen über WebSocket für sofortige Datenaktualisierung
- Konfigurierbare Tabellenstruktur, die einmal in der setup()-Funktion des ESP32 eingerichtet wird
- Dynamische Werteaktualisierungen während der Laufzeit ohne Neuladen der Seite
- Modernes responsives Design mit Hover-Effekten und visuellem Feedback
- Verbindungsstatusüberwachung mit visuellen WebSocket-Indikatoren
- Behandlung des leeren Zustands mit benutzerfreundlichen Meldungen, wenn keine Daten vorhanden sind
- Manuelle Aktualisierungsmöglichkeit mit eigenem Aktualisierungs-Button
- Flexible Datentypen, die Zeichenketten, Zahlen und formatierte Werte unterstützen
- Speichereffiziente Speicherung mit konfigurierbarer maximaler Zeilenanzahl (Standard: 20)
- Automatische Datenabfragen beim Laden der Seite zur sofortigen Tabellenbefüllung
- Ideal geeignet für Sensorüberwachung, Systemstatus, Konfigurationsanzeige und Echtzeit-Dashboards
13. Benutzerdefinierte Webanwendungsvorlage (`/custom`)
- Vollständige Vorlage für die Erstellung eigener maßgeschneiderter Webanwendungen
- Echtzeit-WebSocket-Kommunikation mit automatischer Nachrichtenfilterung
- Professionelles klassenbasiertes Design mit gekapseltem APP_IDENTIFIER-System
- Anfängerfreundliche Vorlage mit einfachen Textnachrichten zwischen Web und Arduino
- Automatische Wiederverbindungsfunktionalität für zuverlässige WebSocket-Verbindungen
- Responsible Design? Wait; I wrote "Responsives Design" with comma. Let's ensure it's correct. I'll correct:
- Responsives Design, das auf Smartphones, Tablets und Computern funktioniert
- Hinweise zur Konfliktvermeidung bei der Entwicklung mehrerer benutzerdefinierter Apps
- Modulare Dateistruktur mit separaten HTML-Dateien, ESP32-Logik und Bibliotheksintegration
- Erweiterbares Framework – Template anpassen, um anspruchsvolle Anwendungen zu erstellen
- Integrationsbereit – funktioniert nahtlos mit anderen DIYables ESP32 WebApps
- Perfekt geeignet für benutzerdefinierte IoT-Oberflächen, Sensor-Dashboards, Geräte-Steuerpanels und Bildungsprojekte
🧩 Modulare Architektur
Speicheroptimierung: Die DIYables ESP32 WebApps-Bibliothek verfügt über ein modulares Design, das es Ihnen ermöglicht, nur die Webanwendungen einzubinden, die Sie tatsächlich benötigen, wodurch der Speicherverbrauch auf Ihrem Arduino deutlich reduziert wird.
Schlüsselvorteile:
- Selektive Integration: Fügen Sie nur die benötigten Web-Apps zu Ihrem Projekt hinzu
- Speichereffizient: Jede Webanwendung ist unabhängig und optional
- Skalierbar: Beginnen Sie klein und fügen Sie bei Bedarf weitere Funktionen hinzu
- Leistung optimiert: Weniger aktive Apps = bessere Leistung
Wie es funktioniert:
// Basic setup - include only what you need
DIYablesWebAppServer webAppsServer(80, 81);
DIYablesHomePage homePage; // Always recommended
DIYablesWebSliderPage webSliderPage; // Only if you need sliders
DIYablesWebJoystickPage webJoystickPage; // Only if you need joystick
DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // Only if you need analog gauge
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS); // Only if you need rotator
DIYablesWebTemperaturePage tempPage(-10.0, 50.0, "°C"); // Only if you need temperature
DIYablesWebRTCPage webRTCPage; // Only if you need time sync
// Add only the apps you want
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webSliderPage); // Skip apps you don't need
webAppsServer.addApp(&gaugePage); // Add only what you use
webAppsServer.addApp(&tempPage); // to save memory
webAppsServer.addApp(&webRotatorPage); // Customize as needed
webAppsServer.addApp(&webRTCPage); // Add time synchronization
// Start server - choose appropriate method
webAppsServer.begin("WiFi_SSID", "password"); // WiFi connection
// OR
// webAppsServer.begin(); // For Ethernet or pre-configured connections (future)
// Runtime management (advanced)
if (sensorConnected) {
webAppsServer.addApp(&webJoystickPage); // Add dynamically
}
Laufzeitflexibilität:
- Dynamische Verwaltung: Apps zur Laufzeit hinzufügen oder entfernen, unter Verwendung von addApp() und removeApp()
- Bedingtes Laden: Apps basierend auf Hardware oder Konfiguration laden
- Individuelle Apps: Erstellen Sie benutzerdefinierte Webanwendungen, indem Sie von DIYablesWebAppPageBase ableiten
- Keine Neukompilierung: Verfügbare Apps ändern, ohne neu zu kompilieren
🔌 API-Referenz
Für die vollständige API-Dokumentation, einschließlich aller Klassen, Methoden und Verwendungsbeispiele, siehe:
Übersetze den untenstehenden Inhalt vom Englischen ins Deutsche, gib das Ergebnis ausschließlich zurück:
📋 Beispiele
Die Bibliothek enthält umfassende Beispiel-Tutorials:
- Web-Chat-Beispiel - Interaktive Chat-Oberfläche mit Arduino
- Web-Monitor-Beispiel - Echtzeit-Serieller Monitor über Webbrowser
- Web-Plotter-Beispiel - Echtzeit-Datenvisualisierung und -Plotten
- Web-Digitale-Pin-Beispiel - Digitale Pin-Steuerung und -Überwachung
- Web-Schieberegler-Beispiel - Duale Schieberegler-Steuerungen für analoge/PWM-Ausgänge
- Web-Joystick-Beispiel - Virtueller Joystick zur Richtungssteuerung
- Web-Analoganzeige-Beispiel - Professionelle kreisförmige Anzeige zur Sensorüberwachung
- Web-Rotator-Beispiel - Interaktive rotierbare Scheibensteuerung für Servos/Schrittmotoren
- Web-Temperatur-Beispiel - Visuelle Thermometeranzeige zur Temperaturüberwachung
- Web-RTC-Beispiel - Echtzeituhr mit webbasierter Zeit-Synchronisation und Zeitzonenverwaltung
- Web-Tabellen-Beispiel - Zweispalten-Datentabelle mit Echtzeit-Attribut-Wert-Aktualisierungen
- Benutzerdefinierte Web-App-Vorlage - Vollständige Vorlage zum Erstellen eigener benutzerdefinierter Webanwendungen
- Beispiel für mehrere Web-Apps - Umfassender Integrationsleitfaden zur Kombination aller Funktionen
Jedes Beispiel-Tutorial enthält:
- Schritt-für-Schritt-Anleitung zur Einrichtung
- Hardware-Verbindungsdiagramme
- Vollständige Codebeispiele
- Anleitungen zur Fehlerbehebung
- Projektideen und Tipps zur Integration
🌐 Weboberflächen-URLs
Sobald Sie mit dem WLAN verbunden sind, greifen Sie auf die Anwendungen unter:
- Startseite: http://[IP_ADDRESS]/
- Web-Chat: http://[IP_ADDRESS]/chat
- Web-Monitor: http://[IP_ADDRESS]/web-monitor
- Web-Plotter: http://[IP_ADDRESS]/web-plotter
- Web-Digitale-Pins: http://[IP_ADDRESS]/web-digital-pins
- Web-Schieberegler: http://[IP_ADDRESS]/web-slider
- Web-Joystick: http://[IP_ADDRESS]/web-joystick
- Web-Analoganzeige: http://[IP_ADDRESS]/web-gauge
- Web-Rotator: http://[IP_ADDRESS]/web-rotator
- Web-Temperatur: http://[IP_ADDRESS]/web-temperature
- Web-RTC: http://[IP_ADDRESS]/web-rtc
- Web-Tabelle: http://[IP_ADDRESS]/web-table
- Benutzerdefinierte App: http://[IP_ADDRESS]/custom (bei Verwendung der CustomWebApp-Vorlage)
💡 Tipps zur Verwendung
- Speicheroptimierung: Verwende eine modulare Architektur – füge nur die Web-Apps hinzu, die du benötigst, um Speicher zu sparen
- WLAN-Verbindung: Stelle sicher, dass das WLAN-Signal stark ist, um eine stabile WebSocket-Kommunikation zu gewährleisten
- Pin-Fähigkeiten: Überprüfe immer die Pin-Fähigkeiten, bevor du externe Geräte anschließt
- Stromversorgung: Verwende eine ausreichende Stromversorgung für deine angeschlossenen Geräte
- Browser-Kompatibilität: Funktioniert am besten mit modernen Browsern (Chrome, Firefox, Safari, Edge)
- Mobilfreundlichkeit: Alle Benutzeroberflächen sind mobilfreundlich und funktionieren auf Mobilgeräten
- Klein anfangen: Beginne mit 1–2 Web-Apps, füge dann weitere Funktionen hinzu, während dein Projekt wächst
🔍 Fehlerbehebung
WLAN-Verbindungsprobleme
- SSID und Passwort überprüfen
- WLAN-Signalstärke überprüfen
- Stellen Sie sicher, dass das 2,4-GHz-Netzwerk verwendet wird (5-GHz wird nicht unterstützt)
WebSocket-Verbindungsprobleme
- Firewall-Einstellungen überprüfen
- IP-Adresse im Browser überprüfen
- Webseite neu laden
- Seriellen Monitor auf Fehlermeldungen prüfen
Leistungsprobleme
- Speicheroptimierung: Entfernen Sie ungenutzte Web-Apps, um RAM und Flash-Speicher freizugeben
- Selektives Laden: Verwenden Sie eine modulare Architektur, um nur die benötigte Funktionalität einzubinden
- Begrenzen Sie die Aktualisierungsfrequenz für Daten mit hoher Frequenz
- Verwenden Sie geeignete Verzögerungen in der Schleife
- Überwachen Sie den Speicherverbrauch für lang laufende Anwendungen
📚 Fortgeschrittene Nutzung
Dynamische App-Verwaltung
Die Bibliothek unterstützt das Hinzufügen und Entfernen von Webanwendungen zur Laufzeit:
// Add apps dynamically during runtime
if (sensorConnected && !webAppsServer.getApp("/webmonitor")) {
webAppsServer.addApp(new DIYablesWebMonitorPage());
}
// Remove apps to free memory
webAppsServer.removeApp("/chat"); // Remove webchat if not needed
// Get specific app instances
DIYablesWebDigitalPinsPage* pinsPage = webAppsServer.getWebDigitalPinsPage();
if (pinsPage) {
pinsPage->enablePin(2, WEB_PIN_OUTPUT);
}
Benutzerdefinierte Webanwendungen
Erstelle deine eigenen Web-Apps, indem du von DIYablesWebAppPageBase erbst:
class MySensorDashboard : public DIYablesWebAppPageBase {
public:
MySensorDashboard() : DIYablesWebAppPageBase("/sensors") {}
void handleHTTPRequest(WiFiClient& client) override {
sendHTTPHeader(client);
client.print("<h1>Sensor Dashboard</h1>");
client.print("<p>Temperature: " + String(getTemperature()) + "°C</p>");
}
void handleWebSocketMessage(WebSocket& ws, const String& message) override {
if (message == "get_data") {
sendWebSocketMessage(ws, "temp:" + String(getTemperature()));
}
}
};
// Add your custom app
webAppsServer.addApp(new MySensorDashboard());
Benutzerdefinierte HTML-Seiten
Sie können die HTML-Dateien im Verzeichnis src/html/ bearbeiten, um das Erscheinungsbild und die Funktionalität der Weboberfläche anzupassen.
Mehrere WebSocket-Clients
Die Bibliothek unterstützt mehrere gleichzeitige WebSocket-Verbindungen, wodurch mehrere Benutzer denselben Arduino steuern können.
Integration mit anderen Bibliotheken
Einfache Integration mit Sensorbibliotheken, Servosteuerung, Motortreibern und weiteren ESP32-Bibliotheken.
📄 Lizenz
Diese Bibliothek wird unter der MIT-Lizenz veröffentlicht. Details finden Sie in der LICENSE-Datei.
---
Viel Spaß beim Programmieren mit der DIYables ESP32 WebApps-Bibliothek! 🎉