Biblioteca DIYables ESP32 WebApps - Framework completo de aplicaciones web para ESP32
Biblioteca de WebApps para ESP32 de DIYables
Una biblioteca integral para ESP32 para crear aplicaciones web basadas en WebSocket. Esta biblioteca ofrece múltiples aplicaciones web listas para usar para la monitorización, el control y la interacción con tus proyectos ESP32 a través de una interfaz web moderna.
Con esta biblioteca, puedes interactuar con tu ESP32 a través de un navegador web en tu teléfono inteligente o PC, ya sea:
- Utiliza aplicaciones web preconstruidas entre 11 aplicaciones proporcionadas sin necesidad de conocimientos de programación web
- Personaliza las aplicaciones web preconstruidas para que se ajusten a los requisitos específicos de tu proyecto
- Construye y añade tus propias aplicaciones web utilizando la arquitectura de un framework flexible
🚀 Características
- Arquitectura modular: Añade solo las aplicaciones web que necesites para optimizar el uso de la memoria
- Eficiente en memoria: Cada aplicación web puede activarse o deshabilitarse de forma independiente
- Memoria optimizada: Los códigos HTML, JavaScript y CSS se minifican para reducir el tamaño del código, manteniendo la interfaz de usuario y la funcionalidad. El código fuente original no minificado está incluido en la biblioteca para referencia y personalización
- 11 aplicaciones web preconstruidas: Control completo de ESP32 sin necesidad de conocimientos de programación web
- Página de inicio: centro con enlaces a todas las aplicaciones web
- Monitor Web: Monitor 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 dobles para salidas analógicas/PWM
- Joystick Web: Joystick interactivo para el control de robots y vehículos
- Medidor analógico web: Visualización 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
- Web RTC: Reloj en tiempo real con sincronización de tiempo y manejo de zonas horarias
- Tabla web: Tabla de dos columnas de atributos y valores con actualizaciones en tiempo real
- Web Plotter: Visualización y trazado de datos en tiempo real
- Plantilla de Aplicación Web Personalizada: Plantilla completa para crear tus propias aplicaciones web con comunicación WebSocket en tiempo real
- Diseño Responsivo: Funciona en equipos de escritorio y dispositivos móviles
- Comunicación en Tiempo Real: Basada en WebSocket para actualizaciones instantáneas
- Integración Fácil: API simple basada en callbacks
- Soporte para Múltiples Aplicaciones: Soporte para agregar múltiples 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
📦 Instalación - Administrador de Bibliotecas del IDE de Arduino
- Abrir Arduino IDE
- Navega al icono Bibliotecas en la barra izquierda del Arduino IDE.
- 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á que instale algunas otras dependencias de bibliotecas
- Haga clic en Instalar todo para instalar todas las dependencias de la biblioteca.
🔧 Dependencias
Esta biblioteca requiere lo siguiente:
- DIYables_ESP32_WebServer librería (para soporte de WebSocket)
🎯 Inicio rápido
Para instrucciones detalladas de configuración y ejemplos de código, por favor consulte:
- Documentación 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 serie en tiempo real a través de un navegador web
- Ejemplo de trazador web - Visualización de datos en tiempo real y trazado de gráficos
- 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 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 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 de CustomWebApp - Plantilla completa para crear 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 las aplicaciones habilitadas o añadidas se muestran en la página de inicio
- Indicador de estado de conexión
- Diseño adaptable
2. Monitoreo Web (`/web-monitor`)
- Monitor serie basado en navegador
- Comunicación bidireccional en tiempo real
- Registro de marcas de tiempo y conteo de mensajes
- Entrada de comandos con historial
3. Trazador Web (`/web-plotter`)
- Visualización y trazado de datos en tiempo real
- Soporte para múltiples series de datos (hasta 8 líneas)
- Escalado automático del eje Y o rangos fijos
- Títulos de gráficos y etiquetas de los ejes personalizables
- Transmisión por WebSocket de baja latencia
- Ideal para la monitorización de sensores y la 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 (Todo encendido/apagado, alternar)
- Retroalimentación del estado de los pines en tiempo real
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 automático al centro puede habilitarse/deshabilitarse mediante código ESP32
- Ideal para el control de robots y vehículos
8. Medidor analógico web (`/web-gauge`)
- Visualización profesional de medidor circular para monitoreo de sensores en tiempo real
- Rangos de valores, unidades y precisión configurables
- Animación suave de la aguja con retroalimentación visual
- Zonas codificadas por colores (verde, amarillo, rojo) para indicar el estado
- Manejo automático de la configuración: configure el rango una vez en el constructor
- Perfecto 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 del á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 y indicador de posición
- Perfecto para servomotores, motores paso a paso y control de rotación
10. Temperatura web (`/web-temperature`)
- Visualización de termómetro con monitoreo de temperatura en tiempo real
- Rango de temperatura configurable y unidades (°C, °F, K)
- Visualización interactiva de termómetro con animación tipo mercurio
- Gestión automática de la configuración: establece el rango una vez en el constructor
- Actualizaciones en tiempo real a través de WebSocket
- Ideal para sensores de temperatura y monitoreo ambiental
11. Web RTC (`/web-rtc`)
- Visualización de reloj en tiempo real para el RTC del ESP32 y la hora del dispositivo cliente
- Sincronización de hora con un clic desde el navegador web hacia el RTC del ESP32
- Indicador visual de la diferencia de tiempo que muestra la precisión de la sincronización en minutos
- Formato de hora de dos líneas con formato de 12 horas y AM/PM y fecha completa
- Actualizaciones en tiempo real basadas en WebSocket para sincronización instantánea de la hora
- Interfaz de usuario moderna con gradiente con diseño de tarjetas adaptable
- Sincronización con reconocimiento de la zona horaria utilizando la hora del dispositivo local
- Soporte RTC integrado, específicamente para ESP32
- Monitoreo del estado de la conexión con indicadores visuales de WebSocket
- Solicitudes automáticas de hora al cargar la página para una visualización inmediata
- Perfecto para Marcado 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 atributo-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 tabla configurable configurada una vez en la función setup() del ESP32
- Actualizaciones dinámicas de valores durante la ejecución sin actualizar la página
- Diseño moderno y adaptable con efectos 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 claros para el usuario cuando no haya 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 (por defecto: 20)
- Solicitudes de datos automáticas al cargar la página para la población inmediata de la tabla
- Ideal para el monitoreo de sensores, el estado del sistema, la visualización de la configuración 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 apta 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 adaptable para móviles 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 ESP32 e integración de bibliotecas
- Framework extensible - modifica la plantilla para crear aplicaciones sofisticadas
- Listo para integraciones - funciona sin problemas con otras DIYables ESP32 WebApps
- Ideal para interfaces IoT personalizadas, tableros de sensores, paneles de control de dispositivos y proyectos educativos
🧩 Arquitectura modular
Optimización de memoria: la biblioteca ESP32 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: Empieza pequeño y añade más características 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 la ejecución utilizando addApp() y removeApp()
- Carga condicional: Cargar aplicaciones en función del hardware o de la configuración
- Aplicaciones personalizadas: Crea 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 Plotter 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 Medidor Analógico Web - Medidor analógico circular profesional para el monitoreo de sensores
- Ejemplo de Rotador Web - Control de disco giratorio interactivo para motores servo y paso a paso
- Ejemplo de Temperatura Web - Pantalla de termómetro visual para el monitoreo de temperatura
- Ejemplo de Reloj en Tiempo Real Web - Reloj en tiempo real con sincronización de hora basada en 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 de Aplicación Web Personalizada - Plantilla completa para construir tus propias aplicaciones web personalizadas
- Ejemplo de Varias Aplicaciones Web - Guía completa de integración que combina todas las características
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 Wi-Fi, acceda 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
- Web RTC: http://[IP_ADDRESS]/web-rtc
- Tabla Web: http://[IP_ADDRESS]/web-table
- Aplicación Personalizada: http://[IP_ADDRESS]/custom (al usar la plantilla CustomWebApp)
💡 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 dispositivos 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 funcionalidades a medida que tu proyecto crece
🔍 Resolució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
- Asegúrese de que la red sea de 2,4 GHz (5 GHz no es compatible)
Problemas de conexión de WebSocket
- Verificar la configuración del firewall
- Verificar la dirección IP en el navegador
- Prueba a recargar la página
- Verificar el Monitor Serial para mensajes de error
Problemas de rendimiento
- Optimización de la memoria: Eliminar aplicaciones web no utilizadas para liberar RAM y memoria Flash
- Carga selectiva: Utilice una arquitectura modular para incluir solo la funcionalidad necesaria
- Limite la frecuencia de actualización para datos de alta frecuencia
- Utilice retardos apropiados en loop()
- Monitoree 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
Puede 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
Integre fácilmente con bibliotecas de sensores, control de servomotores, controladores de motor y otras bibliotecas de ESP32.
📄 Licencia
Esta biblioteca se distribuye bajo la Licencia MIT. Consulte el archivo LICENSE para obtener más detalles.
---
¡Feliz codificación con la biblioteca ESP32 WebApps de DIYables! 🎉