Ejemplo de ESP32 WebRotator - Tutorial de Control Rotacional Interactivo
Visión general
El ejemplo WebRotator crea una interfaz de control de disco giratorio interactiva, accesible desde cualquier navegador web. Diseñado para la plataforma educativa ESP32 con capacidades mejoradas de control de motores, características de control de servomotores y de motores paso a paso integradas, y una integración fluida con módulos educativos de robótica. Perfecto para controlar servomotores, motores paso a paso, brazos robóticos, antenas o cualquier sistema que requiera un control de rotación preciso.
Características
- Disco giratorio interactivo: Interfaz de disco controlada por tacto y ratón
- Modos de operación duales: Continuo (0-360°) y rango de ángulo limitado
- Retroalimentación de ángulo en tiempo real: Visualización y control precisos del ángulo
- Indicador visual de posición: Marcador claro de la posición del disco con diseño de gradiente
- Soporte táctil y con ratón: Funciona en escritorio, tabletas y dispositivos móviles
- Gestión automática de la configuración: Establezca el modo y el rango una vez en el constructor
- Comunicación WebSocket: Respuesta instantánea sin recargar la página
- Interfaz profesional: Diseño de gradiente cónico con rotación suave
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.
Instrucciones de Configuración
Pasos Rápidos
Siga estas instrucciones paso a paso:
- Si es la primera vez que usas el ESP32, consulta el tutorial sobre la configuración del entorno para ESP32 en el IDE de Arduino (BASE_URL/tutorials/esp32/esp32-software-installation).
- Conecta la placa ESP32 a tu computadora con un cable USB.
- Inicia el IDE de Arduino en tu computadora.
- Selecciona la placa ESP32 adecuada (p. ej. ESP32 Dev Module) y el puerto COM.
- Navega hasta el icono Bibliotecas en la barra izquierda del IDE de Arduino.
- Busca "DIYables ESP32 WebApps", luego encuentra la Biblioteca DIYables ESP32 WebApps de DIYables
- Haz clic en el botón Instalar para instalar la biblioteca.
- Se le pedirá instalar algunas otras dependencias de la biblioteca.
- Haga clic en Instalar Todo para instalar todas las dependencias de la biblioteca.
- En el IDE de Arduino, vaya a Archivo Ejemplos DIYables ESP32 WebApps WebRotator ejemplo, o copie el código anterior y péguelo en el editor del IDE de 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("°");
}
- Configura las credenciales de WiFi en el código actualizando estas líneas:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Haz clic en el botón Subir en el IDE de Arduino para subir el código al ESP32
- Abre el Monitor Serial
- Consulta el resultado en el Monitor Serial. Se muestra a continuación
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 no ves nada, reinicia la placa ESP32.
- Abre un navegador web en tu PC o teléfono móvil.
- Escribe la dirección IP mostrada en el Monitor Serial en el navegador web
- Ejemplo: http://192.168.1.100
- Verás la página de inicio como en la imagen de abajo:
- Haz clic en el enlace de Web Rotator; verás la interfaz de usuario de la aplicación Web Rotator como se muestra a continuación.
- O también puedes acceder a la página directamente mediante la dirección IP seguida de /web-rotator. Por ejemplo: http://192.168.1.100/web-rotator
- Verás un disco giratorio interactivo que puedes arrastrar para controlar la rotación
Características de la interfaz web
Control de Disco Giratorio
- Disco interactivo: Haz clic y arrastra para girar el disco
- Retroalimentación visual: Visualización en tiempo real del ángulo e indicador de posición
- Animación fluida: Rotación fluida con diseño de degradado profesional
- Visualización del ángulo: El ángulo actual mostrado en grados
- Indicador de modo: Muestra el modo de rotación actual y los límites
Soporte táctil y de ratón
- Control de Escritorio: Clic y arrastre con el ratón
- Control móvil: Toques y gestos de deslizamiento
- Diseño adaptable: Optimizado para todo tipo de tamaños de pantalla
- Señales visuales: Indicadores claros para las áreas de interacción
Configuración del código
Configuración del rotador
// 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);
Recepción de comandos de ángulo
void onRotatorAngleReceived(float angle) {
Serial.print("Rotator angle received: ");
Serial.print(angle, 1);
Serial.println("°");
// Control your hardware here
}
Modos de operación
Modo continuo
- Rotación completa: 0° a 360° y más allá, sin límite superior
- Sin reinicio: Los valores de ángulo pueden aumentar por encima de 360° y no se reinician a 0°
- Casos de uso: Servos de rotación continua, antenas, giradiscos
- Configuración: ROTATOR_MODE_CONTINUOUS
Modo limitado
- Rango personalizado: Define ángulos mínimos y máximos
- Límites de rotación: Previene la rotación más allá de los límites establecidos
- Casos de uso: Servos estándar, brazos robóticos, sistemas de dirección
- Configuración: ROTATOR_MODE_LIMITED, minAngle, maxAngle
Integración de hardware
Control de Servomotor
Nota: El siguiente fragmento de código es un ejemplo parcial y debe integrarse en su sketch principal de ESP32 para que funcione correctamente.
#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);
}
Control de motor paso a paso
#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);
}
Opciones de personalización
Rango de ángulos
- Ángulo mínimo: Establecer la rotación mínima permitida
- Ángulo máximo: Establecer la rotación máxima permitida
- Posición predeterminada: Ángulo de inicio al arrancar el sistema
- Resolución: Controlar la precisión de las actualizaciones del ángulo
Apariencia visual
La interfaz web se adapta automáticamente a su configuración:
- Visualización de rango: Muestra los límites de ángulo configurados
- Indicador de modo: Muestra el modo de operación actual
- Marcador de posición: Indicador visual del ángulo actual
- Diseño de gradiente: Apariencia profesional con colores suaves
Casos de uso comunes
Proyectos Educativos
- Aprendizaje del control de servomotores: Comprensión de PWM y del funcionamiento de los servomotores
- Educación en robótica: Posicionamiento del brazo, control de articulaciones
- Posicionamiento de la antena: Control de la antena direccional
- Pan y Tilt de la cámara: Posicionamiento remoto de la cámara
Aplicaciones Prácticas
- Domótica: Persianas automáticas, rejillas de ventilación, puertas automáticas
- Robótica: Articulaciones del brazo robótico, dirección de un robot móvil
- Proyectos IoT: Sistemas de posicionamiento remotos
- Industria: Posicionamiento automático, control de válvulas
Solución de problemas
La rotación no funciona
- Verificar la conexión Wi-Fi y el estado de WebSocket
- Verificar que la función de callback esté correctamente configurada
- Verificar que el servomotor esté correctamente conectado
- Verificar la fuente de alimentación para los motores
Valores de ángulos incorrectos
- Verifica el mapeo de ángulos para tu hardware específico
- Verifica la biblioteca de servomotores y la configuración de pines
- Asegura una escala adecuada en la función de devolución de llamada
- Prueba con la salida del Monitor Serial
Problemas de conexión
- Verificar la dirección IP en el navegador
- Verificar la configuración del firewall
- Asegúrese de que la red WiFi sea de 2,4 GHz (5 GHz no es compatible)
- Intente recargar la página del navegador
Características Avanzadas
Cambios en el modo de tiempo de ejecución
Puede cambiar el modo del rotador durante el funcionamiento:
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");
}
}
Retroalimentación de posición
Envía la posición actual de vuelta a la interfaz web:
void sendAngleUpdate(float angle) {
currentAngle = angle;
webRotatorPage.sendToWebRotator(angle);
Serial.print("Angle update sent to web: ");
Serial.print(angle, 1);
Serial.println("°");
}
Nota: Enviar retroalimentación de ángulo con frecuencia a la interfaz web podría provocar un movimiento menos fluido. Utilice esta función solo si se requieren actualizaciones de posición en tiempo real.
Control de múltiples ejes
Combina varios rotadores para un posicionamiento complejo:
DIYablesWebRotatorPage panRotator(ROTATOR_MODE_CONTINUOUS);
DIYablesWebRotatorPage tiltRotator(ROTATOR_MODE_LIMITED, -90.0, 90.0);
server.addApp(&panRotator);
server.addApp(&tiltRotator);
Integración educativa
Objetivos de aprendizaje STEM
- Control de motores: Comprensión del funcionamiento de los servomotores y de los motores paso a paso
- Sistemas de coordenadas: Medición de ángulos y posicionamiento
- Tecnologías web: Interfaces de control en tiempo real
- Programación: Funciones de devolución de llamada, control de hardware
Actividades en el aula
- Calibración del servo: Aprender el funcionamiento del servo y las señales PWM
- Control de posición: Practicar tareas de posicionamiento precisas
- Integración del sistema: Combinar sensores con el control del motor
- Resolución de problemas: Depurar problemas de hardware y software
Este ejemplo ofrece una base integral para los sistemas de control de rotación, perfecto para aplicaciones robóticas tanto educativas como prácticas.