Help toggling a layer

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):

  • In my floorplan.css file…
/*Layers */
.layer-visible {
  display: initial !important;
}

.layer-hidden {
  display: none !important;
}
  • In my ui-lovelace.yaml:
resources:
  - url: /local/floorplan/floorplan-card.js?v=1.1.14
    type: module
views:
  - !include /config/lovelace/layertest.yaml
  - !include /config/lovelace/main.yaml
  • In layertest.yaml…
title: layertest
log_level: info
badges:
cards:
  - config:
    image: /local/custom_ui/floorplan/layer1.svg
    type: 'custom:floorplan-card'
    log_level: info
    rules:
      - name: layertest
        elements:
        - toggle_button1          
        action: 
          service: floorplan.class_toggle
          data:
            elements:
              - layer2
              - page1
            classes:
              - layer-visible                        
              - layer-hidden
            default_class: layer-hidden
      - name: layertest2
        elements:
        - toggle_button2          
        action:
          service: floorplan.page_navigate        
          data:
            page_id: main
        stylesheet: /local/custom_ui/floorplan/floorplan.css

As you can see, I’ve tried both the floorplan.class_toggle service as well as the floorplan.page_navigate service (as per this stackoverflow: https://stackoverflow.com/questions/58905964/does-lovelace-floorplan-allow-to-navigate-through-the-home-assistant-tabs). Neither work. However, the cursor does change as if the button is clickable for both of the methods I’ve tried. Clicking does nothing.

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.


(link to SVG)
https://pastebin.com/WVY70kaq

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.

        - name: Hidden button
          elements:
            - hidden_button
          action:
            domain: class
            service: toggle
            data:
              elements:
                - aqa
                - 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
                - allergy
              classes:
                - layer-visible
                - layer-hidden
              default_class: layer-hidden

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:




All this is based on svg elements and css animation, this creates small ui-lovelace files that load fast and can scale for different devices views.

Hi,

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).

                - elements:
                    - toggle_button
                  name: toggles                    
                  action:
                    service: floorplan.class_toggle                    
                    data:
                      classes:
                        - layer-hidden                        
                        - layer-visible
                      default_class: layer-hidden
                      elements:
                        - page1

                - elements:
                    - light_button
                  name: toggles                    
                  action:
                    service: floorplan.class_toggle                    
                    data:
                      classes:
                        - layer-hidden                        
                        - layer-visible
                      default_class: layer-hidden
                      elements:
                        - light

However I couldn’t figure out how ‘default_class’ works.
Thanks

@lucibuz Thank you so much for your reply! I’ll try as soon as I can. I really appreciate your help. :slight_smile:

BTW: your setup looks awesome! Thanks for sharing.

@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.

I have some test files if you want to try it, just send me an email or a link where to send the files.


This is for toggle service and also the animated elements.

Unfortunately, I made these changes this morning and it didn’t work. Here’s what I have now for my layertest.yaml file…

title: layertest
log_level: info
badges:
cards:
  - config:
    image: /local/custom_ui/floorplan/layer1.svg
    type: 'custom:floorplan-card'
    log_level: info
    rules:
      - elements:
         - toggle_button1
        name: toggles                    
        action:
          service: floorplan.class_toggle                    
          data:
            classes:
              - layer-hidden                        
              - layer-visible
            default_class: layer-hidden
            elements:
              - page1
        stylesheet: /local/custom_ui/floorplan/floorplan.css
      - elements:
        - toggle_button2          
        action:
          service: floorplan.page_navigate        
          data:
            page_id: main
        stylesheet: /local/custom_ui/floorplan/floorplan.css

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.

This is how I manage to navigate between different lovelace views:

  • I have set different views in my lovelace for each screen I want to display
  • I create elements in each floorplan.svg file that I use to trigger browser_mod.navigate
               - element: button1
                  action:
                    service: browser_mod.navigate 
                    data: 
                      navigation_path: /ui-experimental/5
                      deviceID: this
                - element: button2
                  action:
                    service: browser_mod.navigate 
                    data: 
                      navigation_path: /ui-experimental/1
                      deviceID: this
                - element: button3
                  action:
                    service: browser_mod.navigate 
                    data: 
                      navigation_path: /ui-experimental/2
                      deviceID: this
                - element: button4
                  action:
                    service: browser_mod.navigate 
                    data: 
                      navigation_path: /ui-experimental/3
                      deviceID: this
                - element: button5
                  action:
                    service: browser_mod.navigate 
                    data: 
                      navigation_path: /ui-experimental/4

I have 3 floorplans that I toggle with a element (button1) create in each floorplan.svg that navigate to the view I want.



Check your floorplan.css ,you should have (in test.css file that I sent code should be correct):

                    .layer-visible {
                        display: initial !important;
                        fill-opacity: 1 !important;
                    }
         
                    .layer-hidden {
                        display: none !important;
                        fill-opacity: 0 !important;
                    }

1 Like

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. :joy:

(5 minutes pass…)
And it worked with my own SVG! For the sake of others, I wanted to provide my configs…

layertest.yaml

title: layertest
log_level: info
badges:
cards:
  - config:
    image: /local/custom_ui/floorplan/layer1.bak.svg
    type: 'custom:floorplan-card'
    log_level: info
    stylesheet: /local/custom_ui/floorplan/floorplan.css
    rules:
      - elements:
          - toggle_button
        name: toggles                    
        action:
          service: floorplan.class_toggle                    
          data:
            classes:
              - layer-hidden                        
              - layer-visible
            default_class: layer-hidden
            elements:
              - page1

floorplan.css. Just make sure this is included in the file…

                    .layer-visible {
                        display: initial !important;
                        fill-opacity: 1 !important;
                    }
                    
                    .layer-hidden {
                        display: none !important;
                        fill-opacity: 0 !important;
                    }

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.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1"
   id="svg4524"
   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
   sodipodi:docname="layer1.bak.svg">
  <defs
     id="defs4518" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="45.714286"
     inkscape:cy="560"
     inkscape:document-units="mm"
     inkscape:current-layer="page0"
     showgrid="false"
     inkscape:window-width="1050"
     inkscape:window-height="1627"
     inkscape:window-x="1912"
     inkscape:window-y="16"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata4521">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="page0"
     inkscape:groupmode="layer"
     id="page0">
    <rect
       style="display:inline;opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#808080;stroke-width:0.06596315;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.86666667"
       id="toggle_button"
       width="87.724503"
       height="164.0757"
       x="22.258549"
       y="11.231651"
       inkscape:label="toggle_button"
       mask="none" />
  </g>
  <g
     inkscape:groupmode="layer"
     id="page1"
     inkscape:label="page1">
    <rect
       style="display:inline;opacity:1;fill:#800000;fill-opacity:1;fill-rule:nonzero;stroke:#808080;stroke-width:0.06970172;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.86666667"
       id="toggle_button2"
       width="75.647995"
       height="212.44757"
       x="113.75825"
       y="10.480239"
       inkscape:label="toggle_button2" />
  </g>
</svg>

I’m glad it worked and I could help :-):.