Bibliothèque DIYables ESP32 WebApps pour Arduino Nano ESP32
Bibliothèque DIYables ESP32 WebApps
La bibliothèque DIYables ESP32 WebApps fournit un ensemble d'interfaces basées sur navigateur prêtes à l'emploi pour l'Arduino Nano ESP32. Plutôt que d'écrire du code HTML, JavaScript et WebSocket depuis zéro, vous incluez la bibliothèque, enregistrez les pages dont vous avez besoin et connectez des callbacks à la logique de votre sketch.
La carte exécute un serveur HTTP et un serveur WebSocket simultanément. Les navigateurs ouvrent une page via HTTP, puis passent à une connexion WebSocket pour toutes les mises à jour en temps réel. La bibliothèque achemine les messages entrants vers la page enregistrée correcte automatiquement.
Vous pouvez interagir avec votre Arduino Nano ESP32 via un navigateur sur un smartphone ou un PC en utilisant trois approches :
- Applications prédéfinies : Utilisez l'une des 11 applications fournies sans aucune programmation web requise
- Applications personnalisées : Modifiez le HTML, CSS ou JavaScript dans les pages prédéfinies selon vos besoins
- Applications sur mesure : Créez vos propres pages en étendant DIYablesWebAppPageBase
Fonctionnalités Principales
- Conception modulaire — incluez uniquement les pages dont votre projet a besoin
- 11 applications web prêtes à l'emploi couvrant la surveillance, le contrôle et la visualisation
- HTML/CSS/JS minifié pour minimiser l'utilisation de la flash ; source non minifié fourni pour l'édition
- Modèle d'application personnalisée avec routage des messages WebSocket intégré
- Mises à jour en temps réel basées sur WebSocket avec reconnexion automatique du navigateur
- Mise en page responsive — les pages fonctionnent sur bureau, tablette et mobile
- API de callback — pas de polling ; la bibliothèque appelle votre code quand des événements se produisent
- Plusieurs pages actives simultanément sur une seule instance de serveur
Installation
Installez la bibliothèque via le Gestionnaire de bibliothèques de l'IDE Arduino :
- Ouvrez l'IDE Arduino
- Naviguez vers l'icône Bibliothèques dans la barre gauche de l'IDE Arduino.
- Cherchez "DIYables ESP32 WebApps", puis trouvez la bibliothèque DIYables ESP32 WebApps de DIYables
- Cliquez sur le bouton Installer pour installer la bibliothèque.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
- On vous demandera d'installer d'autres dépendances de bibliothèques
- Cliquez sur le bouton Installer tout pour installer toutes les dépendances de bibliothèques.
Dépendances
- DIYables_ESP32_WebServer — fournit le serveur HTTP et WebSocket sous-jacent
Applications Web Disponibles
Page d'Accueil (`/`)
Page de navigation centrale affichant des liens vers toutes les applications enregistrées. Affiche l'état de la connexion et se met à jour automatiquement quand des applications sont ajoutées ou supprimées.
Web Monitor (`/webmonitor`)
Moniteur série basé sur navigateur avec texte bidirectionnel. Supporte la saisie de commandes avec historique, les horodatages de messages et le comptage des messages.
Web Chat (`/webchat`)
Interface de messagerie bidirectionnelle entre le navigateur et la carte. Chaque côté peut envoyer et recevoir des messages en texte brut.
Web Digital Pins (`/webdigitalpins`)
Contrôlez et lisez les broches numériques 0–13. Chaque broche est activée individuellement dans le code comme WEB_PIN_INPUT ou WEB_PIN_OUTPUT. La page affiche uniquement les broches activées et supporte les opérations en bloc.
Web Slider (`/webslider`)
Deux curseurs indépendants avec une plage de 0 à 255. Convient au rapport cyclique PWM, à la luminosité, à la vitesse ou à toute autre sortie analogique 8 bits.
Web Joystick (`/webjoystick`)
Joystick 2D virtuel retournant des valeurs X/Y dans la plage –100 à +100. Supporte les entrées tactiles et souris. Le retour automatique au centre est configurable dans le code.
Web Analog Gauge (`/web-gauge`)
Jauge circulaire pour la surveillance en temps réel des capteurs. La plage, les unités et la précision sont définies une fois dans le constructeur. Des zones codées par couleur indiquent les régions de fonctionnement.
Web Rotator (`/web-rotator`)
Disque rotatif pour contrôler la position de servo ou de moteur pas à pas. Supporte les modes continu (0–360°) et à plage limitée. Retourne l'angle actuel via WebSocket.
Web Temperature (`/web-temperature`)
Visualisation de thermomètre de style mercure. La plage de température et l'unité (°C, °F ou K) sont configurées dans le constructeur. Se met à jour en temps réel via WebSocket.
Web RTC (`/web-rtc`)
Affichage d'horloge temps réel. Le navigateur peut synchroniser son heure locale avec la carte en un clic. Affiche la différence de temps entre le navigateur et l'horloge de la carte.
Web Table (`/web-table`)
Tableau attribut-valeur à deux colonnes. Les noms de colonnes et les étiquettes de lignes sont définis dans setup ; les valeurs se mettent à jour au moment de l'exécution sans rechargement de page. Supporte jusqu'à 20 lignes par défaut.
Web Plotter (`/webplotter`)
Graphique linéaire en streaming supportant jusqu'à 8 séries de données. L'axe Y se met à l'échelle automatiquement ou utilise des limites fixes. Le titre et les étiquettes des axes sont configurables.
Modèle d'Application Web Personnalisée (`/custom`)
Point de départ pour les pages définies par l'utilisateur. Le modèle gère le routage des messages WebSocket, la reconnexion et l'enregistrement de la carte sur la page d'accueil. Modifiez le HTML, CSS et les gestionnaires de messages pour votre cas d'utilisation.
Référence des URL
| | Application | Chemin URL | |
|---|
| |---|---| |
| | Page d'Accueil | / | |
| | Web Monitor | /webmonitor | |
| | Web Chat | /webchat | |
| | Web Digital Pins | /webdigitalpins | |
| | Web Slider | /webslider | |
| | Web Joystick | /webjoystick | |
| | Web Analog Gauge | /web-gauge | |
| | Web Rotator | /web-rotator | |
| | Web Temperature | /web-temperature | |
| | Web RTC | /web-rtc | |
| | Web Table | /web-table | |
| | Web Plotter | /webplotter | |
| | Personnalisé (modèle) | /custom | |
Accédez à n'importe quelle page à http://[ip-carte][chemin] après que la carte se connecte au WiFi.
Architecture Modulaire
La bibliothèque est structurée de sorte que chaque application web est une classe indépendante. Seules les classes que vous instanciez et enregistrez sont compilées dans votre binaire. Si vous n'appelez pas addApp(&joystickPage), le code de cette page ne s'exécute pas et son HTML n'occupe pas de mémoire flash.
Cet exemple n'enregistre qu'un curseur et une page de jauge, en omettant le reste :
Les pages peuvent également être ajoutées ou supprimées pendant l'exécution en utilisant addApp() et removeApp().
Référence API
Documentation complète des classes et méthodes : Référence API de la Bibliothèque DIYables ESP32 WebApps
Tutoriels Exemples
Utilisation Avancée
Gestion des Pages en Temps Réel
Les pages peuvent être enregistrées conditionnellement en fonction de la présence du matériel ou de l'état en temps réel :
Pages Personnalisées
Étendez DIYablesWebAppPageBase pour créer une page avec n'importe quel HTML et n'importe quel format de message WebSocket :
Dépannage
Le WiFi ne se connecte pas
- Confirmez que le SSID et le mot de passe sont corrects
- La carte supporte uniquement les réseaux 2,4 GHz ; les réseaux 5 GHz ne sont pas supportés
- Vérifiez la puissance du signal à l'emplacement physique de la carte
Le navigateur ne peut pas atteindre la page
- Confirmez l'adresse IP affichée dans le Moniteur Série
- Assurez-vous que le navigateur et la carte sont sur le même réseau
- Désactivez le VPN s'il est actif
Le WebSocket se déconnecte fréquemment
- Vérifiez que webAppsServer.loop() est appelé à chaque itération de loop()
- Évitez les appels bloquants (delay(), lectures I2C lentes) qui bloquent la boucle d'événements
- Vérifiez la mémoire heap disponible dans le Moniteur Série
Utilisation mémoire élevée
- Supprimez toutes les pages non nécessaires au projet
- Réduisez setMaxSamples() sur la page du traceur
- Réduisez le nombre maximum de lignes sur la page du tableau