Home
Arduino UNO R4

Bibliothèque WebApps de DIYables - Framework complet d'applications Web Arduino

DIYables Bibliothèque d'applications Web

Une bibliothèque Arduino complète pour créer des applications web basées sur WebSocket sur Arduino Uno R4 WiFi et DIYables STEM V4 IoT. Cette bibliothèque fournit plusieurs applications Web prêtes à l'emploi pour surveiller, contrôler et interagir avec vos projets Arduino via une interface Web moderne. Spécialement optimisée pour la plateforme éducative DIYables STEM V4 IoT avec des capacités IoT améliorées et des capteurs intégrés.

Grâce à cette bibliothèque, vous pouvez interagir avec votre Arduino via un navigateur web sur votre smartphone ou votre PC en utilisant soit l’un ou l’autre :

  • Utilisez des applications web préconstruites parmi les 11 applications fournies sans aucune connaissance en programmation web
  • Personnalisez les applications web préconstruites pour répondre aux exigences spécifiques de votre projet
  • Créez et ajoutez vos propres applications web en utilisant l'architecture du framework flexible
Arduino UNO R4 applications Web bricolables

🚀 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 afin de réduire la taille du code tout en préservant l'interface utilisateur et la fonctionnalité. Le code source d'origine non minifié est inclus dans la bibliothèque à des fins de référence et de personnalisation
  • 11 applications web préconstruites : Contrôle complet d'Arduino sans aucune connaissance en programmation Web requise
  • Page d'accueil: Centre de liens vers toutes les applications web
  • Web Monitor: 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 avec une interface Web
  • Curseur Web : contrôles à double curseur pour les sorties analogiques/PWM
  • Joystick Web: 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 de 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 à deux colonnes attribut-valeur avec des mises à jour en temps réel
  • Traceur Web: 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 simple basée sur des callbacks.
  • Prise en charge de plusieurs applications: Permet d'ajouter plusieurs applications Web en même temps.
  • Intégration automatique sur la page d'accueil: L'application web ajoutée est automatiquement affichée sous forme de lien sur la page d'accueil.
  • Plateforme extensible: Actuellement implémentée pour Arduino Uno R4 WiFi, mais peut être étendue à d'autres plateformes matérielles. Voir DIYables_WebApps_ESP32

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

  • Ouvrez l'IDE Arduino
  • Accédez à l'icône Libraries sur la barre de gauche de l'IDE Arduino.
  • Recherchez "DIYables WebApps", puis trouvez la bibliothèque DIYables WebApps par DIYables
  • Cliquez sur le bouton Install pour installer la bibliothèque.
Bibliothèque WebApps DIYables pour Arduino UNO R4
  • Vous serez invité à installer d'autres dépendances des bibliothèques.
  • Cliquez sur le bouton Tout installer pour installer toutes les dépendances des bibliothèques.
Dépendance WebApps pour Arduino UNO R4 DIYables

🔧 Dépendances

Cette bibliothèque nécessite ce qui suit :

  • UnoR4WiFi_WebServer bibliothèque (pour la prise en charge des WebSockets)

🎯 Démarrage rapide

Pour des instructions d'installation détaillées et des exemples de code, veuillez vous référer à :

📱 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
  • Conception réactive

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

  • Moniteur série basé sur le navigateur
  • Communication bidirectionnelle en temps réel
  • Horodatage des messages et comptage
  • 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 courbes)
  • Échelle automatique de l'axe des ordonnées ou plages fixes
  • Titres du graphique et étiquettes des axes personnalisables
  • Diffusion WebSocket pour une latence minimale
  • Parfait pour la surveillance et le débogage des capteurs

4. WebChat (`/chat`)

  • Interface de chat interactive
  • Réponses en langage naturel
  • Contrôle des LED par des commandes de chat
  • Des interactions ludiques et éducatives

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

  • Contrôle individuel des broches (broches 0 à 13)
  • Chaque broche peut être activée en mode Entrée 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 de 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 Arduino
  • Idéal 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 de disque rotatif interactif avec rétroaction visuelle
  • Deux modes de fonctionnement : Continu (0-360°) et Limité (plage personnalisée)
  • Rétroaction en temps réel de l'angle avec rotation fluide
  • Prise en charge tactile et souris pour ordinateur et mobile
  • Conception professionnelle de dégradé conique avec indicateur de position
  • Parfait pour les servomoteurs, les moteurs pas à pas et le contrôle de rotation

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

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

11. WebRTC (`/web-rtc`)

  • Affichage de l'horloge en temps réel pour l'horloge RTC Arduino et l'heure du périphérique client
  • Synchronisation de l'heure en un seul clic depuis le navigateur Web vers le RTC Arduino
  • 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 en format 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 avec gradient et une mise en page réactive en style carte
  • Synchronisation tenant compte du fuseau horaire en utilisant l'heure locale de l'appareil
  • Support RTC intégré spécifiquement pour Arduino Uno R4 WiFi
  • 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
  • Parfait pour l'horodatage, l'enregistrement des données, la planification et l'automatisation basée sur le temps

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

  • Tableau de données à deux colonnes avec des paires clé-valeur pour un affichage des données organisé
  • Mises à jour de valeurs en temps réel via WebSocket pour un rafraîchissement instantané des données
  • Structure de table configurable mise en place une fois dans la fonction setup() d'Arduino
  • Mises à jour dynamiques des valeurs pendant l'exécution sans actualisation de la page
  • Conception moderne et réactive avec des effets de survol et un feedback visuel
  • Surveillance du statut de connexion avec des indicateurs visuels WebSocket
  • Gestion de l'état vide avec des messages conviviaux lorsque 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 maximal 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 un échange de texte simple entre le Web et l'Arduino
  • Fonctionnalité de reconnexion automatique pour des connexions WebSocket fiables
  • Conception responsive adaptée aux mobiles fonctionnant sur les téléphones, tablettes et ordinateurs
  • Guide de prévention des conflits pour le développement de plusieurs applications personnalisées
  • Structure de fichiers modulaire avec HTML séparé, logique Arduino et intégration de bibliothèque
  • Framework extensible - modifiez le modèle pour créer des applications sophistiquées
  • Prêt pour l'intégration - fonctionne sans couture avec d'autres WebApps DIYables
  • Parfait pour les interfaces IoT personnalisées, les tableaux de bord de capteurs, les panneaux de contrôle des appareils et les projets éducatifs

🧩 Architecture modulaire

Optimisation de la mémoire: La bibliothèque WebApps de DIYables présente une architecture 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.

Avantages clés:

  • Intégration sélective: Ajoutez uniquement les applications web nécessaires à votre projet
  • Économe en mémoire: Chaque application web est indépendante et facultative
  • Évolutif: Commencez petit et ajoutez plus de fonctionnalités au besoin
  • Performance optimisée: Moins d'applications actives = meilleures performances

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 les applications en fonction du matériel ou de la configuration
  • Applications personnalisées: Créer des applications web personnalisées en héritant de DIYablesWebAppPageBase
  • Aucune recompilation: Modifier les applications disponibles sans les reconstruire

🔌 Référence API

Pour la documentation API complète, y compris toutes les classes, méthodes et exemples d'utilisation, voir :

Documentation de référence de l’API

📋 Exemples

La bibliothèque inclut des tutoriels d'exemples complets:

Chaque tutoriel d'exemple comprend :

  • Instructions d'installation étape par étape
  • Schémas de câblage 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 WiFi, 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
  • Tableau Web: http://[IP_ADDRESS]/web-table
  • Application Personnalisée: http://[IP_ADDRESS]/custom (lors de l'utilisation du modèle CustomWebApp)

🔧 Configuration matérielle

DIYables STEM V4 IoT (Plateforme recommandée)

  • Connectivité Wi‑Fi intégrée avec une conception d’antenne optimisée
  • LEDs et capteurs intégrés, prêts à l’emploi dès la sortie de la boîte
  • Options E/S étendues avec une connectivité supplémentaire
  • Conception axée sur l’éducation, parfaite pour l’apprentissage du développement de l’IoT
  • Composants de qualité professionnelle pour un prototypage fiable
  • Plan de brochage complet optimisé pour une utilisation sur breadboard
  • Gestion de l’alimentation améliorée pour un fonctionnement stable
  • Parfait pour l’éducation STEM et le développement de projets IoT

Arduino Uno R4 WiFi

  • Aucun matériel supplémentaire n'est nécessaire pour le fonctionnement de base
  • Connectez des LEDs aux broches numériques pour un retour visuel
  • Connectez les capteurs aux broches analogiques pour la surveillance
  • Compatibilité Arduino standard

💡 Conseils 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 WiFi: assurez un signal WiFi fort pour une communication WebSocket stable
  3. Sécurité des broches: vérifiez toujours les capacités des broches avant de connecter des périphériques externes
  4. Alimentation: utilisez une alimentation adéquate pour vos périphériques connectés
  5. Compatibilité du navigateur: fonctionne mieux avec les navigateurs modernes (Chrome, Firefox, Safari, Edge)
  6. Compatibilité mobile: Toutes les interfaces sont réactives et fonctionnent sur les appareils mobiles
  7. Commencez petit: démarrez avec 1 à 2 applications web, puis ajoutez davantage de fonctionnalités à mesure que votre projet se développe

🔍 Dépannage

Problèmes de connexion Wi‑Fi

  • Vérifiez le SSID et le mot de passe
  • Vérifiez la puissance du signal Wi-Fi
  • Assurez-vous que le réseau est en 2,4 GHz (5 GHz non 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 la RAM et 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 pour les 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 longtemps

📚 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égrez facilement des bibliothèques de capteurs, le contrôle des servomoteurs, des pilotes de moteurs et d'autres bibliothèques Arduino.

📄 Licence

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

🔗 Liens

---

Bonne programmation avec la bibliothèque 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