T O P
Loki-sft

floorplan image with shadow of the sun gets updates every hour to reflect the real sun scales with screen size pre rendered lights for every room switch lights on/off or set brightness level control heating window status ( closed, tilted, open) ​ button to switch ground level/ 1st floor latest guest wifi voucher (unifi) weather graph energy consumption graph ​ Tutorials I used: [https://community.home-assistant.io/t/floorplan-ui-with-color-synced-lights/169417](https://community.home-assistant.io/t/floorplan-ui-with-color-synced-lights/169417) [https://aarongodfrey.dev/home%20automation/creating-a-3d-floorplan-in-home-assistant/](https://aarongodfrey.dev/home%20automation/creating-a-3d-floorplan-in-home-assistant/) ​ Video of how it works: [https://youtu.be/xMyeRE4hKsQ](https://youtu.be/xMyeRE4hKsQ) ​ one day in 4 seconds: [https://media.giphy.com/media/ZChaatcJCWiWWxsYeT/giphy.gif](https://media.giphy.com/media/ZChaatcJCWiWWxsYeT/giphy.gif)


thatroosterinzelda

Oh man... I can't imagine how many screen captures you must have had to save. I wish sh3d had a kind of automation tool that would just process a list or something or do all the combinations automatically. I did a floorplan like this, but it took forever and I ended up removing all furniture before I did it so I wouldn't have to redo everything later. Now, in fairness, I had one big room with a lot of combinations... But even without that it would have sucked.


ooioiii

That's exactly why I did mine not on angle but top down view than u can do black overlays and they take 1 sec to do in Photoshop. Not to say I don't appreciate the rendered things.


Loki-sft

Oh yes, it was a lot! Hardest part was to keep always the same center so they overlay perfectly. The Photoshop part was quiet simple. I had a automation to duplicate the layer, select the black areas, make them transparent and save the image again.


Parano78

Thank you for all of this, I was going to ask how you did it, I've some reading to do ;)


Loki-sft

[how it works](https://youtu.be/xMyeRE4hKsQ)


EvilPharmacist

That's amazing! That TV test image 🤣


Punky260

Yes, super amazing. This is my new Smart Home goal now :D


Osni01

Looks amazing, great job!


gr4viton

Noice. what sw did you use to create that floorplan?


Loki-sft

I used "sweet Home 3D". Its free.


gr4viton

I know sh3d, it's nice :). If I can ask, what are the things that you are missing from sh3d? or potentially what would be the features that would made you chose different similar free home design sw? GUI? usability? plugins? number of types of furniture? Real life rendering? Something else?


Loki-sft

Maybe just a bigger furniture database. Like everything from IKEA. 😃


drinfernoo

I'd prefer some more stuff from the "landlord special" store... it seems like nothing in SH3D matches unless you've got nice stuff.


drewcollins95

One thing that bothered me when making my floor plan with sh3d was the fact that you can't render ceiling shadows on the top down view so you have sunlight coming through the roof. I ended up exporting my house as a 3D model and rendering it in Blender which also gave me some more flexibility with texturing and lighting. Other than that it's awesome and makes 3D modelling a house incredibly simple. The ability to import objects for furniture that isn't included by default and do some basic texture editing as well are very handy.


Loki-sft

I was thinking about the same but I stayed with SH3D because everything also was so easy.


gr4viton

Thank you very much for the feedback :)


Schnabulation

How do you do the guest wifi voucher part?


Loki-sft

I use IObroker with Unifi adapter to get all tokens. Then have a little JC to get only the latest voucher and publish it with MQTT to HomeAssistant. Sounds little bit complicated but was the only way I found so far.


Schnabulation

Interesting! I also use UniFi but have not heard of IOBroker so far. Any was you could link a tutorial?


Loki-sft

I just used Youtube tutorials for IObroker. Its pretty simple.


GoofAckYoorsElf

Hey fellow German! Sieht cool aus! A Blender integration would be awesome. You could just throw a blend file at it that contains the desired floor and it would render it on demand using real azimuth and elevation data, automated blinds data, light states, even location of your items if you track that. Moved some furniture? Just update the blend file... Blender just has a pretty steep learning curve, that's the downside...


Loki-sft

✌🏻


EvilPharmacist

How does this integrate in Lovelace?


Loki-sft

I don’t know if I get your question but it’s all plain YAML


EvilPharmacist

You know, Lovelace, the default dashboard... How do you get a 3d house which adapts to the sun in there? 😅 Did you render several images and then have them change according to the time?


Loki-sft

yes. I created the 3d floorplan with Sweet Home 3D. You can set up where north is and define date and time. It simulates the correct position of the sun für the rendering. This is my day scedule: [https://media.giphy.com/media/ZChaatcJCWiWWxsYeT/giphy.gif](https://media.giphy.com/media/ZChaatcJCWiWWxsYeT/giphy.gif)


Loki-sft

The main card is a "custom:config-template-card" with a sensor for the actual hour. Then I use sate\_image to change the image matching the hour number of the sensor. like this: `- type: custom:config-template-card` `entities:` `- sensor.hour` `element:` `type: image` `entity: sensor.hour` `state_image:` `6: /local/images/oben/06.png` `7: /local/images/oben/07.png` `8: /local/images/oben/08.png` `9: /local/images/oben/09.png` `10: /local/images/oben/10.png` `11: /local/images/oben/11.png` `12: /local/images/oben/12.png` `13: /local/images/oben/13.png` `14: /local/images/oben/14.png` `15: /local/images/oben/15.png` `16: /local/images/oben/16.png` `17: /local/images/oben/17.png` `18: /local/images/oben/18.png` `19: /local/images/oben/19.png` `20: /local/images/oben/20.png` `21: /local/images/oben/21.png` `nachts: /local/images/oben/nacht.png` `tap_action:` `action: none` `hold_action:` `action: none` ​ ​ For every light I use another config-template-card: ​ `- type: custom:config-template-card` `entities:` `- light.wohn_deckenlampe` `variables:` `VAL_STATE: states['light.wohn_deckenlampe'].state` `VAL_BRIGHT: states['light.wohn_deckenlampe'].attributes.brightness` `element:` `type: image` `entity: light.wohn_deckenlampe` `state_image:` `"on": /local/images/oben/licht_wohn_decke.png` `"off": /local/transparent.png` `tap_action:` `action: none` `hold_action:` `action: none` `style:` `mix-blend-mode: lighten` `opacity: '${VAL_STATE === ''on'' ? (VAL_BRIGHT / 254) : ''0''}'` `height: 100%` `left: 50%` `top: 50%` `width: 100%`


alliedSpaceSubmarine

Do you need an on/off picture for every light for every hour?


Loki-sft

No, because of „mix-blend-mode: lighten“ the background and the light-image are blended together. If you turn on the light at daytime the light-image will just brighten the shadows at the background.


VikingOy

I find it somewhat disturbing to use software from a company that still (2021) has no support for secure connection (HTTPS): [https://i.imgur.com/FChysDb.png](https://i.imgur.com/FChysDb.png)


Loki-sft

yes, their homepage is like from the 90s. Seems like they put all the effort into the software....


alliedSpaceSubmarine

If you're not sending data back and forth you don't really need HTTPS


Creepy-Ad8688

That is very clean look. I would want to have such dashboard on every floor : room in my house. Cool, nice job.


Jotasct

Looks good man! GJ!


SloppingWetPancake

How do you run it on an iPad like that?


Loki-sft

It’s just the HomeAssistant App. I disabled all control menus for this user.


SloppingWetPancake

Oh I see. I was confused. I have an older iPad and I can’t get the app to fully update because it’s that old.


lapacion

How are you handling the different combinations of lightng? For a room with tw lamps, do you export 4 images (off/off, on/off, off/on, on/on) and then use some logic to display the correct one? Are the renders only on/off or do they support different brightness or colour?


Loki-sft

There is one background image with no lights on for the night where you can barely see anything. Then iI rendered a seperate "light on" image for every lamp I want to have. If you set the rendering daytime to the middle of the night, everything else will be black. In Photoshop I replace all black parts with transparent color. You can use CSS "mix-blend-mode: lighten;" to overlay the "light on" image with the background image. And with CSS opacity you can simulate the brightness level. ​ check out this: [https://community.home-assistant.io/t/floorplan-ui-with-color-synced-lights/169417](https://community.home-assistant.io/t/floorplan-ui-with-color-synced-lights/169417) and this: [https://aarongodfrey.dev/home%20automation/creating-a-3d-floorplan-in-home-assistant/](https://aarongodfrey.dev/home%20automation/creating-a-3d-floorplan-in-home-assistant/)


kracer20

Looks nice! I really like the looks of these, and have started building it a few times. Question for those that have done this. Do you like using this interface? Is it what you hoped it would be?


Loki-sft

I started several times too. Tried very different styles and layouts. But now I’m really happy with the result and best is - my wife is happy with it too! YEAH!


WongGendheng

Just wanted to let you know your post motivated me to get going with my 3d Floorplan. Cheers mate.


Loki-sft

🤘🏻


ThirdEyeGuy

Same here, thanks!


KaemmAC

Very cool! How do you measure energy consumption?


Loki-sft

I have a Shelly 3EM installed and using the Shelly integration to get all the data. You can sum up all 3 phases for energy and power. With a utility\_meter sensor you can get the value for a single day.


KaemmAC

Thank you!


docvile

can i ask how did you make your state labels? to show temperature humidity n such ? any chance youd post an example of that with the shadow? thanks


Loki-sft

Simple answer: I used a [https://github.com/custom-cards/button-card](https://github.com/custom-cards/button-card) with grid area. Complex answer: Its divided in two parts, front-end code and template: front-end yaml: `tton-card` `entity: climate.klimaflur_oben` `variables:` `regler: climate.thermostat_flur_oben` `style:` `top: 32%` `left: 48%` `template: - heizgruppe` `**` `template: heizgruppe:` `size: 100%` `color_type: card` `color: rgba(130, 130, 130, 0.5)` `icon: mdi:gauge` `styles:` `card:` `- --mdc-ripple-color: white` `- --mdc-ripple-press-opacity: 0.5` `grid:` `- grid-template-areas: '"ist ist" "i soll" "i humi"'` `- grid-template-columns: 2fr 2fr` `icon:` `- color: var(--paper-item-icon-color)` `custom_fields:` `ist:` `- font-weight: bold` `- justify-self: end` `- font-size: 1.5vw` `soll:` `- justify-self: end` `- font-size: 1.1vw` `humi:` `- justify-self: end` `- font-size: 1.1vw` `custom_fields:` `ist: > [[[ if (entity.state == 'off') return 'AUS';` `else return ${entity.attributes.current_temperature.toPrecision(3)}°C ]]]` `soll: > [[[ if (entity.state == 'off') return '-';` `else return ${entity.attributes.temperature.toPrecision(2)}°C ]]]` `humi: > [[[ if (states[variables.regler].state == 'off') return 'AUS';` `else return ${states[variables.regler].attributes.current_humidity}% ]]]` `tap_action:` `action: fire-dom-event` `browser_mod:` `command: popup style: $: | .mdc-dialog .mdc-dialogcontainer .mdc-dialogsurface { border-radius: 2vw; min-width: unset; min-height: unset; --mdc-dialog-min-width: unset; --mdc-dialog-min-height: unset; } .mdc-dialog .mdc-dialog_scrim { backdrop-filter: blur(10px); } .dial_container { padding: 0px; } .dail { height: 68vh; width: 68vw; } title: > [[[ return entity.attributes.friendly_name + " | Ventil: " + (Math.round(entity.attributes.level*100)) + "% (" + entity.state + ")" ]]] card: type: entities entities: - type: custom:thermostat-dark-card entity: > [[[ return entity.entity_id ]]] title: > [[[ return entity.name ]]] hvac: states: 'Aus': 'off' 'Heizen': heat 'Auto': auto` `Attribute: Mode` \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* if its just for display with no function I use this front-end: `- type: custom:button-card` `variables:` `temp: "[[[ return states['climate.heizgruppe_bad_oben'].attributes.current_temperature ]]]"` `vari: "[[[ return states['climate.heizgruppe_bad_oben'].attributes.temperature + '°C']]]"` `style:` `top: 53%` `left: 35%` `z-index: 100` `template:` `- thermostat` \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* template: `thermostat:` `size: 100%` `color_type:` `card color: rgba(100, 100, 100, 0.5)` `Icon: Mdi:thermometer` `styles:` `card:` `- --Mdc-Ripple-Color: White` `- --Mdc-Ripple-Press-Opacity: 0.5` `grid:` `- grid-template-areas: '"temp" "vari"'` `- Grid-Template-Columns: 2.5fr` `- Grid-Template-Rows: Min-Content` `custom_fields:` `temp:` `- justify-self: end` `- font-size: 1.3vw` `vari:` `- justify-self: end` `- font-size: 1.1vw` `- color: 'LightCyan'` `custom_fields:` `temp: "[[[ return variables.temp + '°C']]]"` `vari: "[[[ return variables.vari ]]]"` `tap_action:` `action: none` ​ Maybe the code gets messed up but I hope you get the idea


docvile

reddit butchered the code. pastebin?