Some javascript help, please

[tsx-5]

Hey Team,

Like to get some assistance making my yaml/code a bit more efficient/clean... The following snipet is for a ceiling light/fan, of which I have many. It works (I might tweak colors and size later - but for now it's good).

     - element: fan.guest_ceiling
      tap_action:
        action: call-service
        service: honeycomb
        service_data:
          entity: entity
          xy_pad:
            x:
              service: light.turn_on
              service_data:
                entity_id: light.guest_ceiling
                brightness_step_pct: '{{ x_percentage / 5 }}'
            'y':
              service: fan.increase_speed
              service_data:
                entity_id: fan.guest_ceiling
                percentage_step: '{{ x_percentage / 33 }}'
          buttons:
            - icon: mdi:lightbulb
              entity: light.guest_ceiling
              tap_action:
                action: more-info
            - icon: mdi:lightbulb-on
              entity: light.guest_ceiling
              active: true
              tap_action:
                action: toggle
            - show: false
            - icon: mdi:fan
              entity: fan.guest_ceiling
              tap_action:
                action: more-info
            - icon: mdi:fan-off
              entity: fan.guest_ceiling
              active: true
              tap_action:
                action: toggle

However, the downside to that code is that I have to copy it for each ceiling fan/light (of which I have many). So, I was hoping to make the code a bit more adaptive. My naming convention for these entities is "fan."room"_ceiling" and light."room"_ceiling". Along with an element that has the same name as the fan."room"_ceiling. What I would like to accomplish is to monitor the element, which drives one of the entities and use javascript to create the light name (by switching fan with light). Here's what my current iteration of that looks like (and no it doesn't work). One issue I am having is that using the inspect feature of my web browser doesn't show this section being executed - so I don't see what is going wrong (other than nothing happening with the ceiling fan/light). And obviously, I'm not totally sure I have this even formatted correctly (assuming this can work at all). Definitely appreciate any thoughts.

   - element: fan.spare_ceiling
      tap_action:
        action: call-service
        service: honeycomb
        service_data:
          entity: entity
          xy_pad:
            x:
              service: light.turn_on
              service_data:
                entity_id: |
                  > 
                  console.log("I'm trying here");
                  try {
                    console.log("I'm trying here, even more");
                    const outlineName = element.replace('light','fan');
                    console.log(outlineName);
                    return `outlineName`; 
                  } catch(e) {
                    console.log("That didn't go as planned");
                  }      
                brightness_step_pct: 5
 ...

[OzGav]

What about a function? https://experiencelovelace.github.io/ha-floorplan/docs/usage/#custom-functions

[tsx-5]

I do like the idea of a function... So, created this:

functions: |
  >
  return {
    FunctionA: (element) => {
    try {
      console.log("I'm trying here, even more");
      const NewName = element.replace('fan','light');
      return NewName; 
    },
  };

with me calling it like this:

          xy_pad:
            x:
              service: light.turn_on
              service_data:
                entity_id: ${functions.FunctionA(element)}
                brightness_step_pct: 5
            'y':

unfortunately, no love... And I still can't find my debug line - so, not even sure the function is being called :-/

[OzGav]

And do you even need that. Here is a snippet from my floorplan when many entity/element combinations requires the same action:

            - entities:
                - entity: sensor.pixel_3_battery_level
                  element: merlijnbatterylevel
                - entity: sensor.gavin_pixel_4a_battery_level
                  element: gavinbatterylevel
                - entity: sensor.abigails_phone_battery_level
                  element: abigailbatterylevel
                - entity: sensor.hannahs_iphone_battery_level
                  element: hannahbatterylevel
                - entity: sensor.grace_phone_battery_level
                  element: gracebatterylevel
              tap_action: disable
              state_action:
                - service: floorplan.style_set
                  service_data:
                    style: |
                      > return `
                        stroke-dasharray: 360;
                        stroke-dashoffset: ${(360*(entity.state/100))};
                        transform-box: fill-box;
                        transform-origin: center;
                        transform: rotate(270deg);
                      `;

[tsx-5]

Well,
That's pretty cool... Wasn't tracking you could return all of those headings like that. But, I'm not sure how that helps (probably because I'm dense).

[OzGav]

OK I think the main problem is using element.replace. I don't think element is exposed? Use entity.entity_id instead? Since you have named the element the same as the entity also change your first line to entity: fan.spare_ceiling

This worked on my test page:
console.log('entity', entity.entity_id.replace('input_number','fan'));

[tsx-5]

Hey OzGav,

You are correct in that "entity" is exposed, but element doesn't seem to be. Good catch. Thanks.

[exetico]

I can see OzGav did provide some great inputs here. Did you manage to get things under control? If so, consider sharing the solution here, as part of a follow-up comment :)

[tsx-5]

Yes, OzGav did give me great hints -- that I'm still trying to put together. That's on me, I've been swamped with work and some health issues that have kept me from working on this. I thinking I'll be able to work on it today though :-)

[exetico]

Get well soon :)