DIYables ESP32 WebApps-Bibliothek für Arduino Nano ESP32
DIYables ESP32 WebApps-Bibliothek
Die DIYables ESP32 WebApps-Bibliothek bietet eine Reihe von vorgefertigten browsergestützten Schnittstellen für den Arduino Nano ESP32. Anstatt HTML, JavaScript und WebSocket-Code von Grund auf zu schreiben, fügen Sie die Bibliothek ein, registrieren die benötigten Seiten und verbinden Callbacks mit Ihrer Sketch-Logik.
Das Board führt einen HTTP-Server und einen WebSocket-Server gleichzeitig aus. Browser öffnen eine Seite über HTTP, wechseln dann zu einer WebSocket-Verbindung für alle Echtzeitaktualisierungen. Die Bibliothek leitet eingehende Nachrichten automatisch zur korrekten registrierten Seite weiter.
Sie können mit Ihrem Arduino Nano ESP32 über einen Browser auf einem Smartphone oder PC mit drei Ansätzen interagieren:
- Vorgefertigte Apps: Verwenden Sie eine der 11 bereitgestellten Anwendungen ohne Webprogrammierung
- Angepasste Apps: Ändern Sie die HTML, CSS oder JavaScript in den vorgefertigten Seiten an Ihre Anforderungen an
- Benutzerdefinierte Apps: Erstellen Sie Ihre eigenen Seiten, indem Sie DIYablesWebAppPageBase erweitern
Hauptmerkmale
- Modulares Design — Fügen Sie nur die Seiten ein, die Ihr Projekt benötigt
- 11 einsatzbereite Webanwendungen für Überwachung, Steuerung und Visualisierung
- Minimierte HTML/CSS/JS zur Minimierung der Flash-Nutzung; unminifizierte Quelle zum Bearbeiten verfügbar
- Benutzerdefinierte App-Vorlage mit integriertem WebSocket-Nachrichtenrouting
- WebSocket-basierte Echtzeitaktualisierungen mit automatischer Browserwiederverbindung
- Responsives Layout — Seiten funktionieren auf Desktop, Tablet und Mobilgeräten
- Callback-API — keine Abfrage; die Bibliothek ruft Ihren Code auf, wenn Ereignisse auftreten
- Mehrere Seiten gleichzeitig auf einer Serverinstanz aktiv
Installation
Installieren Sie die Bibliothek über die Arduino IDE Library Manager:
- Öffnen Sie Arduino IDE
- Navigieren Sie zum Symbol Libraries in der linken Leiste der Arduino IDE.
- Suchen Sie "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.
- Sie werden aufgefordert, einige andere Bibliotheksabhängigkeiten zu installieren
- Klicken Sie auf die Schaltfläche Install All, um alle Bibliotheksabhängigkeiten zu installieren.
Abhängigkeiten
- DIYables_ESP32_WebServer — bietet den zugrunde liegenden HTTP- und WebSocket-Server
Verfügbare Webanwendungen
Startseite (`/`)
Zentrale Navigationsseite mit Links zu allen registrierten Anwendungen. Zeigt den Verbindungsstatus an und wird automatisch aktualisiert, wenn Apps hinzugefügt oder entfernt werden.
Web-Monitor (`/webmonitor`)
Browserbasierter serieller Monitor mit bidirektionalem Text. Unterstützt Befehlseingabe mit Verlauf, Nachrichtenzeitstempel und Nachrichtenzählung.
Web-Chat (`/webchat`)
Bidirektionale Messaging-Schnittstelle zwischen Browser und Board. Jede Seite kann einfache Textnachrichten senden und empfangen.
Web-Digitalpins (`/webdigitalpins`)
Steuern und Lesen Sie Digital-Pins 0–13. Jeder Pin ist im Code einzeln als WEB_PIN_INPUT oder WEB_PIN_OUTPUT aktiviert. Die Seite zeigt nur aktivierte Pins an und unterstützt Massenvorgänge.
Web-Schieberegler (`/webslider`)
Zwei unabhängige Schieberegler mit einem Bereich von 0–255. Geeignet für PWM-Tastverhältnis, Helligkeit, Geschwindigkeit oder andere 8-Bit-Analogausgabe.
Web-Joystick (`/webjoystick`)
Virtueller 2D-Joystick, der X/Y-Werte im Bereich –100 bis +100 zurückgibt. Unterstützt sowohl Touch- als auch Mauseingabe. Die automatische Rückkehr zur Mitte kann im Code konfiguriert werden.
Web-Analoganzeige (`/web-gauge`)
Kreisförmige Anzeige zur Echtzeitüberwachung von Sensoren. Der Bereich, die Einheiten und die Genauigkeit werden einmal im Konstruktor festgelegt. Farbcodierte Zonen geben Betriebsbereiche an.
Web-Rotator (`/web-rotator`)
Drehbare Scheibe zur Steuerung von Servo- oder Schrittmotorposition. Unterstützt kontinuierliche (0–360°) und begrenzte Bereichsmodi. Gibt den aktuellen Winkel über WebSocket zurück.
Web-Temperatur (`/web-temperature`)
Thermometer-Visualisierung im Quecksilberstil. Der Temperaturbereich und die Einheit (°C, °F oder K) werden im Konstruktor konfiguriert. Wird in Echtzeit über WebSocket aktualisiert.
Web-RTC (`/web-rtc`)
Echtzeituhr-Anzeige. Der Browser kann seine lokale Zeit mit einem Klick mit dem Board synchronisieren. Zeigt den Zeitunterschied zwischen Browser- und Board-Uhren an.
Web-Tabelle (`/web-table`)
Tabelle mit zwei Spalten für Attribut-Wert. Spaltennamen und Zeilenbeschriftungen werden im Setup definiert; Werte werden zur Laufzeit ohne Neuladen der Seite aktualisiert. Unterstützt bis zu 20 Zeilen standardmäßig.
Web-Plotter (`/webplotter`)
Streaming-Liniendiagramm mit bis zu 8 Datenreihen. Die Y-Achse wird automatisch skaliert oder verwendet feste Grenzen. Titel und Achsenbeschriftungen können konfiguriert werden.
Benutzerdefinierte Web-App-Vorlage (`/custom`)
Ausgangspunkt für benutzerdefinierte Seiten. Die Vorlage verarbeitet WebSocket-Nachrichtenrouting, Wiederverbindung und Registrierung von Startseiten-Karten. Ändern Sie die HTML, CSS und Nachrichtenhandler für Ihren Anwendungsfall.
URL-Referenz
| | Anwendung | URL-Pfad | |
|---|
| |---|---| |
| | Startseite | / | |
| | Web-Monitor | /webmonitor | |
| | Web-Chat | /webchat | |
| | Web-Digitalpins | /webdigitalpins | |
| | Web-Schieberegler | /webslider | |
| | Web-Joystick | /webjoystick | |
| | Web-Analoganzeige | /web-gauge | |
| | Web-Rotator | /web-rotator | |
| | Web-Temperatur | /web-temperature | |
| | Web-RTC | /web-rtc | |
| | Web-Tabelle | /web-table | |
| | Web-Plotter | /webplotter | |
| | Benutzerdefiniert (Vorlage) | /custom | |
Greifen Sie nach der Verbindung des Boards mit WiFi auf eine beliebige Seite unter http://[board-ip][path] zu.
Modulare Architektur
Die Bibliothek ist so strukturiert, dass jede Webanwendung eine unabhängige Klasse ist. Nur die Klassen, die Sie instanziieren und registrieren, werden in Ihre Binärdatei kompiliert. Wenn Sie addApp(&joystickPage) nicht aufrufen, wird der Code dieser Seite nicht ausgeführt und ihr HTML nimmt keinen Flash-Speicher in Anspruch.
Dieses Beispiel registriert nur eine Schieberegler- und eine Anzeigenseite, wobei der Rest weggelassen wird:
Seiten können auch zur Laufzeit mit addApp() und removeApp() hinzugefügt oder entfernt werden.
API-Referenz
Vollständige Klassen- und Methodendokumentation: DIYables ESP32 WebApps Library API Reference
Beispiel-Tutorials
Erweiterte Nutzung
Verwaltung von Laufzeit-Seiten
Seiten können basierend auf der Hardwarepräsenz oder dem Laufzeitzustand bedingt registriert werden:
Benutzerdefinierte Seiten
Erweitern Sie DIYablesWebAppPageBase, um eine Seite mit beliebiger HTML und beliebigem WebSocket-Nachrichtenformat zu erstellen:
Fehlerbehebung
WiFi verbindet sich nicht
- Bestätigen Sie, dass der SSID und das Passwort korrekt sind
- Das Board unterstützt nur 2,4-GHz-Netzwerke; 5-GHz-Netzwerke werden nicht unterstützt
- Überprüfen Sie die Signalstärke am physischen Standort des Boards
Browser kann die Seite nicht erreichen
- Bestätigen Sie die im seriellen Monitor gedruckte IP-Adresse
- Stellen Sie sicher, dass sich der Browser und das Board im selben Netzwerk befinden
- Deaktivieren Sie VPN, falls aktiv
WebSocket trennt sich häufig
- Überprüfen Sie, ob webAppsServer.loop() bei jeder Iteration von loop() aufgerufen wird
- Vermeiden Sie blockierende Aufrufe (delay(), langsames I2C-Lesen), die die Ereignisschleife unterbricht
- Überprüfen Sie den verfügbaren Heap-Speicher im Serial Monitor
Hohe Speichernutzung
- Entfernen Sie alle Seiten, die nicht vom Projekt benötigt werden
- Reduzieren Sie setMaxSamples() auf der Plotter-Seite
- Reduzieren Sie die maximalen Zeilen auf der Tabellenseite