Multiple light bulb in floorplan

[michal-molcany]

Hi,
I'm not sure how to use multiple bulbs in one floor plan.
I use example as base for my floor plan

- entities:
    - light.corridor_1
  tap_action:
    action: call-service
    service: homeassistant.toggle
  state_action:
    - action: call-service
      service: floorplan.style_set
      service_data: |
        >
          var elements = [
            `${entity.entity_id}`,
            `light_gradient_color_0`,
          ];
          var color = 'rgb(210, 210, 210)';
          var opacity = 0;
          if (entity.state === 'on') {
            if (entity.attributes.color_temp) {
              var rgb = util.color.miredToRGB(entity.attributes.color_temp);
              color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
              opacity = 1;
            }
            else if (entity.attributes.rgb_color) {
              var rgb = entity.attributes.rgb_color;
              color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
              opacity = 1;
            }
          }
          var style = `fill: ${color}; stop-color: ${color}; stop-opacity: ${opacity};`;
          return {
            elements: elements,
            style: style,
          };

And in SVG I used

and it it works well.
But when I tried add new light

- entities:
    - light.corridor_1
    - light.greenroom_1
  tap_action:
    action: call-service
    service: homeassistant.toggle
  state_action:
    - action: call-service
      service: floorplan.style_set
      service_data: |
        >
          var elements = [
            `${entity.entity_id}`,
            `light_gradient_color_0`,
          ];
          ...

it use always gradient of first bulb

I tried also use

          var elements = [
            `${entity.entity_id}`,
            `${entity.entity_id}_gradient_color_0`,

but I was without any luck and it stopped working.

Thanks
Michal

[OzGav]

Hi sorry for the late reply. I am not sure I have the answer but will try and help. What happens if you take light.corridor_1 out does your green room light work then?

[OzGav]

I would also check that your entity light.greenroom_1 has an attribute of color_temp or rgb_color

[pkozul]

Hi @michal-molcany

Yes, good catch. The Light example was really geared towards a single light. We have enhanced the example so it now shows two lights working independently:

https://experiencelovelace.github.io/ha-floorplan/docs/example-light/

To make it work, we had to create a new instance of <radialGradient> in the SVG file, as each light entity needs to have its own gradient. So now, the IDs of the two gradients are:

• light.kitchen.gradient
• light.office.gradient

Each of the above gradients contains a <stop> colour that is used as the target RGB colour for each light. The stop colour IDs are:

• light.kitchen.gradient_color_0
• light.office.gradient_color_0

And so the rule now looks like this:

    - entities:
        - light.kitchen
        - light.office
      tap_action:
        action: navigate
        navigation_path: /lovelace/lights
      state_action:
        - action: call-service
          service: floorplan.style_set
          service_data: |
            >
              var elements = [
                `${entity.entity_id}`,
                `${entity.entity_id}.gradient_color_0`,
              ];

As you can see above, the IDs of the stop colours are determined dynamically, based on the entity ID.

Let us know how you go with getting multiple lights working in your scenario.