Color light overlay...

[narrcom]

I wish to overlay a light map on my floorplan, I have added the light map to my svg file (using inkscape with gradient fill) and it works great for a white globe however I need to dynamically change the gradient start color for my color globes...

Is there a way to change the gradient stop color within ha-floorplan..?

[exetico]

Could you please be a bit more specific, by telling a few more things about what you're working with, and what you're expecting.

Thanks.

Illustrations are much appreciated, too.

If possible, update the title as good as you can, too 👍.

[narrcom]

updated...

[pkozul]

@narrcom

What sort of light entities are these in HA? The light example we put together shows how to generate RGB values in CSS, to mimic the RGB values of the physical light. Not sure if this concept can be reused in your scenario.

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

Can you give us more detail about your HA light entities, and what the CSS looks like within the SVG?

[narrcom]

Yes it works but in a solid color, i want to mimic the light getting weaker the further it gets from the globe... ie gradient to transparent... i know how to get the color from the entity but i dont know if there is a way to apply it to a gradient in the floorplan...

this is the http code normally used...

<svg height="500" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
    </radialGradient>
  </defs>
  <ellipse cx="250" cy="250" rx="250" ry="250" fill="url(#grad1)" />
  Sorry, your browser does not support inline SVG.
</svg>

[pkozul]

@narrcom

Yes, there is a way. Can you try this?

In your SVG file, assign an id to each of the gradient's stops you'd like to control from floorplan (i.e. id="light_gradient_color_0"):

    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop id="light_gradient_color_0" offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
      <stop id="light_gradient_color_1" offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
    </radialGradient>	 

Then, in your floorplan config, you can simply control the style of the stop, since it can be referenced by its id (i.e. element: light_gradient_color_0).

    - entity: light.office
      tap_action:
        action: navigate
        navigation_path: /lovelace/lights
      state_action:
        - action: call-service
          service: floorplan.style_set
          service_data:
            element: light_gradient_color_0
            style: |
              >
              var color = 'rgb(0, 0, 0)';
              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;
                }
              }
              return `stop-color: ${color}; stop-opacity: ${opacity};`;

Can you try that, and let us know how it goes?

The Light example shows the gradient in action:

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

[narrcom]

Excellent... That example is perfect...

Is there a way to use the entity_id in the list of elements like this..?
this is from the light example - entities: not your above - entity:

ORIGINAL:

      state_action:
        - action: call-service
          service: floorplan.style_set
          service_data:
            elements:
              - light.office
              - light_gradient_color_0

MODIFIED:

      state_action:
        - action: call-service
          service: floorplan.style_set
          service_data:
            elements:
              - ${entity_id}
              - ${entity_id}_gradient_color_0

[pkozul]

@narrcom

Yes, it's doable. It's simply a matter of generating the entire service_data in code. Can you try this?

      state_action:
        - action: call-service
          service: floorplan.style_set
          service_data: |
            >
              var elements = [
                `${entity.entity_id}`,
                `${entity.entity_id}_gradient_color_0`,
              ];

              var color = 'rgb(0, 0, 0)';
              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,
              };

[narrcom]

wow...

ha-floorplan really is powerful if you know what your doing...

you guys are gr8... thank-you very much...

[pkozul]

Thanks @narrcom

Soon we hope to have the doco complete, so all of these featues will be more obvious.