How to set up layers for different floorplans

Third party integrations Floorplan
44

I did end up using the method in this post to toggle visible and hidden layers for now it’s not as elegant but it works for now.

45

I get only empty white window? No buttons and no floorplan?

See picture:

empty
empty1052×673 15.3 KB

@monkey-house or @Zepixir can you please upload those 3 (svg/js/html) files just for test?

46

Ok, thanks. Getting the same error so will try this.

47

Now I change file ha-floorplan.html back from repo:

I look in file and both lines are already there:

<script src="lib/custom_js.js"></script>

and

$(document).trigger( "floorplan:loaded", [this, svg]);

Now I get all object on same page, no click changes?

note_empty
note_empty1183×701 12.5 KB

What I am doing wrong?

48

Now is working. Forgot to copy paste second part of html file :smile:

Great work guys.

49

If you want to try, I have uploaded to my repository the edited html-document, demo svg, and the javascripts. If you include all javascripts, you also get a fix to use the pan/zoom function. The html-document also include color change and opacity on colors/brightness from hue-light.

1 Like
50

Thanks for sharing, that sounds great. How is the opacity/color implemented? Do I need to add anything to my SVG file?

I tried copying all the files from your github but I get:

Uncaught ReferenceError: Hammer is not defined
URL: http://192.168.1.6:8123/local/custom_ui/floorplan/ha-floorplan.html
Line: 325, column: 19
Error: {}

hammer.min.js is definitely in the right directory and I’ve replaced all of the files with the ones from your repo.

51

probably you forgot to delete the browser cache, the three checkboxes. It’s needed when you change your html-file.

52

I tried clearing the cache, as well as incognito mode and different browsers. Will try again later when I get home.

53

Google Chrome should work. And be sure to close the browser after clearing the cache, then open the browser again.

54

I’m an idiot. It’s because I’d done right click -> save as to grab one of the files from Github, and it saved the html of the Github page instead of the JS file.

It works great, thanks!

How is the Hue opacity/color implemented? Do I need to add anything to my SVG file or CSS?

55

Great :slight_smile:
You need to add to your floorplan.yaml and css-file.

Floorplan.yaml:

    - name: Lights Hue
      entities:
         - light.tv_backlight
         - light.hue_bloom
         - light.dining_backlight
         - light.lightstrip_kitchen
      rgb_template: '
        return "off-state";

css:

/* Hue */

.off-state {
  fill: #000000ff !important;
}
          '
56

Is there a way to hide menu button after click? I can not hower it with new layer? I tray to add white background but it stays under the button?!?

button

57

Yes, just move the button to the layer you want it visible on. Then it will be invisible on all the other layers. Remember that layers with id page0 to page9 will toggle visibility, but layers with any other id will always be visible. This is great for using a side menu or elements you always want to show.

58

When I put botton (id=show.page0) from layer (id=show.toggle) with all buttons to layer (id=page0) click not working any more? What I am doing wrong?

59

@Zepixir I try also on your demo multi layers and when I put for example button for circles to “page2 - circles” button not working any more. Can you show me on your example how to make it right? Button for circles must hide after I click it and circles are shown?

60

I figured out that I can call another svg file from floorplan.svg in inkscape - object properties - interactivity.
If I put javascript command in onclick line:

window.location=’/local/custom_ui/floorplan/test.svg’;

The test.svg is shown but I lost from HA menu and I can’t go back to page with HA menu?

I can only call beack floorplan.svg with command:

window.location=’/local/custom_ui/floorplan/floorplan.svg’;

61

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.

62

Now I figured out. Thanks.

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

63

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: