Floorplan for Home Assistant

Awesome, that solved it! Now i got another error… in the iu floorplan panel I´m now getting “Error loading stylesheet”

Failed to load resource: the server responded with a status of 404 (Not Found)

Image and Stylesheet location need to be changed back to default

      image: /local/custom_ui/floorplan/floorplan.svg
      stylesheet: /local/custom_ui/floorplan/floorplan.css
1 Like

Thanks man, that fixed everything!

cant thank you enough!!


Is anyone using a “button” which has no state to control something else? I am going to add a small relay to my garage door opener using mysensors

The thing is I would prefer that to present itself as just a “button” without a state because I don’t care if the door is open or closed using that device as I have a separate door sensor on it. By calling it a switch then it looks like the pic in the following post

Its not the end of the world if it looks like a toggle switch although it will be slightly misleading. So just wondering if anyone else has implemented something similar in HASS and how you built that into Floorplan (eg. If you kept it as a switch did you just have the same CSS for the two states?)

Is it possible to create multiple floorplans? For example, if I want my kids to only have access to stuff in their room from the panel in their room, how would I go about setting that up? I saw that there was a mention of multiple floors, but there there was nothing about setting that up and I’m not sure that would actually apply to my situation anyway.

1 Like

Is there a way to make an icon respond to the mouse scroll-wheel?

I’m thinking of a single icon for volume control / light brightness.

Not yet. Feel free to implement one and do a pull request tho :slight_smile:


1 Like

You can’t secure your floorplans like that. You still have only one password for your HA webpage. But you can easily copy the appropriate files to make a second floorplan. You can see how I did it in my github repo. I have one real floorplan. And another one called services. Feel free to ask if something is not clear.


1 Like

Thank you!! Going to check it out now!

Are these the only 2 lines you have to change in the services.html file in /panels?

<link rel="import" href="/local/custom_ui/floorplan/ha-floorplan.html" async>

<dom-module id="ha-panel-services">

and do you have a separate services.yaml file, or is it all in floorplan.yaml?

I have a separate services.yaml (as can be seen here and here). So one in the config root to refer to from the one in the custom panel.

PS: Don’t change that link tag as it includes the ha-floorplan.html which includes all the javascript and stuff. Also the dom-module id should start with ha-panel prefix but the name is not really important.


OK… I see where you have that all buried now. One more question… the binary_sensor for Floorplan. Do you have 2 of them, 1 for each? I only see 1 item in your binary_sensors.yaml and it’s not for floorplan at all.

I am not sure what you mean with binary sensor. If I recall correctly my binary sensors are xiaomi motion detectors. Those have nothing to do with the floorplan besides the fact that they get shown there.


That’s right… it’s just a dummy sensor for the state card, not the custom panel. Ignore last post please :slight_smile:

1 Like

Would anyone know if it is possible to do two things with one entity_id? Let me give an example of what I mean to clarify.

I know that by attaching an entity _id to to a text element in my floorplan.svg I can through the floorplan.yaml and floorplan.css files change the text or change the color of the text based on if that entity is ‘on’ or ‘off’ (a door sensor as an example).
yaml file:

  • name: SDoor
    - binary_sensor.visonic_mct340_e_0b239ff0_1
    text_template: ‘${(entity.state === “on”) ? “Sliding Door-Open” : “Sliding Door-Closed”}’
    - state: ‘off’
    class: ‘drclosed-text’
    - state: ‘on’
    class: ‘dropen-text’

CSS File: (changes text color based on door sensor)
.drclosed-text {
fill: #FFFFFF !important;
fill-opacity: 1 !important;

.dropen-text {
fill: #FF0000 !important;
fill-opacity: 1 !important;

I also know I can attach an entity_id to a box (Rect) in my svg file and do the same. So in the text example if the door sensor opens or closes the text will signify ‘open’ or ‘closed’ and change text color. In the box example if I have a light entity_id attached I can have that light turn on or off by clicking the box and have the box change colors to signify it’s ‘on’ or ‘off’.

Here is what I would like to do. I want to take an entity, in my case a light and attach it to a box (Rect) so that I can click on the box and have the light turn on or off. I also want to have that box fill a certain color depending if the light is on or off and have text vary also if the light is on or off. I think there is a way to combine or flatten the text and the box together but I am not sure if that solves my problem because I am not sure what the css or yaml file entry would look like to designate the color of the box versus the color of the text

My dilemma is I can only attach the entity to either the box or the text but not both. How can I attach the entity to either the box or text and by clicking one of them the other also updates? Hopefully this is makes sense and it’s a simple solution that I am just over thinking.

I haven’t tried this but can’t you group the two (in the svg) and apply the entity_id to the group?

I thought of that but I am not sure how the floorplan.yaml and floorplan.css file entries for it would be. I can probably vary the color but wasn’t sure how I would change the text.

Hmm if you only wanted to change the colour of the text/box I think it would work, but not the actual text :frowning:

Hello - I’m running into a problem when I view my floor plan panel, I keep getting the following error Uncaught ReferenceError: moment is not defined
URL: http://hassio.local:8123/local/custom_ui/floorplan/ha-floorplan.html
Line: 449, column: 48
Error: {}


Uncaught ReferenceError: moment is not defined
URL: http://hassio.local:8123/local/custom_ui/floorplan/ha-floorplan.html
Line: 140, column: 36
Error: {}

I’ve checked that I’ve placed all of the documents where they below and may the proper changes, but I’m sure I’m missing something. Any idea of what is causing this error?

In my install, on lines 449 and 140 of ha-floorplan.html there are no references to “moment”. Can you check if you have the latest version from the repository?