[FEATURE] Expose state without overwriting existing css classes

[FlorianLudwig]

Is your feature request related to a problem? Please describe.

I would like to expose the state of an entity to svg/css without interfering with existing css classes.

Describe the solution you'd like To avoid having to deal with removing, replacing etc css classes, I think it would be easiest to use data attributes.

Example yaml:

      state_action:
        - action: call-service
          service: floorplan.attr_set
          service_data:
            state: ${entity.state}
            foo: bar

Result would be:

<tag data-state="$state" data-foo="bar">

Describe alternatives you've considered

Using class_set:

      state_action:
        - action: call-service
          service: floorplan.class_set
          service_data:
            class: ha-state-${entity.state}

The issue with this solution is that it overwrites all existing css classes - and I already have css classes in my svg.

Another possibility would be to have a new class function that remembers which css classes were in the original svg and doesn't touch those:

      state_action:
        - action: call-service
          service: floorplan.class_set
          service_data:
            class: ha-state-${entity.state}
            keep_original_classes: true

This should remove classes which were added by ha-floorplan but keep the classes from the initial svg file.

[OzGav]

Just to educate me as I am not a CSS guru by any stretch. Where you say The issue with this solution is that it overwrites all existing css classes do you mean just for the entity/element you are targetting? If so I am not sure why this is an issue. Can you give a real world example?

[FlorianLudwig]

@OzGav yes, I mean for the element i am targeting.

For example:

<g id="light.test" class="class1 class2">

now i want to have the state as well, e.g.:

<g id="light.test" class="class1 class2 ha-state-on">

i wouldn't know how to do this currently

[exetico]

Hi,

Is the attribute the best way? Have you considered the use of global CSS variables? Let's think of the alternatives, before scoping the needed logics.

Also... It would be nice to have a real use-case. 👍☺️

With that said, I totally see why the attr-thing could be useful, for sure... It's so much more logical, than changing styles for simple things, like the state of entities...

Maybe even on a more global level, for all elements... 🤔

If you're well known with JS+TS, please also consider a PR 😁.

[exetico]

Did you find a bit of time to think about my input?

[FlorianLudwig]

hi @exetico - i would really love the attr thing. I didn't had much time to invest into home automatisations so I also never looked into the code if I would be able to fix it myself. I am backend developer and would not say "i am well known in JS/TS" :sweat_smile: but I get around .. but really no idea when :see_no_evil:

[exetico]

You're more than welcome to give it a try. It things break, you at least learned a bit in the process :smile: !

[exetico]

Checkout https://github.com/ExperienceLovelace/ha-floorplan/releases/tag/1.0.33, I think that fits your needs 😄 !