Seeking Guidance: Integrating Dynamic Light Colors onto PNGs in Home Assistant Floorplan

[HugoNaza]

Hello,

First of all, thank you for the help you provided me last time.

However, I am now facing new challenges with my project and I could use your assistance to shed some light on them. My plan is working correctly: the YAML and CSS are well synchronized, and the lights turn on according to the state of my lamps. Nevertheless, I am stuck on a specific feature: transforming the color of each lamp directly onto the PNG images of my Floorplan.

After attempting to integrate information from the documentation, I found this tutorial which seems to be the most comprehensive on this subject. And I tried to add:

AFTER THAT
            tap_action: false
                state_action:
                  - action: call-service
                    service: floorplan.class_set
                    service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'

  - action: call-service
    service: floorplan.style_set
    service_data:
      style: >
        const hueRotation = entity.attributes.hs_color ? entity.attributes.hs_color[0] : 0;
        const opacity = entity.state === 'on' ? (entity.attributes.brightness / 255) : 0;
        return `filter: hue-rotate(${hueRotation}deg); mix-blend-mode: lighten; opacity: ${opacity};`;

But this does not seem to work with rules, it seems to only work for individual PNGs with the element property, and so I don't see how to do it in my case. Is there another way to achieve this with the code I have created?

I put the errors of this code at the end of my post.

YAML :

views:
  - path: floorplan
    title: Floorplan
    panel: true
    cards:
      - type: horizontal-stack
        cards:
        - type: 'custom:floorplan-card'
          style: >
            ha-card {
                max-width: 85vh;
                margin: 0 auto;
                background: none;
                box-shadow: none;
            }
          config:
            image:
              location: /local/floorplan/floorplan_optimised.svg
              cache: false
            stylesheet:
              location: /local/floorplan/floorplan.css
              cache: false
            defaults:
              hover_action:
                action: hover-info
              tap_action:
                action: more-info
              hold_action: more-info
            rules:

              - entities:
                  - entity: media_player.salon_remote_tv
                    element: media_player_overlay-salon_remote_tv
                tap_action: false
                state_action:
                  - action: call-service
                    service: floorplan.class_set
                    service_data: '${(entity.state === "on") ? "media-on" : "media-off"}'

              - entities:
                  - cover.rideaux_salon_rideau
                  - cover.rideau_chambre_rideau
                  - cover.rideau_buanderie_rideau
                tap_action:
                  action: more-info
                hold_action:
                  action: "toggle"
                state_action:
                  action: call-service
                  service: floorplan.class_set
                  service_data: "motion-${entity.state}"

              - entities:
                  - light.salon_global
                tap_action:
                  action: more-info
                hold_action:
                  action: "toggle"
                state_action:
                  action: call-service
                  service: floorplan.class_set
                  service_data: "motion-${entity.state}"
                  
              - entities:
                  - entity: light.bureau
                    element: light_overlay-bureau
                  - entity: light.canape
                    element: light_overlay-canape
                  - entity: light.escalier_mur
                    element: light_overlay-escalier_mur
                  - entity: light.escalier_top
                    element: light_overlay-escalier_top
                  - entity: light.tv_back
                    element: light_overlay-tv_back
                  - entity: light.tv_top
                    element: light_overlay-tv_top
                tap_action: false
                state_action:
                  - action: call-service
                    service: floorplan.class_set
                    service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
                    
              - entities:
                  - light.bureau
                  - light.canape
                  - light.escalier_mur
                  - light.escalier_top
                  - light.tv_back
                  - light.tv_top
                tap_action: toggle
                state_action:
                  action: call-service
                  service: floorplan.class_set
                  service_data: 'light-${entity.state}'

CSS :

/* Cibler les images "allumées" */
image[id*="light_overlay-"].light-on {
  opacity: 1 !important;
  mix-blend-mode: lighten; /* Ajoutez ceci pour le mode lighten */
}

/* Cibler les images "éteintes" */
image[id*="light_overlay-"].light-off{
  opacity: 0 !important;
}

/* Styles par défaut pour toutes les images de lampes */
image[id*="light_overlay-"] {
  opacity: 0 !important; /* Opacité par défaut pour les lampes éteintes */
  transition: opacity .25s;
  -moz-transition: opacity .25s;
  -webkit-transition: opacity .25s;
  mix-blend-mode: lighten; /* Ajoutez ceci pour le mode lighten */
}

/* Cibler les images "allumées" */
image[id*="media_player_overlay-"].media-on{
  opacity: 1 !important;
  mix-blend-mode: lighten; /* Ajoutez ceci pour le mode lighten */
}

/* Cibler les images "éteintes" */
image[id*="media_player_overlay-"].media-off {
  opacity: 0 !important;
}

/* Styles par défaut pour toutes les images de lampes */
image[id*="media_player_overlay-"]{
  opacity: 0 !important; /* Opacité par défaut pour les lampes éteintes */
  transition: opacity .25s;
  -moz-transition: opacity .25s;
  -webkit-transition: opacity .25s;
  mix-blend-mode: lighten; /* Ajoutez ceci pour le mode lighten */
}

Errors :

Thank you very much for your help, and I hope I have not misunderstood again or made a silly mistake. Thank you in advance.

[OzGav]

You can’t use that tutorial as that guy is using the picture elements card.

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

Look through the discussions on GitHub for someone that may have done something similar to what you want. You might also find info in the HA forums just make sure you are looking at posts regarding the current version of floorplan as the syntax changed when ha-floorplan for Lovelace was released.

[exetico]

Answer here, @HugoNaza.

[HugoNaza]

Hello,

Ok thanks 😊

Thank you for your suggestions and the examples provided. I have looked through various tutorials that show how to change the color of an SVG shape based on the light, but I am having trouble understanding how to apply this to my specific project.

My current setup uses 3D images of my apartment where each lighting is represented by a separate image. These images are then overlaid in "lighten" mode to simulate the interaction of different light beams, which provides a realistic visual integration and easier management.

However, I am uncertain about how to integrate the color-changing method directly with these PNG images. Will changing the color of an SVG object affect the entire image area or just the light I wish to adjust? How can I apply this technique to achieve the desired result without losing the overlay quality I currently have?

Any help or clarification on how to apply this method would be greatly appreciated.

Thank you in advance for your time and assistance.

[OzGav]

If I understand correctly you want to have a lights on image but then have a tinge to the image which reflects the state of an RGB light. If that is correct then I would probably add an invisible SVG element in the shape you want and then apply a colour to that shape and adjust the opacity to get the effect you are after. Would that work?

[HugoNaza]

Thanks for your message.

I have see this tutorial, but I don't succes to find the good solution to integrate him. I have try like that, but it don't work and I don't understand how add differently with the exemple. I have also watch the forum, but I find only without svg or with the old solution and I'm a little bit confused.

My test :

YAML:

- entities:
                  - entity: light.bureau
                    element: light_overlay-bureau
                  - entity: light.canape
                    element: light_overlay-canape
                  - entity: light.escalier_mur
                    element: light_overlay-escalier_mur
                  - entity: light.escalier_top
                    element: light_overlay-escalier_top
                  - entity: light.tv_back
                    element: light_overlay-tv_back
                  - entity: light.tv_top
                    element: light_overlay-tv_top
                tap_action: false
                state_action:
                  - action: call-service
                    service: floorplan.class_set
                    service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
                    
              - entities:
                  - light.bureau
                  - light.canape
                  - light.escalier_mur
                  - light.escalier_top
                  - light.tv_back
                  - light.tv_top
                tap_action: toggle
                state_action:
                  action: call-service
                  service: floorplan.class_set
                  service_data: 
 |
          >
            var elements = [
              `light_overlay-${entity.entity_id}`,
            ];

            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,
            };

And the same with my entity but also with my entity transfert in elements.

Have you an idea of the problem or the solution ?
Thanks a lot for your time :)

[exetico]

Hello there. Why would you color your PNG files with a overlay/replacement, INSTEAD of coloring a SVG object? We have plenty of examples - also one where you can see the RGB color added to a SVG object, as OzGav has pointed out 😊.

Also, please comment on a answer. Do not create a new answer, to a existing answer. Like I have done here.