Floorplan not settting class for groups?

Aephir · August 30, 2023, 12:48pm

I have a few things that won’t change color (set class) in my floorplan. I’ve made this super-simplified version for testing:

With this yaml:

type: custom:floorplan-card
config:
  image:
    location: /local/floorplan/tesla/test.svg
    cache: false
  stylesheet:
    location: /local/floorplan/tesla/test.css
    cache: false
  console_log_level: warn
  defaults:
    hover_action: hover-info
    tap_action: more-info
    hold_action: more-info
  rules:
    - name: Car
      entities:
        - entity: input_boolean.guest_mode
          element: car
      state_action:
        - service: floorplan.class_set
          service_data: '${(entity.state === "on") ? "icon-stroke-red" : "icon-stroke-grey"}'
    - name: Line
      entities:
        - entity: input_boolean.guest_mode
          element: line
      state_action:
        - service: floorplan.class_set
          service_data: '${(entity.state === "on") ? "icon-stroke-red" : "icon-stroke-grey"}'
    - name: Line Group
      entities:
        - entity: input_boolean.guest_mode
          element: line-group
      state_action:
        - service: floorplan.class_set
          service_data: '${(entity.state === "on") ? "icon-stroke-red" : "icon-stroke-grey"}'
    - name: Line Group
      entities:
        - entity: input_boolean.guest_mode
          element: rect
      state_action:
        - service: floorplan.class_set
          service_data: '${(entity.state === "on") ? "icon-fill-red" : "icon-fill-grey"}'
    - name: Line Group
      entities:
        - entity: input_boolean.guest_mode
          element: rect-group
      state_action:
        - service: floorplan.class_set
          service_data: '${(entity.state === "on") ? "icon-fill-red" : "icon-fill-grey"}'
    - name: Line Group
      entities:
        - entity: input_boolean.guest_mode
          element: lock
      state_action:
        - service: floorplan.class_set
          service_data: '${(entity.state === "on") ? "icon-fill-red" : "icon-fill-grey"}'
    - name: Line Group
      entities:
        - entity: input_boolean.guest_mode
          element: line-rect
      state_action:
        - service: floorplan.class_set
          service_data: >-
            ${(entity.state === "on") ? "icon-stroke-and-fill-red" :
            "icon-stroke-and-fill-grey"}

and this in the css

/* Stroke icon binary state */

.icon-stroke-red {
  stroke: #b20000 !important;
  stroke-opacity: 1 !important;
}

.icon-stroke-grey {
  stroke: #5a5a5a !important;
  stroke-opacity: 1 !important;
}

/* Fill icon binary state */

.icon-fill-red {
  fill: #b20000 !important;
  fill-opacity: 1 !important;
}

.icon-fill-grey {
  fill: #5a5a5a !important;
  fill-opacity: 1 !important;
}

/* Stroke And Fill icon binary state */

.icon-stroke-and-fill-red {
  fill: #b20000 !important;
  fill-opacity: 1 !important;
  stroke: #b20000 !important;
  stroke-opacity: 1 !important;
}

.icon-stroke-and-fill-grey {
  fill: #5a5a5a !important;
  fill-opacity: 1 !important;
  stroke: #5a5a5a !important;
  stroke-opacity: 1 !important;
}

As soon as something is a group, the class is not set. Here’s the svg, and this is what it looks like in HA with input_boolean.guest_mode “on”:

Only the “single” objects (lock, line, and rect) works. Anything else (anything blue) does not, and the only common feature I can think of, is that they’re all “groups”.

Of course, if I select any of the groups in inkscape and set the stroke or fill color, respectively, that works as expected.

Is there something special you need to do to assign a class to an svg “group”?

OzGav · August 30, 2023, 10:46pm

.icon-stroke-and-fill-grey, icon-stroke-and-fill-grey * {
  fill: #5a5a5a !important;
  fill-opacity: 1 !important;
  stroke: #5a5a5a !important;
  stroke-opacity: 1 !important;
}

Try this for example

Aephir · August 31, 2023, 5:53am

Thanks, but I had actually already tried something similar (both stroke and fill). In any case, adding you version to the test.css, and changing some of the non-functional rules still doesn’t change the color. I tried with all of the groups like this example:

    - name: Car
      entities:
        - entity: input_boolean.guest_mode
          element: car
      state_action:
        - service: floorplan.class_set
          service_data: >-
            ${(entity.state === "on") ? "icon-stroke-and-fill-grey" : "icon-stroke-and-fill-grey"}

(can I ask what the second “icon-stroke-and-fill-grey *” does? What I had previously tried was this):

/* Stroke And Fill icon binary state */

.icon-stroke-and-fill-red {
  fill: #b20000 !important;
  fill-opacity: 1 !important;
  stroke: #b20000 !important;
  stroke-opacity: 1 !important;
}

.icon-stroke-and-fill-grey {
  fill: #5a5a5a !important;
  fill-opacity: 1 !important;
  stroke: #5a5a5a !important;
  stroke-opacity: 1 !important;
}

OzGav · August 31, 2023, 11:09am

In that example you have the grey css class for both states?

The second identical entry with the asterisk I believe makes sure that any elements that are nested within the targeted element also have the css style applied.

Aephir · August 31, 2023, 1:08pm

Yes you’re right, but changing one to red doesn’t change anything. The problem isn’t that the wrong class is applied, it’s that no class is applied. They retain the blue color (what was set in inkscape) instead of any of the class colors.

That could be really useful, good to know!

OzGav · August 31, 2023, 1:47pm

I have many grouped items (png+SVG for example and also groups of SVG elements) and it works fine. So not sure what you are doing that is causing it not to work?

Aephir · September 1, 2023, 6:05am

Me neither… I even made this ultra-simplified svg, yaml, and css to test, but none the wiser…

What software (and version) are you using to create the svg files?

OzGav · September 1, 2023, 9:14am

I use Inkscape. Sorry I’m not at home to confirm the version but it is one of the latest. When I get home in a couple of days I could send you a simple SVG to test

Aephir · September 1, 2023, 10:53am

Thanks, I’d appreciate that!

OzGav · September 2, 2023, 10:52pm

OK im using Inkscape 1.2.1

I have stripped down one of my floorplans to show a couple of groups. You will need to change the entities to your own. I have added it to a discussion in my fork of floorplan so I will probably delete it after a period Group Test · OzGav/ha-floorplan · Discussion #2 · GitHub

Aephir · September 4, 2023, 7:29am

Thanks! Something is a bit weird with mine, I’m not really sure why. I’ll need some more time to dig through that. In the meantime I ungrouped all groups and created “union” instead, which seems to work.

OzGav · September 4, 2023, 10:47am

Ok glad you have that working. I think the end result is all that matters!