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…
Yes but it takes a little planning because the button is just a toggle so whatever is currently “hidden” will be “visible” when clicked and vise versa. I currently do this on my floorplan but to get it to work correctly I also had to create “hidden buttons”, below is an example.
The 1st Hidden button I set to default of making those visible so when the floorplan starts up they will show. The 2nd Hidden button I set to default of making those hidden. These two buttons are hidden so not seen ever and can’t be clicked. The remaining buttons are what control what gets “toggled” when I click them. I found that I had to create these “hidden buttons” and set the correct default_class otherwise the toggle and the layers wouldn’t work correctly. I also didn’t include the default_class on the buttons I have showing. I have a few more buttons that are not shown below but the setup is similar. Hopefully this makes sense.
You may or may not need to create these “hidden buttons”, I think it will depend on how you plan to view your layers. With mine I had some showing some of the time and mixed with other layers but not showing other times so this was the only way I could make it work.
- name: Hidden button
elements:
- hidden_button
action:
domain: class
service: toggle
data:
elements:
- home
- main
- mainlts
- camera
classes:
- layer-visible
- layer-hidden
default_class: layer-visible
- name: Hidden button2
elements:
- hidden_button2
action:
domain: class
service: toggle
data:
elements:
- ff1
- ff3
- ffxtra1
- ufxtra2
classes:
- layer-visible
- layer-hidden
default_class: layer-hidden
- name: Main button
elements:
- main_button
action:
domain: class
service: toggle
data:
elements:
- main
- camera
- ff1
- ffxtra1
- ufxtra1
classes:
- layer-visible
- layer-hidden
