Este proyecto es un ecosistema multi-aplicación que integra hardware y software para el control unificado de dispositivos IoT mediante una interfaz web moderna en React.
Desarrollado con una arquitectura híbrida, combina la eficiencia de los chips ESP8266 (para los dispositivos de actuación) con la potencia del ESP32 (para el Mando Físico), permitiendo gestionar múltiples aplicaciones independientes desde un mismo código base:
- Robot Car: Vehículo teledirigido con telemetría.
- Cocktail Machine: Dispensador automático de bebidas.
- Irrigation System: Control de riego inteligente.
El dashboard cuenta con un diseño cyberpunk de alta calidad con efectos de glassmorphism, neon glows y animaciones fluidas.
Control completo del robot con:
- Neural Telemetry: Visualización de giroscopio MPU en tiempo real
- RGB Module: Selector de color con preview y efectos de glow
- Kinetic Control: D-pad para control direccional con indicadores de estado
- Actuators: Panel de control de pines y outputs
Automatización de riego inteligente:
- Status Actual: Temperatura y hora ESP en tiempo real
- Programación: Gestión de tareas por días y horarios
- Configuración: Selector de días y hora para nuevas tareas
- Control Manual: Ajustes directos de bombas
Sistema automatizado de mezcla de bebidas:
- Grid de bebidas: Selección rápida con efectos visuales premium
- Configuración de bombas: Control PWM y calibración de tiempo
- Control manual: D-pad para activación individual de bombas
- React (v19+): Interfaz dinámica y reactiva.
- Vite: Sistema de construcción ultra rápido (Sustituyendo a CRA).
- TypeScript: Robustez y tipado estático con alias
@/. - Material UI (MUI): Sistema de diseño moderno.
- WebSocket: Comunicación en tiempo real de baja latencia.
- Clean Code Architecture: Separación en Models, Hooks y Components.
- ESP8266 Core for Arduino: Firmware optimizado para el chip ESP8266.
- AsyncWebServer: Servidor HTTP asíncrono para ESP8266.
- Node.js (Mock Server): Para desarrollo local sin necesidad del chip físico.
El repositorio está organizado de forma modular para facilitar el mantenimiento y escalabilidad:
/client: Aplicación frontend en React + Vite (Cyberpunk Dashboard)./remote-control: Firmware para el Mando Físico (ESP32) con soporte para joystick, giroscopio y telemetría directa./server/firmware: Código fuente modular para el Robot (ESP8266/ESP32)./apps/robot car: Lógica de control de motores y giroscopio interno./apps/drinks machine: Gestión de bombas, recetas y pantalla OLED./apps/irrigation: Programación horaria y tareas de riego./utils: Componentes compartidos y Hub de comunicación.
El firmware del ESP8266 (/server/firmware/serverEspReact) es modular por diseño. Puedes elegir qué "personalidad" quieres cargar en el robot editando un solo archivo.
Esto evita conflictos de librerías (ej: usar librerías de riego cuando solo quieres la máquina de bebidas) y ahorra memoria.
- Abre el archivo
server/firmware/serverEspReact/AppConfig.h. - Descomenta (
//) solo el módulo que quieras compilar.
Ejemplo para activar solo la Máquina de Bebidas:
#define ENABLE_DRINKS_MACHINE
// #define ENABLE_IRRIGATION_SYSTEM
// #define ENABLE_ROBOT_CAREste sistema no se conecta a un solo servidor, sino que orquesta una red de dispositivos distribuidos, combinando tecnologías según la naturaleza de los datos:
El Frontend de React utiliza una arquitectura híbrida:
-
WebSockets (Telemetría en Tiempo Real)
- ¿Por qué? Para datos de flujo continuo y crítico como el Giroscopio (Joystick/Robot).
- Funcionamiento: Se abre un "tubo" permanente. El ESP32 "empuja" miles de datos por segundo sin que el navegador tenga que pedirlo.
- Latencia: Mínima (<10ms), permitiendo ver gráficos fluidos que reaccionan al milisegundo.
- Implementación:
RemoteControlContextmantiene una conexión global para que el mando físico funcione en cualquier pantalla.
-
HTTP/REST (Comandos)
- ¿Por qué? Para acciones puntuales y confirmadas como "Encender Bomba", "Cambiar Color" o "Guardar Configuración".
- Funcionamiento: El navegador hace una petición puntual (GET/POST) y espera confirmación ("OK").
- Seguridad: Asegura que una orden (ej: regar) se ha recibido y procesado correctamente.
El sistema gestiona 4 IPs simultáneas, permitiendo que cada módulo tenga su propio cerebro pero opere bajo una misma interfaz unificada:
| Dispositivo | Variable .env |
Función Principal | Protocolo |
|---|---|---|---|
| Robot Car | REACT_APP_ROBOT_IP |
Movimiento, Motores, Luces | HTTP + WebSocket |
| Mando Remoto | REACT_APP_REMOTE_IP |
Joystick Físico, Giroscopio externo | WebSocket Global |
| Máquina Bebidas | REACT_APP_DRINKS_IP |
Bombas peristálticas, Pantalla OLED | HTTP + WebSocket |
| Sistema Riego | REACT_APP_IRRIGATION_IP |
Gestión hídrica, Calendario | HTTP |
Además del WiFi, el Mando Remoto habla directamente con el Robot usando ESP-NOW (protocolo de radio directo de Espressif). Esto permite controlar el robot en exteriores sin necesidad de Router ni WiFi, mientras que si hay WiFi disponible, ambos dispositivos reportan sus datos a la web simultáneamente.
He creado scripts para facilitar el inicio del proyecto (instala dependencias y lanza los servidores):
- Mac/Linux:
./run-mac.sh
- Windows:
Doble clic en
run-windows.batorun-windows.batdesde la terminal.
-
Modo Simulación (Mock):
- Si no tienes el robot físico contigo, puedes activar el modo simulación para ver la UI funcionando con datos falsos.
- En el archivo
client/.env, cambiaVITE_MOCK_SERVER=true. - Esto también se activa automáticamente si despliegas en Vercel (HTTPS) para evitar errores de conexión segurida.
-
Abre el archivo en
/server/firmware(Robot) o/remote-control/firmware(Mando).
Nota para ESP32: Si usas una placa ESP32, asegúrate de tener esta URL en Arduino IDE -> Preferences -> Additional Board Manager URLs:
https://espressif.github.io/arduino-esp32/package_esp32_index.json
⚠️ Solución de problemas: Si la instalación de la versión más reciente falla (errorDEADLINE_EXCEEDEDo similar), intenta instalar la versión 2.0.17 desde el Gestor de Tarjetas.
- Abre el archivo en
/server/firmware(Robot) o/remote-control/firmware(Mando). - Configuración de Secretos:
- Este proyecto requiere dos archivos
secrets.h(uno para el mando, otro para el robot). - En cada carpeta de firmware (
server/firmware/serverEspReact/yremote-control/firmware/remote-control/), encontrarás unsecrets_example.h. - Renómbralos a
secrets.hy rellena tus credenciales WiFi y MACs.
- Este proyecto requiere dos archivos
- Carga el sketch a tus dispositivos.
Si el frontend no conecta con el ESP32 (error ws: connection failed o No route to host) y usas mDNS (remote-control.local), verifica esto:
- Navegador y Mixed Content (Error comunes en Vercel/HTTPS):
- Problema: Si despliegas esta web en Vercel (
https://...), el navegador bloqueará la conexión al ESP32 (ws://...) por seguridad ("Mixed Content"). Verás un mensaje de error rojo en la aplicación. - Solución Recomendada: Ejecuta el cliente localmente (
npm run dev) en tu ordenador. Desdehttp://localhost, la conexión al robot funciona perfectamente. - Solución Alternativa (Difícil): Configurar Chrome para permitir contenido inseguro (
chrome://flags/#block-insecure-private-network-requests), aunque esto no siempre funciona para WebSockets desde dominios públicos HTTPS.
- Problema: Si despliegas esta web en Vercel (
- mDNS en Windows/Android:
.localfunciona nativamente en Apple (Mac/iPhone). En Windows necesitas tener instalado Bonjour (viene con iTunes) o usar la IP directa en lugar deremote-control.local. - Firewall: A veces el firewall del ordenador bloquea las conexiones entrantes/salientes al puerto 80 del ESP32.
- Control inalámbrico de largo alcance (ESP-NOW)
- Telemetría directa desde el mando a la Web (WebSocket
/ws/remote) - Visualización 3D del giroscopio del mando en tiempo real
- Control híbrido Web/Físico sin interrupciones
- Control de motores de alta frecuencia
- Telemetría interna de inclinación (Pitch/Roll)
- Efectos de iluminación RGB sincronizados
- Comunicación directa con Mando Remoto (ESP-NOW)
- Interfaz física en pantalla OLED (Menú autónomo)
- Selección de bebidas desde el mando (Joystick Up/Down/Accept)
- API de control remoto y visualización en dashboard
- Control manual de bombas de agua (ON/OFF)
- Programación de tareas de riego por días y horas
- Telemetría de humedad y temperatura DHT22 simulada/real
- Sincronización horaria automática (NTP)