Share your Floorplan


#537

Hey! What did you used to create the floor plan?


#538

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


#539
  1. Each room with motion triggered, fades its floor in light red

Is this true? How did you do it?


#540

Hey! Would you mind sharing the irobot animation?


#541

Would you mind share how do you hide and make visible a layer when clicking on a light? Thanks


#542

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

#543

@ 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!


#544

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) ;
}


#545

Would you mind sharing your sensor.monica_cleaner_state?

Thanks!


#546

configuration.yaml:

> sensor:
>    ### Xiaomi Vacuum ###
>   - platform: template
>     sensors:
>       monica_cleaner_state:
>         friendly_name: "Stofzuiger Monica Status"
>         value_template: "{{ states.vacuum.monica.attributes.status }}"

#547

Hi @gianm,
Please tell me known the size of main image.


#548

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? :slight_smile:


#549

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 ?


#550

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.


#551

Hey @DonNL sorry a noob here. How do I modify the movement codes and where shall I do that?


#552

animation are controlled by the floorplan.css file


#553

You need to modify the part I posted for Floorplan.css below #animation, like lerroy said.


#554

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!


#555

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?


#556

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.