Ejemplo de Arduino WebSlider - Tutorial de la interfaz de control con dos deslizadores
Visión general
El ejemplo WebSlider proporciona dos controles deslizantes independientes accesibles a través de un navegador web. Diseñado para Arduino Uno R4 WiFi y DIYables STEM V4 IoT, plataforma educativa con capacidades analógicas mejoradas, características de control de precisión y módulos educativos integrados para aprender PWM y electrónica analógica. Cada deslizador ofrece valores de 0 a 255, lo que los hace perfectos para el control PWM, el ajuste de brillo, el control de velocidad de motor y cualquier aplicación que requiera valores de control similares a analógicos.

Características
- Deslizadores dobles: Dos controles deslizantes independientes (rango de 0 a 255 para cada uno)
- Valores en tiempo real: Actualizaciones instantáneas de valores mediante la comunicación WebSocket
- Compatible con PWM: Valores de 8 bits (0-255) perfectos para las funciones analogWrite()
- Retroalimentación visual: Visualización de valores en tiempo real para cada deslizador
- Botones de preajuste: Valores de preajuste rápidos para configuraciones comunes
- Soporte táctil y de ratón: Funciona en escritorio, tableta y dispositivos móviles
- Diseño adaptable: Se adapta a diferentes tamaños de pantalla
- Persistencia de valores: Los deslizadores recuerdan la última posición al recargar la página
- Plataforma extensible: Actualmente implementado 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) |
Instrucciones de configuración
Pasos rápidos
Sigue 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 mediante un cable USB.
- Inicia 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 encuentra la biblioteca DIYables WebApps de DIYables.
- Haz clic en el botón Instalar para instalar la biblioteca.

- Se le pedirá instalar algunas dependencias de bibliotecas.
- Haga clic en el botón Instalar Todo para instalar todas las dependencias de las bibliotecas.

- En el IDE de Arduino, ve a Archivo Ejemplos DIYables WebApps WebSlider (ejemplo), o copia el código anterior y pégalo en el editor del IDE de Arduino
- Configura las credenciales de WiFi en el código actualizando estas líneas:
- Haz clic en el botón Subir en el IDE de Arduino para subir código al Arduino UNO R4/DIYables STEM V4 IoT
- Abre el Monitor Serial
- Consulta el resultado en el Monitor Serial. Se muestra a continuación.
- Si no ve nada, reinicie la placa Arduino.
- Tome nota de la dirección IP que se muestra y escriba esta dirección en la barra de direcciones de un navegador web en su teléfono inteligente o PC.
- Ejemplo: http://192.168.0.2
- Verá la página de inicio como en la imagen de abajo:

- Haz clic en el enlace de Web Slider; verás la interfaz de usuario de la aplicación Web Slider como se muestra a continuación.

- También puedes acceder a la página directamente mediante la dirección IP, seguida de /web-slider. Por ejemplo: http://192.168.0.2/web-slider
- Intenta mover los dos deslizadores para controlar valores analógicos (0-255) y observa la retroalimentación en tiempo real en el Monitor Serial.
Personalización creativa - Adapta el código a tu proyecto
Establecer valores por defecto del control deslizante
Configurar las posiciones iniciales de los deslizadores:
Cómo usar los controles deslizantes
Controles de la interfaz web
La interfaz de control deslizante proporciona:
- Slider 1: Primer control deslizante con visualización de valor (0-255)
- Slider 2: Segundo control deslizante con visualización de valor (0-255)
- Value Display: Visualización de valores en tiempo real para ambos deslizantes
- Preset Buttons: Botones predefinidos: Acceso rápido a valores comunes (0%, 25%, 50%, 75%, 100%)
Funcionamiento de los deslizadores
Escritorio (Control del ratón)
- Haga clic y arrastre: Haga clic en la manija del control deslizante y arrástrelo para ajustar el valor
- Posición de clic: Haga clic en cualquier parte de la pista del control deslizante para saltar a ese valor
- Ajuste fino: Utilice movimientos pequeños del ratón para un ajuste preciso
Móvil/Tableta (Control táctil)
- Tocar y arrastrar: Toca la manija del control deslizante y arrástrala a una nueva posición
- Toca la posición: Toca la pista del control deslizante para establecer el valor
- Control suave: Deslizar con el dedo proporciona cambios de valor suaves
Rangos de valores
Cada deslizador proporciona:
- Valor mínimo: 0 (0% - apagado por completo)
- Valor máximo: 255 (100% - intensidad máxima)
- Resolución: 256 pasos discretos (precisión de 8 bits)
- Compatibilidad PWM: Uso directo de la función analogWrite()
Ejemplos de Programación
Manejador básico de control deslizante
Control de Brillo de LED
Control de posición del servomotor
Control de la velocidad del motor
Control de color de LED RGB
Técnicas Avanzadas de Programación
Suavizado de valores
Control basado en umbrales
Sistema de valores predefinidos
Ejemplos de integración de hardware
Control de la tira de LED
Control de la velocidad del ventilador
Control de volumen de audio
Solución de problemas
Problemas comunes
- Deslizadores no responden
- Verificar la conexión WebSocket en la consola del navegador
- Verificar la conectividad de red entre el dispositivo y Arduino
- Actualizar la página del navegador para restablecer la conexión
- Verificar el Monitor Serial en busca de errores de conexión
- Valores que no alcanzan el rango completo
- Verificar la configuración del rango del control deslizante en la interfaz web
- Comprobar problemas de mapeo de valores en la función de devolución de llamada
- Probar con diferentes navegadores o dispositivos
3. Control irregular o inconstante
- Implementar suavizado de valores para cambios graduales
- Verificar problemas de latencia de la red
- Agregar debounce para cambios rápidos de valor
4. La salida PWM no funciona
- Verifique que los pines admitan PWM (consulte el pinout de Arduino)
- Asegúrese de que analogWrite() se llame con los números de pin correctos
- Verifique las conexiones de hardware y los requisitos de carga
Consejos de depuración
Añadir depuración exhaustiva:
Ideas de Proyectos
Proyectos de control de iluminación
- Control del brillo de la iluminación de la habitación
- Interfaz de mezcla de colores RGB
- Control de velocidad de la animación de la tira LED
- Control de intensidad de la iluminación escénica
Proyectos de Control de Motores
- Control de la velocidad del robot
- Regulación de la velocidad del ventilador
- Control del caudal de la bomba
- Velocidad de la cinta transportadora
Proyectos de audio
- Interfaz de control de volumen
- Control de tono y ecualizador
- Intensidad de efectos de sonido
- Control de visualización musical
Automatización del hogar
- Control de climatización (intensidad de calefacción/refrigeración)
- Control de posición de persianas
- Control de caudal del sistema de riego
- Brillo/volumen de dispositivos inteligentes
Integración con otros ejemplos
Combinar con WebJoystick
Usa deslizadores para los límites de velocidad y un joystick para la dirección:
Combinar con WebDigitalPins
Usa deslizadores para controlar el PWM y pines digitales para encendido/apagado:
Próximos pasos
Después de dominar el ejemplo WebSlider, prueba:
- WebJoystick - Para control direccional en 2D
- WebDigitalPins - Para control discreto de encendido y apagado
- WebMonitor - Para depurar valores del control deslizante
- MultipleWebApps - Combinando deslizadores con otros controles
Soporte
Para obtener ayuda adicional:
- Consulta la documentación de la API
- Visita los tutoriales de DIYables: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Foros de la comunidad de Arduino