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 <noreply@anthropic.com>
This commit is contained in:
189
docs/plans/2026-02-15-tv-dashboard-design.md
Normal file
189
docs/plans/2026-02-15-tv-dashboard-design.md
Normal file
@@ -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.
|
||||||
Reference in New Issue
Block a user