En aquest post vam intentar explicar com podem fer un plànol de casa nostra i integrar-lo a Home Assistant, amb la intenció d'integrar els dispositius que ja tenim a Hassio i donar-li vida al pla. És una cosa molt atractiva i sobretot visual, és una cosa que agrairan a casa, ja que amb una imatge podrem veure l'estat de la nostra llar i podrem interactuar des d'ell amb els dispositius que hi afegim.

Aquest és l'exemple que farem al post, tindrem el mapa de casa nostra amb informació en temps real, veurem els llums encesos, amb les seves ombres, el que veiem a la TV, valors de qualsevol mètrica que ens interessi… i fins i tot podrem interactuar amb cadascun d'ells, silenciar altaveus, pujar o abaixar les persianes, veure les càmeres de seguretat, l'estat de les nostres plantes, temperatures, humitats, consums, persones si ens posem…

El primer de tot, abans de començar serà el més laboriós, haurem de fer un plànol de casa nostra, el més fàcil del món serà fer servir alguna eina tipus Sweet Home 3D, una eina gratuïta i súper intuïtiva que no explicarem l'ús en aquest post, ja que amb 5 minuts que li dediquis estic segur sabràs fer servir i podràs fer-te el teu pla, això sí que et costarà temps el deixar-lo bonic, però això dependrà de cadascú el nivell de detall que vulguem. Començaràs dibuixant les parets, després afegiràs els teus objectes que tinguis per deixar-ho el més semblant possible a la realitat.

Com a ajuda et deixo la web de 3D WareHouse de Sketchup com a banc d' imatges importables, que és una bona idea el buscar els mobles que tinguem, objectes, sofàs, làmpades… I també depèn el fi que vulguis deixar-ho igual necessites importar alguna textura per fer-lo més realista, per a això tinc anotat usar Archive Textures. Treballarem en la vista superior i en la inferior anirem veient els resultats com queden en 3D, la idea és això, deixar-ho el més semblant a la nostra llar. Quan tinguis el pla més o menys finalitzat, la idea és que haurem de prendre diferents fotografies aèries del que volem veure, personalment us recomano treure diverses fotos amb diferent hora, ja que després podrem ficar-les a Home Assistant i que el pla general canviï les ombres del sol depenent de l'hora que és, o en finalitzar el dia i arribi la nit, doncs que la casa estigui a les fosques. Realment és senzill, de veritat, dedicar-li uns minuts i el tindreu xutat. Un altre tip, fer les imatges amb la màxima qualitat possible, en el meu cas utilitzo 1920×1080 pixels de resolució (tant en les propietats del document/plànol, com quan es fa la foto).

Després, amb qualsevol editor tipus PhotoShop, o Inkscape (open source) haurem d'anar fent totes les imatges que vam necessitar de la casa. Us explico el meu exemple, tindré 3 imatges de tot el plànol, una amb la llum del matí, una altra de la tarda i una altra de nit, tretes les fotos a les 12h, 17h i 22h respectivament. A més a la foto de la nit caldrà treure una altra foto, però aquesta vegada amb tots els llums encesos, a mi em queda alguna cosa com:

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

I en la imatge de nit amb llums, haurem d'anar retallant amb aquests editors les zones amb llum, per exemple la cuina, el hall, passadís, habitacions… caldrà de vegades fer un degradat en el cas de làmpades o si tenim diversos llums en un habitacle… Quedant-nos les següents imatges (repeteixo, és el meu exemple) en format PNG amb transparències:

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

Bé, quan tinguem aquesta part llista, ja podrem començar amb Home Assistant, on haurem de crear un plànol i anar agregant a poc a poc totes les imatges que hem generat. Abans de res, el primer vam crear a la zona dels sensors (sensors:), és una cosa que ens digui l'elevació del sol, i així la puguem fer servir a continuació quan comencem i que el fons del plànol canviï si és el matí, mig dia, la tarda o ja de nit, i amb això posem diferents fons amb les ombres corresponents del sol, i ensorra més la imatge segons s'arriba a la nit. Crearem un sensor, que jo l'anomeno brillo_sol, us deixo el codi que fiqueu en el nostre configuration.yaml:

sensor:
...
  - platform: temperate sensors:
      brillo_sol:
        friendly_name: "Brillantor 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 %}
...

Acordar-vos de reiniciar Home Assistant perquè recarregui el canvi que acabem de posar (cada vegada que toquem el fitxer de configuració, ja sabeu). Per fi, ja podrem començar amb el pla! Comencem!!! A l'UI de Lovelace ja podrem crear una targeta manual. Us deixo el codi de baix d'exemple que el que fa és el dit, llegirà del sensor 'Brillo Sol’ el seu estat i depèn quin estat tingui, doncs posarà una imatge de fons o una altra. Exemple de la nostra primera targeta:

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

Per si algú té dubtes del resultat, això és el que aconseguirem, (en el meu cas) són 4 imatges, les següents, i veieu les ombres com canvien, la llum del dia i l'última de nit. Com veieu, haureu de guardar cada imatge PNG al directori que us creieu a la vostra màquina de Hassio, en el meu cas el tinc en un contenidor de docker, i dins haurem creat una carpeta i per exemple copiat les imatges aquí amb WinSCP.

Bé, per on seguim ara? Hi afegim una bombeta? Que a més en polsar-la encengui la llum que correspongui, ¿no? Anem!!! Aquí y aquí teniu dues imatges que ens seran de gran ajuda, la idea és posar-les sobre on ens interessi, en aquest exemple les posarem al centre del Hall, amb el següent codi que afegim a la targeta anterior de Lovelace el tindrem, això sí, cadascú haurà de moure'l i canviar-li la mida al seu gust, i clar seleccionar la identitat corresponent a la llum 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

I aquest seria el resultat, tindríem al Hall si us fixeu una bombeta, que si està apagada és un punt vermell, i si posem sobre ella donarà la llum i a més es canviarà el punt al color verd i amb un blanc preciós difuminat al seu voltant. Llist? Seguim!

Vam il·luminar l'habitacle, en aquest cas el Hall, i que quan la bombeta estigui encesa, canviï la imatge del hall i surti il·luminat. Quedarà guai per a les làmpades també l'usar les imatges degradades amb llum únicament fins on enllunyin… Per a això, primer ens haurem de descarregar aquest fitxer i guardar-lo a la nostra carpeta '/config/www/js/’ i després haurem d'afegir en “Configuració” > “Panells de Control de Lovelace” > ” Recursos”:

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

Ara sí, podrem tornar a la nostra targeta, i seguir alimentant-la. Si recordem, a l'inici del Post hem indicat que hem de tenir retallat cada habitacle amb llum, ho afegiríem amb el següent codi a la nostra targeta:

- 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 tenim una tira de leds, podem mostrar el color que està fent servir ara mateix, en el meu cas recordar-vos per enèsima vegada les WLED que són una maravilla, necessitarem una imatge amb la zona il·luminada i transformada únicament amb color vermell, com us deixo aquest exemple meu renomenada com a _color. I amb el següent codi podrem començar a visualitzar la nostra tira de leds integrada al 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è més? Usáis Kodi per veure la tele? Doncs també queda cuqui el poder afegir el que està veient doncs a la TV o a la paret si teniu un projector… així mostrarà el que està veient 🙂 El primer serà descarregar aquest fitxer i deixar-ho com abans, a '/config/www/js/'. I novament des de “Configuració” > “Panells de Control de Lovelace” > ” Recursos” hi afegim:

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

Val, ara, per donar forma a la TV o la projecció a la paret, haurem de fer un trapezoide, perquè clar, cadascú tindrà en perspectiva el que vulgui veure, i perquè quedi més realista hauràs de fer la figura amb el que es veu a Kodi. Per a això té una eina de disseny que veureu és una xorrada usar-lo, n'hi ha prou amb descarregar-la, obrir la web que porta i jugar, afegim el nostre fons i ràpidament traurem les mesures que necessitem per rotar-la o torçar-la. Total, que a la nostra targeta afegirem l'entitat de Kodi i li posem el codi que ens va generar l'output d'aquesta eina maravillosa, ens quedaria alguna cosa com:

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

I aquest seria el resultat marrec, clar que si tens un projector, també pots posar un fitxer GIF animat que simuli pols on es projecta… etc., etc.… es poden fer coses xules. I clar que si els modifiques l'acció a cada objecte que afegim a la targeta podràs interactuar amb ells.

Bo i ja com a últim, però es poden fer moltes coses més, eh! Per posar, vam veure el valor d'alguna entitat a Home Assistant, per exemple, si tenim sensors de temperatura, doncs el que marca, els graus que faci, i es posa a cada habitacle on tinguem el termòmetre… El mateix es pot fer si estem mesurant el consum d'algun dispositiu, i així quan vegem el mapa, doncs en temps real veurem la temperatura, humitat, consum… el que sigui! Vingui, afegim això a la targeta amb la qual estem treballant, cadascú posarà les seves entitats, el seu color de lletra…:

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

Bo, cadascú que li doni a la imaginació, us deixo aquí un GIF de com quedaria tot això animat, espero que us inspiri i us ajudi, moltes gràcies a tots els que fan Home Assistant possible, i a tots els que comparteixen els seus treballs a GitHub (entre d' altres). Gràcies per compartir en xarxes socials!!!