From b9da8aadac2469ec3a72d204a3504d1e54fd1999 Mon Sep 17 00:00:00 2001 From: "I. Alcaraz Salazar" Date: Sun, 15 Feb 2026 01:49:48 +0000 Subject: [PATCH] Add TV dashboard design document Define architecture, views, and stack for office TV dashboard with network topology, Odoo tasks/calendar, and service credentials. Co-Authored-By: Claude Opus 4.6 --- docs/plans/2026-02-15-tv-dashboard-design.md | 189 +++++++++++++++++++ 1 file changed, 189 insertions(+) create mode 100644 docs/plans/2026-02-15-tv-dashboard-design.md diff --git a/docs/plans/2026-02-15-tv-dashboard-design.md b/docs/plans/2026-02-15-tv-dashboard-design.md new file mode 100644 index 0000000..5669555 --- /dev/null +++ b/docs/plans/2026-02-15-tv-dashboard-design.md @@ -0,0 +1,189 @@ +# TV Dashboard para Oficina - Documento de Diseno + +**Fecha**: 2026-02-15 +**Dispositivo objetivo**: TCL 55" 4K (3840x2160) +**Modo de uso**: Kiosko 24/7, rotacion automatica de vistas + +## Resumen + +Dashboard web para Smart TV de oficina que muestra topologia de red con credenciales, tareas de proyectos desde Odoo 19 y calendario de actividades desde Odoo Calendar. Tres vistas a pantalla completa rotan automaticamente. + +## Arquitectura + +### Stack + +- **Frontend**: React 18 + TypeScript + Vite + Tailwind CSS + D3.js + Framer Motion +- **Backend**: Python 3.11+ + FastAPI + python-nmap + PyYAML + websockets +- **Odoo**: Version 19 Community, servidor local, conexion via JSON-RPC +- **Despliegue**: Docker Compose (backend + frontend/Nginx) + +### Diagrama + +``` +Smart TV (Chromium 4K) + │ HTTP / WebSocket +FastAPI Backend + ├── Odoo Module (JSON-RPC) ──► Odoo 19 Server + ├── Network Scanner (nmap) ──► Red Local + └── Config Manager (YAML) ──► config/services.yaml +``` + +### Comunicacion + +- REST API para carga inicial de datos +- WebSocket para actualizaciones en tiempo real +- Intervalos de refresh: Odoo 5 min, red 10 min, ping servicios 1 min + +## Vistas rotativas + +Tres vistas a pantalla completa, cada una visible durante 30 segundos (configurable). Transicion con fade suave. + +### Vista 1: Topologia de Red + +Grafo interactivo (D3.js force-directed) con nodos representando dispositivos de red. + +**Cada nodo muestra:** +- Nombre del dispositivo +- Direccion IP +- Usuario +- Contrasena (oculta por defecto `****`, se revela con click) +- URL publica (configurada manualmente) +- Indicador de estado (online/offline via ping) + +**Fuentes de datos:** +- Auto-descubrimiento via nmap (detecta dispositivos nuevos) +- Configuracion manual en `config/services.yaml` (define nombres, credenciales, URLs, conexiones) +- Modo hibrido: dispositivos descubiertos automaticamente pueden editarse manualmente + +**Barra de estado inferior:** Total nodos online, nodos offline, ultimo refresh. + +### Vista 2: Tareas por Proyecto (Odoo) + +Vista Kanban a pantalla completa con datos del modulo Project de Odoo 19. + +**Estructura:** +- Filas: un proyecto por fila +- Columnas: etapas del proyecto (Nuevo, En Progreso, Hecho, etc.) +- Cada tarjeta muestra: titulo, responsable asignado, prioridad (color), fecha limite + +**Datos desde Odoo:** +- `project.project` para proyectos activos +- `project.task` para tareas con etapa, asignado, prioridad, deadline + +### Vista 3: Calendario (Odoo) + +Agenda vertical con los eventos del dia actual, manana, y resumen de la semana. + +**Estructura:** +- Seccion "Hoy": lista cronologica de eventos con hora, titulo, ubicacion +- Seccion "Manana": misma estructura +- Seccion "Esta semana": lista resumida de eventos restantes + +**Datos desde Odoo:** +- `calendar.event` filtrado por rango de fechas + +## Configuracion + +### services.yaml (topologia y credenciales) + +```yaml +nodes: + - name: "Router Principal" + ip: "192.168.1.1" + username: "admin" + password: "router-password" + icon: "router" + connections: [] + + - name: "Servidor Odoo" + ip: "192.168.1.10" + username: "root" + password: "server-password" + public_url: "https://odoo.miempresa.com" + icon: "server" + connections: ["Router Principal"] + +network_scan: + enabled: true + subnet: "192.168.1.0/24" + interval_minutes: 10 +``` + +### settings.yaml (configuracion general) + +```yaml +display: + resolution: "3840x2160" + rotation_interval_seconds: 30 + transition: "fade" + theme: "dark" + +odoo: + url: "http://192.168.1.10:8069" + database: "mi_base" + username: "admin" + password: "odoo-password" + +refresh: + odoo_minutes: 5 + network_minutes: 10 + ping_seconds: 60 +``` + +## Estructura del proyecto + +``` +Dashboard/ +├── backend/ +│ ├── main.py +│ ├── requirements.txt +│ ├── config/ +│ │ ├── services.yaml +│ │ └── settings.yaml +│ ├── modules/ +│ │ ├── odoo_client.py +│ │ ├── network_scanner.py +│ │ └── config_manager.py +│ └── routers/ +│ ├── calendar.py +│ ├── tasks.py +│ ├── network.py +│ └── services.py +├── frontend/ +│ ├── package.json +│ ├── vite.config.ts +│ ├── tailwind.config.js +│ ├── src/ +│ │ ├── App.tsx +│ │ ├── main.tsx +│ │ ├── components/ +│ │ │ ├── Layout/ +│ │ │ │ ├── Header.tsx +│ │ │ │ └── ViewRotator.tsx +│ │ │ ├── Topology/ +│ │ │ │ ├── NetworkGraph.tsx +│ │ │ │ └── NodeCard.tsx +│ │ │ ├── Tasks/ +│ │ │ │ ├── KanbanBoard.tsx +│ │ │ │ └── TaskCard.tsx +│ │ │ └── Calendar/ +│ │ │ ├── CalendarView.tsx +│ │ │ └── EventCard.tsx +│ │ ├── hooks/ +│ │ │ ├── useOdooData.ts +│ │ │ ├── useWebSocket.ts +│ │ │ └── useRotation.ts +│ │ └── types/ +│ │ └── index.ts +│ └── index.html +└── docker-compose.yaml +``` + +## Decisiones de diseno + +1. **4K nativo**: Tipografia base 24px, elementos grandes legibles desde distancia. Sin escalado, usa toda la resolucion. +2. **Tema oscuro**: Reduce fatiga visual en pantalla 24/7 y ahorra energia en pantallas OLED/QLED. +3. **Contrasenas ocultas**: Seguridad basica para ambiente de oficina. Click para revelar. +4. **Hibrido red**: Nmap descubre dispositivos nuevos automaticamente, pero el usuario define nombres, credenciales y conexiones en YAML. +5. **WebSocket**: Actualizaciones push evitan polling excesivo y permiten notificaciones inmediatas de nodos offline. +6. **Docker Compose**: Despliegue reproducible en cualquier servidor de la red local.