CAPTEURS/ACTIONNEURS

INTERNET OF THING (IoT)

Arduino Nano ESP32 - Ethernet.

Référence API de la bibliothèque DIYables ESP32 WebApps pour Arduino Nano ESP32

Vue d'ensemble

Cette page documente l'API complète de la bibliothèque DIYables ESP32 WebApps telle qu'utilisée sur la carte Arduino Nano ESP32. La bibliothèque suit une architecture modulaire — chaque application web est une classe autonome que vous enregistrez avec le serveur. N'incluez que les classes de pages dont votre projet a besoin ; les classes inutilisées ne consomment pas de flash ni de RAM.

La bibliothèque gère la connexion WiFi, le service HTTP et la communication WebSocket. Votre sketch interagit avec elle entièrement via des callbacks et des méthodes d'envoi.

Capacités de la bibliothèque

Système de pages modulaire : Enregistrez uniquement les applications dont vous avez besoin ; chacune est indépendante
Mémoire contrôlée : L'inclusion par application signifie que vous contrôlez l'utilisation du flash et de la RAM
11 applications web intégrées : Prêtes à l'emploi sans programmation web
Classe de base extensible : Dérivez de DIYablesWebAppPageBase pour créer des pages personnalisées
Conception WebSocket-first : Tous les échanges de données en temps réel utilisent WebSocket sur le port 81
Interface responsive : Toutes les pages intégrées fonctionnent sur ordinateur, tablette et mobile
API basée sur les callbacks : Enregistrement de fonctions simple — pas de polling requis
Support d'applications simultanées : Plusieurs pages peuvent s'exécuter simultanément sur un seul serveur

Classes principales

DIYablesWebAppServer

La classe serveur centrale. Elle gère le routage HTTP, les connexions WebSocket et distribue les messages entrants au gestionnaire de page enregistré correct.

Constructeur

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

Instancie le serveur avec les numéros de ports donnés.

httpPort : Port pour les requêtes HTTP (par défaut : 80)
websocketPort : Port pour les connexions WebSocket (par défaut : 81)

Méthodes de connexion

bool begin()

Démarre le serveur en supposant que le WiFi ou Ethernet est déjà configuré en externe.

Retourne : true en cas de succès, false en cas d'échec

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

Se connecte au WiFi avec les identifiants fournis, puis démarre les serveurs HTTP et WebSocket.

ssid : Nom du réseau
password : Mot de passe du réseau
Retourne : true en cas de succès, false en cas d'échec

void loop()

Traite les requêtes HTTP en attente et les événements WebSocket. Appelez ceci dans loop() à chaque itération.

bool isConnected()

Retourne true quand la carte a une connexion WiFi active.

String getIPAddress()

Retourne l'adresse IP actuelle de la carte sous forme de String.

Enregistrement des pages

void addApp(DIYablesWebAppPageBase* app)

Enregistre une instance de page avec le serveur. Le chemin URL de la page est défini dans son constructeur.

app : Pointeur vers un objet de page

void removeApp(const String& path)

Désenregistre la page au chemin URL donné.

path : Chaîne de chemin (par ex., "/chat")

DIYablesWebAppPageBase* getApp(const String& path)

Retourne un pointeur vers la page enregistrée au chemin donné, ou nullptr si introuvable.

void setNotFoundPage(const DIYablesNotFoundPage& page)

Assigne une page 404 personnalisée affichée quand aucune page enregistrée ne correspond à une requête.

Accesseurs de pages typées

DIYablesWebDigitalPinsPage* getWebDigitalPinsPage()

Retourne la page de broches numériques enregistrée, ou nullptr si non ajoutée.

DIYablesWebSliderPage* getWebSliderPage()

Retourne la page de curseur enregistrée, ou nullptr si non ajoutée.

DIYablesWebJoystickPage* getWebJoystickPage()

Retourne la page de joystick enregistrée, ou nullptr si non ajoutée.

Classe de base

DIYablesWebAppPageBase

Toutes les classes de pages intégrées et personnalisées étendent cette base abstraite. Elle fournit des utilitaires de réponse HTTP, la diffusion WebSocket et des crochets de cycle de vie des pages.

Constructeur

DIYablesWebAppPageBase(const String& pagePath)

Enregistre la page sous le chemin URL spécifié.

pagePath : Route URL pour cette page (par ex., "/web-joystick")

Méthodes abstraites — Requises dans les pages personnalisées

virtual void handleHTTPRequest(IWebClient& client) = 0

Invoquée quand un navigateur demande cette page via HTTP.

client : Interface pour écrire la réponse HTTP

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

Invoquée quand un message WebSocket arrive et que son préfixe correspond à cette page.

ws : La connexion WebSocket qui a envoyé le message
message : Contenu brut du message
length : Longueur en octets du message

virtual const char* getPageInfo() const = 0

Retourne une courte chaîne d'étiquette affichée dans la sortie de démarrage du Moniteur Série (par ex., "🕹️ Web Joystick: ").

virtual String getNavigationInfo() const = 0

Retourne un fragment HTML pour la carte de cette page sur la page d'accueil.

Méthodes de substitution optionnelles

virtual void onWebSocketConnection(IWebSocket& ws)

Appelée quand un nouveau client WebSocket se connecte. Substituez pour envoyer l'état initial.

virtual void onWebSocketClose(IWebSocket& ws)

Appelée quand un client WebSocket se déconnecte.

Méthodes utilitaires

const char* getPagePath() const

Retourne le chemin URL enregistré de cette page.

bool isEnabled() const

Retourne true si cette page est active et répondra aux requêtes.

void setEnabled(bool enable)

Active ou désactive la page sans la retirer du serveur.

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

Écrit les en-têtes HTTP standard 200 OK vers le client.

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

Envoie un message à une seule connexion WebSocket.

void broadcastToAllClients(const char* message)

Délivre un message à chaque client WebSocket actuellement connecté.

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

Transmet de grandes charges utiles HTML en utilisant l'encodage de transfert fragmenté.

Exemple de page personnalisée

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>"; } };

Classes de pages intégrées

DIYablesHomePage

Hub de navigation listant toutes les applications enregistrées.

Constructeur

DIYablesHomePage()

URL

---

DIYablesWebChatPage

Messagerie texte bidirectionnelle entre le navigateur et la carte.

Constructeur

DIYablesWebChatPage()

URL

/webchat

Méthodes

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

Enregistre un gestionnaire invoqué chaque fois que le navigateur envoie un message de chat.

void sendToWebChat(const String& message)

Pousse un message de la carte vers la vue de chat du navigateur.

---

DIYablesWebMonitorPage

Moniteur série accessible par navigateur pour la journalisation de sortie et la saisie de commandes.

Constructeur

DIYablesWebMonitorPage()

URL

/webmonitor

Méthodes

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

Enregistre un gestionnaire invoqué quand le navigateur envoie une commande.

void sendToWebMonitor(const String& message)

Envoie un message de journal de la carte vers le moniteur du navigateur.

---

DIYablesWebDigitalPinsPage

Interface web pour lire et écrire les broches numériques 0–13.

Constructeur

DIYablesWebDigitalPinsPage()

URL

/webdigitalpins

Méthodes

void enablePin(int pin, int mode)

Rend la broche visible et contrôlable dans l'interface web.

pin : Numéro de broche (0–13)
mode : WEB_PIN_OUTPUT ou WEB_PIN_INPUT

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

Gestionnaire appelé quand le navigateur bascule une broche de sortie. Reçoit (broche, état).

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

Gestionnaire appelé quand le navigateur demande l'état d'une broche d'entrée. Retourne l'état actuel.

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

Gestionnaire appelé quand le navigateur change la direction d'une broche.

void updatePinState(int pin, int state)

Pousse un état de broche mis à jour vers tous les clients navigateurs connectés.

---

DIYablesWebSliderPage

Double curseur à plage 0–255 adapté au contrôle PWM et analogique.

Constructeur

DIYablesWebSliderPage()

URL

/webslider

Méthodes

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

Gestionnaire appelé quand l'un ou l'autre curseur se déplace. Reçoit (slider1, slider2) dans la plage 0–255.

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

Gestionnaire appelé quand un navigateur nouvellement connecté demande les positions actuelles des curseurs.

void sendToWebSlider(int slider1, int slider2)

Pousse les valeurs des curseurs vers le navigateur, mettant à jour les positions affichées.

---

DIYablesWebJoystickPage

Joystick virtuel 2D retournant les coordonnées X/Y pour le contrôle directionnel.

Constructeur

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

autoReturn : Quand true, le joystick revient au centre à la libération
sensitivity : Pourcentage de déplacement minimum requis avant l'envoi d'une mise à jour

URL

/webjoystick

Méthodes

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

Gestionnaire invoqué lors du mouvement du joystick. Reçoit (x, y) chacun dans la plage –100 à +100.

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

Gestionnaire appelé quand un navigateur demande la position actuelle du joystick.

void sendToWebJoystick(int x, int y)

Envoie la position actuelle du joystick aux navigateurs connectés.

void setAutoReturn(bool autoReturn)

Met à jour le comportement de retour au centre automatique à l'exécution.

void setSensitivity(float sensitivity)

Met à jour le seuil de sensibilité de mouvement à l'exécution.

---

DIYablesWebPlotterPage

Traceur de données en continu prenant en charge jusqu'à 8 séries de données simultanées.

Constructeur

DIYablesWebPlotterPage()

URL

/webplotter

Méthodes

void setPlotTitle(const String& title)

Définit le titre du graphique affiché au-dessus du tracé.

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

Définit les étiquettes des axes X et Y.

void enableAutoScale(bool enable)

Quand true, la plage de l'axe Y s'ajuste automatiquement aux données entrantes.

void setMaxSamples(int maxSamples)

Limite le nombre de points de données conservés par série avant que les points plus anciens soient supprimés.

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

Ajoute un seul point (x, y) à la série nommée.

void clearPlot()

Supprime toutes les données de toutes les séries.

---

DIYablesNotFoundPage

Page de réponse 404 optionnelle affichée pour les routes non enregistrées.

Constructeur

DIYablesNotFoundPage()

Utilisation de base

Le sketch suivant démontre l'ajout d'une page de chat et de moniteur à un projet Arduino Nano ESP32 :

#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); }

Référence des URL d'application web

Application	URL par défaut
Page d'accueil	http	//[board-ip]/
Chat	http	//[board-ip]/webchat
Moniteur web	http	//[board-ip]/webmonitor
Broches numériques	http	//[board-ip]/webdigitalpins
Curseur	http	//[board-ip]/webslider
Joystick	http	//[board-ip]/webjoystick
Traceur	http	//[board-ip]/webplotter

Protocole WebSocket

Toute la communication en temps réel passe par un seul serveur WebSocket sur le port 81.

Point de terminaison WebSocket : ws://[board-ip]:81
Reconnexion : Les navigateurs se reconnectent automatiquement en cas de déconnexion
Format des messages : Basé sur le texte ; chaque application intégrée utilise un préfixe unique pour identifier ses messages

Modèles de messages par application

Chat — texte brut dans les deux sens

Moniteur — texte brut dans les deux sens

Broches numériques

Navigateur → Carte : {"pin": 13, "state": 1}
Carte → Navigateur : {"pin": 13, "state": 1}

Curseur

Navigateur → Carte : {"slider1": 128, "slider2": 255}
Carte → Navigateur : {"slider1": 128, "slider2": 255}

Joystick

Navigateur → Carte : {"x": 50, "y": -25}
Carte → Navigateur : {"x": 50, "y": -25}

Tutoriels connexes

※ NOS MESSAGES

N'hésitez pas à partager le lien de ce tutoriel. Cependant, veuillez ne pas utiliser notre contenu sur d'autres sites web. Nous avons investi beaucoup d'efforts et de temps pour créer ce contenu, veuillez respecter notre travail !