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)
did you make this work?
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.
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.
I get only empty white window? No buttons and no floorplan?
See picture:
@monkey-house or @Zepixir can you please upload those 3 (svg/js/html) files just for test?
Ok, thanks. Getting the same error so will try this.
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?
What I am doing wrong?
Now is working. Forgot to copy paste second part of html file 
Great work guys.
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
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.
probably you forgot to delete the browser cache, the three checkboxes. It’s needed when you change your html-file.
I tried clearing the cache, as well as incognito mode and different browsers. Will try again later when I get home.
Google Chrome should work. And be sure to close the browser after clearing the cache, then open the browser again.
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?
Great 
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;
}
'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?!?
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.
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?
@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?
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’;