How do I turn off multiple SVG elements from the state of one entity?

[Tamooj]

I have two SVG elements: power_in_arrow and power_out_arrow. Depending on the state of my HA entity sensor.grid_power, I want to turn on/off the opacity of these elements accordingly When power is flowing into my house from the grid, ala:
'${parseFloat(entities["sensor.egauge_grid_pushpull"].state) > 0`

I would like to turn the opacity of power_in_arrow to 1 and the opacity of power_out_arrow to 0.

Since the elements seem to want to be the same name as the entity (and why the heck is that a restriction when we have to specify the elements: anyway?) how can I do this when there's multiple svg elements? I've got css classes for turning off the individual elements, but hs-floorplan can't seem to find the elements by name.

[Tamooj]

For reference, here's the YAML. In the SVG file there are only two groups , power_in and power_out, and each group contains only the path object for one arrow.

type: custom:floorplan-card
config:
  log_level: debug
  image: /local/community/ha-floorplan/PowerFlows/ActiveDrawing.svg?v=3
  stylesheet: /local/community/ha-floorplan/PowerFlows/PowerPlant.css?v=4
  rules:
    - entity: sensor.egauge_grid_pushpull
      state_action:
        - action: call-service
          service: floorplan.class_set
          service_data:
            element: power_in.InflowArrow
            class: grid_arrow_on
        - action: call-service
          service: floorplan.class_set
          service_data:
            element: power_out.OutflowArrow
            class: surplus_arrow_on

[Trzinka]

Hi. Have you looked at:

#411

[Tamooj]

Just an update - I figured out how to toggle SVG elements on/off by individual and by layers. It was only a challenge because the examples everyone was using were for bitmaps / pngs, whereas I have SVG graphical elements in the floorplan SVG as layers, for instance; arrows and lines that depict how power flows in my home.

[Trzinka]

Nice.
You could post how you solved the issue.

[exetico]

Hi,

Fell free to share a minimum basis example I can pick up at some time, and make a simple example on basis of that :-)

[zen2]

An example from my floorplan used to switch different SVG layers in order to display the different house levels:

Notes:

• to_level_0 is an hidden rectangle on stairway view from level_1
• to_level_1 is an hidden rectangle on stairway view from level_0
• legend_level_* are text from a mini side view of the house that display average temp/humid for levels.
• click on to_level_X or legend_level_X display the X level and hide others levels
• level_X are inkscape layers so SVG elements that contains related level content (background picture, entities, ....)

- elements:
  - to_level_0
  - legend_level_0
  tap_action:
  - service: floorplan.class_set
    service_data:
      class: layer-visible
      element: level_0
  - service: floorplan.class_set
    service_data:
      class: layer-hidden
      elements:
      - level_1
      - level_-1

- elements:
  - to_level_1
  - legend_level_1
  tap_action:
  - service: floorplan.class_set
    service_data:
      class: layer-visible
      element: level_1
  - service: floorplan.class_set
    service_data:
      class: layer-hidden
      elements:
      - level_0
      - level_-1

- element: legend_level_-1
  tap_action:
  - service: floorplan.class_set
    service_data:
      class: layer-visible
      element: level_-1
  - service: floorplan.class_set
    service_data:
      class: layer-hidden
      elements:
      - level_0
      - level_1