Arduino Nano ESP32 Web Rotator avec la Bibliothèque DIYables ESP32 WebApps
Aperçu
Ce tutoriel couvre la classe DIYablesWebRotatorPage de la bibliothèque DIYables ESP32 WebApps. La page du navigateur affiche un disque déplaçable qui rapporte son angle actuel à l'Arduino Nano ESP32 via WebSocket. Le disque fonctionne soit en mode continu (0–360°), soit en mode à plage limitée. La configuration est définie dans le constructeur et envoyée automatiquement au navigateur lors de la connexion.
Regardez ce tutoriel vidéo étape par étape montrant comment utiliser un servomoteur avec l'application Web Rotator :
Ce que ce Tutoriel Couvre
- Sélectionner entre les modes de rotation continu et à plage limitée
- Recevoir les valeurs d'angle dans un callback du sketch
- Piloter un servomoteur depuis l'angle rapporté
- Fournir l'angle actuel aux navigateurs nouvellement connectés
Matériel Requis
Ou vous pouvez acheter les kits suivants:
| 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.
Note d'achat: Si vous utilisez plusieurs servomoteurs, nous recommandons d'utiliser le PCA9685 16 Channel PWM Servo Driver Module pour économiser les broches du MCU et faciliter le câblage.
Étapes
Suivez ces instructions étape par étape :
- Si c'est la première fois que vous utilisez l'Arduino Nano ESP32, consultez le tutoriel sur Installation du logiciel Arduino Nano ESP32..
- Connectez la carte Arduino Nano ESP32 à votre ordinateur avec un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la carte appropriée (ex. Arduino Nano ESP32) et le port COM.
- Naviguez vers l'icône Bibliothèques dans la barre gauche de l'IDE Arduino.
- Cherchez "DIYables ESP32 WebApps", puis trouvez la bibliothèque DIYables ESP32 WebApps de DIYables
- Cliquez sur le bouton Installer pour installer la bibliothèque.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- On vous demandera d'installer d'autres dépendances de bibliothèques
- Cliquez sur le bouton Installer tout pour installer toutes les dépendances de bibliothèques.
- Dans l'IDE Arduino, allez dans Fichier Exemples DIYables ESP32 WebApps WebRotator, 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("°");
}
- Mettez à jour les identifiants WiFi dans le sketch :
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Cliquez sur le bouton Téléverser dans l'IDE Arduino pour téléverser le code sur l'Arduino Nano ESP32
- Ouvrez le Moniteur Série
- La sortie du Moniteur Série devrait ressembler à ceci :
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
DIYables WebApp - Web Rotator Example
INFO: Added app /
INFO: Added app /web-rotator
DIYables WebApp Library
Platform: Arduino Nano 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
==========================================
- Si rien n'apparaît, appuyez sur le bouton de réinitialisation de la carte.
- Entrez l'adresse IP du Moniteur Série dans un navigateur sur le même réseau.
- Exemple : http://192.168.0.2
- La page d'accueil affiche une carte pour l'application de rotateur :
- Sélectionnez la carte Web Rotator pour ouvrir la page de contrôle du disque :
- La page est également directement accessible à http://192.168.0.2/web-rotator.
- Faites glisser le disque et observez l'angle rapporté dans le Moniteur Série.
Modes de Rotation
Mode Continu (360° complet)
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS);
Mode à Plage Limitée
// Allows rotation between 0 and 180 degrees
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, 0.0, 180.0);
Callbacks
Réception des Mises à Jour d'Angle
Appelé chaque fois que l'utilisateur fait tourner le disque :
webRotatorPage.onRotatorValueFromWeb([](float angle) {
currentAngle = angle;
Serial.println("Angle: " + String(angle));
// Apply to servo or stepper here
});
Fourniture de l'Angle au Navigateur
Appelé quand un navigateur se connecte et demande l'angle actuel :
webRotatorPage.onRotatorValueToWeb([]() {
webRotatorPage.sendToWebRotator(currentAngle);
});
Exemple de Servomoteur
Mappez l'angle du navigateur (0–180°) à un servo standard :
#include <Servo.h>
Servo myServo;
void setup() {
myServo.attach(9);
// ... server and page setup ...
webRotatorPage.onRotatorValueFromWeb([](float angle) {
myServo.write((int)angle);
Serial.println("Servo angle: " + String((int)angle));
});
}
Dépannage
L'angle du disque ne déclenche pas le callback
- Confirmez que onRotatorValueFromWeb est enregistré avant webAppsServer.begin()
- Vérifiez que le statut WebSocket dans le navigateur indique "connecté"
Le servo se déplace à la mauvaise position
- Vérifiez que la plage d'angles correspond à la plage physique du servo (typiquement 0–180°)
- Utilisez le mode à plage limitée quand la plage mécanique est inférieure à 360°
Page inaccessible
- Vérifiez l'adresse IP du Moniteur Série
- Assurez-vous que la carte et l'appareil du navigateur sont sur le même réseau WiFi 2,4 GHz