Share your Floorplan


I upgraded to the latest version of HASS and it seems like my animations have stopped working for my lights. I can still click on the icons to toggle the lights but the colour doesn’t change anymore. It worked before the update and I haven’t changed anything. Are there any breaking changes to be aware of?

Also, I can have the floorplan background change with the active theme using:

svg, svg * {
  pointer-events: all !important;
  background-color: var(--primary-background-color);

But when I try to set a specific background colour, it doesn’t work and shows the default white, any ideas?

svg, svg * {
  pointer-events: all !important;
  background-color: var(–variable-name, #37464f);


I tried quite a lot of open source IoT platforms over the last year. So far this seems to be the most versatile and the most reliable. It is actually the only one that has a highly configurable floor plan option that that I envisioned when I started my home automation project. ( attention:this is an unheated country house over the winter, so low temps gathered inside :). Plus: some of the onsite sensors don’t work yet, but I couldn’t help it to share it ).

Otherwise, what I couldn’t figure out so far, is how to update all switches or all cameras states if I have centrally command for switching on/off all light or all cameras. maybe some scripts will solve it.

grate work you have done with this component.


My current setup (imgur version is animated)


Floor plan generated with Floorplanner, switches are black rectangles at 50% opacity when lights are off and hidden when lights are on.


Does anyone know how to turn a Chromecast TV on and off, and ideally display some kind of state on the floor plan?

I tried using service: toggle and that can turn the TV on, but clicking it again switches the state to idle instead of turning it off.


Created in Sweethome 3D. Used black room sized shapes to overlay the rooms, using opacity on the css to create the on/off effect.


Amazing work guys @Dan_Nuttall @poebae !

I bought Sweethome 3D and started a 3D plan of my home too just haven’t had the time to finish it. I’ve been reading this thread off and on but don’t understand just yet how to add the layers and CSS. From what I understand once the svg of the 3D floorplan is created, you need to use Inkscape and build layers?? Is there a particular step by step guide you guys used to save me a bit of time? Not that I’m usually lazy, just the last month or so I’ve been super busy and reading hundreds of posts over doesn’t appeal much to me. Thanks!


You only need to build layers in Inkscape if you’re using multiple floors. Check out this thread. Otherwise all you need to do is create objects that correspond to the entities you’ve listed in your floorplan.yaml e.g. a light bulb icon with object id ‘light.bedroom’, or in my case black rectangles with the object IDs of the lights they represent.

If you’ve installed floorplan correctly you should already have custom_ui/floorplan/floorplan.css and you just need to modify it. If you need more specific help give us a look at your config and floor plan.


Yeah it’s actually easier than you may think. After building my home in sweethome 3d I exported it as an image (with lights on!). I then imported that image into inkscape and drew black shapes over my rooms. To do this start off drawing a black rectangle with appropriate tool (F4), then select that shape with the Node tool (F2) and hit CTRL + K - this then allows you to drag the points around to create the exact shape of your room. You then put that shape on its own layer (CTRL + SHIFT + L opens the layers panel), and then give that shape the ID of your light or group of lights within the Object Properties (CTRL + SHIFT + O). This is what my SVG looks like in inkscape. You can sort of tell the outline of my rooms:

Assuming you have installed floorplan (I went down the panel route), all you need to do is upload your SVG, edit the floorplan.yaml file so that IDs you gave your room shapes are listed. e.g. this is all I have under the “groups:” section in my yaml:

- name: Lights     
    - group.living_room
    - light.hall_light
    - group.bathroom_light
    - light.bedroom_light
    - group.office_light
    - light.landing_light
    - state: 'on'
      class: 'light-on'
    - state: 'off'
      class: 'light-off'
    domain: homeassistant
    service: toggle

Finally you just amend the CSS for the light-on / off. e.g. this is all I changed within my CSS file:

.light-off {
  opacity: 0.5 !important;
  transition: opacity 1s;

.light-on {
  opacity: 0.0 !important;
  transition: opacity 1s;

And that is it. Took quite a bit of trial and error to get to this point though cause I had never used inkscape or sweethome 3d before. Don’t think I missed anything out there. Give me a shout if you need any more assistance.


Perfect! This is great. Will give it a try this weekend. Thanks to both of you for the point in the right direction. Really appreciate it! @Dan_Nuttall @poebae


Hello there! I also encountered a button that cannot be rotated in the center, but I do not know how to solve it.
This is my css
#switch.switch12 {
transform-origin: center;

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

.fan-off {
fill: #424242 !important;


  • name: Fan
    • switch.switch12
    • state: 'off’
      class: ‘fan-off’
    • state: 'on’
      class: ‘fan-on’

#And svg
ID of my button

After all settings are made, my button still cannot work in the center. How to set the /Y /X/ axis correctly?


Hello I tried to press your method, but it always failed. Can you provide yours? Svg, yaml, css. thank you very much!



thank you for your reply! The corresponding problem has been solved!


Hello, I wrote your method, but it didn’t work. Is it possible to provide you with a complete ha-floorplan.html, svg, css, or file for my reference? thank you very much



Thank you very much, because I follow the example of your github, and he actually can’t work normally. So I would like to refer to your complete example to modify my own svg, ha-floorplan.html, css, yaml, etc. code! Thank you very much, and look forward to your sharing!


If you can, I hope you can provide the next, complete ha-floorplan.html, svg, css, documents. thank you very much


If it is not convenient to send to the forum, you can send it to my email address: [email protected]


Do not use the github example, use the example in link by @monkey-house. If you have trouble, check the comments from his solution to the bottom, then you should make it work. If you still have problems after you tried all that, I can send you the Javascript and ha-floorplan.html. But everything you need is in the link.


@poebae can you please share your svg file i.e. of your floorplan. Your layout is very similar to mine and I just need a little tweaking.