Ejemplo de Arduino WebRotator - Tutorial de Control Rotacional Interactivo
Visión general
El ejemplo WebRotator crea una interfaz interactiva de control de disco giratorio accesible desde cualquier navegador web. Diseñado para Arduino Uno R4 WiFi y la plataforma educativa DIYables STEM V4 IoT, con capacidades mejoradas de control de motores y funciones integradas de control de servomotores y motores paso a paso, 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
- Dos modos de operación: Continuo (0-360°) y rango de ángulo limitado
- Retroalimentación de ángulo en tiempo real: Visualización y control precisos del ángulo
- Indicador de posición visual: Marcador de posición claro del disco con diseño en degradado
- Soporte táctil y de ratón: Funciona en escritorio, tabletas y dispositivos móviles
- Gestión automática de configuración: Configura el modo y el rango una vez en el constructor
- Comunicación WebSocket: Respuesta instantánea sin recargar la página
- Interfaz de usuario profesional: Diseño de gradiente cónico y rotación suave
- Plataforma extensible: Actualmente implementada para Arduino Uno R4 WiFi, pero puede ampliarse a otras plataformas de hardware. Ver DIYables_WebApps_ESP32
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino 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 Arduino Uno R4 WiFi/DIYables STEM V4 IoT, consulta el tutorial sobre configurar el entorno para Arduino Uno R4 WiFi/DIYables STEM V4 IoT en el IDE de Arduino.
- Conecta la placa Arduino Uno R4/DIYables STEM V4 IoT a tu computadora con un cable USB.
- Abre el IDE de Arduino en tu computadora.
- Selecciona la placa Arduino Uno R4 adecuada (p. ej., Arduino Uno R4 WiFi) y el puerto COM.
- Navega hasta el icono Bibliotecas en la barra izquierda del IDE de Arduino.
- Busca "DIYables WebApps", luego localiza la biblioteca DIYables WebApps de DIYables
- Haz clic en el botón Instalar para instalar la biblioteca.
- Se le pedirá que instale algunas otras dependencias de la librería
- Haga clic en el botón Instalar todo para instalar todas las dependencias de la librería.
- En Arduino IDE, ve a Archivo Ejemplos DIYables WebApps WebRotator ejemplo, o copia el código anterior y pégalo en el editor de Arduino IDE
/*
* 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("°");
}
- Configure 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 Subir del IDE de Arduino para cargar código en Arduino UNO R4/DIYables STEM V4 IoT
- 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: 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 no ve nada, reinicie la placa Arduino.
- Abra un navegador web en su PC o teléfono móvil.
- Escriba la dirección IP que se muestra en el monitor serie en el navegador web.
- Ejemplo: http://192.168.1.100
- La página de inicio se mostrará como se muestra en la imagen a continuación.
- Haz clic en el enlace de Web Rotator y verás la interfaz de usuario de la aplicación Web Rotator tal 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 del ángulo en tiempo real y del indicador de posición
- Animación suave: Rotación fluida con un diseño de gradiente profesional
- Visualización del ángulo: El ángulo actual se muestra en grados
- Indicador de modo: Muestra el modo de rotación actual y sus límites
Soporte táctil y de ratón
- Control de Escritorio: Clic y arrastrar con el ratón
- Control móvil: Toque y gestos de deslizamiento
- Diseño adaptable: Optimizado para todos los tamaños de pantalla
- Señales visuales: Indicadores visuales 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: de 0° a 360° y más allá, sin límite superior
- Sin desbordamiento: Los valores de ángulo pueden aumentar por encima de 360° y no se reinician a 0°
- Casos de uso: servomotores de rotación continua, antenas, plataformas giratorias
- Configuración: ROTATOR_MODE_CONTINUOUS
Modo limitado
- Rango personalizado: Definir á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 tu boceto principal de Arduino para funcionar 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 del 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: Establece la rotación mínima permitida
- Ángulo máximo: Establece la rotación máxima permitida
- Posición predeterminada: Ángulo inicial al arrancar el sistema
- Resolución: Controla la precisión de las actualizaciones del ángulo
Apariencia visual
La interfaz web se adapta automáticamente a tu configuración:
- Visualización del 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 con degradado: Apariencia profesional con colores suaves
Casos de Uso Comunes
Proyectos Educativos
- Aprendizaje del control de servomotores: Comprensión del PWM y el funcionamiento de los servomotores
- Educación en robótica: Posicionamiento del brazo, control de articulaciones
- Posicionamiento de antenas: Control de antena direccional
- Pan/Tilt de la cámara: Paneo e inclinación de la cámara
Aplicaciones Prácticas
- Domótica: Persianas automáticas, rejillas de ventilación, puertas
- Robótica: Articulaciones del brazo robótico, dirección del robot móvil
- Proyectos IoT: Sistemas de posicionamiento remotos
- Industrial: Posicionamiento automatizado, control de válvulas
Solución de problemas
Rotación no funciona
- Verifique la conexión WiFi y el estado de WebSocket
- Verifique que la función de callback esté correctamente configurada
- Asegúrese de que el servomotor esté correctamente conectado
- Verifique la fuente de alimentación para los motores
Valores de ángulos incorrectos
- Verifique el mapeo de ángulos para su hardware específico
- Verifique la biblioteca de servomotores y la configuración de pines
- Asegure el escalado correcto en la función de devolución de llamada
- Pruebe con la salida del Monitor Serial
Problemas de conexión
- Verifica la dirección IP en el navegador
- Verifica la configuración del cortafuegos
- Asegúrate de que la red Wi-Fi de 2.4 GHz (5 GHz no es compatible)
- Prueba a actualizar la página del navegador
Características avanzadas
Cambios en el Modo de Tiempo de Ejecución
Puede cambiar el modo del rotador durante la operación:
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
Enviar 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 puede provocar movimientos menos suaves. Utilice esta función solo si se requieren actualizaciones de posición en tiempo real.
Control de múltiples ejes
Combine 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: Comprender el funcionamiento de servomotores y 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 callback, control de hardware
Actividades en el aula
- Calibración de servomotores: Aprender el funcionamiento de los servomotores y las señales PWM
- Control de posición: Practicar tareas de posicionamiento precisas
- Integración de sistemas: Combinar sensores con el control de motores
- Resolución de problemas: Depurar problemas de hardware y software
Este ejemplo proporciona una base completa para los sistemas de control de rotación, perfecto para aplicaciones robóticas tanto educativas como prácticas.