How to set up layers for different floorplans

No, that wont work, because you can’t have the button that show the page on the same page the button should show. Ok, this is how it works on my example:

All the buttons is on a layer with another id than page0 to page9. Therefor it will always be visible.
page0 is the default page, which is shown when you go to floorplan in the ui, or refresh your browser. page 1-9 is layers you define yourself.

Buttons with id show.toggle will cycle through all the pages.
Buttons with id show.page1, show.page2 etc, will show the specific layer.
If you want your buttons to hide when you click on them, you could move them to page0, then they will disappear and only the specific layer will be shown. You could then have a button on each layer to go back to page0 if you want.

Remember that changing the name of the layer in inkscape (rename layer) does not work, you need to change the id in the xml-editor in inkscape, and set the id for the layer there.

Now I figured out. Thanks.

Another question. Can be used more then 1-9 pages?

I have not tried this, but if I should guess, you can probably just adjust the number 10 from this line to the number you want, in custom_js.js:

for (var x=0;x<10;x++){
    let page = $(svg).find(`[id="page${x}"]`)
    if (page.length === 1) pages.push(page);

You probably also need to delete your browser cache, due to changing the javascript.

Let me know if it works, but I could be totally wrong as I don’t know javascript at all :stuck_out_tongue:

Thanks. I will try and let you know if it works :slight_smile:

No need. Testet it myself out of curiosity, but didn’t work. It seems to add support to toggle through pages with higher number, but can’t call those specific pages. Meaby someone who knows javascript know what to change.

I will try to find out how to get out of this problem. I need more then 9 pages. If you find a solution please let me know.

I already try with hide/show layers with click (inkscape/object properties/interactivity/onclick). For now I only figured out if I put the line in object properties/interactivity/onclick:
I can hide object when I click on it. But I don’t know how to call it back with some button click.

1 Like

Good. But if you use buttons that always shows, do you need that many layers then?

If I figured out how? Then I can hide/show any object in svg.

Ok, you probably know this, but remember that objects that links to entity ID’s can be hidden and displayed through css-code. Like this for my burglar alarm:

/* Burglar */

.burglar-off {
  fill-opacity: 0 !important;

.burglar-on {
  fill: #ea0035ff !important;
  fill-opacity: 1 !important;

And this if toogling layers could help as an addition to the 10 layers:

.layer-visible {
  display: initial !important;

.layer-hidden {
  display: none !important;

I didn’t know that. Thanks for info.

I’ve been using this over a few version of floorplan but with the latest Polymer update I can’t seem to get this code to work.
I’ve made the modifications to ha-floorplan.html

  this.addExternalCss(() => {
    this.loadFloorPlan((svg) => {
      this.isLoading = false;
	          $(document).trigger( "floorplan:loaded", [this, svg]);

and including the custom_js.js. But it seems to have broken this modification entirely. Are you still using this method and have you experienced trouble since this newest update? Since the Polymer update I really don’t have the option of rolling back. Any help would be appreciated.


I can’t get latest to work, but 1.0.8 seems to work (don’t know if I got everything in there, since I updated manually, but it works for me at least).

1 Like

I found the problem!

Apparently there is an icon (MDI) named “svg” that gets in conflit with the jquery selector of < svg > element.
So this means that instead of the whole < svg > object, this “svg” named icon is being passed to the floorplan:loaded function.

And that is not happening on loadFloorPlan(callback) function.
On this line, let svg = $(result).find(‘svg’)[0]; returns the correct object.

By the time it calls $(document).trigger( “floorplan:loaded”, [this, svg]);
some other method is updating and the icon is fetched instead of the object.
Since I can’t figure out where this is happening, I just create a global var and store a copy of svg.

Here is what you need to fix it:

  1. create the global var on the first line within the < script > tag

    < script >
    //fix for mutilayer floor conflit with mdi icon named SVG
    var g_svg= ‘’;

  2. inside loadFloorPlan(callback) function, add the reference to the global var

    let svg = $(result).find(‘svg’)[0];
    //fix for mutilayer floor conflit with mdi icon named SVG
    g_svg = svg;

  3. change the call of loadFloorPlan function to use the global var.

    //fix for mutilayer floor conflit with mdi icon named SVG
    //$(document).trigger( “floorplan:loaded”, [this, svg]);
    $(document).trigger( “floorplan:loaded”, [this, g_svg]);

Remember, this is only a workaround, and should not be considered as update to fix the bug. The correct way should be to figure it out where the fetch is getting the icon and prevent it.

Could you please provide all the code - and where to write it in which files?


Im gonna point to the original file, since mine it’s all changed and I can’t reference line numbers.
The changes apply only to one file, ha-floorplan.html.
Grab the original file here:


Then apply my 3 fixes as mentioned on previous post:

  1. line 69
  2. line 222
  3. line 172 (after multifloor changes)

Let me know if you still need help!

1 Like

thank you for the answer.

I did not understand how I actually allow two buttons that will allow me to move from floor to floor. Can you explain?

And if you can attach the patch to your file you made a change to, it was nice.

Thanks that did the trick

Instructions to set up the multi-floor floorpan can be found earlier on in the thread: How to set up layers for different floorplans

Create the custom_js.js file, but instead of creating the ha-floorplan.html file as per that post, create it as per @philmottin’s one above

I understood, but he made changes to the source file in the new version - so I asked him to upload it here.

Can you share the contents of the ha-floorplan.html file. After the change? See if you can upload it here please -