hover_action: Apply the action to more elements

[done7k]

I want to highlight a number of selected elements while hovering under one of them to display they are linked. I tried your solution from the doc where I have a list of elements under the hover_action. How can I apply the action to all those elements? or at least how can I get the list of elements in action script? the object elements contains entire SVG.. and I could not find any list there.

    - name: hover_element_1
      entities:
        - sensor.sonoffrfbridge_state
      hover_action:
        - service: floorplan.class_set
          service_data:
            elements:
              - shutters_circle
              - outlet_wifi_circle
              - sensor.sonoffrfbridge_state_circle
            class: |
              >
              if (element.matches(":hover")) {
                console.log(element);
                return 'hover';
              } else {
                console.log("no match..");
                return '';
              }

[OzGav]

Have you tried grouping the elements?

[done7k]

Is there any other way? I do not really want to group those in SVG file. As well, I would prefer to select elements in the 'dependency' view, like a Node graph:
if A then select A, B and C
if B then select A and B
if C then select A and C

and so on.. this elements list feature seems a good way but how can I utilize it?

[OzGav]

I can’t see exactly what you are after but maybe multiple grouped elements? So (in your example) if I had a circle I wanted to highlight on hover I might have three circles on A, two on B and two on C and group them accordingly. The layer order will be important.

[done7k]

I have discovered a way how to do what I want. But it does not work when I move rule action to a function. I guess there is some simple problem you can help me with.
So, if I keep funcitonality within a rule it works (all elements in the list gets hover class):

    - name: hover_element_1
      entities:
        - sensor.sonoffrfbridge_state
      hover_action:
        - service: floorplan.class_set
          service_data:
            elements:
              - shutters_circle
              - outlet_wifi_circle
              - sensor.sonoffrfbridge_state_circle
            class: |
              >
              var cls = '';
              if (element.matches(":hover")) {
                cls = 'hover';
              } else {
                for (const [n, b] of Object.entries(elements)) {
                  if (b.matches(":hover") && b.id != 'svg5') { 
                    cls = 'hover';
                    break;
                  };
                }; //for
              }
              return cls;

But If I move the action to a function and then call this function, the function is actually called once! not for every elements in the list.

  functions: |
    >
    return {
      getHoverClass: (element, elements) => {
      //getHoverClass: (entity, entities, hass) => {
          console.log("getHC:: called for element: "+element.id);
          var cls = '';
          if (element.matches(":hover")) {
              console.log("getHC:: element: hover under "+element.id);
              cls = 'hover';
          } else {
            for (const [n, b] of Object.entries(elements)) {
              if (b.matches(":hover") && b.id != 'svg5') { 
                //console.log("HOVER detected "+b.id);
                cls = 'hover';
                break;
              };
            }; //for
          }
          console.log("getHC:: element: "+element.id+" styled class( "+cls+" )");
          return cls;
      }
    }

and a rule:

    - name: hover_element_2
      entities:
        - sensor.konnected_no_boards
      hover_action:
        - service: floorplan.class_set
          service_data:
            elements:
              - binary_sensor.konn_z3_siren
              - binary_sensor.konn_windows
              - binary_sensor.konn_motions
            class: ${functions.getHoverClass(element, elements)}

why is that?

[done7k]

Sorry! works... I put wrong element names.. Super

[exetico]

So, it's fixed, or? :)

Tip for next time you're going to share YAML code:

Same can be done with JS, CSS and so on 😄 .

[done7k]

Yes, as I have no further questions on this particular topic.. other will come ))