Biblioteca de WebApps de DIYables - Framework completo de aplicaciones web para Arduino
Biblioteca de Aplicaciones Web de DIYables
Una biblioteca completa de Arduino para crear aplicaciones web basadas en WebSocket en Arduino Uno R4 WiFi y DIYables STEM V4 IoT. Esta biblioteca ofrece múltiples aplicaciones web listas para usar para monitorear, controlar e interactuar con tus proyectos de Arduino a través de una interfaz web moderna. Especialmente optimizada para la plataforma educativa DIYables STEM V4 IoT con capacidades de IoT mejoradas y sensores integrados.
Con esta biblioteca, puedes interactuar con tu Arduino a través de un navegador web en tu teléfono inteligente o PC, ya sea:
- Usa las aplicaciones web preconstruidas entre 11 aplicaciones proporcionadas sin ningún conocimiento de programación web
- Personaliza las aplicaciones web preconstruidas para que coincidan con los requisitos específicos de tu proyecto
- Construye y añade tus propias aplicaciones web utilizando la arquitectura flexible del marco de trabajo
🚀 Características
- Arquitectura modular: Añade solo las aplicaciones web que necesites para optimizar el uso de la memoria
- Memoria eficiente: Cada aplicación web puede habilitarse/deshabilitarse de forma independiente
- Memoria optimizada: Los códigos HTML, JavaScript y CSS están minificados para reducir el tamaño del código sin perder la interfaz de usuario y la funcionalidad. El código fuente original no minificado está incluido en la biblioteca como referencia y para personalización
- 11 aplicaciones web preconstruidas: Control total de Arduino sin necesidad de conocimientos de programación web
- Página de inicio: Centro de enlaces a todas las aplicaciones web
- Monitor web: Monitor de serie en tiempo real en tu navegador a través de WebSocket
- Chat web: Interfaz de chat interactiva con tu Arduino
- Pines digitales web: Controla y supervisa todos los pines digitales con interfaz web
- Deslizador Web: Controles deslizantes duales para salidas analógicas y PWM
- Joystick web: joystick interactivo para el control de robots y vehículos
- Medidor analógico web: Visualización de un medidor circular para el monitoreo de sensores
- Web Rotator: Control de disco giratorio con modos continuos y limitados
- Temperatura web: Visualización de termómetro con rangos configurables
- WebRTC: Reloj en tiempo real con sincronización de tiempo y manejo de zonas horarias
- Tabla Web: Una tabla de dos columnas de atributos y valores con actualizaciones en tiempo real
- Web Plotter: Visualización de datos en tiempo real y gráficos
- Plantilla de aplicación web personalizada: Plantilla completa para crear tus propias aplicaciones web con comunicación WebSocket en tiempo real
- Diseño adaptable: Funciona en computadoras de escritorio y dispositivos móviles
- Comunicación en tiempo real: Basada en WebSocket para actualizaciones instantáneas
- Integración sencilla: API simple basada en callbacks
- Soporte para múltiples aplicaciones: Soporte para agregar varias aplicaciones web al mismo tiempo
- Integración automática en la página de inicio: La aplicación web añadida se muestra automáticamente como enlace en la página de inicio
- Plataforma extensible: Actualmente implementado para Arduino Uno R4 WiFi, pero puede ampliarse para otras plataformas de hardware. Ver DIYables_WebApps_ESP32
📦 Instalación - Gestor de bibliotecas de Arduino IDE
- Abrir Arduino IDE
- Navega al icono Bibliotecas en la barra izquierda del Arduino IDE.
- 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 otras dependencias de la biblioteca
- Haga clic en el botón Instalar todo para instalar todas las dependencias de la biblioteca.
🔧 Dependencias
Esta biblioteca requiere lo siguiente:
- UnoR4WiFi_WebServer biblioteca (para soporte de WebSocket)
🎯 Inicio rápido
Para instrucciones detalladas de configuración y ejemplos de código, consulte:
- Documentación de referencia de la API - Documentación completa de la API
- Tutoriales de ejemplo - Guías completas para cada aplicación web:
- Ejemplo de chat web - Interfaz de chat interactiva con Arduino
- Ejemplo de Monitor Web - Monitor serial en tiempo real a través de un navegador web
- Ejemplo de trazador web - Visualización de datos en tiempo real y trazado
- Ejemplo de Pines Digitales Web - Control y monitoreo de pines digitales
- Ejemplo de control deslizante web - Controles deslizantes dobles para salidas analógicas y PWM
- Ejemplo de Joystick Web - Joystick virtual para control direccional
- Ejemplo de indicador analógico web - Indicador circular profesional para el monitoreo de sensores
- Ejemplo de Rotador Web - Control interactivo de un disco giratorio para servomotores y motores paso a paso
- Ejemplo de temperatura en la web - Visualización de un termómetro para el monitoreo de la temperatura
- Ejemplo de WebRTC - Reloj en tiempo real con sincronización horaria basada en la web y gestión de zonas horarias
- Ejemplo de tabla web - Tabla de datos de dos columnas con actualizaciones en tiempo real de atributos y valores
- Plantilla CustomWebApp - Plantilla completa para construir tus propias aplicaciones web personalizadas
- Ejemplo de Múltiples Aplicaciones Web - Guía de integración completa que combina todas las características
📱 Aplicaciones web
1. Página de Inicio (`/`)
- Centro de navegación
- Enlaces a todas las aplicaciones web
- Solo se muestran en la página de inicio las aplicaciones habilitadas y añadidas
- Visualización del estado de la conexión
- Diseño adaptable
2. Monitoreo web (`/web-monitor`)
- Monitor serial basado en navegador
- Comunicación bidireccional en tiempo real
- Marcado de tiempo de los mensajes y conteo
- Entrada de comandos con historial
3. Trazador Web (`/web-plotter`)
- Visualización de datos en tiempo real y gráficos
- Soporte para múltiples series de datos (hasta 8 líneas)
- Escalado automático del eje Y o rangos fijos
- Títulos de gráfico y etiquetas de ejes personalizables
- Transmisión por WebSocket con latencia mínima
- Ideal para monitoreo de sensores y depuración
4. WebChat (`/chat`)
- Interfaz de chat interactiva
- Respuestas en lenguaje natural
- Control de LEDs mediante comandos de chat
- Interacciones divertidas y educativas
5. Pines digitales de la web (`/web-digital-pins`)
- Control individual de pines (pines 0-13)
- Cada pin puede configurarse en modo ENTRADA o SALIDA
- Solo los pines habilitados se muestran en la interfaz web
- Monitoreo de pines de entrada y salida
- Operaciones en lote (Todos ENCENDIDOS/APAGADOS, Alternar)
- Retroalimentación en tiempo real del estado de los pines
6. Deslizador web (`/web-slider`)
- Deslizadores de rango dual (0-255)
- Control de salida PWM
- Botones de valores predefinidos
- Opciones de control sincronizadas
7. Joystick web (`/web-joystick`)
- Control de joystick interactivo con soporte táctil y de ratón
- Valores de coordenadas X/Y (-100 a +100)
- Retroalimentación de posición en tiempo real
- El retorno al centro automático se puede habilitar/deshabilitar mediante código Arduino
- Ideal para el control de robots y vehículos
8. Medidor analógico web (`/web-gauge`)
- Indicador circular profesional para el monitoreo de sensores en tiempo real
- Rango de valores configurable, unidades y precisión
- Animación suave de la aguja con retroalimentación visual
- Zonas codificadas por colores (verde, amarillo, rojo) para indicar el estado
- Gestión automática de la configuración: establece el rango una vez en el constructor
- Ideal para sensores de presión, monitorización de voltaje y lecturas analógicas
9. Rotador Web (`/web-rotator`)
- Control interactivo de disco giratorio con retroalimentación visual
- Dos modos de operación: Continuo (0-360°) y Limitado (rango personalizado)
- Retroalimentación de ángulo en tiempo real con rotación suave
- Soporte táctil y de ratón para escritorio y móvil
- Diseño profesional con gradiente cónico e indicador de posición
- Ideal para motores servo, motores paso a paso y control de rotación
10. Temperatura web (`/web-temperature`)
- Visualización de termómetro con monitorización de la temperatura en tiempo real
- Rango de temperatura configurable y unidades (°C, °F, K)
- Visualización interactiva de termómetro con animación tipo mercurio
- Manejo automático de la configuración: define el rango una vez en el constructor
- Actualizaciones en tiempo real de valores a través de WebSocket
- Ideal para sensores de temperatura y monitorización ambiental
11. WebRTC (`/web-rtc`)
- Visualización de reloj en tiempo real para la hora de Arduino RTC y la hora del dispositivo cliente
- Sincronización de tiempo con un clic desde el navegador web hacia Arduino RTC
- Indicador visual de diferencia de tiempo que muestra la precisión de sincronización en minutos
- Formato de hora de dos líneas con visualización de 12 horas AM/PM y fecha completa
- Actualizaciones en tiempo real basadas en WebSocket para una sincronización de tiempo instantánea
- Interfaz de usuario moderna con gradiente y diseño de tarjetas responsivo
- Sincronización consciente de la zona horaria utilizando la hora local del dispositivo
- Soporte RTC integrado específicamente para Arduino Uno R4 WiFi
- Monitoreo del estado de la conexión con indicadores visuales de WebSocket
- Solicitudes de tiempo automáticas al cargar la página para una visualización inmediata
- Perfecto para la generación de marcas de tiempo, registro de datos, programación y automatización basada en el tiempo
12. Tabla web (`/web-table`)
- Tabla de datos de dos columnas con pares clave-valor para una visualización de datos organizada
- Actualizaciones de valores en tiempo real a través de WebSocket para una actualización instantánea de los datos
- Estructura de la tabla configurable configurada una vez en la función setup() de Arduino
- Actualizaciones dinámicas de valores durante la ejecución sin recargar la página
- Diseño moderno y adaptable con efectos de hover y retroalimentación visual
- Monitoreo del estado de la conexión con indicadores visuales de WebSocket
- Gestión del estado vacío con mensajes amigables para el usuario cuando no hay datos disponibles
- Capacidad de actualización manual con un botón de actualización dedicado
- Tipos de datos flexibles que admiten cadenas, números y valores formateados
- Almacenamiento eficiente en memoria con filas máximas configurables (predeterminado: 20)
- Solicitudes automáticas de datos al cargar la página para la población inmediata de la tabla
- Perfecto para monitorización de sensores, estado del sistema, visualización de configuraciones y paneles en tiempo real
13. Plantilla de CustomWebApp (`/custom`)
- Plantilla completa para crear tus propias aplicaciones web personalizadas
- Comunicación WebSocket en tiempo real con filtrado automático de mensajes
- Diseño profesional basado en clases con un sistema APP_IDENTIFIER encapsulado
- Plantilla para principiantes con mensajería de texto simple entre la web y Arduino
- Funcionalidad de reconexión automática para conexiones WebSocket confiables
- Diseño móvil adaptable que funciona en teléfonos, tabletas y computadoras
- Guía de prevención de conflictos para el desarrollo de múltiples aplicaciones personalizadas
- Estructura de archivos modular con HTML separado, lógica de Arduino e integración de bibliotecas
- Framework extensible - modifica la plantilla para crear aplicaciones más sofisticadas
- Listo para integración - funciona sin problemas con otras WebApps de DIYables
- Perfecto para interfaces IoT personalizadas, paneles de sensores, paneles de control de dispositivos y proyectos educativos
🧩 Arquitectura modular
Optimización de memoria: La biblioteca WebApps de DIYables presenta un diseño modular que te permite incluir solo las aplicaciones web que realmente necesitas, reduciendo significativamente el uso de memoria en tu Arduino.
Beneficios clave:
- Integración selectiva: Añade solo las aplicaciones web necesarias a tu proyecto
- Uso eficiente de la memoria: Cada aplicación web es independiente y opcional
- Escalable: Comienza pequeño y añade más funcionalidades según sea necesario
- Rendimiento optimizado: Menos aplicaciones activas = mejor rendimiento
Cómo funciona:
// Basic setup - include only what you need
DIYablesWebAppServer webAppsServer(80, 81);
DIYablesHomePage homePage; // Always recommended
DIYablesWebSliderPage webSliderPage; // Only if you need sliders
DIYablesWebJoystickPage webJoystickPage; // Only if you need joystick
DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // Only if you need analog gauge
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS); // Only if you need rotator
DIYablesWebTemperaturePage tempPage(-10.0, 50.0, "°C"); // Only if you need temperature
DIYablesWebRTCPage webRTCPage; // Only if you need time sync
// Add only the apps you want
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webSliderPage); // Skip apps you don't need
webAppsServer.addApp(&gaugePage); // Add only what you use
webAppsServer.addApp(&tempPage); // to save memory
webAppsServer.addApp(&webRotatorPage); // Customize as needed
webAppsServer.addApp(&webRTCPage); // Add time synchronization
// Start server - choose appropriate method
webAppsServer.begin("WiFi_SSID", "password"); // WiFi connection
// OR
// webAppsServer.begin(); // For Ethernet or pre-configured connections (future)
// Runtime management (advanced)
if (sensorConnected) {
webAppsServer.addApp(&webJoystickPage); // Add dynamically
}
Flexibilidad en tiempo de ejecución:
- Gestión dinámica: Agregar o eliminar aplicaciones durante el tiempo de ejecución usando addApp() y removeApp()
- Carga Condicional: Cargar aplicaciones según el hardware o la configuración
- Aplicaciones Web Personalizadas: Crear aplicaciones web personalizadas heredando de DIYablesWebAppPageBase
- Sin recompilación: Cambiar las aplicaciones disponibles sin volver a compilar
🔌 Referencia de la API
Para la documentación completa de la API, que incluye todas las clases, métodos y ejemplos de uso, consulte:
📋 Ejemplos
La biblioteca incluye tutoriales de ejemplo completos:
- Ejemplo de chat web - Interfaz de chat interactiva con Arduino
- Ejemplo de monitor web - Monitor serie en tiempo real a través del navegador web
- Ejemplo de trazador web - Visualización y trazado de datos en tiempo real
- Ejemplo de pines digitales web - Control y monitoreo de pines digitales
- Ejemplo de control deslizante web - Controles deslizantes dobles para salidas analógicas/PWM
- Ejemplo de joystick web - Joystick virtual para control direccional
- Ejemplo de indicador analógico web - Indicador analógico profesional circular para monitoreo de sensores
- Ejemplo de rotador web - Control giratorio interactivo para servomotores y motores paso a paso
- Ejemplo de termómetro web - Visualización de termómetro para el monitoreo de la temperatura
- Ejemplo de WebRTC - Reloj en tiempo real con sincronización de hora basada en la web y manejo de zonas horarias
- Ejemplo de tabla web - Tabla de datos de dos columnas con actualizaciones en tiempo real de atributos y valores
- Plantilla CustomWebApp - Plantilla completa para construir tus propias aplicaciones web personalizadas
- Ejemplo de múltiples aplicaciones web - Guía de integración completa que combina todas las funciones
Cada tutorial de ejemplo incluye:
- Instrucciones de configuración paso a paso
- Diagramas de conexión de hardware
- Ejemplos de código completos
- Guías de resolución de problemas
- Ideas de proyectos y consejos de integración
🌐 URLs de la interfaz web
Una vez conectado a la red Wi‑Fi, accede a las aplicaciones en:
- Inicio: http://[IP_ADDRESS]/
- Chat web: http://[IP_ADDRESS]/chat
- Monitor web: http://[IP_ADDRESS]/web-monitor
- Plotter web: http://[IP_ADDRESS]/web-plotter
- Pines digitales web: http://[IP_ADDRESS]/web-digital-pins
- Deslizador web: http://[IP_ADDRESS]/web-slider
- Joystick web: http://[IP_ADDRESS]/web-joystick
- Medidor analógico web: http://[IP_ADDRESS]/web-gauge
- Rotador web: http://[IP_ADDRESS]/web-rotator
- Temperatura web: http://[IP_ADDRESS]/web-temperature
- WebRTC: http://[IP_ADDRESS]/web-rtc
- Tabla web: http://[IP_ADDRESS]/web-table
- Aplicación personalizada: http://[IP_ADDRESS]/custom (cuando se utiliza la plantilla CustomWebApp)
🔧 Configuración de hardware
DIYables STEM V4 IoT (Plataforma Recomendada)
- Capacidad WiFi integrada con diseño de antena optimizado
- LEDs y sensores a bordo listos para usar nada más sacarlos de la caja
- Opciones de E/S extendidas con conectividad adicional
- Diseño enfocado en la educación perfecto para el aprendizaje de IoT
- Componentes de grado profesional para un prototipado confiable
- Disposición de pines completa optimizada para su uso en breadboard
- Gestión de energía mejorada para un funcionamiento estable
- Perfecto para la educación STEM y el desarrollo de proyectos de IoT
Arduino Uno R4 WiFi
- No se requiere hardware adicional para la funcionalidad básica
- Conecta los LEDs a pines digitales para retroalimentación visual
- Conecta sensores a pines analógicos para monitoreo
- Compatibilidad estándar con Arduino
💡 Consejos de uso
- Optimización de Memoria: Utiliza una arquitectura modular - añade solo las aplicaciones web que necesites para ahorrar memoria
- Conexión WiFi: Asegura una señal WiFi fuerte para una comunicación WebSocket estable
- Seguridad de Pines: Siempre verifica las capacidades de los pines antes de conectar dispositivos externos
- Fuente de Alimentación: Utiliza una fuente de alimentación adecuada para tus dispositivos conectados
- Compatibilidad de Navegadores: Funciona mejor con navegadores modernos (Chrome, Firefox, Safari, Edge)
- Amigable para Móviles: Todas las interfaces son responsivas y funcionan en dispositivos móviles
- Comienza Pequeño: Comienza con 1-2 aplicaciones web, luego añade más funciones a medida que tu proyecto crece
🔍 Solución de problemas
Problemas de conexión a Wi-Fi
- Verificar el SSID y la contraseña
- Comprobar la intensidad de la señal WiFi
- Asegurar que la red sea de 2.4 GHz (5 GHz no es compatible)
Problemas de conexión de WebSocket
- Verificar la configuración del cortafuegos
- Verificar la dirección IP en el navegador
- Intentar actualizar la página web
- Verificar el Monitor Serie para mensajes de error
Problemas de rendimiento
- Optimización de la memoria: Elimina aplicaciones web no utilizadas para liberar RAM y memoria Flash
- Carga selectiva: Usa una arquitectura modular para incluir solo la funcionalidad necesaria
- Limita la frecuencia de actualización para datos de alta frecuencia
- Utiliza retardos adecuados en loop()
- Monitorea el uso de memoria para aplicaciones de larga duración
📚 Uso avanzado
Gestión dinámica de aplicaciones
La biblioteca admite la adición y eliminación en tiempo de ejecución de aplicaciones web:
// Add apps dynamically during runtime
if (sensorConnected && !webAppsServer.getApp("/webmonitor")) {
webAppsServer.addApp(new DIYablesWebMonitorPage());
}
// Remove apps to free memory
webAppsServer.removeApp("/chat"); // Remove webchat if not needed
// Get specific app instances
DIYablesWebDigitalPinsPage* pinsPage = webAppsServer.getWebDigitalPinsPage();
if (pinsPage) {
pinsPage->enablePin(2, WEB_PIN_OUTPUT);
}
Aplicaciones web personalizadas
Crea tus propias aplicaciones web heredando de DIYablesWebAppPageBase:
class MySensorDashboard : public DIYablesWebAppPageBase {
public:
MySensorDashboard() : DIYablesWebAppPageBase("/sensors") {}
void handleHTTPRequest(WiFiClient& client) override {
sendHTTPHeader(client);
client.print("<h1>Sensor Dashboard</h1>");
client.print("<p>Temperature: " + String(getTemperature()) + "°C</p>");
}
void handleWebSocketMessage(WebSocket& ws, const String& message) override {
if (message == "get_data") {
sendWebSocketMessage(ws, "temp:" + String(getTemperature()));
}
}
};
// Add your custom app
webAppsServer.addApp(new MySensorDashboard());
Páginas HTML Personalizadas
Puedes modificar los archivos HTML en el directorio src/html/ para personalizar la apariencia y la funcionalidad de la interfaz web.
Múltiples clientes de WebSocket
La biblioteca admite múltiples conexiones WebSocket simultáneas, lo que permite que varios usuarios controlen el mismo Arduino.
Integración con otras bibliotecas
Fácil de integrar con bibliotecas de sensores, control de servomotores, controladores de motores y otras bibliotecas de Arduino.
📄 Licencia
Esta biblioteca se distribuye bajo la Licencia MIT. Consulte el archivo LICENSE para más detalles.
🔗 Enlaces
- Documentación de referencia de la API - Documentación completa de la API
- Tutorial paso a paso - Tutorial paso a paso
- DIYables STEM V4 IoT - Obtén la placa de desarrollo recomendada
- DIYables Products - Explora nuestra completa gama de IoT y educación STEM
- Arduino Uno R4 WiFi: Página oficial de Arduino
---
¡Feliz programación con la biblioteca WebApps de DIYables! 🎉