---
title: "Vatio — panel domótico de consumo energético en vivo | Logic2b Lab"
description: "Demo técnica: dashboard energético de una vivienda con consumo por módulo en vivo, sala isométrica conectada, informe semanal y ventana de energía verde — sin backend, todo simulado en el navegador. Mira cómo lo construimos en Logic2b Lab."
lang: es-ES
source_url:
  html: https://logic2b.com/lab/vatio/
  md: https://logic2b.com/lab/vatio/index.md
---

Ruta: [Lab](https://logic2b.com/lab) › [Industria, energía e IoT](https://logic2b.com/sistemas/industria-energia) › Vatio

Demo interactiva · datos simulados

# Vatio Paneles de control · Domótica.

El panel energético de una vivienda: consumo por módulo en vivo, sala 3D conectada y ventana solar del día.

[Abrir la demo (se abre en una pestaña nueva)](https://logic2b.com/lab/vatio/live)

**Cosas que demuestra**

10

**Funciones de negocio**

2

**Sectores que lo piden**

3

Vatio · demo interactiva [Abrir aparte (se abre en una pestaña nueva)](https://logic2b.com/lab/vatio/live)

## Cómo se construyó Vatio

Demo de plataforma domótica para la gestión energética de viviendas: tres módulos de consumo (iluminación, nevera, climatización) con barras que avanzan en vivo y rangos de kWh que respiran, una sala isométrica en SVG con tiras LED y pantalla encendidas que se apaga al desconectar la oficina — arrastrando la energía disponible —, un informe semanal por días conectado al bloque de energía verde (elige un día y cambian el porcentaje y la ventana solar), la previsión solar de mañana y un feed de eventos del edificio (modo eco, excedente a batería, cargas pausadas). Todo corre en el navegador, sin backend.

Es una demo técnica, no una plantilla vendible tal cual: un adelanto de lo que podemos construir a medida cuando un proyecto necesita algo más que una web de catálogo. Si os interesa algo parecido para vuestro producto, hablamos.

### Qué demuestra

1. Tres módulos de consumo con barras finas que avanzan en vivo y rango de kWh con animación de bump
2. «Cambiar módulo» rota la tarjeta activa entre más electrodomésticos monitorizados (termo, inducción)
3. Sala isométrica dibujada en SVG a mano: tiras LED, pantalla y sensor con glow
4. Interruptor de la oficina que apaga la sala y anima la energía disponible (83 % → 41 %)
5. Informe semanal por días — el día elegido actualiza el bloque de energía verde
6. Selector de semana (esta, pasada, hace dos) con datos deterministas por semilla
7. Ventana de energía verde con línea de tiempo horaria y nodo de la hora actual latiendo
8. Reloj real en la cabecera y feed de eventos del edificio con toasts y badge en la campana
9. RNG determinista (mulberry32): mismos datos en cada carga
10. Todo simulado en cliente: sin backend, sin dependencias npm

Ficha del lab

**Tipo**

Paneles de control / Domótica

**Formato**

Demo interactiva, sin backend

Stack usado

- JavaScript
- SVG inline

Funciones de negocio

- [Industria, energía e IoT](https://logic2b.com/sistemas/industria-energia)
- [Visualización 3D y datos](https://logic2b.com/sistemas/visualizacion-3d)

Lo ofrecemos con webs de

- [Inmobiliarias](https://logic2b.com/diseno-web/inmobiliarias)
- [Campings y aire libre](https://logic2b.com/diseno-web/campings)
- [Energía y renovables](https://logic2b.com/diseno-web/energia)

Técnicas

- Energía
- Domótica
- Dashboard
- Datos

Demo con datos simulados: todo corre en el navegador.

## Labs relacionados. Misma función o mismos sectores.

[Ver todos](https://logic2b.com/lab)

### [Ronda](https://logic2b.com/lab/ronda)

Mantenimiento y activos

### [Irradia](https://logic2b.com/lab/irradia)

Energía

### [Huella](https://logic2b.com/lab/huella)

Industria y energía

---

Logic2b S.L. · Castellón (España) · [info@logic2b.com](mailto:info@logic2b.com) · [Contacto](https://logic2b.com/contacto/) · [Auditoría gratuita](https://logic2b.com/auditoria/) · [Índice para IA](https://logic2b.com/llms.txt)