Hoy continuamos con el tutorial y vamos integrar el plano de nuestra casa en Home Assistant. La integración, se hará mediante la utilización de “cards” de la interfaz Lovelace, y utilizaremos iconos para interactuar con los dispositivos .
El tutorial esta enfocado a los que utilizan Home Assistant con la interfaz Lovelace en modo yaml.
Este modo nos facilita la utilización de herramientas de programación externas, la utilización de comentarios, organización de bloques de código y otros beneficios, que no vamos a comentar aquí.
Pero es muy fácil trasladarlo al modo interfaz de usuario, o incluso a quienes utilizan hass.io ya que dispondrán de la misma interfaz de usuario.
A modo de introducción, os comento que esta parte servirá para integrar cualquier plano que tengamos disponible de nuestra casa.
El único requerimiento será que esté en formato imagen .jpeg o .png.
En las próximas partes del tutorial, si que nos centraremos exclusivamente en la integración de planos realizados con la aplicación Sweet Home 3D.
Mejoraremos de forma exponencial los gráficos de nuestros diseños mediante la implementación de iluminación e imágenes que simularán “animación” en nuestros diseños.
Si bien esta parte se podría obviar, la considero necesaria para realizar un aprendizaje gradual.
Servirá para iniciarnos en la interfaz Lovelace, ver diferentes elementos de la card picture-elements y comprender matizaciones básicas que posteriormente se harán algo más complejas.
Para obtener nuestro diseño que integraremos en HA, podrá variar:
Recomiendo que la resolución de la imagen obtenida sea al menos de 1024x720 o similar.
Aunque resoluciones menores serán óptimas para visualizar la imagen en las columnas preestablecidas por la interfaz Lovelace de HA.
Explicaré en el último bloque como poder visualizar estas imágenes a pantalla completa en todos los dispositivos.
Para obtener nuestra imagen de la aplicación Sweet Home 3D, dispondremos nuestro diseño en 3D (panel 4) en la vista que deseemos trasladar a nuestro HA, es decir la giraremos en un sentido u otro, y ampliaremos o reduciremos a elección propia.
A continuación iremos a la barra de herramientas y haremos click en el botón que presenta el dibujo de una cámara de fotos réflex, que corresponde con la etiqueta Crear Foto desde Vista 3D. 
Esta acción mostrará el siguiente cuadro de dialogo, en el que podremos aplicar proporciones (Vista 3D, cuadrado, 4:3, 16:9, etc.) y elegir la calidad de la renderización. 
En esta ocasión dejaremos la renderización rápida, cuyo resultado corresponde a la misma imagen que disponemos en nuestro panel 3D de la aplicación.
De momento no realizaremos renderizaciones con iluminación, que trataremos en las siguientes partes de este tutorial.
Daremos a crear y una vez creada la imagen, clickearemos en guardar, disponiendo el nombre y el lugar donde se guardará.
En mi caso le daré el nombre de “3dplanta1”, obteniendo el archivo de imagen 3dplanta1.png
La aplicación Sweet Home 3D, a diferencia de Floorplan, no tiene implementada la posibilidad de obtener imágenes en 2D.
En este caso, si desearemos obtenerla bastará con realizar una captura de pantalla del panel de trabajo (panel 2).
Con motivo de que las últimas actualizaciones de HA van enfocadas a la utilización preferente de la interfaz Lovelace, como ya adelantamos en la introducción de este tutoríal, no voy a dar por hecho que todos ya tenemos implementada esta interfaz.
Por tanto daré algunas nociones básicas para comprender y ejecutar el traslado a esta nueva interfaz.
En la interfaz anterior, utilizábamos paneles, grupos y pestañas para organizar y disponer nuestra interacción con los dispositivos integrados.
La implementación del código lo hacíamos directamente en el archivo configuration,yaml, o en otros archivos .yaml separados, que enlazábamos al anterior mediante los conocidos !include. (Organizando tu hogar inteligente: Grupos, pestañas y paneles en Home Assistant)
En la nueva interfaz Lovelace:
Aunque es posible también separar en diferentes archivos nuestro ui-lovelace.yaml no es objetivo de este tutorial.
¡¡Ojo!!, no borréis los grupos aunque tengáis todos trasladados a tarjetas, ya que se seguirá haciendo uso de ellos (no todos) en muchas cards de Lovelace.
Para iniciar nuestro Lovelace en modo yaml, introduciremos en nuestro archivo configuration.yaml el siguiente código:
|
1 2 |
lovelace: mode: yaml |
Crearemos, sino no lo tenemos ya, nuestro archivo ui-lovale.yaml, e iniciaremos el mismo con el código:
|
1 2 |
title: Mi Chalet # Nombre de nuestra pantalla de Lovelace views |
A partir de aquí, por cada pestaña que queramos crear introduciremos el siguiente código, por supuesto, siempre respetando los espacios, requerimiento indispensable en el lenguaje de programación yaml.
|
1 2 3 |
- title: 1ª Planta # Denominación o etiqueta del icono icon: mdi:floor-plan # Opcional, visualiza icono por texto cards: |
A continuación iremos poniendo las “cards” que utilicemos en esta pestaña, disponemos de 24 cards diferentes integradas en HA.
También podremos utilizar otras muchas cards mediante recursos -resources- , definiendo type: custom…. , que han sido creadas por otros usuarios, o por nosotros mismos si tenemos conocimientos en programación. Más adelante haremos uso de una de estas custom y veremos como se implementa.
En nuestro caso, vamos a empezar con la utilización de la tarjeta picture-elements disponible ya en esas 24 integradas en HA: Home-assistant.io lovelace picture-elements Y para ello introduciremos el siguiente código:
|
1 2 3 |
- type: picture-elements image: /local/3dplanta1.png # imagen de nuestro diseño elements: |
En HA la referencia “/local/“ es siempre el camino -path- a la carpeta /www/, que crearemos en nuestra raspberry dentro del directorio /.homeassistant/ si no la tenemos creada.
En esa carpeta copiaremos nuestra imagen del diseño que vamos a utilizar.
|
1 |
pi@raspberrypi:/home/homeassistant/.homeassistant/www $ |
Aconsejo que en adelante vayamos creando subcarpetas en la carpeta www para tener todas las imágenes ordenadas y agrupadas, del modo:
|
1 |
pi@raspberrypi:/home/homeassistant/.homeassistant/www/imagenes/floorplan/seguridad $ |
En este caso en nuestro ui-lovelace.yaml pondríamos:
image: /local/imagenes/floorplan/seguridad/3dplanta1.png
En este punto (con la carpeta www creada y la imagen copiada en esta u otra supcarpeta), vamos a continuar con nuestra card picture-elements.
Los iconos si los tenemos declarados en el archivo customize.yaml o customize_glob.yaml (aconsejo declararlos en estos archivos) no será necesario definirlos aquí.
En el caso de que no los tengáis declarados en estos archivos, bastará añadir a los ejemplos que pongo a continuación, debajo del “type:...”, el código “icon: mdi: <denominación del icono>.
Yo en mi caso tengo los iconos declarados en los archivos que hemos referenciado por lo que omito este código: Home-assistant - customizing-devices
Para las variaciones realizadas en los archivos customize.yaml y customize-glob.yaml no será necesario reiniciar nuestro HA, bastará con llamar al servicio homeassistant.reload_core_config. Lo podréis encontrar en el panel emergente de HA pulsando sobre el icono de mando infrarrojo bajo el título Herramientas para desarrolladores y después clickear "CALL SERVICE".
Herramientas para desarrolladores, selecciona el servicio homeassistant.reload_core_config y click “CALL SERVICE”.
A este tipo de tarjeta podremos añadir diferentes elementos y tipos. En el caso de hoy, vamos a utilizar el elemento tipo “state-icon” para añadir iconos.
Para implementar el elemento state-icon, empezamos por añadir al código que ya tenemos el siguiente:
|
1 2 3 4 5 |
- type: state-icon entity: binary_sensor.motion_sensor_158d0002730709 style: top: 33% # coordenadas cartesianas eje y left: 43% # coordenadas cartesianas eje x |
En entity: pondremos la entidad que queremos representar como icono en nuestro diseño.
Este caso es un PIR, sensor de movimiento, y por tanto informativo (como la mayoría de los dispositivos de seguridad, PIR, puertas, detectores de humo, inundación, etc.), es decir, que no interactuamos con él, salvo para obtener información.
De esta forma, no es necesario añadir ninguna configuración para interacturar, como veremos en la siguiente sección, ya que por defecto cualquier acción -action- por defecto, aunque no la definamos, siempre tomará la forma “more-info”, que corresponderá a una ventana emergente informativa, es decir, que al hacer click sobre el icono de estas entidades aunque no hayamos definido ninguna acción concreta siempre mostrará esa ventana emergente (esto ocurre en muchas card no solo en esta). Nos ahorramos el trabajo de poner más código. 
En style: el top: y el left: corresponden a la localización que daremos a nuestro icono en la imagen de fondo, siempre expresada en %, y me explico, esta localización viene dada por un cuadro cartesiano iniciado en el vértice superior izquierdo de nuestra imagen, el top: seria contando desde arriba y el left: contando desde la izquierda. 
La lógica de trabajo es poner de primera una estimación de la localización, refrescamos la pantalla mediante la opción Refresh disponible en el icono de tres puntos situado en la esquina superior derecha en nuestra web de HA, vemos donde se ha situado e ir corrigiendo la posición y refrescando.
De esta forma iremos repitiendo el código de este elemento dentro de una card picture-elements por cada dispositivo de seguridad que queramos integrar.
En el caso de que tengamos dificultad para localizar nuestros iconos en la imagen podemos utilizar una card custom de ayuda, que posteriormente podemos eliminar una vez que tengamos la card terminada. Esta card se denomina “plan-coordinates”, pero solo funciona con el navegador Google Chrome.
Github - custom-lovelace - plan-coordinate
Para su utilización deberemos crear dentro de nuestra carpeta www, la carpeta custom_cards y dentro de esta copiar el archivo plan-coordinates.js disponible en el enlace anterior.
En nuestro archivo ui-lovelace.yaml, al inicio, añadiremos el recurso de esta tarjeta de la siguiente forma:
|
1 2 3 4 5 |
title: Mi Chalet # Nombre de nuestra pantalla de Lovelace resources: - url: /local/custom_cards/plan-coordinates.js type: js views: |
Y en nuestra pestaña de floorplan, añadiremos esta card custom como primera card, es decir, antes de la definición de nuestra card picture-elements, de la siguiente forma:
|
1 2 3 |
cards: - type: custom:plan-coordinates - type: picture-elements |
Y obtendremos como resultado la aparición de un cuadro con las coordenadas de la posición de nuestro ratón al pasar por encima de nuestra imagen. 
Para la integración de otros iconos que correspondan a otros tipos de dispositivos (luces, enchufes, cámaras, media-players, etc.) seguiremos los mismos pasos anteriores incluyendo un nuevo configurador en el código.
Este configurador podrá ser:
Se podrán implementar en el código indistintamente de forma individual o ambos, y podremos definir que haga una misma acción para un click de ratón, o un click prolongado, o acciones distintas para cada uno.
Las acciones que podremos definir para estos tipos de interactuación serán:
“more-info”. Es la acción por defecto, como hemos comentado antes.
Aunque no definamos ningún configurador, corresponde a la ventana emergente correspondiente al dispositivo de que se trate según el estado en que se encuentre.
En el caso de que tengamos definida una acción para el “tap-action”, y no definamos nada para el “hold_action” este último tomará este tipo de acción.
Como ejemplo, en un dispositivo de iluminación si le definimos en el action un “toggle” (cambiar de estado, pasar de "on" a "off" o viceversa), si esta en "off" aunque no definamos ninguna acción para el “hold-action”, cuando hagamos una pulsación larga , al soltar, sobre el icono aparecerá la ventana emergente de dicho dispositivo para ese estado. 
En el caso de que el dispositivo este en estado "on", aunque no definamos nada en “hold-action” aparecerá la ventana emergente del dispositivo para el estado "on". 
“toggle”. Es la acción de interruptor, alterna los estados del dispositivo. Como he dicho antes, pasa del on al off y viceversa.
Código de ejemplo:
|
1 2 3 4 5 6 7 |
- type: state-icon entity: switch.sonoff_10005dbae5 # luz led cocina tap_action: action: toggle style: top: 55% left: 35% |
“call-service”. Llamará a un servicio de los disponibles en HA (los podréis obtener del panel emergente de HA pulsando sobre el icono de mando infrarrojo bajo el título Herramientas para desarrolladores).
Un ejemplo de uso es representar un icono correspondiente a un dispositivo media-player (como un televisor, android tv, etc.) y hacer “play” con el servicio “media_player.media_play”, o “pause” con el servicio “media_player.media_pause”, podréis encender, apagar, cambiar de canal, volumen, etc.
Definiremos el servicio al que llamamos añadiendo service: media_player.media_….
Definiremos el dispositivo sobre el que ejecutamos el servicio añadiendo service_data: y debajo respetando los espacios entity_id:
Código de ejemplo:
|
1 2 3 4 5 6 7 8 9 10 |
- type: state-icon entity: device_tracker.14bb6e0193a3 # TV SALON tap_action: action: call-service service: media_player.turn_on service_data: entity_id: media_player.tv_salon style: top: 55% left: 35 |
“navigate”. Lo utilizaremos para navegar a otras pestañas del Lovelace.
Si os fijáis, por cada pestaña que creamos en el Lovelace, nuestra URL muestra el número de orden en el que están dispuestas, de forma “IP:8123/lovelace/1” sería la primera pestaña, …/lovelace/2 sería la segunda, y así sucesivamente.
Un ejemplo de uso puede ser que al hacer click en el icono de una cámara se nos muestre de forma inmediata la visualización de la cámara que tenemos integrada en otra pestaña diferente.
Definiremos la pestaña a la que navegar añadiendo navigation_path: /lovelace/<número correspondiente a la pestaña>
Código de ejemplo:
|
1 2 3 4 5 6 7 8 |
- type: state-icon entity: device_tracker.4574cf56cd33 # CÁMARA PISCINA tap_action: action: navigate navigation_path: /lovelace/10 style: top: 55% left: 35 |
“none”. Evidentemente si declaramos esta forma estaremos anulando cualquier tipo de acción, esto anulará las acciones por defecto que hemos comentado sino declarábamos por código ningún tipo de acción.
Como habréis podido experimentar, durante la implementación de vuestros diseños, se visualizan en el tamaño que por defecto trabaja Lovelace, es decir, en anchos de columnas preestablecidos.
Si quisiéramos que la visualización sea en el ancho completo de nuestras pantallas (ya sea en el pc, tablet o móvil), deberemos utilizar la opción de panel: true, esto lo definiremos al inicio de nuestra pestaña, debajo del titulo.
|
1 2 3 4 |
title: Seguridad panel: true icon: mdi:account-switch cards: |
¡Ojo! Esto lo que hará es renderizar la primera tarjeta - cards -, y el resto de tarjetas picture-elements que pongamos debajo nos se visualizarán.
En el caso de que queramos poner varias tarjetas de este tipo en la misma pestaña, y que se visualicen con el ancho completo de nuestras pantallas, deberemos enlazar éstas en modo vertical u horizontal utilizando las cards de Lovelace denominadas vertical-stack y horizontal-stack.
Home-assistant - vertical-stack
Home-assistant - horizontal-stack
De otro lado, nos podemos encontrar la necesidad de variar el tamaño de nuestros iconos, es decir, que el tamaño por defecto que Lovelace pone a los iconos sea demasiado grande, o demasiado pequeño, para el diseño de nuestros planos. En este caso utilizaremos las propiedades —iron-icon-height: y —iron-icon-width: que variaran la altura y el ancho respectivamente. Se declaran en el apartado de style:
En este caso utilizaremos las propiedades —iron-icon-height: y —iron-icon-width: que variaran la altura y el ancho respectivamente. Se declaran en el apartado de style:
Como ejemplo de código:
|
1 2 3 4 5 6 7 |
- type: state-icon entity: binary_sensor.equipos_nmap # Seguridad digital style: top: 10% left: 10% --iron-icon-height: 60px --iron-icon-width: 60px |
Y hasta aquí por hoy, que ya es mucho.
Y aprovecho para hacer una aclaración, ya que para muchos les parecerá demasiado largo el tutorial, y efectivamente se podría reducir a menos de la mitad.
Mi intención no es que dispongáis de un código corta-pega, con la única finalidad de copiar lo que otros ya tienen y no seamos capaces de ingeniar nuevos diseños.
Sino que adquiramos la comprensión de lo que estamos implementando para que personalicemos nuestros diseños al gusto de cada uno, abriendo un amplio abanico de posibilidades y realizando un aprendizaje escalonado.
