How to set up layers for different floorplans

Zepixir · April 9, 2018, 6:57pm

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.

lpt2007 · April 9, 2018, 8:05pm

Now I figured out. Thanks.

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

Zepixir · April 9, 2018, 9:10pm

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

lpt2007 · April 9, 2018, 9:28pm

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

Zepixir · April 9, 2018, 9:39pm

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.

lpt2007 · April 9, 2018, 9:50pm

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:
style="display:none"
I can hide object when I click on it. But I don’t know how to call it back with some button click.

Zepixir · April 9, 2018, 9:56pm

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

lpt2007 · April 9, 2018, 10:49pm

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

Zepixir · April 10, 2018, 9:39pm

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

lpt2007 · April 10, 2018, 9:42pm

I didn’t know that. Thanks for info.

raz0rf0x · May 30, 2018, 4:21am

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;
      this.handleEntities(this.hass.states);
	          $(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.

TIA

Zepixir · May 30, 2018, 7:50pm

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

philmottin · June 11, 2018, 4:11am

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:

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= ‘’;
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;
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.

Abeksis · June 13, 2018, 9:49pm

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

philmottin · June 15, 2018, 3:49am

Sure,

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: https://github.com/pkozul/ha-floorplan/blob/master/www/custom_ui/floorplan/ha-floorplan.html

LINE NUMBERS BASED ON VERSION 1.0.13

Then apply my 3 fixes as mentioned on previous post:

line 69
line 222
line 172 (after multifloor changes)

Let me know if you still need help!

Abeksis · June 15, 2018, 2:49pm

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.

Dan_Nuttall · June 16, 2018, 8:03pm

Thanks that did the trick

Dan_Nuttall · June 16, 2018, 8:08pm

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

Abeksis · June 16, 2018, 8:21pm

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

Abeksis · June 16, 2018, 8:30pm

Can you share the contents of the ha-floorplan.html file. After the change? See if you can upload it here please - https://paste.ofcode.org