Personaliza tu Home Assistant al Máximo con Lovelace

Vamos a personalizar aún más Home Assistant con la ayuda de Lovelace. Esto nos permite integrar fácilmente los dispositivos que ya tenemos instalados y configurados en nuestro Home Assistant, sin necesidad de reiniciar continuamente el servidor.

Si por algún motivo, aún no tienes instalado Home-Assistant, puedes hacerlo a través de este enlace donde se nos explica paso por paso como hacer dicha instalación.

Lo primero que debemos hacer, es asegurarnos de tener una versión compatible de Home-Assistant, para ello, debemos tener una versión igual o superior a la 0.72, para poder ver que versión tenemos instalada, podéis verlo de la siguiente forma:

En la parte superior izquierda, tenemos 3 lineas (-) horizontales, pulsamos sobre ellas, y, después, en la parte inferior, pulsamos el último icono (una i dentro de un circulo) y ya se nos mostrará una pantalla con la versión de HA que tenemos (en la imagen podéis ver marcado en rojo donde tenemos que pulsar).

Ahora que estamos seguros de que tenemos una versión compatible, empezamos con la configuración.

En el directorio donde tenemos el configuration.yaml de nuestra instalación de Home-Assistant, creamos un archivo en blanco llamado ui-lovelace.yaml

De esta forma ya tenemos el lovelace activo y operativo, antes de reiniciar, vamos a crear un directorio llamado "www" sobre el mismo directorio en el que se encuentra nuestro archivo de configuración configuration.yaml, por si en algún momento, queremos, por ejemplo, añadir imágenes a nuestro HA.

Ahora abrimos el archivo ui-lovelace.yaml con cualquier editor de texto (personalmente uso Notepad++, pero hay muchos que podemos utilizar).

Ahora pondremos lo siguiente:

A continuación explicamos lo que hace cada cosa:

title: Nombre que le daremos a nuestra página de Home-Assistant, es el texto que se ve en la parte superior izquierda

resources: el contenido que queremos añadir, aquí podemos poner tanto archivos javascript, como también CSS, por el momento no lo usaremos.

views: aquí dentro, es donde añadiremos lo que tenemos integrado en HA

title: este title, es el que se encuentra dentro de views, es el nombre que le daremos a la pestaña en la que nos encontremos (lovelace nombrará estas pestañas de forma numérica)

icon: el icono que queramos utilizar, en el ejemplo que he puesto, se trata del típico icono de casa, para hacer referencia a que se trata de la opción principal

cards: son las "cartas" o "tarjetas" que vamos a mostrar, aquí es donde dependemos de lo que tengamos instalado y configurado en HA, podemos ver todo lo que tenemos dentro del apartado "< >" (dev-state)

Una vez tengamos claro que elementos son los que queremos añadir, tenemos que especificar el tipo de "tarjeta" que vamos a utilizar, las opciones que tenemos son las siguientes:

• alarm-panel: Panel para la activación/desactivación de la alarma
• conditional: muestra otra tarjeta basada en estados de otra entidad
• entities: por así decirlo, el modo "por defecto", muestra la práctica totalidad de los elementos que tengamos.
• entity-button: convierte un elemento en un botón para realizar tareas
• entity-filter: nos permite filtrar entidades con un estado en concreto, por ejemplo, que muestre sólo aquellos dispositivos que se encuentran encendidos
• gauge: la tarjeta que debemos utilizar para mostrar la información de los diferentes sensores
• glance: permite agrupar fácilmente diferentes entidades de forma compacta
• history-graph: muestra una gráfica con el histórico de la/s entidad/es que se especifiquen
• horizontal-stack: permite mantener varias entidades definidas horizontalmente
• vertical-stack: lo mismo que el anterior, pero en este caso, verticalmente
• iframe: nos permite añadir datos/imágenes de otras páginas webs
• map: nos muestra entidades en un mapa, ideal si tenemos algún sistema de localización por GPS como trakkar o similares
• markdown: nos permite mostrar texto remarcado con markdown
• media-control: para añadir los dispositivos multimedia que podamos tener (chromecast, google home mini, amazon echo, ...)
• picture: añadir una foto, según las opciones que indiquemos, podremos enviar a un apartado concreto de nuestro HA o bien ejecutar algún servicio
• picture-elements: añadir diferentes elementos sobre una imagen fija, ideal si tenemos un plano de nuestra casa
• picture-entity: muestra una entidad como si fuera una imagen, esta opción también nos permitiría tener una imagen por cada estado que tenga la entidad que hemos definido (lo más habitual es una imagen para relacionarla con el evento "On" y otra para el evento "Off")
• picture-glance: agrupa diferentes entidades dentro de una misma imágen, creando pequeños iconos para poder, por ejemplo, encender o apagar diferentes luces
• plant-status: pensada para los botánicos
• sensor: muestra una gráfica a partir de un sensor
• thermostat: nos permite controlar el termostato
• weather-forecast: nos muestra de forma visual el tiempo para los próximos días

Como podéis ver, son muchas las opciones que tenemos a nuestra disposición, ahora, vamos a configurar unos cuantos enchufes, una xiaomi yeelight, y alguna que otra cosa más.

En mi caso, tengo configurado en la pantalla principal un apartado donde quiero que se muestre sólo lo que tengo activado, esto lo he hecho con entity-filter de la siguiente forma:

Adjunto una captura de pantalla para que se pueda tener en cuenta como debe quedar exactamente en nuestro archivo .yaml.

Como podéis observar, justo después de especificar entity-filter como tipo de card a utilizar, definimos el array de entidades que se mostrarán en ella, especificando para cada una de ellas un icono que identifique fácilmente que está conectado a cada enchufe, también hemos puesto una luz (concretamente una Xiaomi Yeelight).

Tras la definición de los dispositivos que queremos que se tengan en cuenta, especificamos el filtro que queremos aplicar para que se muestren, para ello, definimos únicamente el state_filter con el valor "on", para que sólo tenga en cuenta todos aquellos dispositivos que se encuentren encendidos

El resultado que nos da esa configuración, es el siguiente (con el enchufe del pc y la bombilla encendidos):

Está muy bien, si, pero así sólo puedo apagar lo que previamente tengo encendido ¿Cómo puedo hacer para mostrarlo siempre?, es lo que muchos podéis decir, y es muy sencillo, en este caso, utilizaremos el tipo "glance", el código es el siguiente:

Al igual que antes, así es como debería quedar en vuestra configuración:

El - title: Dormitorio hace referencia a una nueva pestaña, donde únicamente muestro lo que tengo en el dormitorio, con show_state: false lo que hacemos, es evitar que se muestre el texto "Activado/Desactivado" debajo de cada elemento, quedando únicamente el nombre encima de su icono, aquí podéis ver como es el resultado:

Para ocultar el nombre del dispositivo, deberéis utilizar show_name: false 

Por último, vamos a explicar otra opción más, que puede resultar muy interesante, vamos a poner una imagen (realmente 2) para cambiar el estado de un switch.

En mi caso, lo he realizado sobre la impresora 3d que tengo (una Anet A8), a la que tengo conectado un TP-Link HS110, que me permite encenderla y apagarla cuando quiero (el control de la impresora lo tengo con Octoprint, pero de eso hablaremos en otra ocasión), además de poder controlar el consumo.

El código utilizado es el siguiente:

Al igual que en los ejemplos anteriores, en nuestro código debería quedar así:

Aquí "jugamos" con dos tipos diferentes de tarjetas, el tipo "sensor", que muestra una gráfica, y con "picture-entity", que nos permite definir una foto como una entidad, como podéis comprobar por la configuración, el sensor no tiene ciencia alguna (si tiene más opciones disponibles, pero con las que trae por defecto es más que suficiente para mi), mientras que el "picture-entity" tiene algo más, los campos más importantes son, "entity", aquí definimos la entidad que queremos controlar (en mi caso el switch del TP-Link para encender/apagar la impresora), para después, especificar con "state_image" las dos fotos que vamos a utilizar, una para cuando esté encendido (on) y otra para cuando esté apagado (off).

La ruta absoluta que introducimos es /local/nombre-de-nuestra-imagen esta ruta, hace referencia al directorio www que hemos creado al inicio de esta explicación en la raiz de nuestra configuración de Home Assistant

Ahí, es donde guardaremos las imagenes/fotos que queramos utilizar, en mi caso, he usado una foto que le había hecho con la tira led que le he puesto para que se encienda cuando se enciende la impresora.

Como foto para cuando esté apagada, he usado la misma foto, pero convirtiéndola a blanco y negro, aquí podéis ver el resultado, además de no olvidarnos que podemos hacer la integración conel siguiente proyecto de reproducción de radio on-line en Home-Assistant.

Por último, si queremos que siempre que accedamos a nuestro HA se nos muestre la integración de lovelace, tendremos que pulsar en "Set lovelace as default page on this device" dentro del apartado información, aquí remarco en rojo donde debemos pulsar para llegar a dicho apartado:

Como podéis comprobar, es algo realmente interesante, y sencillo de poder realizar, si queréis más información, u otras configuraciones, podéis obtener más información a través de la propia página de Home-Assistant.