Folks who have been successful with this (@lucibuz, @photo64)
I was hoping you or another person could share more info about being able to toggle a layer. I’ve spent many many hours trying to figure this out, and the documentation is very spotty and I’m not sure if there’s a difference between the capabilities or configs used by the lovelace card vs. the old state ui.
In my latest attempt, here’s what I’ve tried (lovelace card):
I’m also attaching my svg file. I’ve whittled it down to be as simple as possible and yet I still can’t get it to work. I’m looking to have the black box (toggle_button1) toggle the layer (page1), of which the black box is in. Essentially clicking the box should hide the box itself, but nothing happens.
Clicking the red box should navigate to another lovelace view (so feasibly I could click between levels of my multi-story home) as a sort of work-around. That doesn’t work either.
Unfortunately I abandon that setup once Lovelace was introduced a couple of years ago. I never tried getting it to work within Lovelace. I found an old file with the setup below however it looks similar to your setup. Sorry I couldn’t provide more help.
Hi,
thanks for your time replying on this subject.
I’m fairly new with home assistant and on my quest to find the most customizable lovelace I find the floorpan-card.
I know community abandon this project or is using it just to display a background picture of the floor-plan, ignoring its true potential.
After many hours of study community blogs and testing, I manage to create lovelace-views based on floorplan-card (with help of other integrations like browser-mod and picture-elements) that allows me to have animated icons, entities based on state.
Here are some screenshots:
I manage to have floorplan.class_toggle service working but not the floorplan.page_navigate.
This is the code for floorplan.class_toggle for hiding an element or a layer (named page1).
@photo64 Thank you so much for getting back so quickly! I really appreciate it. Sorry you ended up abandoning the setup, I’ll compare your script, as well as try out lucibuz’s tips below and hopefully it works for me. Crossing my fingers.
Basically, there was no change. The mouse cursor changes to a hand as if the element is clickable, but clicking does nothing and there’s no log or anything of whether or not the click did anything to help troubleshoot it. I’ve thought about trying to use browser based developer tools to simulate mouse clicks to an element so I can watch the browser console for any hints and unfortunately I’m not a web developer so I can’t seem to figure out how to do that.
I also thought there could be a problem with the svg file, but even recreating the file (which I did this morning) didn’t fix the issue. I think the yaml looks right, and so that leaves (I guess) the css file. Would you mind sharing your .css file so I can compare? Thank you again for your help. Your most recent screenshots (with a button to toggle a layer) is exactly what I’m looking to do.
Let’s see if it works with the test files I sent you. If you till have problems the only troubleshoot I can think of is to reload the latest github files for the floorplan-card.
Also in inkscape you have to I name the layers using the xml editor, but floorplan.class_toggle should work on a single element too, try that first.
Navigation service I couldn’t make it work.
Oh my god!!! I got it! All thanks to you, thank you so much. I think what was key was that your floorplan.css was different than mine (using fill-opacity where as I was using a different method) and also I specified the stylesheet before specifying the rules. It did take overwriting my layertest.yaml file completely (and re-downloading the custom card libraries from git…) but that’s worth it to get this working.
I’m going to now try to make this work on my own svg but the fact is that now I’ve seen it with my own eyes I know completely now it’s possible.
(5 minutes pass…)
And it worked with my own SVG! For the sake of others, I wanted to provide my configs…
And I’m uploading my svg (with toggle_button1 renamed to toggle_button, the only difference between the last file and this file)… Copy/paste this to a text document and rename to layer1.bak.svg.
Would any anyone be able to help?
I’m trying to reproduce the example above when clicking “rectangle” would make “rectangle2” disappear via toggling between classes but somehow i don’t get any result
When checking the source code on homeassistant webpage, I find that the class of “rectangle” changes from “floorplan-click” to “floorplan-click undefined” and rectangle2 has no class attributed rather than having class “layer-visible” then changed to “layer-hidden” .
