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
That code worked great. Thanks again!
Still lots of tweaking to do, but the basic concept is solid.
** EDIT: I forgot to add. If any knows how to get rid of or use that white space at the bottom, please let me know. It’s the space where the header “would” be, but I have it hidden.
Thanks!
1 Like
Is your floor plan the size of your phone screen? My plan fills up the Kindle Fire I’m using it on completely but I’ve explicitly set the size of the canvas area = resolution of Kindle Fire…
Yes, it is. If I try to make it any taller, it starts to scale and the side margins are no longer correct. I know that space is where the header “would” be if I was showing it, but safari must do something weird with the way it’s being hidden.
You can actually turn off the cursor when using the touch screen. If that is something you’d like to do:
I went out and brought a raspberry pi screen, but am having trouble with the plan fitting the screen and leaving space around the edge.
How did you get the background colour?
Hi all
Can anyone give me pointers on adding 90 degree door rotations ?
So far I’ve successfully been able to change the color of the door with my sensor action, have tired a few ideas i pulled from some posts but didn’t have much luck 
thanks
floorplan.css
/* Animation */
@keyframes rotate90 {
100% {
transform: rotate(90deg);
}
}
@keyframes rotateReset90 {
0% {
transform: rotate(90deg);
}
100% {
transform: none;
}
}
/* Doors that open to the top left */
#DOMAIN\.DOOR1 {
transform-origin: top left;
}
/* Doors that open to the bottom right */
#DOMAIN\.DOOR2 {
transform-origin: bottom right;
}
.door_closed {
fill: #008000 !important;
animation-duration: 4s;
animation-name: rotateReset90;
}
.door_open {
fill: #ff0000 !important;
animation-duration: 4s;
animation-name: rotate90;
animation-fill-mode: forwards;
}
floorplan.yaml
# DOORS #
- name: Doors
entities:
- DOOR1
- DOOR2
states:
- state: 'off'
class: 'door_closed'
- state: 'on'
class: 'door_open'
you might have to change the degree to fit your needs.
~Cheers
4 Likes