3d husvy med lovelace i Home Assistant

Du har säkert sett detta innan. Och det finns många andra guider med. Jag har själv följt en av dessa. Hur bra de än var så saknade jag en på svenska samt även att kunna ladda ner några exempel för att enklare kunna prova mig fram.

Så vad är det då. Kort svar en bild där du ser om rummet är tänt eller släckt. Och som bonus lite andra sensorer som temperatur, TV osv. Du kommer även få ditt hus i 3d vilket säkert kan vara bra i andra samanhang med. Det fungerar i korthet så att du har en statisk bild där du lägger andra bilder på. Med state image i lovelace.

Och en liten nackdel. Har du 5 olika lampor i ett rum så visar denna bara av eller på efterssom du bara valt en lampa/switch. Vill du kan du ju i teorin skapa massor av mer bilder för varje state tex för en liten lampa som står i köksfönstret. Du skulle då behöva rendera galet många fler bilder och jag tror det skulle bli ganska rörigt. Bättre är istället att skapa grupper med ljus (light groups) som du använder för av och på.

För att få detta att fungera kommer du behöva:

Home Assistant med Lovelace

Några enteties i HA för ljus

GIMP (din open source fotoeditor)

Sweet Home 3d (eller liknande program)

Olika bilder för varje rum samt bilder för tänt/släckt

Massor av tålamod

 

 

Sweet Home 3d

Ett bra program som dessutom är gratis att använda är Sweet Home 3d. Det är lite över detta inäggs scope att gå igenom programmet i detalj men några tips kan vara att:

  1. Hitta en ritning på ditt hus i papper. Skanna den eller ta ett kort. I programmet väljer du Plan > Import background image. Din ritning lägger sig som en bakgrund och startar en wizard där du kan definera din skala. Gör detta rätt. Det är tråkigt att behöva skala om allt sen eller komma på att väggarna sitter fel.
  2. När du dragit väggarna så skapa rum. Du gör det genom att dubbelklicka i ett rum som är “tätt”. Det måste alltså vara väggar runt om.
  3. Importera möbler och annat. Ladda ner från tex 3dwarehouse. De möbler som följer med är fula som stryk. Alternativt är programmet utvecklat i ett annat land där de har en annan möbelsmak.
  4. Skapa alla fönster och dörrar. Det påverkar ljuset och renderingen sen.
  5. Lägg inte till ljuskällor utan att tänka igenom detta. Lite beroende på om du skall ha det som en 3d vy i Home Assistant kan det vara vettigt att skapa två olika filer man jobbar med då man är klar.
  6. Fixa allt supernoga innan du renderar filen. Det kan ta två timmar att rendera en bild i högsta läget och man vill inte göra om detta för man missat en liten detalj.
  7. Spara din viewpoint. Döp den till något bra för att kunna rendera bilden från samma vinkel nästa gång. (ctrl+alt+R)

Bilder och GIMP

När du ritat upp ditt hus i Sweet Home 3d så kommer du behöva rendera två bilder från samma viewpoint. En där lamporna är på och en där de är av. Du kan välja en tid på dygnet med. Bilden där ljuset är på kan vara 12:00 medans bilden då ljuset är va kanske skall vara 21:00. Du kan använda egna ljuskällor med men bäst blir kanske att använda “add ceeling lights” i renderingsvyn. Då skapas ljus från taket. Notera att du måste ha definberat rum för att detta skall fungera. Det påverkar det färdiga resultatet. När du är klar med renderingen så spara bilderna i ganska bra upplösning.

 

Ovan är min hus on bild. Den som heter houseon2.3.png. Du kan spara ner och testa med denna om du vill. Notera att du måste ha transparent bakgrund som du ser nedan i Gimp. Du lägger till en alphachannel för detta. Sudda bort allt utanför huset och spara. Detta kommer vara din standardbild för huset.

Nästa steg är att skapa off bilder för varje rum. Detta tar en del tid och är lite pilligt. Viktigt här är att du har exakt samma storlek på din bild. Ladda in din renderade ljus av bild. Se till att du har transparens. Du kommer skapa en bild för varje rum. Så spara undan din orginalfil så du inte sparar över den.

Min fil heter kitchenoff.png och är denna nedan. Du behöver en sådan för varje rum. Samma storlek.

 

Du kommer även behöva en liten bild för att trycka av och på ljuset. Du skulle kunna göra detta på andra sätt med men jag tycker detta funkar bra. Min bild är nedan.

lightsmall.png

 

När du är klar med alla eller några bilder så spara desssa i /local/images i Home Assistant.

Home Assistant och vyn

Nu när du har alla bilder (antagligen har du inte det för det var så tråkigt att göra det så du ville testa med ett rum först) så är det dags att skapa en vy i Home Assistant. Du vill kanske inte ha detta i en befintlig vy då det kommer se väldigt smått ut. Du kommer behöva sätta Panel Mode till on om du vill se den i fullskärm. Fast samtidigt så kan du inte editera den då. Så bäst är att byta panel mode mellan on och off så du kan editera koden.

 

Skapa ett kort som nedan. (den nedersta alltså) Det kommer inte se speciellt bra ut efterssom dina sensors inte heter som mina. Börja att byta en i taget. Har du inte så många switchar eller vill testa utan att tända och säcka hela huset så kan du skapa dummy switches som i den översta koden. Lägg dem i din konfigurationsfil.

input_boolean:
  dummy1:
    name: Dummy1
    initial: on
    icon: mdi:timer
    
  dummy2:
    name: Dummy2
    initial: on
    icon: mdi:timer

Så vad gör denna kod nedan då. Den översta delen visar de släcka bilderna om den är off. Är den on visar den bilden nedan. Ser du den inte? Den heter transparant_square.jpg och är just osynlig men du kan nog ladda ner den om du håller musen över. Spara denna bland de andra filerna med.

Viktigt att du använder tap_action: none så man inte kan trycka här. Alla dina rum skall vara med här.


elements:
- entity: light.roof_kitchen_level
hold_action: none
state_image:
'off': /local/images/kitchenoff.png
'on': /local/images/transparent_square.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: light.roof_main_bathroom_level
hold_action: none
state_image:
'off': /local/images/mainbathroomoff.png
'on': /local/images/transparent_square.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: switch.telldus2_switch
hold_action: none
state_image:
'off': /local/images/lekdeloff.png
'on': /local/images/transparent_square.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: switch.telldus1_switch
hold_action: none
state_image:
'off': /local/images/klkoff.png
'on': /local/images/transparent_square.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: input_boolean.timers
hold_action: none
state_image:
'off': /local/images/klkoutsideoff.png
'on': /local/images/transparent_square.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: light.roof_livingroom_level
hold_action: none
state_image:
'off': /local/images/livingroomoff.png
'on': /local/images/transparent_square.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: input_boolean.dummy1
hold_action: none
state_image:
'off': /local/images/bedroomoff.png
'on': /local/images/transparent_square.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: input_boolean.dummy2
hold_action: none
state_image:
'off': /local/images/entreoff.png
'on': /local/images/transparent_square.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: input_boolean.dummy3
hold_action: none
state_image:
'off': /local/images/edvinoff.png
'on': /local/images/transparent_square.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: input_boolean.dummy4
hold_action: none
state_image:
'off': /local/images/tvattstugaoff.png
'on': /local/images/transparent_square.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: input_boolean.dummy5
hold_action: none
state_image:
'off': /local/images/ludvigoff.png
'on': /local/images/transparent_square.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: input_boolean.dummy6
hold_action: none
state_image:
'off': /local/images/arvidoff.png
'on': /local/images/transparent_square.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: input_boolean.dummy7
hold_action: none
state_image:
'off': /local/images/litetbadrumoff.png
'on': /local/images/transparent_square.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: input_boolean.dummy8
hold_action: none
state_image:
'off': /local/images/halloff.png
'on': /local/images/transparent_square.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: light.roof_kitchen_level
image: /local/images/lightsmall.png
style:
height: 30%
left: 60%
top: 61%
width: 3%
tap_action:
action: toggle
type: image
- entity: light.roof_main_bathroom_level
image: /local/images/lightsmall.png
style:
height: 30%
left: 60%
top: 27%
width: 3%
tap_action:
action: toggle
type: image
- entity: switch.telldus1_switch
image: /local/images/lightsmall.png
style:
left: 61%
top: 27%
width: 3%
tap_action:
action: toggle
type: image
- entity: input_boolean.timers
image: /local/images/lightsmall.png
style:
left: 68%
top: 27%
width: 3%
tap_action:
action: toggle
type: image
- entity: switch.telldus2_switch
image: /local/images/lightsmall.png
style:
left: 15%
top: 63%
width: 3%
tap_action:
action: toggle
type: image
- entity: light.roof_livingroom_level
image: /local/images/lightsmall.png
style:
height: 30%
left: 82%
top: 60%
width: 3%
tap_action:
action: toggle
type: image
- entity: input_boolean.dummy1
image: /local/images/lightsmall.png
style:
height: 30%
left: 76%
top: 40%
width: 3%
tap_action:
action: toggle
type: image
- entity: input_boolean.dummy2
image: /local/images/lightsmall.png
style:
height: 30%
left: 48%
top: 90%
width: 3%
tap_action:
action: toggle
type: image
- entity: input_boolean.dummy3
image: /local/images/lightsmall.png
style:
height: 30%
left: 21%
top: 39%
width: 3%
tap_action:
action: toggle
type: image
- entity: input_boolean.dummy4
image: /local/images/lightsmall.png
style:
height: 30%
left: 39%
top: 75%
width: 3%
tap_action:
action: toggle
type: image
- entity: input_boolean.dummy5
image: /local/images/lightsmall.png
style:
height: 30%
left: 39%
top: 42%
width: 3%
tap_action:
action: toggle
type: image
- entity: input_boolean.dummy6
image: /local/images/lightsmall.png
style:
height: 30%
left: 49%
top: 41%
width: 3%
tap_action:
action: toggle
type: image
- entity: input_boolean.dummy7
image: /local/images/lightsmall.png
style:
height: 30%
left: 19%
top: 54%
width: 3%
tap_action:
action: toggle
type: image
- entity: input_boolean.dummy8
image: /local/images/lightsmall.png
style:
height: 30%
left: 49%
top: 68%
width: 3%
tap_action:
action: toggle
type: image
- entity: sensor.multisensor_main_bathroom_temperature
style:
background-color: green
border-radius: 10%
color: white
font-weight: 500
left: 65%
text-align: center
top: 17%
type: state-label
- entity: sensor.multisensor_playroom_temperature
style:
background-color: green
border-radius: 10%
color: white
font-weight: 500
left: 25%
text-align: center
top: 57%
type: state-label
- entity: sensor.multisensor_main_bathroom_relative_humidity
style:
background-color: green
border-radius: 10%
color: white
font-weight: 500
left: 25%
text-align: center
top: 67%
type: state-label
- color: red
color_locked: green
color_type: icon
entity: lock.ytterdorr
style:
left: 48%
top: 67%
width: 6%
type: state-icon
- entity: media_player.living_room_tv
style:
background-color: none
border-radius: 10%
font-size: 10px
font-weight: 500
left: 77%
text-align: center
top: 41%
type: state-icon
image: /local/images/houseon2.3.png
type: picture-elements

Nu komer den nedre delen av koden.

lightsmall.png kan du byta till vad du vill. Detb är din knapp. Du kanske ser att det är olika % under style. Detta är var bilden placeras. Du kommer behöva växla till panel mode off, sitta och testa dig  fram tills den är på rätt plats. Inte så svårt.

- entity: input_boolean.dummy2
    image: /local/images/lightsmall.png
    style:
      height: 30%
      left: 48%
      top: 90%
      width: 3%
    tap_action:
      action: toggle
    type: image

Bonus

Det sista är lite olika sensorer. Kikar du nedan ser du att det är en state-label. Den visar temperaturen i badrummet.

- entity: input_boolean.dummy2
    image: /local/images/lightsmall.png
    style:
      height: 30%
      left: 48%
      top: 90%
      width: 3%
    tap_action:
      action: toggle
    type: image

Du kanske även ser en TV. Jag har en LG och slår man på Netflix kommer bilden byta. Man skulle kunna rendera en egen bild med en upplyst TV men har inte riktigt orkat göra detta.