Exemple Arduino WebRotator - Tutoriel sur le contrôle rotationnel interactif
Vue d'ensemble
L'exemple WebRotator crée une interface de contrôle rotative interactive accessible depuis n'importe quel navigateur web. Conçu pour l'Arduino Uno R4 WiFi et la plateforme STEM V4 IoT de DIYables avec des capacités améliorées de contrôle des moteurs, des fonctionnalités intégrées de contrôle des servomoteurs et des moteurs pas à pas, et une intégration transparente avec les modules éducatifs de robotique. Parfait pour contrôler les servomoteurs, les moteurs pas à pas, les bras robotiques, les antennes, ou tout système nécessitant un contrôle rotationnel précis.
Fonctionnalités
- Disque rotatif interactif: interface de disque contrôlée par le toucher et la souris
- Deux modes de fonctionnement: Continu (0-360°) et plage angulaire limitée
- Rétroaction angulaire 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é
- Support tactile et souris: Fonctionne sur ordinateur de bureau, tablette et appareils mobiles
- Gestion automatique de la configuration: définir le mode et la plage angulaire une fois dans le constructeur
- Communication WebSocket: réponse instantanée sans actualisation de la page
- Interface utilisateur professionnelle: design en dégradé conique avec rotation fluide
- Plateforme extensible: Actuellement implémentée pour Arduino Uno R4 WiFi, mais peut être étendue à d'autres plateformes matérielles. Voir DIYables_WebApps_ESP32
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables STEM V4 IoT (Arduino 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 de configuration
Étapes rapides
Suivez ces instructions étape par étape :
- Si c'est votre première utilisation de l'Arduino Uno R4 WiFi/DIYables STEM V4 IoT, consultez le tutoriel sur Arduino UNO R4 - Installation du logiciel..
- Connectez la carte Arduino Uno R4/DIYables STEM V4 IoT à votre ordinateur à l'aide d'un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la carte Arduino Uno R4 appropriée (par exemple, Arduino Uno R4 WiFi) et le port COM.
- Accédez à l'icône Libraries dans la barre 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.
- Il vous sera demandé d'installer d'autres dépendances de la bibliothèque.
- Cliquez sur le bouton Install All pour installer toutes les dépendances de la bibliothèque.
- Dans l'IDE Arduino, allez dans Fichier Exemples DIYables WebApps WebRotator comme 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: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* 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://[arduino-ip]/web-rotator in your web browser
*/
#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
UnoR4ServerFactory 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 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 WiFi 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 vers l'Arduino UNO R4/DIYables STEM V4 IoT
- Ouvrez le Moniteur série
- Vérifiez le résultat sur 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: Arduino Uno R4 WiFi
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 Arduino.
- 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 le 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 également accéder directement à la page par 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
Fonctionnalités de l'interface Web
Contrôle du disque rotatif
- Disque interactif: Cliquez et faites glisser pour faire pivoter le disque
- Rétroaction visuelle: Affichage en temps réel de l'angle et indicateur de position
- Animation fluide: Rotation en douceur 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: cliquer et glisser avec la souris.
- Contrôle sur mobile: gestes tactiles et de balayage.
- Conception réactive: optimisée pour toutes les tailles d'écran.
- Indicateurs visuels: des 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);
Réception des commandes d'angle
void onRotatorAngleReceived(float angle) {
Serial.print("Rotator angle received: ");
Serial.print(angle, 1);
Serial.println("°");
// Control your hardware here
}
Modes d'opération
Mode continu
- Rotation complète: 0° à 360° et au-delà, sans limite supérieure
- Pas de remise à zéro: Les valeurs angulaires 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: Servos 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 ci-dessous est un exemple partiel et doit être intégré dans votre sketch Arduino 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: Définir 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 de fonctionnement actuel
- Marqueur de position: Indicateur visuel de l'angle actuel
- Conception en dégradé: Aspect professionnel avec des couleurs harmonieuses
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 de l'antenne: Contrôle d'antenne directionnelle
- Caméra Pan/Tilt: Positionnement à distance de la caméra
Applications pratiques
- Domotique: Stores automatisés, bouches d'aération automatisées, portes automatisées
- Robotique: articulations du bras robotique, direction d'un robot mobile
- Projets IoT: systèmes de positionnement à distance
- Industriel: positionnement automatisé, commande des vannes
Dépannage
La rotation ne fonctionne pas
- Vérifier la connexion Wi-Fi et l'état du WebSocket
- Vérifier que la fonction de rappel est correctement définie
- Vérifier que le servomoteur est correctement connecté
- Vérifier l'alimentation des moteurs
Valeurs angulaires incorrectes
- Vérifiez le mappage des angles pour votre matériel spécifique
- Vérifiez la bibliothèque de servomoteurs et la configuration des broches
- Assurez-vous que l'échelle est correctement appliquée dans la fonction de rappel
- Testez avec la sortie du moniteur série
Problèmes de connexion
- Vérifier l'adresse IP dans le navigateur
- Vérifier les paramètres du pare-feu
- Assurez-vous que le réseau Wi-Fi 2,4 GHz est utilisé (le 5 GHz n'est pas 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 sur la 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 fréquent de retours d'angle vers l'interface web peut entraîner des mouvements moins fluides. Utilisez cette fonctionnalité uniquement si des mises à jour de position en temps réel sont requises.
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
- Calibrage du servomoteur: apprendre le fonctionnement du servomoteur et les signaux PWM
- Contrôle de position: pratiquer des tâches de positionnement précises
- Intégration des systèmes: combiner capteurs et commande du moteur
- Résolution de problèmes: déboguer le matériel et les logiciels
Cet exemple fournit une base complète pour les systèmes de contrôle de la rotation, parfaite pour des applications robotiques éducatives et pratiques.