From the author of custom_js.js:
“Pages start at 0 and go to 9
Objects named ‘show.pageN’ where N is a number from 0-9 will show page N when clicked
Objects named ‘show.toggle’ will cycle through all pages
Layers in the SVG should be named page0-page9
page0 is the default starting page”
1 Like
just wanted to say a huge thanks for your example… got mine working a treat now 
1 Like
I’ve been having some issues with this. Initially I had the 1.0.13 HTML file found in the main repo. With that file, I can see my floorplan fine but cannot click through the layers. Nothing happens. So, I then attempted what @monkey-house monkey-house posted, including the HTML file he had posted. Doing this caused an error. I tried clearing cache, trying on a different device, etc. Verified it was copied correctly and the top commented out.
I then tried the files @Zepixir shared in his repo. I coped the entire contents over and just replaced that SVG with mine. This works. I can swap layers fine. However now half of my icons are just black boxes and circles. Some seem to work though. For instance, the way I did my icons was thus:
I created a circle or a box and set it to 70% grey. I then went to either Noun Project of MDI and got an icon I liked. I made it white and added it as a group with the base grey box/circle. And to have a light icon show yellow, I simply copied that icon, change the white icon in the center of the “group” and put it underneat the white icon. When clicking it, the top icon changes its opacity to show the icon underneath.
Now I’m presented with just a grey box or circle and if I click it, I can see a solid yellow box or circle. The icons in question are ones that have been copied throughout the floorplan.
So I then tried what @philmottin philmottin posted a few posts above. Doing this just gives me a blank floorplan. Even after clearing cache, etc.
Seems I’m missing something. I basically can either get a floorplan that is blank, or have half messed up icons. And soem of the icons that look ok, if you click on them, the device itself works, but the icon doesn’t change.
I’m wondering if I need to do the icons differently or something.
UPDATE:Seem in me reading my comment back to myself, I spotted my mistake. In troubleshooting it seems I copied a base CSS file in place of my original which caused the issue. I copied mine back over and it works now. I will leave this here in case someone else makes that bonehead move.
This may be a silly question, but I’d like to get everyone’s idea:
With the development of Lovelace UI, is there still a reason to use floorplan?
Guys has anyone tried to change the icon in the inside of SVG according to the attributes of the sensor (e.g. sensor day and night) to see the burned icon of the sun and the night moon!? I can not understand how to implement I’m still a beginner.
I think it should be do-able just using opacity, put both svg icons on top of each other and use css to set the opacity depending on which you want showing based on the sensor value.
I thought about this way but the ID is the same for two icons does not work
Hmm so I think you are correct, so they way I would do it is create two sensors in HA that are opposite and then use them to set the opacity of each of the icons.
When using the lastest html file posted by philmottin, I get the following error and a blank page:
ha-floorplan.html:74:12 Uncaught SyntaxError: Invalid or unexpected token
Any ideas? Line 74 is:
var g_svg= ‘’;
I changed it ti the old html posted earlier and it works.
Also another issue - I have a layer (dyanmic_icons) of dynamic icons (weather etc) in the root layer. How can I get these to display only on page0?
Okay I moved my dynamic icons from the root layer and re-created them in page0 (this screws up coordinates of icons so I just had to fix that).
But still, the icons show when switching to page two. Checked SVG and XML and icons are properly in page0 so not sure what’s happening. Note the bottom bar icons are from a layer called Constant so they are expected to remain.
I have the same issue, coordinates are all over the place and bleed into additional layers for dynamic weather icons.
Hi,
it’s been a while since this thread was active. Is this still the preferred way to get different floors into different layers?
I never could get the version posted here to work, but randomly found a github through google who had a working setup so now that html and custom_js got everything working for me.
@Asmegin / @lerroy_b… I know it’s been a while, but did you ever find a solution to having your dynamic icons to only display in the layer they belong in?
EDIT: Don’t worry, I’ve started converting my setup to use the floorplan lovelace card and this problem is no longer an issue.
Hi all,
after the latest change in 0.115 it was necessary to convert from ha-floorplan to a Lovelace-floorplan.
Basically this change was easy and not much effort.
But in combination with different layers enhancement out of this thread it is not working anymore.
my Floorplan looks messed up as all layers are shown at the same time - buttons for layer change are not clickable. In addition the text labels are clickable for the certain entity but the text is not altered to the value of the entity as before.
Anybody experiencing the same or solved it?
Best
Dominik
I just discovered that with 0.115. the html Import was deprecated - so the „ha-floorplan.html“ is Not working any longer. It needs to be either ES (ecmascript) or JS.
It seems that not only floorplan had issues so therefore there was a rollback of lazy loading with 115.3
I believe it’s necessary to rewrite certain parts of floorplan and the layering feature to ensure future readiness.
Any further ideas?