SENSOREN/AKTOREN

INTERNET DER DINGE (IoT)

Arduino Nano ESP32 - Ethernet

DIYables ESP32 WebApps Bibliothek API-Referenz für Arduino Nano ESP32

Übersicht

Diese Seite dokumentiert die vollständige API der DIYables ESP32 WebApps Bibliothek auf dem Board Arduino Nano ESP32. Die Bibliothek folgt einer modularen Architektur — jede Webanwendung ist eine eigenständige Klasse, die Sie beim Server registrieren. Fügen Sie nur die Seitenklassen ein, die Ihr Projekt benötigt; ungenutzte Klassen verbrauchen keinen Flash oder RAM.

Die Bibliothek verwaltet die WiFi-Verbindung, HTTP-Serving und WebSocket-Kommunikation. Ihr Sketch interagiert damit vollständig über Callbacks und Send-Methoden.

Bibliotheksfunktionen

Modulares Seitensystem: Registrieren Sie nur die Apps, die Sie benötigen; jede ist unabhängig
Speicherkontrolle: Die Pro-App-Einbeziehung bedeutet, dass Sie Flash und RAM kontrollieren
11 integrierte Webanwendungen: Einsatzbereit ohne Webprogrammierung
Erweiterbare Basisklasse: Leiten Sie von DIYablesWebAppPageBase ab, um benutzerdefinierte Seiten zu erstellen
WebSocket-First-Design: Alle Echtzeit-Datenaustausche verwenden WebSocket auf Port 81
Responsive Benutzeroberfläche: Alle integrierten Seiten funktionieren auf Desktop, Tablet und Mobilgeräten
Callback-basierte API: Einfache Funktionsregistrierung — kein Polling erforderlich
Unterstützung gleichzeitiger Apps: Mehrere Seiten können gleichzeitig auf einem Server laufen

Kernklassen

DIYablesWebAppServer

Die zentrale Serverklasse. Sie verwaltet HTTP-Routing, WebSocket-Verbindungen und leitet eingehende Nachrichten zum korrekten registrierten Page-Handler weiter.

Konstruktor

DIYablesWebAppServer(int httpPort = 80, int websocketPort = 81)

Instanziiert den Server mit den angegebenen Portnummern.

httpPort: Port für HTTP-Anfragen (Standard: 80)
websocketPort: Port für WebSocket-Verbindungen (Standard: 81)

Verbindungsmethoden

bool begin()

Startet den Server, wobei angenommen wird, dass WiFi oder Ethernet bereits extern konfiguriert wurden.

Rückgabe: true bei Erfolg, false bei Fehler

bool begin(const char* ssid, const char* password)

Verbindet sich mit den bereitgestellten Anmeldedaten mit WiFi und startet dann die HTTP- und WebSocket-Server.

ssid: Netzwerkname
password: Netzwerkpasswort
Rückgabe: true bei Erfolg, false bei Fehler

void loop()

Verarbeitet ausstehende HTTP-Anfragen und WebSocket-Ereignisse. Rufen Sie dies in loop() bei jeder Iteration auf.

bool isConnected()

Gibt true zurück, wenn das Board eine aktive WiFi-Verbindung hat.

String getIPAddress()

Gibt die aktuelle IP-Adresse des Boards als String zurück.

Seitenregistrierung

void addApp(DIYablesWebAppPageBase* app)

Registriert eine Seiteninstanz beim Server. Der URL-Pfad der Seite wird in ihrem Konstruktor definiert.

app: Zeiger auf ein Seitenobjet

void removeApp(const String& path)

Hebt die Registrierung der Seite unter dem angegebenen URL-Pfad auf.

path: Pfad-String (z.B. "/chat")

DIYablesWebAppPageBase* getApp(const String& path)

Gibt einen Zeiger auf die registrierte Seite im angegebenen Pfad zurück, oder nullptr, wenn nicht gefunden.

void setNotFoundPage(const DIYablesNotFoundPage& page)

Weist eine benutzerdefinierte 404-Seite zu, die angezeigt wird, wenn keine registrierte Seite mit einer Anfrage übereinstimmt.

Typisierte Seitenattribute

DIYablesWebDigitalPinsPage* getWebDigitalPinsPage()

Gibt die registrierte Digital-Pins-Seite zurück, oder nullptr, wenn sie nicht hinzugefügt wurde.

DIYablesWebSliderPage* getWebSliderPage()

Gibt die registrierte Slider-Seite zurück, oder nullptr, wenn sie nicht hinzugefügt wurde.

DIYablesWebJoystickPage* getWebJoystickPage()

Gibt die registrierte Joystick-Seite zurück, oder nullptr, wenn sie nicht hinzugefügt wurde.

Basisklasse

DIYablesWebAppPageBase

Alle integrierten und benutzerdefinierten Seitenklassen erweitern diese abstrakte Basis. Sie bietet HTTP-Antwortdienstprogramme, WebSocket-Broadcasting und Page-Lifecycle-Hooks.

Konstruktor

DIYablesWebAppPageBase(const String& pagePath)

Registriert die Seite unter dem angegebenen URL-Pfad.

pagePath: URL-Route für diese Seite (z.B. "/web-joystick")

Abstrakte Methoden — erforderlich in benutzerdefinierten Seiten

virtual void handleHTTPRequest(IWebClient& client) = 0

Aufgerufen, wenn ein Browser diese Seite über HTTP anfordert.

client: Schnittstelle zum Schreiben der HTTP-Antwort

virtual void handleWebSocketMessage(IWebSocket& ws, const char* message, uint16_t length) = 0

Aufgerufen, wenn eine WebSocket-Nachricht ankommt und ihr Präfix dieser Seite entspricht.

ws: Die WebSocket-Verbindung, die die Nachricht gesendet hat
message: Roher Nachrichteninhalt
length: Byte-Länge der Nachricht

virtual const char* getPageInfo() const = 0

Gibt eine kurze Label-Zeichenkette zurück, die in der Serial-Monitor-Startausgabe angezeigt wird (z.B. "🕹️ Web Joystick: ").

virtual String getNavigationInfo() const = 0

Gibt ein HTML-Fragment für die Karte dieser Seite auf der Homepage zurück.

Optionale Override-Methoden

virtual void onWebSocketConnection(IWebSocket& ws)

Aufgerufen, wenn sich ein neuer WebSocket-Client verbindet. Überschreiben Sie, um den Initialzustand zu senden.

virtual void onWebSocketClose(IWebSocket& ws)

Aufgerufen, wenn sich ein WebSocket-Client trennt.

Hilfsmethoden

const char* getPagePath() const

Gibt den registrierten URL-Pfad dieser Seite zurück.

bool isEnabled() const

Gibt true zurück, wenn diese Seite aktiv ist und auf Anfragen antwortet.

void setEnabled(bool enable)

Aktiviert oder deaktiviert die Seite, ohne sie vom Server zu entfernen.

void sendHTTPHeader(IWebClient& client, const char* contentType = "text/html")

Schreibt Standard-200-OK-HTTP-Header an den Client.

void sendWebSocketMessage(IWebSocket& ws, const char* message)

Sendet eine Nachricht an eine einzelne WebSocket-Verbindung.

void broadcastToAllClients(const char* message)

Liefert eine Nachricht an alle derzeit verbundenen WebSocket-Clients.

void sendLargeHTML(IWebClient& client, const char* html)

Überträgt große HTML-Nutzlasten mit Chunk-Transfer-Kodierung.

Beispiel einer benutzerdefinierten Seite

class CustomPage : public DIYablesWebAppPageBase { public: CustomPage() : DIYablesWebAppPageBase("/custom") {} void handleHTTPRequest(IWebClient& client) override { sendHTTPHeader(client); client.println("<html><body>Custom Page</body></html>"); } void handleWebSocketMessage(IWebSocket& ws, const char* message, uint16_t length) override { sendWebSocketMessage(ws, "Response: " + String(message)); } const char* getPageInfo() const override { return " 🔧 Custom Page: "; } String getNavigationInfo() const override { return "<a href=\"/custom\" class=\"app-card custom\">" "<h3>🔧 Custom</h3><p>Custom functionality</p></a>"; } };

Integrierte Seitenklassen

DIYablesHomePage

Navigationszentrale, die alle registrierten Anwendungen auflistet.

Konstruktor

DIYablesHomePage()

URL

---

DIYablesWebChatPage

Bidirektionales Textnachrichtensystem zwischen Browser und Board.

Konstruktor

DIYablesWebChatPage()

URL

/webchat

Methoden

void onWebChatMessage(std::function<void(const String&)> callback)

Registriert einen Handler, der jedes Mal aufgerufen wird, wenn der Browser eine Chat-Nachricht sendet.

void sendToWebChat(const String& message)

Sendet eine Nachricht vom Board an die Browser-Chat-Ansicht.

---

DIYablesWebMonitorPage

Browser-zugänglicher serieller Monitor für Ausgabeprotokollierung und Befehlseingabe.

Konstruktor

DIYablesWebMonitorPage()

URL

/webmonitor

Methoden

void onWebMonitorMessage(std::function<void(const String&)> callback)

Registriert einen Handler, der aufgerufen wird, wenn der Browser einen Befehl sendet.

void sendToWebMonitor(const String& message)

Sendet eine Protokollnachricht vom Board an den Browser-Monitor.

---

DIYablesWebDigitalPinsPage

Webschnittstelle zum Lesen und Schreiben von Digitalpins 0–13.

Konstruktor

DIYablesWebDigitalPinsPage()

URL

/webdigitalpins

Methoden

void enablePin(int pin, int mode)

Macht den Pin in der Webschnittstelle sichtbar und steuerbar.

pin: Pinnummer (0–13)
mode: WEB_PIN_OUTPUT oder WEB_PIN_INPUT

void onPinWrite(std::function<void(int, int)> callback)

Handler, der aufgerufen wird, wenn der Browser einen Ausgangspin umschaltet. Empfängt (pin, state).

void onPinRead(std::function<int(int)> callback)

Handler, der aufgerufen wird, wenn der Browser einen Eingangspinstatus anfordert. Gibt den aktuellen Status zurück.

void onPinModeChange(std::function<void(int, int)> callback)

Handler, der aufgerufen wird, wenn der Browser die Richtung eines Pins ändert.

void updatePinState(int pin, int state)

Sendet einen aktualisierten Pin-Status an alle verbundenen Browser-Clients.

---

DIYablesWebSliderPage

Duale Schieberegler im Bereich 0–255, geeignet für PWM und Analogsteuerung.

Konstruktor

DIYablesWebSliderPage()

URL

/webslider

Methoden

void onSliderValueFromWeb(std::function<void(int, int)> callback)

Handler, der aufgerufen wird, wenn einer der Schieberegler sich bewegt. Empfängt (slider1, slider2) im Bereich 0–255.

void onSliderValueToWeb(std::function<void()> callback)

Handler, der aufgerufen wird, wenn ein neu verbundener Browser die aktuellen Schiebereglerpositionen anfordert.

void sendToWebSlider(int slider1, int slider2)

Sendet Schiebereglerwerte an den Browser und aktualisiert die angezeigten Positionen.

---

DIYablesWebJoystickPage

Virtueller 2D-Joystick, der X/Y-Koordinaten für Richtungssteuerung zurückgibt.

Konstruktor

DIYablesWebJoystickPage(bool autoReturn = true, float sensitivity = 10.0)

autoReturn: Wenn true, kehrt der Joystick bei Freigabe in die Mitte zurück
sensitivity: Mindestverschiebungsprozentsatz, der erforderlich ist, bevor eine Aktualisierung gesendet wird

URL

/webjoystick

Methoden

void onJoystickValueFromWeb(std::function<void(int, int)> callback)

Handler, der bei Joystick-Bewegung aufgerufen wird. Empfängt (x, y) jeweils im Bereich –100 bis +100.

void onJoystickValueToWeb(std::function<void()> callback)

Handler, der aufgerufen wird, wenn ein Browser die aktuelle Joystick-Position anfordert.

void sendToWebJoystick(int x, int y)

Sendet die aktuelle Joystick-Position an verbundene Browser.

void setAutoReturn(bool autoReturn)

Aktualisiert das Auto-Center-Return-Verhalten zur Laufzeit.

void setSensitivity(float sensitivity)

Aktualisiert den Bewegungsempfindlichkeitsschwellenwert zur Laufzeit.

---

DIYablesWebPlotterPage

Streaming-Datenplotter, der bis zu 8 gleichzeitige Datenreihen unterstützt.

Konstruktor

DIYablesWebPlotterPage()

URL

/webplotter

Methoden

void setPlotTitle(const String& title)

Setzt den über dem Plot angezeigten Diagrammtitel.

void setAxisLabels(const String& xLabel, const String& yLabel)

Setzt die X-Achsen- und Y-Achsen-Beschriftungen.

void enableAutoScale(bool enable)

Wenn true, passt sich der Y-Achsen-Bereich automatisch an eingehende Daten an.

void setMaxSamples(int maxSamples)

Begrenzt die Anzahl der beibehaltenen Datenpunkte pro Reihe, bevor ältere Punkte verworfen werden.

void addDataPoint(const String& seriesName, float x, float y)

Hängt einen einzelnen (x, y) Punkt an die benannte Reihe an.

void clearPlot()

Entfernt alle Daten aus allen Reihen.

---

DIYablesNotFoundPage

Optionale 404-Antwortseite, die für nicht registrierte Routen angezeigt wird.

Konstruktor

DIYablesNotFoundPage()

Grundlegende Verwendung

Der folgende Sketch demonstriert das Hinzufügen einer Chat- und Monitor-Seite zu einem Arduino-Nano-ESP32-Projekt:

#include <DIYablesWebApps.h> const char* ssid = "YOUR_WIFI_SSID"; const char* password = "YOUR_WIFI_PASSWORD"; DIYablesWebAppServer webAppsServer(80, 81); DIYablesHomePage homePage; DIYablesWebChatPage chatPage; DIYablesWebMonitorPage monitorPage; void setup() { Serial.begin(9600); webAppsServer.addApp(&homePage); webAppsServer.addApp(&chatPage); webAppsServer.addApp(&monitorPage); webAppsServer.setNotFoundPage(DIYablesNotFoundPage()); if (webAppsServer.begin(ssid, password)) { Serial.println("Server started"); Serial.print("IP: "); Serial.println(webAppsServer.getIPAddress()); } chatPage.onWebChatMessage([](const String& message) { Serial.println("Chat received: " + message); chatPage.sendToWebChat("Board reply: " + message); }); } void loop() { webAppsServer.loop(); delay(10); }

Webanwendungs-URL-Referenz

Anwendung	Standard-URL
Startseite	http	//[board-ip]/
Chat	http	//[board-ip]/webchat
Web-Monitor	http	//[board-ip]/webmonitor
Digitalpins	http	//[board-ip]/webdigitalpins
Schieberegler	http	//[board-ip]/webslider
Joystick	http	//[board-ip]/webjoystick
Plotter	http	//[board-ip]/webplotter

WebSocket-Protokoll

Alle Echtzeitkommunikation läuft über einen einzelnen WebSocket-Server auf Port 81.

WebSocket-Endpunkt: ws://[board-ip]:81
Wiederverbindung: Browser verbinden sich automatisch nach Trennung wieder
Nachrichtenformat: Textbasiert; jede integrierte App verwendet ein eindeutiges Präfix, um ihre Nachrichten zu identifizieren

Per-App-Nachrichtenmuster

Chat — Nur-Text in beide Richtungen

Monitor — Nur-Text in beide Richtungen

Digitalpins

Browser → Board: {"pin": 13, "state": 1}
Board → Browser: {"pin": 13, "state": 1}

Schieberegler

Browser → Board: {"slider1": 128, "slider2": 255}
Board → Browser: {"slider1": 128, "slider2": 255}

Joystick

Browser → Board: {"x": 50, "y": -25}
Board → Browser: {"x": 50, "y": -25}

Plotter

Browser → Board: nicht anwendbar (nur Anzeige)
Board → Browser: {"series": "temp", "x": 10.5, "y": 23.4}

Speicherreferenz

Fügen Sie nur die Seiten ein, die Ihr Projekt verwendet. Ungefährer Fußabdruck pro Komponente:

Komponente	Flash	RAM
DIYablesWebAppServer	~8 KB	~2 KB
DIYablesHomePage	~3 KB	~1 KB
DIYablesWebChatPage	~6 KB	~1,5 KB
DIYablesWebMonitorPage	~5 KB	~1,5 KB
DIYablesWebDigitalPinsPage	~8 KB	~2 KB
DIYablesWebSliderPage	~6 KB	~1,5 KB
DIYablesWebJoystickPage	~7 KB	~1,5 KB
DIYablesWebPlotterPage	~10 KB	~2 KB
WebSocket-Puffer (pro Client)	—	~1 KB

Minimales Projekt (Server + Startseite + eine App): ~17 KB Flash, ~4,5 KB RAM

Alle Apps aktiviert: ~53 KB Flash, ~12 KB RAM

DIYables ESP32 WebApps Bibliothek API-Referenz für Arduino Nano ESP32

Übersicht

Bibliotheksfunktionen

Kernklassen

DIYablesWebAppServer

Konstruktor

Verbindungsmethoden

Seitenregistrierung

Typisierte Seitenattribute

Basisklasse

DIYablesWebAppPageBase

Konstruktor

Abstrakte Methoden — erforderlich in benutzerdefinierten Seiten

Optionale Override-Methoden

Hilfsmethoden

Beispiel einer benutzerdefinierten Seite

Integrierte Seitenklassen

DIYablesHomePage

Konstruktor

URL

DIYablesWebChatPage

Konstruktor

URL

Methoden

DIYablesWebMonitorPage

Konstruktor

URL

Methoden

DIYablesWebDigitalPinsPage

Konstruktor

URL

Methoden

DIYablesWebSliderPage

Konstruktor

URL

Methoden

DIYablesWebJoystickPage

Konstruktor

URL

Methoden

DIYablesWebPlotterPage

Konstruktor

URL

Methoden

DIYablesNotFoundPage

Konstruktor

Grundlegende Verwendung

Webanwendungs-URL-Referenz

WebSocket-Protokoll

Per-App-Nachrichtenmuster

Speicherreferenz

Verwandte Tutorials