Hey! What did you used to create the floor plan?
Here is mine
Battery symbol shows a little lightning bolt when the car is charging, empty space below the 100 (car charge level) it is to show time-to-charged of the car.
I have defined zones for most of the common areas we go to, so when wife is at her parents, the display will show “Parents place”.
- Each room with motion triggered, fades its floor in light red
Is this true? How did you do it?
Hey! Would you mind sharing the irobot animation?
Would you mind share how do you hide and make visible a layer when clicking on a light? Thanks
1 Like
I don’t have to much time to explain in detail, but here is my picture-elements card for the floorplan. I have an image for the whole floorplan in the OFF state and each room have his own png in their ON state and a transparent png for the OFF state of each room. I just switch the image depending of the state.
- type: picture-elements
image: /local/main_off.png
elements:
- type: image
entity: light.dinning_table
tap_action: toggle
state_image:
"on": /local/rooms/dinner_table.png
"off": /local/transparent.png
style:
top: 26.0%
left: 34.4%
width: 24%
pointer-events: none
- type: image
entity: light.hallway
tap_action: toggle
state_image:
"on": /local/rooms/hallway_on.png
"off": /local/transparent.png
style:
top: 36.8%
right: -22%
width: 50.6%
pointer-events: none
- type: image
entity: light.stairs
tap_action: toggle
state_image:
"on": /local/rooms/stairs.png
"off": /local/transparent.png
style:
top: 21.8%
right: -11.5%
width: 32%
pointer-events: none
- type: image
entity: light.kitchen
tap_action: toggle
state_image:
"on": /local/rooms/kitchen.png
"off": /local/transparent.png
style:
bottom: -1.0%
left: 36.2%
width: 21.5%
pointer-events: none
- type: image
entity: light.living_room_2
tap_action: toggle
state_image:
"on": /local/rooms/living_room_central.png
"off": /local/transparent.png
style:
bottom: -18.6%
left: 14.2%
width: 24.26%
pointer-events: none
- type: image
entity: group.living_room_hue
tap_action: toggle
state_image:
"on": /local/rooms/living_room_hue.png
"off": /local/transparent.png
style:
bottom: 6%
left: 17.3%
width: 18.65%
pointer-events: none
Notice that I added pointer-events: none in order to dont affect my toggles on each room. Here is how the toggles look (the bulbs on my floorplan)
### TOGGLES
- type: image
entity: group.living_room_hue
tap_action: toggle
state_image:
"on": /local/entity/light_on.png
"off": /local/entity/light_off.png
style:
bottom: 6%
left: 17.3%
width: 6%
opacity: 0.7
- type: image
entity: light.dinning_table
tap_action: toggle
state_image:
"on": /local/entity/light_on.png
"off": /local/entity/light_off.png
style:
top: 29%
left: 36.4%
width: 6%
opacity: 0.7
- type: image
entity: light.hallway
tap_action: toggle
state_image:
"on": /local/entity/light_on.png
"off": /local/entity/light_off.png
style:
top: 44.8%
right: 41%
width: 6%
opacity: 0.7
- type: image
entity: light.stairs
tap_action: toggle
state_image:
"on": /local/entity/light_on.png
"off": /local/entity/light_off.png
style:
top: 16.8%
right: 4.5%
width: 6%
opacity: 0.7
- type: image
entity: light.kitchen
tap_action: toggle
state_image:
"on": /local/entity/light_on.png
"off": /local/entity/light_off.png
style:
bottom: 23%
left: 38%
width: 6%
opacity: 0.7
- type: image
entity: light.living_room_2
tap_action: toggle
state_image:
"on": /local/entity/light_on.png
"off": /local/entity/light_off.png
style:
bottom: 46.4%
left: 19.2%
width: 6%
opacity: 0.7
- type: image
entity: light.basement_hallway
tap_action: toggle
state_image:
"on": /local/entity/light_on.png
"off": /local/entity/light_off.png
style:
bottom: 53.4%
left: 68%
width: 6%
opacity: 0.7
- type: image
entity: light.entry_exterior
tap_action: toggle
state_image:
"on": /local/entity/light_on.png
"off": /local/entity/light_off.png
style:
bottom: 43.4%
left: 96%
width: 6%
opacity: 0.7
- type: image
entity: light.deck_exterior
tap_action: toggle
state_image:
"on": /local/entity/light_on.png
"off": /local/entity/light_off.png
style:
bottom: 64.4%
left: 3%
width: 6%
opacity: 0.7
1 Like
@ gianm Could you please share your light_on.png and light_off.png files? I found some free ones but they look absolutely horrible. Everything else you shared works great, thanks!
Hey Javier, nice looking floor plan!
Here’s the vacuum code:
Floorplan.yaml:
- name: Vacuum entities: - sensor.monica_cleaner_state states: - state: 'Paused' class: 'vacuum-paused' - state: 'Idle' class: 'vacuum-paused' - state: 'Docked' class: 'vacuum-complete' - state: 'Charging' class: 'vacuum-complete' - state: 'Cleaning' class: 'vacuum-busy' - state: 'Zoned cleaning' class: 'vacuum-busy' - state: 'Returning home' class: 'vacuum-returning'
floorplan.css:
/* Robot vacuum */
.vacuum-busy {
fill: #2aa937 !important;
-webkit-transform-origin: 50% 50%;
-webkit-animation: cleaning linear 20s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
}
.vacuum-paused {
fill: #ffdf59ff !important;
-webkit-transform: translate(130px,300px) scaleX(0.58) scaleY(0.58) ;
}
.vacuum-returning {
fill: #2b5659ff !important;
-webkit-transform-origin: 50% 50%;
-webkit-animation: returning_home linear 2s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
}
.vacuum-complete {
fill: #2b5659ff !important;
}/* The animation code */
@-webkit-keyframes returning_home {
0% {
-webkit-transform: translate(155px,170px) scaleX(0.58) scaleY(0.58) ;
}
100% {
-webkit-transform: translate(155px,199px) scaleX(0.58) scaleY(0.58) ;
}
@-webkit-keyframes cleaning {
0% {
-webkit-transform: translate(155px,199px) scaleX(0.58) scaleY(0.58) ;
}
5% {
-webkit-transform: translate(155px,160px) scaleX(0.58) scaleY(0.58) ;
}
20% {
-webkit-transform: translate(35px,160px) scaleX(0.58) scaleY(0.58) ;
}
30% {
-webkit-transform: translate(35px,65px) scaleX(0.58) scaleY(0.58) ;
}
35% {
-webkit-transform: translate(10px,65px) scaleX(0.58) scaleY(0.58) ;
}
60% {
-webkit-transform: translate(10px,230px) scaleX(0.58) scaleY(0.58) ;
}
70% {
-webkit-transform: translate(70px,230px) scaleX(0.58) scaleY(0.58) ;
}
80% {
-webkit-transform: translate(70px,160px) scaleX(0.58) scaleY(0.58) ;
}
90% {
-webkit-transform: translate(155px,160px) scaleX(0.58) scaleY(0.58) ;
}
95% {
-webkit-transform: translate(155px,199px) scaleX(0.58) scaleY(0.58) ;
}
100% {
-webkit-transform: translate(155px,199px) scaleX(0.58) scaleY(0.58) ;
}
1 Like
Would you mind sharing your sensor.monica_cleaner_state?
Thanks!
configuration.yaml:
> sensor:
> ### Xiaomi Vacuum ###
> - platform: template
> sensors:
> monica_cleaner_state:
> friendly_name: "Stofzuiger Monica Status"
> value_template: "{{ states.vacuum.monica.attributes.status }}"
1 Like
Hi @gianm, in your screenshots I see that you have the actual floorplan.png on full width (1 column full page) and under that 5 cards with different width (3 columns). Can you show me your code how to do that? 
Hello @DonNL thanks for sharing this.
Quick question do I have to do anything to my svg file to incorporate my Xiaomi vacuum? Or do I just copy your code above and expect the vacuum to move on my floodplain when it is cleaning ?
Hey bachoo,
I think you should be good if you add these codes. Just make sure that in your svg Floorplan, the icon you wish to use (that moves around) matches names.
You probably need to modify the movement codes (translate). Just add lines one by one how you’d like it to move around.
animation are controlled by the floorplan.css file
1 Like
You need to modify the part I posted for Floorplan.css below #animation, like lerroy said.
1 Like
Hi Dan, I was hoping you could maybe give me a sense of direction.
I’m trying to do this in Lovelace.
I used sweethome 3D, after rendering the floor plan with the lights it really seems to downgrade the quality of the image, it looks great before adding the lights.
So question 1.
Any recommendations on proportions and lens before saving? Also should I save as a png to use in Inkscape?
Question 2. In Inkscape, I can select (f4) with the box, but using (f2) + (control +c) it doesn’t give me straight lines all curved edges, so it makes it difficult to get the exact room dimensions. I’m sure I’m not selecting something properly.
Question 3. After getting the room properly selected I hit (control + Shift + L) I name it whatever my light or groups name for that particular room (ie; group.kitchen) and then I hit (Control + Shift + O) and then I export that to a png? Is there something else I need to do? Start a new layer or something? Do I just keep going along each room this way until every room is boxed out, saving each one as a layer? Inkscape is a bit confusing at the moment.
I did get one room to show but it’s not in the correct spot, and the picture diesn’t Look very good but this is what I have so far.
Any information would be appreciated by anybody!
Thanks guys and have a great holiday!
These are all awesome project and thank you for the inspiration. I am just starting out on the journey to create the floor plan for my home. I had a quick question about using floor plan in Lovelace UI. Are these projects using Lovelace or these are just the floorplans with css to animate/decorate things. If anyone using Lovelace UI, how do you show animations/status for things like door open/close or fan status? I understand that light/switch can be shown by changing the image for on vs off. But has anyone experimented with other animations on Lovelace UI for floorplan?
Sooooo… has anyone figured out the fan rotation animation yet?? I noticed people have had issues with this lately and I have been running into the same issues. My fan just rotates around the entire screen when it’s on.