How to set up layers for different floorplans

Third party integrations Floorplan
39

Yeah I cleared the cache both in fully kiosk and cleared the browser on my pc that I was using to setup HA/Floorplan. They both prompt with the same ha-floorplan.html uncaught reference error.

40

Out of curiosity what version of FloorPlan are you running 1.0.6 or 1.0.7.4?

41

I am using v.1.0.6. If you need to use v. 1.0.7.4 I can’t help you unfortunately. But check out my posts after @monkey-house solution. Gone through the steps there. (if not using v. 1.0.6 doesn’t fix youre problem)

42

did you make this work?

43

No I kept getting the same svg not defined is that what you are getting too? I followed monkey’s post even went so far as testing with a clean HA install but no dice.

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?