Home
ESP32

Bibliothèque ESP32 WebApps de DIYables - Cadre complet d'applications Web ESP32

DIYables ESP32 WebApps Bibliothèque

Une bibliothèque ESP32 complète pour créer des applications web basées sur WebSocket. Cette bibliothèque fournit plusieurs applications web prêtes à l'emploi pour surveiller, contrôler et interagir avec vos projets ESP32 via une interface web moderne.

Avec cette bibliothèque, vous pouvez interagir avec votre ESP32 via un navigateur Web sur votre smartphone ou votre PC en utilisant l'un des moyens suivants :

  • Utilisez des applications web préconstruites parmi les 11 applications proposées sans aucune connaissance en programmation web
  • Personnalisez les applications web préconstruites pour répondre à vos exigences spécifiques du projet
  • Créez et ajoutez vos propres applications web en utilisant l’architecture du framework flexible
DIYables ESP32 Applications Web

🚀 Fonctionnalités

  • Architecture modulaire: Ajoutez uniquement les applications web dont vous avez besoin pour optimiser l'utilisation de la mémoire
  • Économe en mémoire: Chaque application web peut être activée/désactivée indépendamment
  • Optimisé pour la mémoire: Les codes HTML, JavaScript et CSS sont minifiés pour réduire la taille du code tout en préservant l'interface utilisateur et les fonctionnalités. Le code source d'origine non minifié est inclus dans la bibliothèque à titre de référence et pour la personnalisation
  • 11 applications web préconstruites: Contrôle complet de l'ESP32 sans aucune connaissance en programmation Web requise
  • Page d'accueil : un centre névralgique avec des liens vers toutes les applications web
  • Moniteur Web: Moniteur série en temps réel dans votre navigateur via WebSocket
  • Chat Web: Interface de chat interactive avec votre Arduino
  • Broches numériques Web: Contrôler et surveiller toutes les broches numériques via une interface Web
  • Curseur Web: Contrôles à double curseur pour les sorties analogiques et PWM
  • Web Joystick: Joystick interactif pour le contrôle des robots et des véhicules
  • Jauge analogique Web: Affichage de jauge circulaire pour la surveillance des capteurs
  • Rotateur Web: Contrôle par disque rotatif avec des modes continus et limités
  • Température Web : visualisation du thermomètre avec des plages configurables
  • Web RTC: Horloge en temps réel avec synchronisation de l'heure et gestion des fuseaux horaires
  • Table Web: tableau attribut-valeur à deux colonnes avec des mises à jour en temps réel
  • Web Plotter: Visualisation et traçage de données en temps réel
  • Modèle d’application Web personnalisé: Modèle complet pour créer vos propres applications web avec une communication WebSocket en temps réel
  • Conception réactive: Fonctionne sur les ordinateurs de bureau et les appareils mobiles
  • Communication en temps réel: Basée sur WebSocket pour des mises à jour instantanées
  • Intégration facile: API basée sur des callbacks simples
  • Support de plusieurs applications: Permet d’ajouter plusieurs applications web en même temps
  • Intégration automatique dans la page d’accueil: L’application web ajoutée est automatiquement affichée sous forme de lien sur la page d’accueil

📦 Installation - Gestionnaire de bibliothèques de l’IDE Arduino

  • Ouvrez l'IDE Arduino
  • Accédez à l'icône Libraries dans la barre de gauche de l'IDE Arduino.
  • Recherchez "DIYables ESP32 WebApps", puis trouvez la bibliothèque DIYables ESP32 WebApps de DIYables.
  • Cliquez sur le bouton Install pour installer la bibliothèque.
Bibliothèque ESP32 WebApps de DIYables
  • Il vous sera demandé d'installer d'autres dépendances de bibliothèques.
  • Cliquez sur le bouton Tout installer pour installer toutes les dépendances des bibliothèques.
Dépendance de DIYables ESP32 WebApps

🔧 Dépendances

Cette bibliothèque nécessite ce qui suit :

  • DIYables_ESP32_WebServer bibliothèque (pour la prise en charge de WebSocket)

🎯 Démarrage rapide

Pour des instructions de configuration détaillées et des exemples de code, veuillez vous reporter à :

📱 Applications Web

1. Page d'accueil (`/`)

  • Centre de navigation
  • Liens vers toutes les applications web
  • Seules les applications activées/ajoutées sont affichées sur la page d'accueil
  • Affichage de l'état de connexion
  • Design réactif

2. Moniteur Web (`/web-monitor`)

  • Moniteur série basé sur le navigateur
  • Communication bidirectionnelle en temps réel
  • Horodatage et comptage des messages
  • Saisie de commandes avec historique

3. Traceur Web (`/web-plotter`)

  • Visualisation et tracé de données en temps réel
  • Prise en charge de plusieurs séries de données (jusqu'à 8 lignes)
  • Auto-échelle de l'axe des Y ou plages fixes
  • Titres de tracé et étiquettes des axes personnalisables
  • Streaming WebSocket pour une latence minimale
  • Idéal pour la surveillance et le débogage des capteurs

4. WebChat (`/chat`)

  • Interface de chat interactive
  • Réponses en langage naturel
  • Contrôle des DEL via des commandes de chat
  • Interactions amusantes et éducatives

5. Épingles numériques du Web (`/web-digital-pins`)

  • Contrôle individuel des broches (broches 0 à 13)
  • Chaque broche peut être configurée en mode ENTREE ou SORTIE
  • Seules les broches activées sont affichées dans l'interface Web
  • Surveillance des broches d'entrée et de sortie
  • Opérations en bloc (Tout allumé/éteint, Basculer)
  • Rétroaction en temps réel de l'état des broches

6. Curseur Web (`/web-slider`)

  • Curseurs à double plage (0-255)
  • Contrôle de sortie PWM
  • Boutons de valeurs prédéfinies
  • Options de contrôle synchronisées

7. Joystick Web (`/web-joystick`)

  • Contrôle de joystick interactif avec support tactile et souris
  • Valeurs des coordonnées X/Y (-100 à +100)
  • Rétroaction de position en temps réel
  • Le retour automatique au centre peut être activé/désactivé via le code ESP32
  • Parfait pour le contrôle de robots et de véhicules

8. Jauge analogique Web (`/web-gauge`)

  • Affichage de jauge circulaire professionnelle pour la surveillance en temps réel des capteurs
  • Plage de valeurs configurable, unités et précision
  • Animation fluide de l'aiguille avec rétroaction visuelle
  • Zones codées par couleur (vert, jaune, rouge) pour l’indication d’état
  • Gestion automatique de la configuration - définir la plage une fois dans le constructeur
  • Parfait pour les capteurs de pression, la surveillance de la tension et les mesures analogiques

9. Rotateur Web (`/web-rotator`)

  • Contrôle par disque rotatif interactif avec rétroaction visuelle
  • Deux modes de fonctionnement : Continu (0-360°) et Limité (plage personnalisée)
  • Rétroaction d'angle en temps réel avec rotation fluide
  • Prise en charge tactile et souris pour ordinateur de bureau et mobile
  • Conception de dégradé conique professionnel avec indicateur de position
  • Parfait pour les servomoteurs, les moteurs pas à pas et le contrôle de rotation

10. Température Web (`/web-temperature`)

  • Affichage visuel du thermomètre avec surveillance de la température en temps réel
  • Plage de température configurable et unités (°C, °F, K)
  • Visualisation interactive du thermomètre avec animation de type mercure
  • Gestion automatique de la configuration - définir la plage une fois dans le constructeur
  • Mises à jour en temps réel via WebSocket
  • Idéal pour les capteurs de température et la surveillance environnementale

11. Web en temps réel (`/web-rtc`)

  • Affichage de l'horloge en temps réel pour le RTC ESP32 et l'heure de l'appareil client
  • Synchronisation de l'heure en un seul clic depuis le navigateur Web vers le RTC ESP32
  • Indicateur visuel de la différence d'heure affichant la précision de la synchronisation en minutes
  • Format d'heure sur deux lignes avec affichage 12 heures (AM/PM) et date complète
  • Mises à jour en temps réel basées sur WebSocket pour une synchronisation instantanée de l'heure
  • Interface utilisateur moderne en dégradé avec une disposition en cartes réactives
  • Synchronisation tenant compte du fuseau horaire en utilisant l'heure locale de l'appareil
  • Support RTC intégré spécifiquement pour l'ESP32
  • Surveillance de l'état de connexion avec des indicateurs visuels WebSocket
  • Requêtes automatiques de l'heure lors du chargement de la page pour un affichage immédiat
  • Horodatage, journalisation des données, planification et automatisation basées sur le temps

12. Table Web (`/web-table`)

  • Tableau de données à deux colonnes avec des paires attribut-valeur pour un affichage des données organisé
  • Mises à jour des valeurs en temps réel via WebSocket pour un rafraîchissement des données instantané
  • Structure du tableau configurable à configurer une fois dans la fonction setup() de l'ESP32
  • Mises à jour dynamiques des valeurs pendant l'exécution sans actualiser la page
  • Conception moderne et réactive avec des effets de survol et des retours visuels
  • Surveillance de l'état de connexion avec des indicateurs WebSocket visuels
  • Gestion de l'état vide avec des messages conviviaux lorsqu'aucune donnée n'est disponible
  • Capacité de rafraîchissement manuel avec un bouton de rafraîchissement dédié
  • Types de données flexibles prenant en charge les chaînes, les nombres et les valeurs formatées
  • Stockage économe en mémoire avec un nombre maximum de lignes configurable (par défaut : 20)
  • Requêtes de données automatiques au chargement de la page pour une population immédiate du tableau
  • Parfait pour la surveillance des capteurs, l'état du système, l'affichage de la configuration et les tableaux de bord en temps réel

13. Modèle CustomWebApp (`/custom`)

  • Modèle complet pour créer vos propres applications web personnalisées
  • Communication WebSocket en temps réel avec filtrage automatique des messages
  • Conception professionnelle basée sur des classes avec un système APP_IDENTIFIER encapsulé
  • Modèle convivial pour les débutants avec des messages texte simples entre le navigateur Web et Arduino
  • Fonctionnalité de reconnexion automatique pour des connexions WebSocket fiables
  • Conception responsive mobile fonctionnant sur téléphones, tablettes et ordinateurs
  • Conseils de prévention des conflits pour le développement de plusieurs applications personnalisées
  • Structure de fichiers modulaire avec HTML séparé, logique ESP32 et intégration de bibliothèque
  • Cadre extensible - modifiez le modèle pour créer des applications sophistiquées
  • Prêt pour l'intégration - fonctionne sans couture avec d'autres ESP32 WebApps DIYables
  • Parfait pour des interfaces IoT personnalisées, tableaux de bord de capteurs, panneaux de contrôle d'appareils et projets éducatifs

🧩 Architecture modulaire

Optimisation de la mémoire : La bibliothèque ESP32 WebApps de DIYables propose une conception modulaire qui vous permet d'inclure uniquement les applications web dont vous avez réellement besoin, réduisant considérablement l'utilisation de la mémoire sur votre Arduino.

Principaux avantages:

  • Intégration sélective : N'ajoutez que les applications web requises à votre projet
  • Économe en mémoire : Chaque application web est indépendante et optionnelle
  • Évolutive : Commencez petit et ajoutez plus de fonctionnalités au besoin
  • Performance optimisée : Moins d'applications actives = meilleure performance

Comment cela fonctionne :

// 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 }

Flexibilité d'exécution:

  • Gestion dynamique: Ajouter ou supprimer des applications pendant l'exécution en utilisant addApp() et removeApp()
  • Chargement conditionnel: Charger des applications en fonction du matériel ou de la configuration
  • Applications personnalisées: Créez des applications web personnalisées en héritant de DIYablesWebAppPageBase
  • Aucune recompilation: Modifier les applications disponibles sans reconstruction

🔌 Référence API

Pour la documentation complète de l’API, incluant toutes les classes, méthodes et exemples d’utilisation, voir :

Documentation de référence de l’API

📋 Exemples

La bibliothèque comprend des didacticiels d'exemples complets :

Chaque tutoriel d'exemple comprend :

  • Instructions d'installation étape par étape
  • Schémas de connexion du matériel
  • Exemples de code complets
  • Guides de dépannage
  • Idées de projets et conseils d'intégration

🌐 URLs de l'interface Web

Une fois connecté au Wi‑Fi, accédez aux applications à :

  • Accueil: http://[IP_ADDRESS]/
  • Chat Web: http://[IP_ADDRESS]/chat
  • Moniteur Web: http://[IP_ADDRESS]/web-monitor
  • Traceur Web: http://[IP_ADDRESS]/web-plotter
  • Broches Numériques Web: http://[IP_ADDRESS]/web-digital-pins
  • Curseur Web: http://[IP_ADDRESS]/web-slider
  • Joystick Web: http://[IP_ADDRESS]/web-joystick
  • Jauge Analogique Web: http://[IP_ADDRESS]/web-gauge
  • Rotateur Web: http://[IP_ADDRESS]/web-rotator
  • Température Web: http://[IP_ADDRESS]/web-temperature
  • Web RTC: http://[IP_ADDRESS]/web-rtc
  • Table Web: http://[IP_ADDRESS]/web-table
  • Application personnalisée: http://[IP_ADDRESS]/custom (lors de l'utilisation du modèle CustomWebApp)

💡 Astuces d'utilisation

  1. Optimisation de la mémoire: Utilisez une architecture modulaire - n'ajoutez que les applications web dont vous avez besoin pour économiser de la mémoire
  2. Connexion Wi-Fi: Assurez-vous d'un signal Wi-Fi fort pour une communication WebSocket stable
  3. Sécurité des broches: Vérifiez toujours les capacités des broches avant de connecter des dispositifs externes
  4. Alimentation: Utilisez une alimentation adaptée pour vos dispositifs connectés
  5. Compatibilité du navigateur: Fonctionne mieux avec les navigateurs modernes (Chrome, Firefox, Safari, Edge)
  6. Adapté aux mobiles: Toutes les interfaces sont réactives et fonctionnent sur les appareils mobiles
  7. Commencer petit: Commencez par 1-2 applications web, puis ajoutez plus de fonctionnalités à mesure que votre projet grandit

🔍 Dépannage

Problèmes de connexion Wi-Fi

  • Vérifier le SSID et le mot de passe
  • Vérifier la puissance du signal Wi-Fi
  • Vérifier que le réseau est en 2,4 GHz (le 5 GHz n'est pas pris en charge)

Problèmes de connexion WebSocket

  • Vérifiez les paramètres du pare-feu
  • Vérifiez l'adresse IP dans le navigateur
  • Essayez d'actualiser la page Web
  • Vérifiez le Moniteur série pour les messages d'erreur

Problèmes de performance

  • Optimisation de la mémoire: Supprimer les applications web inutilisées pour libérer de la RAM et de la mémoire Flash
  • Chargement sélectif: Utiliser une architecture modulaire pour n'inclure que les fonctionnalités nécessaires
  • Limiter la fréquence de mise à jour des données à haute fréquence
  • Utiliser des délais appropriés dans loop()
  • Surveiller l'utilisation de la mémoire pour les applications qui s'exécutent sur de longues périodes

📚 Utilisation avancée

Gestion dynamique des applications

La bibliothèque prend en charge l'ajout et la suppression d'applications web à l'exécution :

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

Applications web personnalisées

Créez vos propres applications web en héritant de DIYablesWebAppPageBase :

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());

Pages HTML personnalisées

Vous pouvez modifier les fichiers HTML dans le répertoire src/html/ pour personnaliser l'apparence et les fonctionnalités de l'interface Web.

Plusieurs clients WebSocket

La bibliothèque prend en charge plusieurs connexions WebSocket simultanées, permettant à plusieurs utilisateurs de contrôler le même Arduino.

Intégration avec d'autres bibliothèques

Intégration facile avec les bibliothèques de capteurs, le contrôle des servomoteurs, les pilotes de moteurs et d'autres bibliothèques ESP32.

📄 Licence

Cette bibliothèque est publiée sous la licence MIT. Voir le fichier LICENSE pour plus de détails.

---

Bon codage avec la bibliothèque ESP32 WebApps de DIYables ! 🎉

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 !
DIVULGATION
Newbiely.fr participe au Programme Partenaires d'Amazon Services LLC, un programme de publicité d'affiliation conçu pour permettre aux sites de percevoir une rémunération grâce à la création de liens vers Amazon.com, Amazon.it, Amazon.fr, Amazon.co.uk, Amazon.ca, Amazon.de, Amazon.es, Amazon.nl, Amazon.pl et Amazon.se
Copyright © 2025 Newbiely.fr. Tous droits réservés.
Conditions d'utilisation | Politique de confidentialité
Email: newbiely.com@gmail.com