Aprendemos a utilizar la potencia gráfica de Lovelace UI. Segunda Parte. Integración de nuestros planos en Home Assistant con la utilización de iconos.

Hola de nuevo, 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 .

CONCEPTOS BÁSICOS.

Quién puede seguir este tutorial.

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.

Que tipos de planos podemos integrar.

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.

Y en las siguientes partes del Tutorial…

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.

¿ Es necesario seguir esta parte del Tutorial para obtener los resultados finales ?

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.

I.- OBTENCIÓN DE NUESTRO DISEÑO.

Para obtener nuestro diseño que integraremos en HA, podrá variar:

  • desde el simple escaneo de nuestro plano de la casa, si disponemos de él en soporte documental,
  • o la exportación del que tengamos realizado en cualquier programa informático; así, desde la aplicación Floorplan, recurriremos a exportar imagen 2D o 3D; en la aplicación Sweet Home, como veremos a continuación, utilizaremos Crear Foto desde Vista 3D;
  • en cualquier caso, si por diferentes motivos no tuviésemos la opción de exportar el diseño concreto que nos interesa integrar en HA, siempre podremos recurrir a la captura de pantalla guardando la imagen capturada en los formatos referenciados .jpeg o .png.
Integración de diseños 2D y 3D realizados con la aplicación Floorplan.

Consejo

Recomiendo que la resolución de la imagen obtenida sea al menos de 1024×720 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.

Seguimos donde dejamos la parte anterior del Tutorial

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

Otra opción

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).

II.- INTEGRACIÓN DE LA IMAGEN OBTENIDA EN HA.

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.

Nociones básicas

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.

https://domology.es/grupos-pestanas-paneles-ha/

En la nueva interfaz Lovelace:

  • los paneles no han sufrido variación,
  • las pestañas las convertiremos en vistas – views -,
  • y los grupos en tarjetas -cards-,
  • implementando todo esto en el archivo ui-lovelace.yaml.

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.

Iniciamos nuestro Lovelace

Para iniciar nuestro Lovelace en modo yaml, introduciremos en nuestro archivo configuration.yaml el siguiente código:

lovelace:
mode: yaml

Crearemos, sino no lo tenemos ya, nuestro archivo ui-lovale.yaml, e iniciaremos el mismo con el código:

title: Mi Chalet # Nombre de nuestra pantalla de Lovelace
views

Introducimos una nueva vista – pestaña –

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.

  - title: 1ª Planta # Denominación o etiqueta del icono 
icon: mdi:floor-plan # Opcional, visualiza icono por texto
cards:

Introducción de tarjetas -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.

Nos iniciamos con la tarjeta picture-elements

En nuestro caso, vamos a empezar con la utilización de la tarjeta picture-elements disponible ya en esas 24 integradas en HA.

https://www.home-assistant.io/lovelace/picture-elements/


Y para ello introduciremos el siguiente código:

  - 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.

pi@raspberrypi:/home/homeassistant/.homeassistant/www $

Consejo

Aconsejo que en adelante vayamos creando subcarpetas en la carpeta www para tener todas las imágenes ordenadas y agrupadas, del modo:

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

III.- INTEGRACIÓN DE LOS ICONOS CORRESPONDIENTES A NUESTROS DISPOSITIVOS DE SEGURIDAD.

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.

Aclaración

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.

https://www.home-assistant.io/docs/configuration/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”.

service developer tool icon

Herramientas para desarrolladores, selecciona el servicio homeassistant.reload_core_config y click “CALL SERVICE”.

Integramos elementos a la card picture-elements

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:

    - 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.

Ventana emergente correspondiente a un PIR

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.

Desarrollo

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.

Dificultades

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.

https://github.com/ciotlosm/custom-lovelace/tree/master/plan-coordinates

Como integrar una tarjeta custom de ayuda

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:

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:

    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.

IV.- INTEGRACIÓN DE OTROS ICONOS CORRESPONDIENTES A DISPOSITIVOS CON LOS QUE PODEMOS INTERACTURAR.

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.

Un poquito más de código

Este configurador podrá ser:

  • tap_action: Corresponde a realizar click con el ratón sobre el icono.
  • hold_action: Corresponde a un click – pulsación- prolongada con el ratón sobre el icono.

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.

Que tipo de acciones podemos definir

Las acciones que podremos definir para estos tipos de interactuación serán:

– MORE-INFO

“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.

Ventana emergente correspondiente a un dispotivio de luz en estado “off””

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”.

Ventana emergente correspondiente a un dispotivio de luz en estado “on””

– TOGGLE

“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:

    - type: state-icon       
entity: switch.sonoff_10005dbae5 # luz led cocina
tap_action:
action: toggle

style:
top: 55%
left: 35%

– CALL-SERVICE

“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:

    - 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

“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:

    - type: state-icon       
entity: device_tracker.4574cf56cd33 # CÁMARA PISCINA
tap_action:
action: navigate
navigation_path: /lovelace/10

style:
top: 55%
left: 35

– NONE

“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.

V.- OTRAS INFORMACIONES DE INTERÉS.

Visualizar en ancho completo de la pantalla

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.

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.

https://www.home-assistant.io/lovelace/vertical-stack/

https://www.home-assistant.io/lovelace/horizontal-stack/

Establecer el tamaño de nuestros iconos.

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:


- 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.

El que ya tenga adquirido de antes los conocimientos sobre muchas partes del tutorial, felicitaciones, obviáis esas partes y a por la siguiente, y los que no, estoy convencido que lo agradecerán.

Espero veros en nuestros canales de comunicación Telegram Twitter
Facebook y que empecéis a mostrar vuestros magníficos diseños.

Un saludo y hasta pronto.

Un comentario sobre “Aprendemos a utilizar la potencia gráfica de Lovelace UI. Segunda Parte. Integración de nuestros planos en Home Assistant con la utilización de iconos.

  • el 19 marzo, 2019 a las 14:54
    Permalink

    Genial el manual y genial la potencia que tiene lovelace, he utilizado “configurar la interfaz de usuario” que ya viene en las versiones 0.88 y siguientes y es una pasada lo facil que es seguir tu guia, he preferido usar un diseño en 2D que es mucho mas rapido , gracias por tu ayuda

Deja un comentario

Síguenos

Siguenos en facebook