After hours and hours, questions 
(Thank you all), the project is complete.
In the video, you can see the design I made for the house, including separation of the floors for ease of use.
what do you think?
16 Likes
Really nice! well done.
That is amazing. If i had something like that it would definitely get the Wife Approval Factor up pretty high.
What did you use to create the floorplan?
Beautiful renderings and attention to detail. Is the outside view your “real view” of the city?
I have a - sensor.temperature_158d00022c8b2b . When this is between some values i want to change the colour of a circle around it. My circle ID is kleurdressing
so in floorpla.yaml I need something like this I think ?
if (temp < 15)
return "temp-in-very-low";
else if (temp < 19)
return "temp-in-low";
else if (temp < 21)
return "temp-in-good";
else if (temp < 24)
return "temp-in-high";
else
return "temp-in-too-high";
'
and this in my css
.temp-in-very-low {
fill: #9bdbeb !important;
fill-opacity: 1 !important;
}
.temp-in-low {
fill: #07da8d !important;
fill-opacity: 1 !important;
}
.temp-in-good {
fill: #54dc49 !important;
fill-opacity: 1 !important;
}
.temp-in-high {
fill: #dc5e49 !important;
fill-opacity: 1 !important;
}
.temp-in-too-high {
fill: #b01e06 !important;
fill-opacity: 1 !important;
}
What next ?
one way is just make a template sensor of your temperature sensor, then use that entity_id for your circle, and of course have what you have in floorplan.yaml for that template sensor.
1 Like
I might have missed in in this long topic; but how can you enable choosing light / brighess / temp / etc by lights?
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
action:
domain: homeassistant
service: toggleIn my automation f.e. I’ve got
- action:
- data:
brightness: 116
rgb_color:
- 255
- 169
- 84
service: homeassistant.turn_onHow can I make this happen in the floorplanner?
How did you accomplish this? Do you toggle / link the floors to the button in the SVG or do you give the toggle button a class and link that in HTML /CSS?
Sorry for the delay.
Thanks!
It isn’t the exact view but it’s pretty close.
This is still a work in progress. Clicking the music icons loads a group of controls to play Spotify, the red lock controls my security system. Turns green when disarmed and flashes while between states. The Octopus shows the stats of my 3D printer. Turns green when the printer is on.
Under Home Theater, clicking the remote turns on the TV and defaults to FireTV. Clicking the other 4 boxes switches to those inputs. For Some reason the STB text on the 4th box disappears but I can see it in inkscape. The remote turns blue when the TV is on.
Under presets, the first shows a Hass card of all scripts. The second does the same for scenes. The bottom row shows Hass cards for Zwave battery levels, automatons, zwave device status, system info, and USB info. The temp is the living room temperature from the motion sensor.
Pretty much most of these just opens a state or group card from Hass just as it would show up normally. Don’t know of a way to make the cards look more elegant in floorplan.
On the actual floorplan, clicking the lights makes them light, the fan will turn to orange and spin. The motion flashes red, etc. Pretty standard to what has been seen here.
I still have to make the downstairs and somehow make the upstairs layer hide.
Also, in the bottom left, I have presence detection working in Hass. I’ve made Bitmoji’s of me and my wife. I want the characters to display the specific images depending on where we are (work, home, store, etc). I have each emoji as a sperate image. Just not sure how to change the opacity on each image depending on what the actual presence detection in Hass says. This is what I’m currently stuck on if anyone has any advice? Thanks
5 Likes
Hey how are you doing the weather forecast? Looks amazing, share svg? 
Amazing!
Can you share the code how you implemented it in HA?
Ok here is mine. Created the jpg on floorplanner.com and overlayed .svg in inkspace. It is a work in progress, but so far I like it.
4 Likes
Not as fancy as many other ones I’ve seen here but this is mine for now, chnages daily but here is where I am with it. Thanks to this thread for lots of inspiration.
1 Like
And here is my first try of a floorplan. It’s all about roomclimate and ventilation. The tiles change color to yellow or red, to indicate whether it is a good idea to ventilate or not. In the background I’m calculating the absolute humidity value for the rooms, the outside and the values for “after ventilation”. Also the radiators change color depending on the state.
I really like it so far. Loving to play around with this stuff. Big thanks to @pkozul for his work!
7 Likes
Hello systnworks.
Good idea to appear/disappear car based on presence detection. How have you do it? I read to modify css but i don’t know how: can you explain us your solution?
Thanks and best regards!
Hi, sorry for the delay replying to this, I dont make it onto this site as often as Id like.
In my floorplan.css file I added this:
.visible {
opacity: 100 !important;
}
.invisible {
opacity: 0 !important;
}
And in my floorplan.yaml file I set the corresponding device tracker entities (that the car images represent):
- name: Device_Trackers
entities:
- device_tracker.xxx1
- device_tracker.xxx2
states:
- state: 'home'
class: 'visible'
- state: 'not_home'
class: 'invisible'
So basically my device tracker states are:
home = visible = opacity 100%
not_home = invisible = opacity 0%
1 Like
After playing with Floorplan a very long time this is my final setup:
It is designed for touch. Monstly it is only for information and if you touch a room the light will toggle.
1 Like
So awesome floorplans here and hope some day i have even 1% that talent to do floorplans 
My first floorplan start looking something, not pretty but get different things works what thinked. Now try to find how i can use *.png format buttons and can change button with entities “state”. Like i now change svg objects color.
