Configuración de la interfaz gráfica (‘Lovelace’) de Home Assistant

Configuramos la interfaz gráfica de Home Assistant conocida como Lovelace, tanto desde la propia UI como haciendo uso de código.

Lovelace UI es el nombre que recibe la interfaz gráfica de Home Assistant. Vamos a ver como configurar la temática, los iconos, los elementos que se muestran en la interfaz, etc. desde la propia interfaz y mediante código YAML.

Configuración desde la Interfaz

Vamos a ver en detalle todos los aspectos visuales que podemos configurar desde la propia interfaz. La interfaz de Lovelace nos permite mostrar nuestros sensores, botones, estados, etc. organizados en paneles y presentados mediante tarjetas.

Antes que nada, vamos a listar todas las tarjetas de las que disponemos de forma nativa:

• Panel de alarma
• Botón
• Condición
• Entidades
• Entidad
• Filtro de entidades
• Medida
• Vistazo rápido
• Gráfico histórico
• Pila horizontal
• Humidificador
• Luz
• Mapa
• Markdown
• Control multimedia
• Imagen
• Elementos en imagen
• Entidad en imagen
• Medidas en imagen
• Estado de planta
• Sensor
• Lista de la compra
• Termostato
• Pila vertical
• Pronóstico del tiempo
• Página web

Podemos encontrar los detalles de cada una en ESTA página.

Desde Lovelace vamos a la esquina superior derecha donde se encuentran los tres puntos y pulsamos en Configurar la interfaz de usuario. La primera vez que pulsemos aquí recibiremos un aviso de Home Assitant (que hasta ahora habrá estado añadiendo nuestras entidades a la interfaz de forma automática) advirtiendonos de que si queremos modificar la interfaz las nuevas entidades no se añadiran automaticamente; aceptamos y continuamos.

Podemos crear nuevas tarjetas (ej: Multimedia, Seguridad, Luces, etc.) para separar nuestras entidades. Al pulsar en el símbolo de añadir nos sale lo siguiente:

Podemos configurar el nombre de la tarjeta, darle un icono, URL y temas personalizados que solo aplicaran a esa tarjeta. Aquí ya vamos a ver la primera forma (y la más simple de mostrar una entidad: mediante ‘insignias’).

Las insignias son vistazos rápidos de entidades que aparecen arriba del todo en cada tarjeta. Muestran estados pero no permiten activar/desactivar ni interactuar con entidades.

También podemos modificar la visibilidad de las tarjetas. Esto nos vendrá bien cuando queramos permitir el acceso a otras personas de nuestra casa pero no como administrador sino solo a partes concretas.

Ahora que ya tenemos una o más tarjetas vamos a añadir las entidades. Pulsamos sobre el simbolo grande del ‘más’ ubicado abajo a la derecha y se despliega un menú de selección en el que aparecen:

Cada ‘card’ tiene utilidades distintas, algunas estan pensadas para elementos concretos (tarjeta especial para controlar un termostato, para ver un mapa con ubicaciones en el, para activar/desactivar botones, etc.) y por tanto cada una cuenta con elementos configurables (obligatorios y opcionales). Vamos a ver, a modo de ejemplo, una tarjeta de tipo entidad en la que quiero mostrar el control de un enchufe inteligente:

Como vemos, la forma de añadir entidades es casi inmediata, siendo la única ‘dificultad’ elegir que tipo de ‘card’ usar en casa caso. Si pulsamos en Mostrar Editor de Código veremos que, aunque estamos usando la interfaz, podemos configurar la tarjeta mediante YAML desde aquí:

¿Que nos queda antes de hacer todo esto mediante código? –> Tarjetas/’cards’ personalizadas. Por si no fueran suficientes, la comunidad de HASS desarrolla tarjetas propias para mostrar las entidades de forma personalizada. Ya vimos, en el post anterior, que desde HACS podemos instalar algunos de esos recursos ‘frontend’. En cualquier caso, tanto si los instalamos desde HACS como si los descargamos desde sus repositorios (en Github) hay algunos pasos que son similares.

Si descargamos recursos ‘frontend’ desde HACS

Vamos a HACS > Frontend (o themes) > Buscamos la personalizacion que queramos y simplemente pulsamos en instalar. Aquí hay que hacer una aclaración porque en el apartado de Frontend de HACS no solo hay tarjetas sino que también hay temas.

Los temas se instalan igual pero se ‘configuran’ desde otro lado y de forma mucho más inmediata. Cuando instalemos un tema desde HACS pulsamos en la esquina inferior izquierda donde se muestra nuestro nombre de usuario y seleccionamos el tema desde su correspondiente desplegable.

Las tarjetas personalizadas sin embargo, una vez hemos pulsado en instalar deberemos reiniciar HASS desde configuración, los recursos necesarios se instalaran en una carpeta llamada www y pueden añadirse desde Lovelace de forma inmediata (algunas aparecen en el desplegable que hemos visto al pulsar el botón del ‘más’) haciendo lo siguiente:

Pulsamos el botón ‘más’ de añadir y vamos abajo del todo donde podemos añadir una tarjeta personalizada (Manual):

Si descargamos recursos ‘frontend’ desde Github

Si encontramos tarjetas personalizadas subidas a un repositorio y queremos instalarlas pero no están en HACS no hay problema. Tenemos, eso si, que tener creada la carpeta www dentro de nuestra carpeta config.

Las tarjetas más simples solo están compuestas de un fichero de extensión .js que es el que descargaremos desde el correspondiente repositorio y guardaremos en la carpeta www. Otras tarjetas pueden traer iconos/detalles que requieren de añadir otro directorio más dentro de www. Una vez descargado el fichero .js en www todavía nos queda un paso antes de poder añadir la tarjeta a Lovelace.

Vamos a Configuración > Paneles de Control Lovelace > Recursos y pulsamos el botón de añadir:

En URL tenemos que escribir la ruta al fichero .js que hemos guardado. Ej: www/tarjeta_personalizada.js y guardamos. Es posible que sea necesario recargar la interfaz de Lovelace o incluso reiniciar HASS antes de que podamos añadir la tarjeta a Lovelace.

Una vez hecho esto, para añadirla es similar a lo que hemos visto antes. Algunos recursos aparecen en el desplegable de tarjetas disponibles y otros requieren añadir un recurso manualmente y escribir sus detalles mendiante YAML.

Al igual que antes, también hay temas disponibles para instalar fuera de HACS. Simplemente hay que ubicarlos en una carpeta distinta. En lugar de www, descargamos el tema personalizado desde su repositorio y lo ubicamos en una carpeta llamada themes que debe estar (si no está la creamos) en config.

Configuración mediante código YAML

Desde configuration.yaml debemos añadir una línea para indicar que vamos a modificar la interfaz mediante código:

lovelace:
    mode: yaml

Esto indica a Home Assistant que la configuración de la interfaz estará descrita en el fichero lovelace.yaml. En este fichero (lo tenemos que crear si no existiera previamente), escribimos:

# Nombre del panel Lovelace
title: Home
views:

# Creamos distintas pestañas de Lovelace usando "path". A cada pestaña podemos darle un nombre, tema personalizado, icono, etc.
- path: general
    title: General
    theme: google_dark_theme
    # Podemos añadir insignias (badges) y paneles/tarjetas (cards)
    badges:
      -  person.alejandro
    cards:
      # Para cada "card" añadimos su tipo y los parámetros que requiran según su documentación
      - type: map
        dark_mode: true
        state_color: true
        default_zoom: 12
        entities:
          - zone.home          
      - type: weather-forecast
        entity: weather.casa
      
# Podemos crear tantas pestañas como queramos para un mismo panel de Lovelace    
- path: tiempo
    title: Tiempo
    theme: google_dark_theme
    badges:
    cards:
      - type: glance
        title: OpenWeatherMap
        state_color: true
        columns: 2
        entities:
          - entity: sensor.owm_condition
            name: Condición
          - entity: sensor.owm_temperature
            name: Temperatura
          - entity: sensor.owm_wind_speed
            name: Velocidad viento
            icon: mdi:weather-windy
          - entity: sensor.owm_cloud_coverage
            name: Cobertura nubes
            icon: mdi:cloud
          - entity: sensor.owm_humidity
            name: Humedad
            icon: mdi:water-percent
          - entity: sensor.owm_rain
            name: Lluvia

La configuración (parámetros necesarios) para cada tarjeta que queramos añadir (hemos visto las que están disponibles antes), está disponible AQUÍ. Si hemos descargado recursos (tarjetas personalizadas/de terceros) para Lovelace, la instalación es similar a lo visto previamente; unicamente tenemos que añadir vía yaml el nombre del tema personalizado.

# Ejemplo:
- path: panel
    title: Panel genérico
    theme: tema_personalizado
    badges:
    cards:
      - type: nombre_de_la_tarjeta_descargada
        title: Tarjeta Lovelace de Terceros
        # Configuración de dicha tarjeta según la documentación
        # del creador de la misma.....

🍺 Buy me a beer!