Multi-floor buttons not functioning

Third party integrations Floorplan
1

I have a multi floor floorplan where the 3 floor buttons change the visibility of each level. I had it all working, haven’t touched in a couple weeks so I’m not sure the last thing I change. Now the floor buttons do not function, when I hover the mouse over the cursor doesn’t change, and they do not function. There are no errors in the debug. I’ve tried for hours now to figure out what i broke. I even tried going back to the simple rectangle buttons from the example.

The startup action seems to be working as it changes buttons 2 and 3 to red.
The CSS seems to be working on the buttons as when it initial loads it changes the button text to white. Each floor button has a red object and a green object to show which floor is active.

the room at the top right has an overlay for a button and that is working fine, its just the floor buttons.

here is my yaml


title: OBX Floorplan
views:
  - title: OBX Floorplan
    path: floorplan
    panel: true
    type: panel
    theme: Google Dark Theme
    badges: []
    cards:
      - config:
          log_level: debug
          defaults:
            hover_action: hover-info
            tap_action: more-info
          image: /local/floorplan/multi_floor/obx_floorplan_ha_r4.svg
          cache: false
          startup_action:
            - service: floorplan.class_set
              service_data:
                element: ground_floor
                class: layer-visible
            - service: floorplan.class_set
              service_data:
                elements:
                  - first_floor
                class: layer-hidden
            - service: floorplan.class_set
              service_data:
                elements:
                  - second_floor
                class: layer-hidden
            - service: floorplan.class_set
              service_data:
                elements:
                  - green-button-1
                  - red-button-2
                  - red-button-3
                class: button-on
            - service: floorplan.class_set
              service_data:
                elements:
                  - green-button-2
                  - green-button-3
                class: button-off
          rules:
            - entity: switch.bed3_main_light
              element: bed3-main-overlay
              tap_action: toggle
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: entitystate-${entity.state}
            - entity: switch.bed3_main_light
              element: bed3-main-lights
              tap_action: toggle
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: light-${entity.state}
            - entity: switch.bed3_fan
              element: pwdr-fan-blades
              tap_action: toggle
              state_action:
                - service: floorplan.class_set
                  service_data:
                    class: bathfan-${entity.state}
            - entity: switch.bed3_fan
              element: pwdr-fan
              tap_action: toggle
              state_action:
                - service: floorplan.class_set
                  service_data:
                    class: '${(entity.state === "on") ? "spinning" : ""}'
            - element: ground-floor-button
              tap_action:
                - service: floorplan.class_set
                  service_data:
                    element: ground_floor
                    class: layer-visible
                - service: floorplan.class_set
                  service_data:
                    elements:
                      - first_floor
                      - second_floor
                    class: layer-hidden
                - service: floorplan.class_set
                  service_data:
                    elements:
                      - green-button-1
                    class: button-on
                - service: floorplan.class_set
                  service_data:
                    elements:
                      - green-button-2
                      - green-button-3
                    class: button-off
            - element: first-floor-button
              tap_action:
                - service: floorplan.class_set
                  service_data:
                    element: first_floor
                    class: layer-visible
                - service: floorplan.class_set
                  service_data:
                    elements:
                      - ground_floor
                      - second_floor
                    class: layer-hidden
                - service: floorplan.class_set
                  service_data:
                    elements:
                      - green-button-2
                      - red-button-1
                    class: button-on
                - service: floorplan.class_set
                  service_data:
                    elements:
                      - green-button-1
                      - green-button-3
                    class: button-off
            - element: second-floor-button
              tap_action:
                - service: floorplan.class_set
                  service_data:
                    element: second_floor
                    class: layer-visible
                - service: floorplan.class_set
                  service_data:
                    elements:
                      - first_floor
                      - ground_floor
                    class: layer-hidden
                - service: floorplan.class_set
                  service_data:
                    elements:
                      - green-button-1
                      - green-button-2
                    class: button-off
                - service: floorplan.class_set
                  service_data:
                    elements:
                      - green-button-3
                    class: button-on
          stylesheet:
            location: /local/floorplan/multi_floor/obx_multi_floor.css
            cache: false
        full_height: true
        type: custom:floorplan-card
  - title: Sample Entities
    path: sample-entities
    icon: ''
    badges: []
    cards:
      - type: entities
        entities:
          - entity: switch.bed3_main_light
            name: Office Light (switch.office_light)
          - entity: switch.bed3_fan
            name: Office Fan (switch.office_fan)
        title: Test Entities
        state_color: true

my SVG

floorplan3
floorplan3463×753 51.9 KB

2

Have you tried a different browser? Have you tried clearing the browser cache? Have you tried inspecting the page using the browser tools to see if the classes are getting applied?

3

Yes to all. Same result in Edge, I’m using Chrome. I have to clear the cache everything I make a change to my SVG. I have a revision number on it so I make sure i’m looking at the latest SVG.

the css is being applied to The text of the buttons.

I’m sure its a yaml issue I just cannot see.

4

What version of ha-floorplan are you using? There was a recent update to 1.0.40. If it previously worked then something has changed. I do note the way you are doing the setting of classes is different to the way I am doing it. I have five layers but I will will just paste in how I am doing my three layers. Hopefully you will be able to see how it works

CSS extract

#layer1.amp-layer-visible, #layer1.amp-layer-visible * {
  opacity: 1;
  display: inherit !important;
}
#layer2.amp-layer-visible, #layer2.amp-layer-visible * {
  opacity: 0;
  display: none !important;
}
#layer3.amp-layer-visible, #layer3.amp-layer-visible * {
  opacity: 0;
  display: none !important;

#layer2.projector-layer-visible, #layer2.projector-layer-visible * {
  opacity: 1;
  display: inherit !important;
}
#layer1.projector-layer-visible, #layer1.projector-layer-visible * {
  opacity: 0;
  display: none !important;
}
#layer3.projector-layer-visible, #layer3.projector-layer-visible {
  opacity: 0;
  display: none !important;

#layer3.kodi-layer-visible, #layer3.kodi-layer-visible * {
  opacity: 1;
  display: inherit !important;
}
#layer2.kodi-layer-visible, #layer2.kodi-layer-visible * {
  opacity: 0;
  display: none !important;
}
#layer1.kodi-layer-visible, #layer1.kodi-layer-visible * {
  opacity: 0;
  display: none !important;

YAML extract

      startup_action:
        - service: floorplan.class_set
          service_data:
            class: amp-layer-visible
            elements:
              - layer1
              - layer3
              - layer2

        - element: amp.button
          tap_action:
            - service: floorplan.class_set
              service_data:
                classes:
                class: amp-layer-visible
                elements:
                  - layer1
                  - layer3
                  - layer2
        - element: projector.button
          tap_action:
            - service: floorplan.class_set
              service_data:
                classes:
                class: projector-layer-visible
                elements:
                  - layer1
                  - layer3
                  - layer2
5

From The Chrome Console
Floorplan for Home Assistant (ha-floorplan)Version 1.0.37

in HACS it show 1.0.39

one of my issues was an overlay not working. When i edited the yaml to point to a different overlay it worked. I duplicated the working overlay and named it the overlay that wasn’t working and that fixed it. This is very weird, along The same lines as I mentioned before that copy/pasted elements do not respond. I know you think I’m mistaken but I verified this behavior several times.

I’m using Inkscape 1.0.1. I’m downloading the latest version now.

6

Caching problems can cause weird behaviours like this as well…