Only some rooms/lights respond to clicks/state change

[jtermi03]

Hi again! I've got my three floors set up on separate views and all seem to be properly linking all SVG elements to entities. The basement is 100% working as expected, but I'm having inconsistent results with my other 2 floors: Binary sensors all are responding as expected, but only some devices/rooms are showing as clickable on hover or responding to clicks/state change. For example, my living room, nursery, and basement lights all respond to clicks & update but the other rooms in the house do not. My light icons also do not seem to be updating properly, although they are appearing as clickable.

• I've restarted HA after the www-folder was created
• The SVG files are located in the 'www' folder?
• I'm running HA-standalone VM on unRAID with a local IP
• HA v7.1 - HAC & all other services updated
• Logs show no errors except for a few expected missing SVGs/entities
• I've gone through and validated that each entity name is the same in the svg object ID, YAML reference, and HA config

SVGs: floorplan.zip

YAML:

views:
  - title: Basement
    path: basement
    type: panel
    cards:
      - type: custom:floorplan-card
        config:
          image: /local/floorplan/basement.svg
          stylesheet: /local/floorplan/floorplan.css
          log_level: info
          console_log_level: info
          defaults:
            hover_action: hover-info
            tap_action: more-info
          rules:
            - name: Rooms
              entities:
                - entity: light.basement_shed_light
                  element: area.shed
                - entity: light.basement_shop_light
                  element: area.shop
                - entity: light.basement_utility_light
                  element: area.utility_closet
                - entity: light.basement_laundry_light
                  element: area.laundry_room
              tap_action: light.toggle
              state_action:
                service: floorplan.class_set
                service_data: '${(entity.state === "on") ? "icon-show" : "icon-hide"}'
            - name: Light Icons
              entities:
                - entity: light.basement_shed_light
                  element: light.basement_shed_light
                - entity: light.basement_shop_light
                  element: light.basement_shop_light
                - entity: light.basement_utility_light
                  element: light.basement_utility_light
                - entity: light.basement_laundry_light
                  element: light.basement_laundry_light
              tap_action: light.toggle
              state_action:
                service: floorplan.class_set
                service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
            - name: Door/Window Sensors
              entities:
                - binary_sensor.shed_garage_door
                - binary_sensor.basement_shed_door
                - binary_sensor.shed_window_1
                - binary_sensor.shed_window_2
                - binary_sensor.shop_motion
                - binary_sensor.laundry_room_motion_detection
              state_action:
                service: floorplan.class_set
                service_data: '${(entity.state === "on") ? "icon-show" : "icon-hide"}'
            - name: Temperature
              entities:
                - temp.basement
              state_action:
                - service: floorplan.text_set
                  service_data: >-
                    ${(entity.state !== undefined) ? Math.round(entity.state *
                    10) / 10 + "°" : "unknown"}
                - service: floorplan.class_set
                  service_data:
                    class: current-temp
  - title: 1st Floor
    type: panel
    cards:
      - type: custom:floorplan-card
        config:
          image: /local/floorplan/floor1.svg
          stylesheet: /local/floorplan/floorplan.css
          log_level: debug
          console_log_level: debug
          defaults:
            hover_action: hover-info
            tap_action: more-info
          rules:
            - name: Rooms
              entities:
                - entity: light.garage_lights
                  element: area.garage
                - entity: light.foyer_overhead_lights
                  element: area.foyer
                - entity: light.front_porch_light
                  element: area.front_porch
                - entity: light.living_room_overhead
                  element: area.living_room
                - entity: light.patio_light
                  element: area.patio
                - entity: light.back_porch_light
                  element: area.back_porch
                - entity: light.powder_room_overhead_light
                  element: area.powder_room
                - entity: light.pantry_light
                  element: area.pantry
                - entity: light.kitchen_lights
                  element: area.kitchen
                - entity: light.dining_room_lights
                  element: area.dining_room
                - entity: light.sun_room_lights
                  element: area.sun_room
              tap_action: light.toggle
              state_action:
                service: floorplan.class_set
                service_data: '${(entity.state === "on") ? "icon-show" : "icon-hide"}'
            - name: Light Icons
              entities:
                - entity: light.garage_lights
                  element: light.garage_lights
                - entity: light.foyer_overhead_lights
                  element: light.foyer_overhead_lights
                - entity: light.front_porch_light
                  element: light.front_porch_light
                - entity: light.living_room_overhead
                  element: light.living_room_overhead
                - entity: light.patio_light
                  element: light.patio_light
                - entity: light.back_porch_light
                  element: light.back_porch_light
                - entity: light.powder_room_overhead_light
                  element: light.powder_room_overhead_light
                - entity: light.pantry_light
                  element: light.pantry_light
                - entity: light.kitchen_lights
                  element: light.kitchen_lights
                - entity: light.dining_room_lights
                  element: light.dining_room_lights
                - entity: light.sun_room_lights
                  element: light.sun_room_lights
              tap_action: light.toggle
              state_action:
                service: floorplan.class_set
                service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
            - name: Door/Window Sensors
              entities:
                - binary_sensor.sun_room_motion_detection
                - group.kitchen_motion
                - binary_sensor.dining_room_motion_detection
                - binary_sensor.foyer_motion_detection
                - binary_sensor.living_room_motion_detection
                - binary_sensor.garage_motion_detection
                - binary_sensor.front_door_access_control_window_door_is_open
                - binary_sensor.garage_door_1
                - binary_sensor.garage_door_2
                - binary_sensor.garage_side_door
                - binary_sensor.living_room_door_frontpoint
                - binary_sensor.kitchen_door
                - binary_sensor.living_room_window_1
                - binary_sensor.living_room_window_2
                - binary_sensor.powder_room_window
                - binary_sensor.kitchen_window_l2
                - binary_sensor.kitchen_window_l1
                - binary_sensor.kitchen_window_l1
                - binary_sensor.kitchen_window_r2
                - binary_sensor.sun_room_window_l1
                - binary_sensor.sun_room_window_l2
                - binary_sensor.sun_room_window_l3
                - binary_sensor.sun_room_window_l4
                - binary_sensor.sun_room_window_c1
                - binary_sensor.sun_room_window_c2
                - binary_sensor.sun_room_window_c3
                - binary_sensor.sun_room_window_r1
                - binary_sensor.sun_room_window_r2
                - binary_sensor.sun_room_window_r3
                - binary_sensor.sun_room_window_r4
              state_action:
                service: floorplan.class_set
                service_data: '${(entity.state === "on") ? "icon-show" : "icon-hide"}'
            - name: Temperature
              entities:
                - sensor.living_room_thermostat_temperature
                - sensor.kitchen_thermostat_temperature
                - sensor.sun_room_thermostat_temperature
                - sensor.garage_thermostat_temperature
              state_action:
                - service: floorplan.text_set
                  service_data: >-
                    ${(entity.state !== undefined) ? Math.round(entity.state *
                    10) / 10 + "°" : "unknown"}
                - service: floorplan.class_set
                  service_data:
                    class: current-temp
  - title: 2nd Floor
    type: panel
    cards:
      - type: custom:floorplan-card
        config:
          image: /local/floorplan/floor2.svg
          stylesheet: /local/floorplan/floorplan.css
          log_level: info
          console_log_level: info
          defaults:
            hover_action: hover-info
            tap_action: more-info
          rules:
            - name: Rooms
              entities:
                - entity: light.guest_bedroom_lights
                  element: area.guest_bedroom
                - entity: light.master_bedroom_lights
                  element: area.master_bedroom
                - entity: light.master_bathroom_overhead_lights
                  element: area.master_bathroom
                - entity: light.master_bedroom_closet_light
                  element: area.master_closet
                - entity: light.hallway_overhead_lights
                  element: area.hallway
                - entity: light.guest_bathroom_lights
                  element: area.guest_bathroom
                - entity: light.nursery_lights
                  element: area.nursery
                - entity: light.attic_lights
                  element: area.attic
              tap_action: light.toggle
              state_action:
                service: floorplan.class_set
                service_data: '${(entity.state === "on") ? "icon-show" : "icon-hide"}'
            - name: Door/Window Sensors
              entities:
                - binary_sensor.nursery_window_1
                - binary_sensor.nursery_window_2
                - binary_sensor.guest_bedroom_window_1
                - binary_sensor.guest_bedroom_window_2
                - binary_sensor.guest_bedroom_window_3
                - binary_sensor.master_bedroom_window_1
                - binary_sensor.master_bedroom_window_2
                - binary_sensor.master_bedroom_window_3
                - binary_sensor.master_bathroom_window
                - binary_sensor.guest_bathroom_window
                - binary_sensor.attic_window_1
                - binary_sensor.attic_window_2
                - binary_sensor.master_bedroom_motion_detection
                - binary_sensor.nursery_motion_occupancy
                - binary_sensor.guest_bedroom_motion_detection
                - binary_sensor.hallway_motion_home_security_motion_detection
                - binary_sensor.attic_motion_home_security_motion_detection
              state_action:
                service: floorplan.class_set
                service_data: '${(entity.state === "on") ? "icon-show" : "icon-hide"}'
            - name: Temperature
              entities:
                - sensor.upstairs_thermostat_temperature
                - climate.upstairs_thermostat
              state_action:
                - service: floorplan.text_set
                  service_data: >-
                    ${(entity.state !== undefined) ? Math.round(entity.state *
                    10) / 10 + "°" : "unknown"}
                - service: floorplan.class_set
                  service_data:
                    class: current-temp

[OzGav]

I don't have time to have a good look but don't forget that objects are in layers and then in an order within the layer. Any object below another object (whether between layers or withint the layer) will not be clickable. Easy way to test is just find something you can't click and send that to the top of the top layer and see what happens

[OzGav]

Looking at it a bit more closely I think you might have overlap of the objects and also I think you have more complexity than you potentially need. Have a look at this thread which might promote some ideas #177 You will see you have two options for handling the non-rectangular shaped room images: using clip-paths (which I dont use so I wont be much help to you) and using another touch pointed shaped object which controls an input_boolean entity and is linked via an automation to the state of the room lights.

If you go the clip path option I think you can potentially simplify things as follows. If you look at floor 1 you have your front porch object labelled as area.front_porch but it is the same size and shape as the image so you can actually label that as light.front_porch_light, you don't need an element and an entity specified as they are the same thing.

[jtermi03]

Thanks for taking a close look, really appreciate it! I think I already took the clipped path route originally - I started with the lights_on Floorplanner png, added the room outlines in the layer above, selected both, and hit 'Set Clip'. Bringing the non-functional rooms to the front did not change the behavior. I recorded a video of the behavior in HA that might help illustrate where I am, if that helps

Much appreciated simplification with the area.front_porch!

[jtermi03]

Also - as I troubleshoot I'm realizing I'm not actually seeing the updates to the svg in Lovelace as I save changes in Inkscape - do I need to restart HA each time I make changes or is there an easier way to reload the svg?

EDIT: Just kidding, found the 'cache: false' option! This also seems to have improved things, though now I don't know what the fix was. Still some inconsistent behavior to dig into, but most of the lights are responding properly.

[OzGav]

Yeah caching can be a pain. You can try a force reload SHIFT-F5 or in Chrome hit F12 go to the Network Tab and make sure DISABLE CACHE is ticked (I think this only works while the dev tools are open) or add this to your YAML:

views:
  - panel: true
    cards:
      - full_height: true
        config:
#          log_level: info
          image:
            location: /local/floorplan/floorplan_3d-light.svg
            cache: false
          stylesheet:
            location: /local/floorplan/floorplan.css
            cache: false

P.S. I am having a further look at your floorplan

[OzGav]

OK I have it working for me. Because you are using the clip path method you don't need any of the elements. So just looking at floor 1 you should change it to: (leaving the rest out just get this part working)

  - title: 1st Floor
    type: panel
    cards:
      - type: custom:floorplan-card
        config:
          image: 
            location: /local/floorplan/floor1.svg
            cache: false
          stylesheet: 
            location: /local/floorplan/floorplan.css
            cache: false
          log_level: debug
          console_log_level: debug
          defaults:
            hover_action: hover-info
            tap_action: more-info
          rules:
            - name: Rooms
              entities:
                - light.garage_lights
                - light.foyer_overhead_lights
                - light.front_porch_light
                - light.living_room_overhead
                - light.patio_light
                - light.back_porch_light
                - light.powder_room_overhead_light
                - light.pantry_light
                - light.kitchen_lights
                - light.dining_room_lights
                - light.sun_room_lights
              tap_action: light.toggle
              state_action:
                service: floorplan.class_set
                service_data: '${(entity.state === "on") ? "always-visible" : "always-invisible"}'

add to your CSS:

 /* Makes things visible and invisible */
.always-invisible {
  visibility: hidden !important; 
  opacity: 0 !important;
  stroke-opacity: 0 !important;
}

.always-visible {
  visibility: visible !important;
  opacity: 1 !important;
  stroke-opacity: 1 !important;
}

[OzGav]

Hi again. Hopefully you have it all working now. If so it would be great if you could mark this as answered. Cheers!