Toggling visibility

Third party integrations Floorplan
1

I am attempting to follow the guide on setting up a part of my floorplan to disappear and reappear when pressing a button. I have created a button in my svg named weather_button and I have a layer named weather_layer. In my floorplan.yaml, under groups:, I have:

  - name: Weather
    elements:
      - weather_button
    action:
      domain: class
      service: toggle
      data:
        elements:
          - weather_layer
        classes:
          - layer-visible
          - layer-hidden
        default_class: layer-hidden

and in my floorplan.css, I have:

.layer-visible {
  display: initial !important;
}

.layer-hidden {
  display: none !important;
}

The layer is visible when I open the floorplan in HASS and clicking the Weather button has not effect. Anything jump out at anyone that I am just not seeing?

2

That code looks correct, I would double check your SVG and make sure your layer and button are ID’ed correctly

3

They are labeled exactly as written floorplan.yaml. I have double and triple checked that previously and just did so again. Am I missing something else? Does this go in the groups: section of floorplan.yaml, or does it go somewhere else?

4

You have a link to that guide? I can’t seem to find it … maybe I can help as I’m thinking of implementing something similar.

5

It’s all in the README.md at the bottom.

6

Accidentally posted this in the wrong thread

Everything is displaying correctly and interactable.

Here is my SVG

Screenshot (8)
Screenshot (8)1026×297 28 KB

The buttons on the right are on a layer called “buttons” which is the topmost layer. Under that is a layer called “weather_layer” which has all the weather related text and icons on the left. That layer should be invisible when started up and toggle on and off when the Weather button on the right is clicked. Everything else is on the bottom layer called background. Here is what it looks like in Chrome. I tried to take the screenshot showing the mouse turning into a pointer finger when hovering over the weather button, but mouse is removed from screenshots so you’ll just have to take my word on that :smile:

Screenshot (9)
Screenshot (9)1259×417 32.8 KB

As you can see, all of the sensor data is displayed correctly. It’s just visibility of that layer that is the issue.