Exemple ESP32 WebSlider - Tutoriel sur l’interface de contrôle à double curseur
Vue d'ensemble
L'exemple WebSlider fournit deux curseurs indépendants accessibles via un navigateur web. Conçu pour la plateforme éducative ESP32 avec des capacités analogiques améliorées, des fonctionnalités de contrôle de précision et des modules éducatifs intégrés pour apprendre le PWM et l'électronique analogique. Chaque curseur offre des valeurs de 0 à 255, ce qui les rend parfaits pour le contrôle PWM, le réglage de la luminosité, le contrôle de la vitesse du moteur et toute application nécessitant des valeurs de contrôle analogiques.

Fonctionnalités
- Deux curseurs indépendants: Contrôles de curseur indépendants (plage 0-255 chacun)
- Valeurs en temps réel: Mises à jour instantanées des valeurs via une communication WebSocket
- Compatible PWM: Valeurs sur 8 bits (0-255), parfaites pour les fonctions analogWrite()
- Rétroaction visuelle: Affichage en temps réel de la valeur pour chaque curseur
- Boutons de préréglage: Valeurs préconfigurées rapides pour des configurations courantes
- Support tactile et souris: Fonctionne sur ordinateur de bureau, tablette et appareils mobiles
- Conception réactive: S'adapte à différentes tailles d'écran
- Persistance des valeurs: Les curseurs retiennent la dernière position lors du rechargement de la page
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables ESP32 (ESP32 inclus) | |
| 1 | × | Kit de Capteurs DIYables (30 capteurs/écrans) | |
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Instructions d'installation
Étapes rapides
Suivez ces instructions étape par étape :
- Si c'est la première fois que vous utilisez l'ESP32, reportez-vous au tutoriel sur Installation du logiciel ESP32..
- Connectez la carte ESP32 à votre ordinateur à l'aide d'un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la carte ESP32 appropriée (par exemple ESP32 Dev Module) et le port COM.
- 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 par DIYables.
- Cliquez sur le bouton Install pour installer la bibliothèque.

- On vous demandera d'installer d'autres dépendances de bibliothèque.
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances de la bibliothèque.

- Dans l'IDE Arduino, allez dans Fichier Exemples DIYables ESP32 WebApps WebSlider exemple, ou copiez le code ci-dessus et collez-le dans l'éditeur de l'IDE Arduino
- Configurez les identifiants WiFi dans le code en mettant à jour ces lignes :
- Cliquez sur le bouton Téléverser dans l'IDE Arduino pour téléverser le code sur l'ESP32
- Ouvrez le Moniteur Série
- Consultez le résultat dans le Moniteur Série. Cela ressemble à ce qui suit.
- Si vous ne voyez rien, redémarrez la carte ESP32.
- Notez l'adresse IP affichée et saisissez cette adresse dans la barre d'adresse d'un navigateur Web sur votre smartphone ou votre PC.
- Exemple : http://192.168.0.2
- Vous verrez la page d'accueil comme sur l'image ci-dessous :

- Cliquez sur le lien Web Slider, vous verrez l'interface utilisateur de l'application Web Slider comme ci-dessous:

- Vous pouvez également accéder directement à la page par l'adresse IP suivie de /web-slider. Par exemple : http://192.168.0.2/web-slider
- Essayez de déplacer les deux curseurs pour contrôler les valeurs analogiques (0-255) et observez le retour en temps réel dans le Moniteur série.
Personnalisation créative - Adaptez le code à votre projet
Définir les valeurs par défaut du curseur
Configurer les positions initiales des curseurs:
Comment utiliser les curseurs
Contrôles de l'interface Web
L'interface du curseur fournit :
- Curseur 1: Premier curseur de contrôle avec affichage de la valeur (0-255)
- Curseur 2: Deuxième curseur de contrôle avec affichage de la valeur (0-255)
- Affichage de la valeur: Valeurs numériques en temps réel pour les deux curseurs
- Boutons prédéfinis: Accès rapide à des valeurs courantes (0 %, 25 %, 50 %, 75 %, 100 %)
Utilisation des curseurs
Bureau (contrôle de la souris)
- Cliquer et faire glisser : Cliquez sur la poignée du curseur et faites-la glisser pour ajuster la valeur
- Position du clic : Cliquez n'importe où sur la piste du curseur pour atteindre cette valeur
- Réglage fin : Utilisez de petits mouvements de la souris pour un ajustement précis
Mobile/Tablette (Contrôle tactile)
- Touchez et faites glisser: Touchez la poignée du curseur et faites-la glisser jusqu'à la nouvelle position
- Position par tap: Touchez la piste du curseur pour régler la valeur
- Contrôle fluide: Le glissement du doigt permet des changements de valeur fluides
Plages de valeurs
Chaque curseur fournit :
- Valeur minimale: 0 (0% - complètement éteint)
- Valeur maximale: 255 (100% - intensité maximale)
- Résolution: 256 pas discrets (8 bits de précision)
- Compatibilité PWM: Utilisation directe de la fonction analogWrite()
Exemples de programmation
Gestionnaire de curseur basique
Contrôle de la luminosité des LED
Contrôle de la position du servomoteur
Contrôle de la vitesse du moteur
Contrôle de la couleur de la LED RVB
Techniques avancées de programmation
Lissage des valeurs
Contrôle basé sur des seuils
Système de valeurs prédéfinies
Exemples d'intégration matérielle
Contrôle du ruban LED
Contrôle de la vitesse du ventilateur
Contrôle du volume audio
Dépannage
Problèmes courants
1. Les curseurs ne répondent pas
- Vérifier la connexion WebSocket dans la console du navigateur
- Vérifier la connectivité réseau entre l'appareil et l'Arduino
- Actualiser la page du navigateur pour réinitialiser la connexion
- Vérifier le moniteur série pour les erreurs de connexion
2. Des valeurs qui n'atteignent pas l'étendue complète
- Vérifier les paramètres de plage du curseur dans l'interface Web
- Vérifier les problèmes de mappage des valeurs dans la fonction de rappel
- Tester avec différents navigateurs ou appareils
3. Contrôle saccadé ou incohérent
- Implémenter le lissage des valeurs pour des changements progressifs
- Vérifier les problèmes de latence du réseau
- Ajouter un mécanisme d'anti-rebond pour des changements rapides de valeur
4. La sortie PWM ne fonctionne pas
- Vérifiez que les broches prennent en charge le PWM (consultez le brochage ESP32)
- Assurez-vous que analogWrite() est appelé avec les bons numéros de broche
- Vérifiez les connexions matérielles et les exigences de charge
Conseils de débogage
Ajouter un débogage exhaustif :
Idées de projets
Projets de contrôle de l'éclairage
- Réglage de la luminosité de l'éclairage de la pièce
- Interface de mélange des couleurs RVB
- Réglage de la vitesse d'animation du ruban LED
- Réglage de l'intensité de l'éclairage de scène
Projets de contrôle des moteurs
- Contrôle de la vitesse du robot
- Régulation de la vitesse du ventilateur
- Contrôle du débit de la pompe
- Vitesse de la bande transporteuse
Projets audio
- Interface de contrôle du volume
- Contrôle de tonalité et égaliseur
- Intensité des effets sonores
- Contrôle de la visualisation musicale
Domotique
- Contrôle du climat (intensité du chauffage et du refroidissement)
- Contrôle de la position des stores
- Contrôle du débit du système d'irrigation
- Luminosité et volume des appareils intelligents
Intégration avec d'autres exemples
Combiner avec WebJoystick
Utilisez des curseurs pour les limites de vitesse et un joystick pour la direction :
Associer avec WebDigitalPins
Utilisez des curseurs pour contrôler le PWM et les broches numériques pour allumer et éteindre:
Prochaines étapes
Après avoir maîtrisé l'exemple WebSlider, essayez :
- WebJoystick - Pour le contrôle directionnel en 2D
- WebDigitalPins - Pour le contrôle discret marche/arrêt
- WebMonitor - Pour le débogage des valeurs des curseurs
- MultipleWebApps - En combinant des curseurs avec d'autres contrôles
Assistance
Pour obtenir une aide supplémentaire :
- Consultez la documentation de référence de l’API
- Consultez les tutoriels DIYables : https://esp32io.com/tutorials/diyables-esp32-webapps
- Forums communautaires de l’ESP32