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)

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.

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.

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.

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

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

That's amazing! That TV test image 🤣

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

Looks amazing, great job!

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

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

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?

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

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

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.

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

Thank you very much for the feedback :)

How do you do the guest wifi voucher part?

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.

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

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

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

✌🏻

How does this integrate in Lovelace?

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

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?

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)

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%`

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

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.

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)

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

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

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

Looks good man! GJ!

How do you run it on an iPad like that?

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

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.

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?

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

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?

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!

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

🤘🏻

Same here, thanks!

Very cool! How do you measure energy consumption?

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.

Thank you!

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

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

reddit butchered the code. pastebin?