How to change CSS for svg object based on cover (2 entities)

Third party integrations Floorplan
1

I try to change svg box with CSS styling based on cover. When I use only one entity (open/close) with same id as svg box it works ok. But I wish to change style of box based on combination of two entities cover.livingroom (open/close) and cover.livingroom_tilt (open/close). I tried all chatGPT suggestions, docs in floorplan webpage… nothing works. Need some help/example. My code is
yaml:

      ##############
      #  FLOORPLAN  #
      ##############
      - type: "custom:floorplan-card"
        full_height: true
        config:
          image: "/local/floorplan/pritlicje_opt12.svg"
          stylesheet: "/local/floorplan/P.css"
          #  console_log_level: error
          #  log_level: debug
          rules:
            - entities:
                - cover.livingroom
                - cover.kuhinja
                - cover.jedilnica
                - cover.jedilnica_vrata
                - cover.dnevna
                - cover.garsonjera
                - cover.garsonjera_kopalnica
              tap_action:
                action: toggle
              hold_action:
                action: call-service
                service: cover.stop_cover
              double_tap_action:
                action: call-service
                service: cover.toggle_cover_tilt
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: cover-${entity.state}

CSS:

/* box cover up*/
.cover-open {
  fill: transparent;
  stroke: blue;
  stroke-width: 2;
  opacity: 0.7;
  animation: none;
}

/* box cover down*/
.cover-closed {
  fill: blue;
  stroke: none;
  opacity: 0.5;
  animation: none;
}

/* i wish to replace with somethin like: */

# /* box cover-tilt*/ 
# .cover-open-open {
#   fill: transparent;
#   stroke: blue;
#   stroke-width: 2;
#   animation: none;
# }
#/* box cover-tilt*/ 
#.cover-open-closed {
#  fill: #9bb0fa;
#  stroke: blue;
#  stroke-width: 2;
#  animation: none;
#}
#/* Box cover-tilt*/
#.cover-closed-open {
#  fill: #9bb0fa;
#  stroke: blue;
#  stroke-width: 2;
#  animation: none;
#}
#/* box cover-tilt*/ 
#.cover-closed-closed {
#  fill: blue;
#  stroke: blue;
#  stroke-width: 2;
#  animation: none;
#}

SVG:

<rect id="cover.livingroom" x="1550.9" y="321.45" width="28.991" height="126.22" stroke="#0064ff" stroke-width="1"</rect>
2

Easiest way to do this is to create a separate template sensor

3

Thanks for advice. I create template sensors which combine states of two entities. Now I have “sensor.combine_livingroom” which return ‘open-closed’ and all combinations. How do I change floorplan yaml so that svg object cover.livingoom would change style (CSS) based on template sensors state? I try add this but doesn’t work:

- entities:
    - sensor.combine_livingroom
    - sensor.combine_jedilnica
    - sensor.combine_kuhinja
  state_action:
    action: call-service
    service: floorplan.class_set
    service_data:
       class: >
          cover-${ states(entity) }
       elements: >
          ${ entity.entity_id.replace('sensor.combine_', 'cover.') }

CSS:

/* open + tilt closed */
.cover-open-closed {
  fill: #9bb0fa;
  stroke: blue;
  stroke-width: 2;
  animation: none;
}

but svg object cover.livingroom doesn’t fill color.

4

You can decomplicate this by naming your element the same as the entity. If you do this you don’t need the element line.

I use entity.state instead of states(entity) so try that as well.

Once you have done this then see what happens. Use your browsers inspect option to see if the class is applied.

5

I can’t rename elements because then my cover entities don’t work when I tap/click elements. I manage to do it for every room separately:

            - entity:
                - sensor.combine_livingroom
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data:
                  class: cover-${entity.state}
                  element: cover.livingroom

The problem was that for some reason classes for svg elements didn’t change when I refresh floorplan page… not even with Hard reload and empty cache. The only way was to save svg file as new and replace it in yaml file.