I wanted to add a button to my main layer that I could toggle to show additional buttons that are on a different layer. I tried following the documentation for showing/hiding layers -> Floorplan for Home Assistant however it doesn’t seem to work for me. I also tried looking through other setups hoping to find a solution.
I created a button on my main layer that I called “grp1_button”. I expected that when I click o this button it would toggle the visibility of my additional layer called “Layer2”. When I load the floorplan in HA I can click on the button but nothing toggles to show “Layer2”. Are my elements setup correctly below? Should that first element be the “grp1_button” and the data: element be “Layer2” ? Appreciate any ideas!
If you are using Inkscape when you say you called it “grp1_button” do you mean you named the ID that? For example, mine is titled all_lights_button as shown in this picture
if so that would be correct and your floorplan.yaml and css look correct but I cannot speak for the indentations since you didn’t post all of the yaml file
The next thing I would check is to ensure the svg layer has the correct ID in the underlying XML like the 1st line in this picture
This was an issue I had, don’t know why but for whatever reason the ID I gave it didn’t change in the XML, so I changed it directly in that editor. Another issue I ran into at first was not hiding all of the layers except for the main one, so when I clicked on my button nothing happened.
Give these things a try and let us know if you get it going.
I am using Inkscape and my ID looks similar to yours however the second screenshot showing the button info looks different (my button is a rectangular box on my main layer). I also included what the layer info looks like in the third screenshot, this looks more inline with your button though.
Two questions:
What did you change in your xml?
Your other issue about “not hiding all the layers”, where did you have to do this? Was that just in the floorplan.yaml file or was this done somehow in Inkscape?
I do have the same names in my yaml file and I did wonder about the lower case on the Layer name but comparing it to what @William_Rodriguez has shown there seems to be some differences in my svg file (?)
The XML line I changed is the highlights part you see in my screenshot <svg:g id=“all_lights_button” for whatever reason it wouldn’t take by pressing the set button on Inkscape. To verify your’s press Shift+Crtl+X to bring up the XML editor then click on your button once to see if it includes correct ID.
To hide and unhide your layers press Shift+Crtl+L to bring up the layers panel, from there you can toggle all or any of the layers. A tip in case you are not aware, if you make changes to your SVG file say them without closing Inkscape, then go back to your browser and press Crtl+F5 to refresh and your changes will take effect immediately, this will allow you to troubleshoot much easily.
Hopefully this help, if not we can continue to troubleshoot, but not tonight
I created a new button and hid the layer however when I tried it still didn’t toggle the layer. I did notice the new button has the correct id however in your post I see "<svg:g id=“all_lights_button” however in mine it shows as “svg:rect id:“grp1_button”. That <svg:g id: . . . .” is what shows for my layer. Am I misunderstanding the connection between the layer and button?
eureka! I got it. Turns out I needed to change the id of the “Layer2” to “layer2”, @nmaron you were right about this having an impact.
I do have another question although, my original svg included a blue background which was just a rectangle that covered the entire size of my svg set at 90% opacity and moved to the bottom of the main layer. While I can now click on my button to show “layer2” I am unable to click on the button to turn the light on (Kitchen Light). If I remove that rectangle background color I can click on the button. Is there a way to include a background color on the main layer so that it doesn’t impact the ability to click on buttons on “layer2” when it is visible?
**Edit - I figured out a way for this to work. I created another level and put the blue background on that layer and made it the bottom layer letting it be visible.
One last question, I created my svg within inkscape based on the size of my tablet which is 1280x800 however I still have white space on the left,right and bottom of the screen so it’s not showing full screen. Is there a way to eliminate that white space or do I need to increase the size of my svg file to something larger like 1600x1200?
Yes, there is a way to remove it, I believe you have to modify the ha-floorplan.html file. I’m not at my computer right now as soon as I get home I’ll look it up and post if no one answers you before that.
Correction it wasn’t on the ha-floorplan.html, it was floorplan.html in Panels. I added height: 100%; to the template
This is how I set up hiding/showing layers. Not sure if it’s the best way but it works for what I needed to accomplish.
Since the click of the button is just a “toggle” by clicking one button I “toggled” on several other layers. When I clicked one of the buttons in the layer that was just turned on I “toggle” on another layer but also “toggle” off the other layers I no longer want to show from the original “toggle” on. The downside of this is you have to reverse out of it so that you can back to your original starting point. For my purpose it works ok. Hope this makes sense.
I believe an update to the Floorplan is coming that will include “pages” but as fas as I know it hasn’t been released yet.
Good question.
Everything under classes routes back the floorplan.css file, in this case, I’m using “- shape” as a learning tool, for creating an animation, the animation formats a rectangle in my floorplan. Hope this helps.
With this is it possible to hide three layers and show three with just one button? (toggle floor)
its now one button for each… looks silly if i dont hide one before showing the other one…
