Share your Floorplan

Third party integrations Floorplan
317

Thanks for the replies @Zepixir and @keithh666

I added this to my floorplan.css (note the animation command is for both fan ON and OFF)

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

#switch\.fan {
  transform-origin: center;
}

.fan-on {
  fill: #ff8a65 !important;
  -webkit-animation: rotation 2s infinite linear;
}

.fan-off {
  fill: #424242 !important;
  -webkit-animation: rotation 2s infinite linear;
}

And this to my floorplan.yaml file:

- name: Fan
  entities:
    - switch.fan
  states:
    - state: 'on'
      class: 'fan-on'
    - state: 'off'
      class: 'fan-off'

And finally the fan object in floorplan.svg has an object ID of switch.fan (set in InkScape).

The only part I can see I skipped is having some sort of dummy switch configured in my HA configuration.yaml file - but since I don’t need to actually switch the fan on/off - as the animation should work in the default OFF state, I was hoping I didn’t need a dummy switch.

Ive seen some amazing 2D and 3D floorplans posted here - and initially tried for a corner 3D view like below (which was so easy to generate in SweetHome3D after I made the 2D floorplan), however due to perspective it made the rooms too small, so decided to compromise with a 3D view orientated like a traditional 2D floorplan.
I will miss out on animated opening doors, but that’s OK. Later I will add a green/red indicator to show if the 2 doors with sensors are open/closed.

https://i.imgur.com/gzlvLWj.png(image larger than 3072KB)

1 Like