SVG Element click works properly only on paths in groups.

[nedevski]

I've just started my ha-floorplan journey and I'm having a bit of an issue.

I've created a SVG file in Inkscape, I have areas for each room with the correct ID set.
I also have included the CSS file from one of the examples.

After creating the corresponding YAML, my areas are clickable and they toggle the entities (I'm using binary helpers for testing).
When using Inspect element, the correct areas also change their class to light_on/light_off respectively.

The issue is that only one of the areas actually changes it's color on click, the others are unresponsive.

See the attached file. The room on the right has 3 parts - top (desks), main (sofa and tv) and bottom (kitchen).
When I click on the kitchen - the class changes and the yellow dissapears. However when I click on the two living room parts, as you can see on the right - the class changes, but there is no change in visuals.

Overview.Home.Assistant.-.Google.Chrome.2023-06-23.09-44-21.mp4

[nedevski]

Update: I drew the areas as rectangles. For some reason that doesn't work.

If you're using a regular path - that also doesn't seem to work.

However if you put the path in a group and rename the group with the correct ID - suddenly it all works.

So in summary - you can't use rectangles or paths to be the clickable element, it has to be a group holding everything.

Here is my Inkscape project for clarity:

In order for it to work properly in HA, I export it to "plain SVG" and use that.

[OzGav]

Also which one works?

[nedevski]

This one is the group:

- entity: input_boolean.kitchen_light
  element: area.kitchen

Bottom right on the plan.

[nedevski]

Ok, I've left a rectangle with just this in the config:

- entity: input_boolean.bedroom_large_terrace_light

ID/name are the same in the SVG, now it's not even clickable.

[OzGav]

Ok. First anything showing in the log at the bottom of the floorplan? Second try swapping the working ID to a non working rectangle. Third simplify your setup by removing all element lines and changing all Inkscape IDs to their corresponding entity_id

[OzGav]

Flush the browser cache

[nedevski]

@OzGav New thread, started from scratch. This is just providing a good starting point for my issue with bare minimum stuff in the way and I'm going to try your suggestions above in a bit.

I have only 1 zone - light.living_room. It's connected to a real device - light.shelly_plug.
Below is my configuration. The zone is active and it works, it toggles the device on/off.

However the visual layer doesn't toggle itself.

The image is definitely not cached and I restarted HA after adding the new file for good measure.

I'm using this CSS from the repo as is.

- type: custom:floorplan-card
  full_height: true
  config:
    image: /local/floorplan/v2/floorplan.svg
    stylesheet: /local/floorplan/v2/floorplan.css
    cache: false
    log_level: info
    console_log_level: info
    defaults:
      hover_action: hover-info
      tap_action: more-info
    rules:
      - name: Rooms
        entities:
          - entity: light.shelly_plug
            element: light.living_room
        tap_action: light.toggle
        state_action:
          service: floorplan.class_set
          service_data: '${entity.state === "on" ? "light-on" : "light-off"}'

[nedevski]

Change 4: After change 2 didn't work, I renamed the green rectangle to a different name - area.shelly_plug with the yaml below.

This way it finally works??? And I'm not sure why.

Attaching the file for consistency

entities:
  - entity: light.shelly_plug
    element: area.shelly_plug
tap_action: light.toggle

[nedevski]

Change 5: I added the green path shape in a group called LIGHTS by itself, while keeping its name and ID. Works well, the layer gets toggled. Good.

I've then added a rectangle for the living room called area.living_room. This is where it gets interesting.

With the SAME SVG it's working for the green rectangle, but not for the orange rectangle.
=> I'm only changing the element: name from area.shelly_plug to area.living_room.

Works for the green area, does not work for the orange one.

# does not work
rules:
  - name: Rooms
    entities:
      - entity: light.shelly_plug
        element: area.living_room
    tap_action: light.toggle

[nedevski]

Change 6: It's consistent now. I added two more layers - a weird shape called area.bedroom_large and a yellow rectangle called area.bathroom.

Both work as device toggles. Only the weird shape dissapears when clicked.

#works
entities:
  - entity: light.shelly_plug
    element: area.bedroom_large
tap_action: light.toggle

# does not work
entities:
  - entity: light.shelly_plug
    element: area.bathroom
tap_action: light.toggle

[nedevski]

Change 7: Added a blue circle (area.circle) and a brown freehand draw element with the pen thing (area.toilet).

It's the same. The shape does not get toggled. The pen tool freehand shape does.

For now I'll stop testing and wait for some feedback on the findings.

[nedevski]

P.S. Everything I have is the latest version, but for the sake of completeness:

Inkscape 1.2.2 (732a01da63, 2022-12-09)
Chrome Version 114.0.5735.134 (Official Build) (64-bit)

Home Assistant 2023.6.2
Supervisor 2023.06.2
Operating System 10.3
Frontend 20230608.0 - latest

Ha Floorplan - 1.0.35