Cómo crear paneles de control en Home Assistant

Un panel de control de Home Assistant es una interfaz compuesta por vistas y tarjetas para consultar y controlar nuestra casa.

El siguiente paso en cualquier proyecto de ingeniería de sistemas es construir la capa de presentación. Necesitamos una interfaz gráfica de usuario (GUI) que nos permita visualizar los datos de los sensores y accionar los relés sin tener que interactuar con la consola de administración.

Durante años esta capa se conoció como Lovelace; en la documentación y la interfaz actuales se habla simplemente de Dashboards. Vamos a ver cómo organizar paneles útiles sin convertirlos en un almacén de sensores.

Cómo se organiza un dashboard

A diferencia de los sistemas domóticos antiguos que generaban páginas web estáticas, la interfaz de Home Assistant es una aplicación web de una sola página (SPA) altamente reactiva, construida sobre componentes web (basados históricamente en la librería LitElement).

Cuando una entidad cambia de estado, la interfaz recibe la actualización mediante WebSockets sin recargar la página.

Para organizar esta información visual, Home Assistant utiliza tres niveles principales:

1. Dashboards (Paneles): Es el nivel más alto. Puedes tener varios Dashboards completamente independientes. Por ejemplo, uno general para la familia, uno técnico con gráficas de rendimiento del servidor solo para el administrador, y un Dashboard simplificado optimizado para una tablet anclada en la pared del salón.
2. Views (Vistas): Dentro de cada Dashboard, organizamos la información en vistas. Pueden separar la casa por estancias o categorías y utilizar diseños de secciones, panel, barra lateral o mampostería.
3. Cards (Tarjetas): Es el componente visual fundamental. Una tarjeta es un widget que se encarga de representar el estado de una o varias Entidades y permitir la interacción.

El problema del dashboard autogenerado

Por defecto, cuando instalamos Home Assistant por primera vez, el sistema genera un Dashboard de tipo “Automático”.

El comportamiento de este panel es muy simple: cada vez que Home Assistant descubre un nuevo dispositivo (una bombilla, un sensor de Tuya, o un router Zigbee), crea una tarjeta por defecto y la lanza al Dashboard.

El primer paso para crear nuestra propia interfaz es Tomar el control del panel. Al hacer clic en el menú superior derecho y seleccionar “Editar panel de control”, Home Assistant nos advertirá de que dejará de añadir elementos automáticamente. A partir de ese momento, nosotros somos los responsables absolutos del código de la interfaz.

Diseñar para quien lo va a usar

Un Dashboard técnico para nosotros no debería ser igual que un Dashboard familiar. El primero puede tener gráficas de RSSI, consumo, temperatura del servidor, estado del broker MQTT y cien entidades de diagnóstico. El segundo debería tener cuatro botones claros y poca posibilidad de romper nada.

Para una tablet en la pared, normalmente queremos vistas por estancia y controles grandes. Para el móvil, queremos accesos rápidos: luces principales, alarma, clima y presencia. Para administración, queremos todo lo demás, aunque quede bastante menos vistoso.

YAML o interfaz gráfica

Home Assistant proporciona un editor visual con el que podemos añadir y ordenar elementos. Los paneles creados desde la interfaz se guardan en el almacenamiento interno de Home Assistant, no como un archivo YAML que debamos editar.

Cada tarjeta tiene una configuración estructurada que podemos ver y editar como YAML desde el editor de código. También podemos crear dashboards completos en modo YAML, pero es una opción separada y explícita, no el funcionamiento interno de todos los paneles.

Veamos la anatomía de una tarjeta básica (tipo button) escrita en YAML:

type: button
entity: light.luz_techo_salon
name: Lámpara Principal
icon: mdi:ceiling-light
show_state: true

• type: Define el componente de renderizado que usará el frontend.
• entity: Es el entity_id exacto de nuestra base de datos (lo que vimos en el artículo anterior).
• name e icon: Sobrescriben el nombre y el icono (usando la librería Material Design Icons - mdi) por defecto de la entidad.

Cómo organizar el diseño: pilas, cuadrículas y secciones

Uno de los mayores retos al diseñar un Dashboard es el posicionamiento de los elementos. Home Assistant adapta las tarjetas al ancho de la pantalla y las vistas modernas de tipo Sections permiten organizarlas en secciones y cuadrículas desde el editor.

También podemos agrupar tarjetas mediante contenedores que no muestran entidades directamente:

1. Pila Horizontal (horizontal-stack): Obliga a las tarjetas hijas a situarse una al lado de la otra, dividiendo el ancho disponible equitativamente.
2. Pila Vertical (vertical-stack): Agrupa varias tarjetas en un solo bloque indivisible de arriba a abajo.
3. Cuadrícula (grid): Permite definir un número fijo de columnas y obliga a las tarjetas a encajar en esa matriz.

Ejemplo de diseño compuesto

Imaginemos que queremos crear un bloque para el Clima del salón que contenga: un termostato principal y, justo debajo, dos botones alineados horizontalmente para encender y apagar el aire acondicionado.

El código subyacente que generaríamos mediante la interfaz gráfica sería una anidación de Stacks:

type: vertical-stack
cards:
  - type: thermostat
    entity: climate.termostato_salon
  - type: horizontal-stack
    cards:
      - type: button
        entity: switch.ac_encendido
        name: Encender AC
      - type: button
        entity: switch.ac_apagado
        name: Apagar AC

Tarjetas de la comunidad: Mushroom

Las tarjetas nativas de Home Assistant son funcionales, pero a nivel de diseño puro (UI/UX) se sienten un poco toscas y anticuadas.

Una vez que domines los conceptos de Stacks y Vistas, el paso natural de cualquier usuario avanzado es instalar colecciones de tarjetas desarrolladas por la comunidad a través de HACS (que ya instalamos en el artículo anterior).

Una de las colecciones más populares para crear interfaces compactas y cómodas en el móvil es Mushroom Cards. Mushroom reemplaza los botones por defecto por tarjetas redondeadas, con controles deslizantes (sliders) integrados para el brillo de las luces o la temperatura, y un control exquisito sobre los colores de los iconos basados en el estado de la entidad.