What did you use to create this floorplan ?
I used CorelDraw X8 … export as *.svg, then imported into Inkskape to play with object layers and names. Now I’m doing it in Sweet Home 3D, to obtain the 3D look as our coleague above. It’s easy to work with, free, and has hundreds of already made objects like furniture and doors and house appliances … etc. Can be found here :Sweet Home 3D and it has a nice presentation / animation right on the front page !, just click play and enjoy ! Hope it helps. 
3 Likes
And you sir are good!!!
Do you mind sharing with us on how you got that theme?
Thank you.
maybe i’ll get to make a quick ‘how to’ soon, but it’s really not that complicated.
the tables with the buttons and the image of the apartment are one layer (as mentioned befor made in cinema 4d and illustrator but can probably be achieved using any other 3d software and inkscape).
for lighting up the rooms i just drew paths around the outline of each room and filled it with black. I gave these 50% opacity so it looks darker when lights are off and 0% when on, and that’s basically it.
Same goes for the buttons, they are images of buttons i drew up and arranged in illustrator. There are always two images on top of one another, the top one is the actual button that has 100% opacity when off and 0% when on, revealing the underlying image with the colored rim. Then just linked the top *png buttons to their home assistant entities.
As far as the theme goes, i just drew some buttons and colors i liked (and mostly what came up when i googled dashboards).
3 Likes
Looks really nice! Great application of the Floorplan. I toyed with the 3d environment (I have my house modeled in Sketchup already) but it didn’t work with the number of elements I have on my screen.
Super awesome Job though!
1 Like
I really like the top Date circle and the bottom Home icon. Don’t be surprised if that shows up in my SVG eventually. 
Actually, your implementation was the inspiration for me to do it. I saw your layout and really thought it would be great for my wall mounted installation.
You can download my svg, I also decided to share my configuration since your installation was so helpful to mine. Maybe you can figure out how to make it work directly. Right now I’m using the web link component which first opens a state card.
2 Likes
I’m still yet to get into Floorplan, but Homestyler could be another alternative for easy floor plan layout, 3D, and renderings. I’m just not sure if the output file format is appropriate.
Could you please share how to do this. Fading would be a nice touch after motion is detected.
Sure.
In my “floorplan.css” I have defined my classes for motion:
`/* Motion */
.motion-off {
fill: #FFFFFF !important;
}
.motion-on {
fill: #FFE6E6 !important;
}`
In my “floorplan.yaml” I have defined the entities:
- name: Binary sensors
entities:
- binary_sensor.living_eye_sensor
- binary_sensor.bedroom_eye_sensor
- binary_sensor.kitchen_eye_sensor
- binary_sensor.bathroom_eye_sensor
- binary_sensor.hallway_eye_sensor
states:
- state: 'off'
class: 'motion-off'
- state: 'on'
class: 'motion-on'
state_transitions:
- name: On to off
from_state: 'on'
to_state: 'off'
duration: 2
- name: Off to on
from_state: 'off'
to_state: 'on'
duration: 1
… observe the “state_transition” part !, that’s what you’re looking for when you desire the fade effect. By writing different values in the “duration” fields, you can fade entities faster or slower.
… off topic:
I’ve added some “pendants” on the right, just to give me a rapid/quick overview as how many lights / motion areas / wall plugs are ON. Instead of searching through the house, looking for small things, I now have a quick way of seeing how many of each are ON. If someone is interested in the syntax of those sensors, i’ll share it here. Also, when you press on the corresponding “pendant” ALL those entities go OFF … for ON, you have to toggle them individually.
Have fun ! … 
16 Likes
That’s really nice! I love the right side toggles.
Thanks man, coming from one of our best, it means a lot to me …
I just finished the AC Unit Modes, have a peek
The small white grill like bars become orange as each of them is a template sensor which becomes “True” as the power drawn rises over its threshold >10W, >50W, >100W, >300W … >700W … etc. (the Power is reported by a Fibaro Wall Plug).
Fan speed is only presumed at first, as it is an IR command sent by a Broadlink Universal Remote, but usually it reaches the unit without problems.
Good luck to you all ! …
8 Likes
Not really a “floorplan”, but the start of a simple remote to be used on a kiosk mode iPhone using floorplan for hass. Icons grabbed off the noun project website.
Will eventually be adding presets for the radio.
4 Likes
That’s an ingenious use of floorplan! I may have to steal this idea for a living room remote tablet.
This is what I have put together so far. Still a work in progress. Took a lot of inspiration from other plans on here.
The weather icon next to the time is animated and clicking on the tv in the bottom left pops out more icons to change the input of the tv.
Have it running on a new fire tablet with Fully Kiosk.
Still on the list is to change the “home button” change the layout of the buttons/scripts on the right hand side, and get the tablet mounted on the wall.
5 Likes
Are you willing to share the code you used to do your tv pop outs? I’m interested in something similar in my remote.
Thanks
Definitely!
In my floorplan.svg I have a separate layer with the ID tv_select_layer that houses the “pop out” buttons. I also have the tv button on the bottom left in the main layer with the ID of tv_select_button.
In my floorplan.yaml I have the following code:
#### ELEMENTS ####
- name: TV Selection
elements:
- tv_select_button
action:
domain: class
service: toggle
data:
elements:
- tv_select_layer
classes:
- layer-visible
- layer-hidden
default_class: layer-hidden
In my floorplan.css I had to add the following:
/* Hide Layers */
.layer-visible {
display: initial !important;
}
.layer-hidden {
display: none !important;
I think that covers everything. Let me know if you have any questions.
3 Likes
Very cool. Thank you!
I’ll try it out and let you know if I have any issues.
1 Like
