En este post vamos a intentar explicar cómo podemos hacer un plano de nuestra casa e integrarlo en Home Assistant, con la intención de integrar los dispositivos que ya tenemos en Hassio y darle vida al plano. Es algo muy atractivo y sobre todo visual, es algo que agradecerán en casa, ya que con una imagen podremos ver el estado de nuestro hogar y podremos interactuar desde él con los dispositivos que añadamos.

Este es el ejemplo que haremos en el post, tendremos el mapa de nuestra casa con información en tiempo real, veremos las luces encendidas, con sus sombras, lo que vemos en la TV, valores de cualquier métrica que nos interese… e incluso podremos interactuar con cada uno de ellos, silenciar altavoces, subir o bajar las persianas, ver las cámaras de seguridad, el estado de nuestras plantas, temperaturas, humedades, consumos, personas si nos ponemos…

Lo primero de todo, antes de empezar será lo más laborioso, tendremos que hacer un plano de nuestra casa, lo más fácil del mundo será usar alguna herramienta tipo Sweet Home 3D, una herramienta gratuita y súper intuitiva que no explicaremos el uso en este post, ya que con 5 minutos que le dediques estoy seguro sabrás usar y podrás hacerte tu plano, eso sí te costará tiempo el dejarlo bonito, pero esto dependerá de cada uno el nivel de detalle que queramos. Empezarás dibujando las paredes, luego añadirás tus objetos que tengas para dejarlo lo más parecido posible a la realidad.

Como ayuda te dejo la web de 3D WareHouse de Sketchup como banco de imágenes importables, que es una buena idea el buscar los muebles que tengamos, objetos, sofás, lámparas… Y también depende lo fino que quieras dejarlo igual necesitas importar alguna textura para hacerlo más realista, para ello tengo anotado usar Archive Textures. Trabajaremos en la vista superior y en la inferior iremos viendo los resultados como quedan en 3D, la idea es eso, dejarlo lo más parecido a nuestro hogar. Cuando tengas el plano más o menos finalizado, la idea es que tendremos que tomar distintas fotografías aéreas de lo que queremos ver, personalmente os recomiendo sacar varias fotos con distinta hora, ya que luego podremos meterlas en Home Assistant y que el plano general cambié las sombras del sol dependiendo de la hora que es, o al finalizar el día y llegue la noche, pues que la casa esté a oscuras. Realmente es sencillo, de verdad, dedicarle unos minutos y lo tendréis chupado. Otro tip, hacer las imágenes con la máxima calidad posible, en mi caso utilizo 1920×1080 pixeles de resolución (tanto en las propiedades del documento/plano, como cuando se hace la foto).

Luego, con cualquier editor tipo PhotoShop, o Inkscape (open source) deberemos ir haciendo todas las imágenes que vamos a necesitar de la casa. Os explico mi ejemplo, tendré 3 imagenes de todo el plano, una con la luz de la mañana, otra de la tarde y otra de noche, sacadas las fotos a las 12h, 17h y 22h respectivamente. Además a la foto de la noche habrá que sacar otra foto, pero esta vez con todas las luces encendidas, a mí me queda algo como:

• planta_baja_manana.png 01/08/2020 a las 12h
• planta_baja_tarde.png 01/08/2020 a las 17h
• planta_baja_noche.png 01/08/2020 a las 21:27h
• planta_baja_noche_luz.png 01/08/2020 a las 21:27h

Y en la imagen de noche con luces, tendremos que ir recortando con dichos editores las zonas con luz, por ejemplo la cocina, el hall, pasillo, habitaciones… habrá que a veces hacer un degradado en el caso de lámparas o si tenemos varias luces en un habitáculo… Quedándonos las siguientes imágenes (repito, es mi ejemplo) en formato PNG con transparencias:

• hall_luz.png
• lampara_sala_luz.png
• sala_luz.png
• cocina_luz.png
• comedor_luz.png

Bien, cuando tengamos esta parte lista, ya podremos comenzar con Home Assistant, donde deberemos crear un plano e ir agregando poco a poco todas las imágenes que hemos generado. Antes de nada, lo primero vamos a crear en la zona de los sensores (sensors:), es algo que nos diga la elevación del sol, y así la podamos usar a continuación cuando empecemos y que el fondo del plano cambie si es la mañana, medio dia, la tarde o ya de noche, y con ello pongamos distintos fondos con las sombras correspondientes del sol, y oscureciendo más la imagen según se llega a la noche. Crearemos un sensor, que yo le llamé brillo_sol, os dejo el código que meteríamos en nuestro configuration.yaml:

sensor:
...
  - platform: template
    sensors:
      brillo_sol:
        friendly_name: "Brillo del Sol"
        value_template: >-
          {% if state_attr('sun.sun', 'elevation') > 20  %}
            bright
          {% elif state_attr('sun.sun', 'elevation') > 9 %}
            mid
          {% elif state_attr('sun.sun', 'elevation') > -3 %}
            dark
          {% else %}
            black
          {% endif %}
...

Acordaros de reiniciar Home Assistant para que recargue el cambio que acabamos de meter (cada vez que tocamos el fichero de configuración, ya sabéis). Por fin, ¡ya podremos empezar con el plano! Empezamos!!! En el UI de Lovelace ya podremos crear una tarjeta manual. Os dejo el código de abajo de ejemplo que lo que hace es lo dicho, leerá del sensor ‘Brillo Sol’ su estado y depende qué estado tenga, pues pondrá una imagen de fondo u otra. Ejemplo de nuestra primera tarjeta:

elements:
  - entity: sensor.brillo_sol
    image: /local/planta_baja/planta_baja_negro.png
    state_image:
      black: /local/planta_baja/planta_baja_noche.png
      bright: /local/planta_baja/planta_baja_mediodia.png
      dark: /local/planta_baja/planta_baja_tarde.png
      mid: /local/planta_baja/planta_baja_manana.png
    style:
      left: 50%
      top: 50%
      width: 100%
    tap_action:
      action: none
    type: image
image: /local/planta_baja/planta_baja_tarde.png
type: picture-elements

Por si alguien tiene dudas del resultado, esto es lo que conseguiremos, (en mi caso) son 4 imagenes, las siguientes, y veis las sombras como cambian, la luz del día y la última de noche. Como veis, tendréis que guardar cada imagen PNG en el directorio que os creéis en vuestra máquina de Hassio, en mi caso lo tengo en un contenedor de docker, y dentro habremos creado una carpeta y por ejemplo copiado las imágenes ahí con WinSCP.

Bien, ¿por donde seguimos ahora? ¿Añadimos una bombilla? Que además al pulsarla encienda la luz que corresponda, ¿no? Vamos!!! Aquí y aquí tenéis dos imágenes que nos van a ser de gran ayuda, la idea es ponerlas sobre donde nos interese, en este ejemplo las pondremos en el centro del Hall, con el siguiente código que añadamos a la tarjeta anterior de Lovelace lo tendremos, eso sí, cada uno tendrá que moverlo y cambiarle el tamaño a su gusto, y claro seleccionar la identidad correspondiente a la luz del hall:

- entity: light.luz_hall
  state_image:
    'off': /local/planta_baja/liteoff.png
    'on': /local/planta_baja/lite.png
  style:
    left: 45%
    top: 65%
    width: 10%
  tap_action:
    action: toggle
  type: image

Y ese sería el resultado, tendríamos en el Hall si os fijáis una bombillita, que si está apagada es un punto rojo, y si pulsamos sobre ella dará la luz y además se cambiará el punto al color verde y con un blanco precioso difuminado a su alrededor. Listo? Seguimos!

Vamos a iluminar el habitáculo, en este caso el Hall, y que cuando la bombilla esté encendida, cambie la imagen del hall y salga iluminado. Quedará guay para las lámparas también el usar las imágenes degradadas con luz únicamente hasta donde alumbren… Para ello, primero nos tendremos que descargar este fichero y guardarlo en nuestra carpeta ‘/config/www/js/’ y luego deberemos añadir en “Configuración” > “Paneles de Control de Lovelace” > ” Recursos”:

URL: /local/js/color-lite-card.js
Tipo: js[/sourcecode]

Ahora sí, podremos volver a nuestra tarjeta, y seguir alimentándola. Si recordamos, al inicio del Post hemos indicado que tenemos que tener recortado cada habitáculo con luz, lo añadiríamos con el siguiente código a nuestra tarjeta:

- entity: light.luz_hall
  image: /local/planta_baja/hall_luz.png
  style:
    left: 50%
    top: 50%
    width: 100%
  tap_action:
    action: none
  type: 'custom:color-lite-card'

Si tenemos una tira de leds, podemos mostrar el color que está usando ahora mismo, en mi caso recordaros por enésima vez las WLED que son una maravilla, necesitaremos una imagen con la zona iluminada y transformada únicamente con color rojo, como os dejo este ejemplo mio renombrada como _color. Y con el siguiente código podremos comenzar a visualizar nuestra tira de leds integrada en el floorplan.

- color_image: /local/planta_baja/wled_cocina_color.png
  entity: light.wled_cocina
  image: /local/planta_baja/wled_cocina_normal.png
  style:
    left: 50%
    top: 50%
    width: 100%
  type: 'custom:color-lite-card'

¿Qué mas? Usáis Kodi para ver la tele? Pues también queda cuqui el poder añadir lo que estáis viendo pues en la TV o en la pared si tenéis un proyector… así mostrará lo que estáis viendo 🙂 Lo primero será descargar este fichero y dejarlo como antes, en ‘/config/www/js/’. Y nuevamente desde “Configuración” > “Paneles de Control de Lovelace” > ” Recursos” añadimos:

URL: /local/js/now-playing-card.js
Tipo: js[/sourcecode]

Vale, ahora, para dar forma a la TV o la proyección en la pared, tendremos que hacer un trapezoide, por que claro, cada uno tendrá en perspectiva lo que quiera ver, y para que quede más realista deberás hacer la figura con lo que se ve en Kodi. Para ello tiene una herramienta de diseño que veréis es una chorrada usarlo, basta con descargarla, abrir la web que trae y jugar, añadimos nuestro fondo y rápidamente sacaremos las medidas que necesitamos para rotarla o torcerla. Total, que en nuestra tarjeta añadiremos la entidad de Kodi y le ponemos el código que nos generó el output de esta herramienta maravillosa, nos quedaría algo como:

- entity: media_player.kodi_sala
  style:
    left: 64%
    top: 11%
    transform: >-
      rotate(46.5deg) rotateX(29deg) rotateY(-38deg) skewX(10deg)
      skewY(-30deg)
    width: 8%
  type: 'custom:now-playing-poster'

Y este sería el resultado maravilloso, claro que si tienes un proyector, también puedes poner un fichero GIF animado que simule polvo donde se proyecta… etc, etc… se pueden hacer cosas chulas. Y claro que si les modificas la acción a cada objeto que añadimos en la tarjeta podrás interactuar con ellos.

Bueno y ya como último, pero se pueden hacer muchas muchas cosas más, eh! Por poner, vamos a ver el valor de alguna entidad en Home Assistant, por ejemplo, si tenemos sensores de temperatura, pues lo que marca, los grados que haga, y se pone en cada habitáculo donde tengamos el termómetro… Lo mismo se puede hacer si estamos midiendo el consumo de algún dispositivo, y así cuando veamos el mapa, pues en tiempo real veremos la temperatura, humedad, consumo… lo que sea! Venga, añadimos esto a la tarjeta con la que estamos trabajando, cada uno pondrá sus entidades, su color de letra…:

- entity: sensor.0x00158d000444587d_temperature
  style:
    color: orange
    font-size: 12px
    font-weight: bold
    left: 54%
    top: 16%
  type: state-label

Bueno, cada uno que le de a la imaginación, os dejo aquí un GIF de cómo quedaría todo esto animado, espero que os inspire y os ayude, muchas gracias a todos los que hacen Home Assistant posible, y a todos los que comparten sus trabajos en GitHub (entre otros). Gracias por compartir en redes sociales!!!