Exemple ESP32 WebRotator – Tutoriel sur le contrôle rotatif interactif
Vue d'ensemble
L'exemple WebRotator crée une interface de contrôle interactive pour disque rotatif accessible depuis n'importe quel navigateur Web. Conçu pour l'ESP32, plateforme éducative dotée de capacités de contrôle moteur améliorées, de fonctionnalités intégrées de commande de servomoteurs et de moteurs pas à pas, et d'une intégration transparente avec les modules éducatifs de robotique. Parfait pour contrôler des servomoteurs, des moteurs pas à pas, des bras robotiques, des antennes, ou tout système nécessitant un contrôle de rotation précis.
Fonctionnalités
- Disque rotatif interactif: Interface de disque contrôlée par le toucher et la souris
- Deux modes d'opération: Continu (0–360°) et plage angulaire limitée
- Rétroaction d'angle en temps réel: Affichage et contrôle précis de l'angle
- Indicateur visuel de position: Marqueur de position du disque clair avec un design en dégradé
- Prise en charge tactile et souris: Fonctionne sur ordinateur de bureau, tablette et appareils mobiles
- Gestion automatique de la configuration: Définissez le mode et la plage une fois dans le constructeur
- Communication WebSocket: Réponse instantanée sans actualisation de la page
- Interface professionnelle: Design de dégradé conique avec rotation fluide
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) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
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 avec 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 DIYables ESP32 WebApps Library 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 bibliothèque.
- Dans l'IDE Arduino, allez à Fichier Exemples DIYables ESP32 WebApps WebRotator l'exemple, ou copiez le code ci-dessus et collez-le dans l'éditeur de l'IDE Arduino
/*
* DIYables WebApp Library - Web Rotator Example
*
* This example demonstrates the Web Rotator application:
* - Interactive rotatable disc control
* - Two modes: Continuous rotation and Limited angle range
* - Real-time angle feedback with WebSocket communication
* - Touch and mouse support for desktop and mobile
*
* Features:
* - Configurable rotation modes (continuous or limited)
* - Beautiful conic gradient disc with visual indicator
* - Real-time angle display and feedback
* - WebSocket communication for live updates
* - Professional responsive UI design
*
* Hardware: ESP32 Boards
*
* Setup:
* 1. Update WiFi credentials below
* 2. Upload the sketch to your Arduino
* 3. Open Serial Monitor to see the IP address
* 4. Navigate to http://[esp32-ip]/web-rotator in your web browser
*/
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create WebApp server and page instances
ESP32ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
// Rotator configuration constants
const int ROTATOR_MODE = ROTATOR_MODE_CONTINUOUS; // Change to ROTATOR_MODE_LIMITED for limited rotation
const float MIN_ANGLE = 0.0; // Minimum angle for limited mode
const float MAX_ANGLE = 180.0; // Maximum angle for limited mode
// Create WebRotator page with configuration
//DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS);
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, MIN_ANGLE, MAX_ANGLE);
// Variables for angle tracking
float currentAngle = 0.0;
void setup() {
Serial.begin(9600);
delay(1000);
// TODO: Initialize your hardware pins here
Serial.println("DIYables ESP32 WebApp - Web Rotator Example");
// Add pages to server
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webRotatorPage);
// Set 404 Not Found page (optional - for better user experience)
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Set callback functions for WebRotator
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
// Start server
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
if (ROTATOR_MODE == ROTATOR_MODE_LIMITED) {
Serial.println("\nRotator Mode: Limited");
Serial.print("Angle Range: ");
Serial.print(MIN_ANGLE);
Serial.print("° to ");
Serial.print(MAX_ANGLE);
Serial.println("°");
} else {
Serial.println("\nRotator Mode: Continuous Rotation");
}
Serial.println("\nTurn the disc in your web browser to control the rotator!");
}
void loop() {
// Handle web server and WebSocket connections
webAppsServer.loop();
// Simulate rotator movement or control actual hardware here
// For demonstration, we'll just echo back the received angle
delay(10);
}
/**
* Callback function called when angle is received from web interface
* This is where you would control your actual rotator hardware
*/
void onRotatorAngleReceived(float angle) {
currentAngle = angle;
Serial.print("Rotator angle received: ");
Serial.print(angle, 1);
Serial.println("°");
// TODO: Add your rotator control code here
// Examples:
// - Control servo motor: servo.write(map(angle, 0, 360, 0, 180));
// - Control stepper motor: stepper.moveTo(angle * stepsPerDegree);
// - Control DC motor with encoder feedback
// - Send commands to external rotator controller
// Note: No echo back to avoid interfering with smooth web interface rotation
}
/**
* Example function to change rotator mode at runtime
* Call this function to switch between continuous and limited modes
*/
void setRotatorMode(int mode, float minAng = 0, float maxAng = 360) {
webRotatorPage.setRotatorMode(mode, minAng, maxAng);
Serial.print("Rotator mode changed to: ");
if (mode == ROTATOR_MODE_LIMITED) {
Serial.print("Limited (");
Serial.print(minAng);
Serial.print("° to ");
Serial.print(maxAng);
Serial.println("°)");
} else {
Serial.println("Continuous");
}
}
/**
* Example function to send angle updates to web interface
* Call this function when your rotator position changes
*/
void sendAngleUpdate(float angle) {
currentAngle = angle;
webRotatorPage.sendToWebRotator(angle);
Serial.print("Angle update sent to web: ");
Serial.print(angle, 1);
Serial.println("°");
}
- Configurez les identifiants Wi-Fi dans le code en mettant à jour ces lignes :
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Cliquez sur le bouton Upload 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. Il ressemble à ce qui suit.
COM6
DIYables WebApp - Web Rotator Example
INFO: Added app /
INFO: Added app /web-rotator
DIYables WebApp Library
Platform: ESP32
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
📱 Web Interface: http://192.168.0.2
🔗 WebSocket: ws://192.168.0.2:81
📋 Available Applications:
🏠 Home Page: http://192.168.0.2/
🔄 Web Rotator: http://192.168.0.2/web-rotator
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Si vous ne voyez rien, redémarrez la carte ESP32.
- Ouvrez un navigateur web sur votre PC ou votre téléphone portable.
- Saisissez l’adresse IP affichée dans le Moniteur Série dans votre navigateur web
- Exemple : http://192.168.1.100
- Vous verrez la page d’accueil comme sur l’image ci-dessous:
- Cliquez sur le lien Web Rotator, vous verrez l'interface utilisateur de l'application Web Rotator comme ci-dessous :
- Ou vous pouvez aussi accéder directement à la page via l'adresse IP suivie de /web-rotator. Par exemple : http://192.168.1.100/web-rotator
- Vous verrez un disque rotatif interactif que vous pouvez faire glisser pour contrôler la rotation
Caractéristiques de l'interface Web
Contrôle du disque rotatif
- Disque interactif: Cliquez et faites glisser pour faire tourner le disque
- Rétroaction visuelle: affichage en temps réel de l'angle et indicateur de position
- Animation fluide: rotation fluide avec un design de dégradé professionnel
- Affichage de l'angle: angle actuel affiché en degrés
- Indicateur de mode: affiche le mode de rotation actuel et les limites
Support tactile et souris
- Contrôle sur ordinateur: clic et glisser-déposer
- Contrôle mobile: gestes tactiles et balayage
- Conception réactive: Optimisée pour toutes les tailles d'écran
- Indicateurs visuels: repères clairs pour les zones d'interaction
Configuration du code
Configuration du rotateur
// Continuous rotation mode (full 0-360 degrees)
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS);
// Limited rotation mode with custom range
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, 0.0, 180.0);
// Set up angle callback
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
Commandes d'angle de réception
void onRotatorAngleReceived(float angle) {
Serial.print("Rotator angle received: ");
Serial.print(angle, 1);
Serial.println("°");
// Control your hardware here
}
Modes de fonctionnement
Mode continu
- Rotation complète: de 0° à 360° et au-delà, sans limite supérieure
- Pas de retour à zéro: les valeurs d'angle peuvent augmenter au-delà de 360° et ne se réinitialisent pas à 0°
- Cas d'utilisation: servos à rotation continue, antennes, platines tournantes
- Configuration: ROTATOR_MODE_CONTINUOUS
Mode limité
- Plage personnalisée: Définir les angles minimum et maximum
- Limites de rotation: Empêche la rotation au-delà des limites définies
- Cas d'utilisation: Servomoteurs standard, bras robotiques, systèmes de direction
- Configuration: ROTATOR_MODE_LIMITED, minAngle, maxAngle
Intégration du matériel
Contrôle du servomoteur
Remarque : L'extrait de code suivant est un exemple partiel et doit être intégré à votre croquis ESP32 principal pour fonctionner correctement.
#include <Servo.h>
Servo myServo;
// Set rotator to limited mode: 0 to 180 degrees
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, 0.0, 180.0);
void setup() {
myServo.attach(9); // Servo on pin 9
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
}
void onRotatorAngleReceived(float angle) {
// Directly write angle (0-180) to servo
myServo.write((int)angle);
}
Contrôle du moteur pas à pas
#include <Stepper.h>
const int stepsPerRevolution = 200;
Stepper myStepper(stepsPerRevolution, 8, 9, 10, 11);
void onRotatorAngleReceived(float angle) {
// Calculate steps for desired angle
int steps = (angle / 360.0) * stepsPerRevolution;
myStepper.step(steps);
}
Options de personnalisation
Plage d'angles
- Angle minimum: Définir la rotation autorisée minimale
- Angle maximum: Définir la rotation autorisée maximale
- Position par défaut: Angle de départ lors du démarrage du système
- Résolution: Contrôler la précision des mises à jour d'angles
Apparence visuelle
L'interface web s'adapte automatiquement à votre configuration :
- Affichage des limites d'angle: Affiche les limites d'angle configurées
- Indicateur de mode: Affiche le mode d'opération actuel
- Marqueur de position: Indicateur visuel de l'angle actuel
- Conception en dégradé: Apparence professionnelle avec des couleurs douces
Cas d'utilisation courants
Projets éducatifs
- Apprentissage du contrôle des servomoteurs: Comprendre le PWM et le fonctionnement des servomoteurs
- Éducation en robotique: Positionnement du bras, contrôle des articulations
- Positionnement d'antenne: Contrôle d'antenne directionnelle
- Pan/Tilt de caméra: Positionnement à distance de la caméra
Applications pratiques
- Domotique: Stores motorisés, bouches d'aération, portes
- Robotique: Articulations du bras robotique, direction du robot mobile
- Projets IoT: Systèmes de positionnement à distance
- Industriel: Positionnement automatisé, contrôle des vannes
Dépannage
La rotation ne fonctionne pas
- Vérifier la connexion WiFi et l'état du WebSocket
- Vérifier que la fonction de rappel est correctement définie
- S'assurer que le servo/moteur est correctement connecté
- Vérifier l'alimentation des moteurs
Valeurs d'angle incorrectes
- Vérifier le mappage des angles pour votre matériel spécifique
- Vérifier la bibliothèque Servo et la configuration des broches
- Assurer une mise à l'échelle correcte dans la fonction de rappel
- Tester avec la sortie du moniteur série
Problèmes de connexion
- Vérifiez l'adresse IP dans le navigateur
- Vérifiez les paramètres du pare-feu
- Assurez-vous que le réseau Wi-Fi 2,4 GHz est utilisé (5 GHz non pris en charge)
- Essayez d'actualiser la page du navigateur
Fonctionnalités avancées
Modifications du mode d'exécution
Vous pouvez changer le mode du rotateur pendant le fonctionnement :
void setRotatorMode(int mode, float minAng = 0, float maxAng = 360) {
webRotatorPage.setRotatorMode(mode, minAng, maxAng);
Serial.print("Rotator mode changed to: ");
if (mode == ROTATOR_MODE_LIMITED) {
Serial.print("Limited (");
Serial.print(minAng);
Serial.print("° to ");
Serial.print(maxAng);
Serial.println("°)");
} else {
Serial.println("Continuous");
}
}
Rétroaction de position
Renvoyer la position actuelle à l'interface Web:
void sendAngleUpdate(float angle) {
currentAngle = angle;
webRotatorPage.sendToWebRotator(angle);
Serial.print("Angle update sent to web: ");
Serial.print(angle, 1);
Serial.println("°");
}
Note : L'envoi de retours d'angle fréquents à l'interface web peut entraîner un mouvement moins fluide. Utilisez cette fonctionnalité uniquement si des mises à jour de position en temps réel sont nécessaires.
Contrôle multi-axes
Combinez plusieurs rotateurs pour un positionnement complexe :
DIYablesWebRotatorPage panRotator(ROTATOR_MODE_CONTINUOUS);
DIYablesWebRotatorPage tiltRotator(ROTATOR_MODE_LIMITED, -90.0, 90.0);
server.addApp(&panRotator);
server.addApp(&tiltRotator);
Intégration éducative
Objectifs d'apprentissage STEM
- Contrôle des moteurs: comprendre le fonctionnement des servomoteurs et des moteurs pas à pas
- Systèmes de coordonnées: mesure des angles et positionnement
- Technologies Web: interfaces de contrôle en temps réel
- Programmation: fonctions de rappel et contrôle du matériel
Activités en classe
- Calibration du servomoteur: Apprendre le fonctionnement du servomoteur et les signaux PWM
- Contrôle de position: Pratiquer des tâches de positionnement précis
- Intégration des systèmes: Associer les capteurs au contrôle du moteur
- Résolution de problèmes: Diagnostiquer et résoudre les problèmes matériels et logiciels
Cet exemple offre une base complète pour les systèmes de contrôle de la rotation, idéale pour des applications robotiques éducatives et pratiques.