Dynamic Opacity for Room SVG Rects when Lights are Toggled - Request for Help

[BramWarrick]

I've spent hours researching this and if I'm missing a relevant resource, please feel free to point me in the right direction.

I'd like to make the apparent darkness of the rooms more realistic to time of day and weather.

Anything I've found so far looks good but relies on supporting multiple png files, but I'm hoping to stay with a pure SVG and CSS approach. If I must create multiple room images within the SVG, I will, but I'm hoping there's a code-based solution and I'm missing something in my research.

What I have:

• SVG with:
  • Home floorplan as background
  • Each room has its own rect (or path)
• CSS with:
  • Entitystate-on and off classes that (currently) control the opacity of the overlay rects
  • Styles for dumb, non-updating rooms
• sensor.opacity_on & off values
• RGB javascript within the yaml file for coloring the rects

What I want:

• A way to use the floorplan.style_set to control each room's rect for more realistic shading
  • When the light.light_name is toggled
  • Using the relevant sensor.opacity value to set opacity in function

Has anyone found a way to do this within HA, ha-floorplan, and CSS without creating a variety of images that can, each, become obsolete whenever items are moved, bought, or otherwise? I'm okay supporting a background image, but I hope to avoid having 1 (or more) room-specific images.

Also: Is this a variable scope issue? If so, is there a cute or clever way to work around it?

[BramWarrick]

I'll work on this more tomorrow, but I think I found the process within one of the examples.

One of them uses 'entities["light.garage"].last_changed)' and that may give me the insights I need for what I hope to do with the sensor. I'm both happy to think I have a solution and a little confused about all of my entities being exposed on the local/www.

That said, for now, I'll think I'll take the win (pending some development and testing).

[exetico]

I can personally only think of two may way to make the shading more fancy, if it should fit to the rooms itself. As shaders and more, wouldn't align in CSS-based solutions, with the actual shadows in the room.

The two solutions:

1. Replace the image on the way, as you've already suggested
2. Place all images in your SVG file, and toggle them with classes, or similar logics.

However, for suggestion no. 2, I actually think we had someone asking about how this is possible to do in the past, and did ran into a problem. But i think it was related to something more specific. I'll see if I can find that.

[exetico]

Oh well, I did't have to think that long.

Here it is:
#361

There's also this:
#402

But you're still in a situation, where you can't avoid the multiple-room images, as you're asking for. The only thing I personally can find as a alternative idea, it to have cutouts of your "darken image" in Inkscape, and control them, instead of having to control each image. However, I'm not really sure what's the best path to accomplish a solution like that.

With that said; I'm interested in hearing what you find our, as I'm also in the process of making my new floorplan. We're not living in the plan, which are shown in the "Modern Floorplan" example, anymore 😄 ...

[OzGav]

I don’t know how it would look but maybe you could overlay a black polygon over the floorplan and then adjust the opacity to “darken” the image?

[exetico]

Another version would be, if it's possible to have the images splitted up in InkScape, and controlling the opacity there? But again, you're required to do some work. But, at least not have all of them refetched remotely. But, i'm not sure if that possible.

@OzGav Isn't that, what he don't like as a solution right now? Or do I miss something here? :D

[BramWarrick]

I don’t know how it would look but maybe you could overlay a black polygon over the floorplan and then adjust the opacity to “darken” the image?

This is almost exactly what I've been doing; one gray polygon per room. It works well and I got to this point by following the YouTube videos. I'm sure you know the ones. ;-)

I have a working solution.

This is a little hacky, and I'm sure it can be improved. I've borrowed from posts in the discussion boards, the youtube vids, the examples, and a little bit of setting out to research topics that are rusty or new to me.

To outline what I've done:
Sensors:

outside_brightness:
  friendly_name: "Outside Brightness"
  value_template: >-
    {%- set elevation = state_attr('sun.sun','elevation') | float %}
    {%- set min_elevation = -6 %}
    {%- set dim_elevation = 20 %}
      
      {% if elevation < min_elevation %}
        {%- set solar_brilliance = 0 %}
      {% elif elevation > dim_elevation %}
        {%- set solar_brilliance = 100 %}
      {% else %}
        {%- set elevation_range =  (dim_elevation | abs + min_elevation | abs) %}
        {%- set brilliance_per_degree =  (100/elevation_range) | float %}
        {%- set degrees_above_min = (elevation - min_elevation) %}
        {%- set solar_brilliance = (brilliance_per_degree * degrees_above_min) | round(2) %}
      {% endif %}

    {%- set cloud_coverage = state_attr('weather.home','cloud_coverage') | float %}
    {%- set cloud_factor = (1 - (0.5 * ( cloud_coverage / 100 ))) %}

    {%- set brightness = solar_brilliance * cloud_factor %}
    {{ brightness | round }}
opacity_floorplan_general:
  friendly_name: "Opacity for Floorplan elements - General"
  value_template: >
      {%- set min_opacity = 0.3 | float %}
      {%- set max_opacity = 0.8 | float %}
      {%- set offset = ((max_opacity - min_opacity)/100) | float %}
      {%- set opacity = (max_opacity - (states('sensor.outside_brightness') | float * offset)) | round(2) %}
      {{ (opacity * 100) | int }}
opacity_floorplan_on:
  friendly_name: "Opacity for Floorplan elements - On"
  value_template: >
      {%- set min_opacity = 0.1 | float %}
      {%- set max_opacity = 0.3 | float %}
      {%- set offset = ((max_opacity - min_opacity)/100) | float %}
      {%- set opacity = (max_opacity - (states('sensor.outside_brightness') | float * offset)) | round(2) %}
      {{ (opacity * 100) | int }}
opacity_floorplan_off:
  friendly_name: "Opacity for Floorplan elements - Off"
  value_template: >
      {%- set min_opacity = 0.3 | float %}
      {%- set max_opacity = 0.7 | float %}
      {%- set offset = ((max_opacity - min_opacity)/100) | float %}
      {%- set opacity = (max_opacity - (states('sensor.outside_brightness') | float * offset)) | round(2) %}
      {{ (opacity * 100) | int }}

Then within the yaml for the lights:

  state_action:
    - action: call-service
      service: floorplan.style_set
      service_data:
        style: >
          > var rgbColor = entity && entity.attributes &&
          entity.attributes.rgb_color ? entity.attributes.rgb_color
          : false; return rgbColor? `fill:rgb(${rgbColor});` : '';
    - action: call-service
      service: floorplan.style_set
      service_data:
        style: >
          opacity: ${entity.state === "on" ?
          (entities["sensor.opacity_floorplan_on"].state / 100) :
          (entities["sensor.opacity_floorplan_off"].state /100)};

It seems odd to do two different style_sets when one would work, but... this is functional.

I want to figure out how to push the sensor.opacity_floorplan_general to the rooms without smart bulbs - that's next on the list. If anyone has pointers on that, I'll be happy to accept them. I suspect that will be more difficult.

Can I name all the inert elements in Inkscape, then use the yaml to put the elements into a "rule" with... no entities(?) and use the style_set? Hmmm...

Physical chores beckon. I'm going to figure all of this out, though.

Thank you (all) for the awesome integration - and for jumping in to help. :-)

[BramWarrick]

I'll add that I know it's odd to multiply by 100 in the sensor only to divide by it in the yaml. I liked the way it rendered and since pushing the values into text boxes was part of my debug/develop process, the tidy "19" was preferrable over "0.19."

[OzGav]

I want to figure out how to push the sensor.opacity_floorplan_general to the rooms without smart bulbs - that's next on the list. If anyone has pointers on that, I'll be happy to accept them. I suspect that will be more difficult.

If I understand correctly you could just set the entity as something which changes often (like the time) and then set the opacity of the element each time that changes. The only thing I see is that you would need to make sure all of the rooms were being updated close to the same time.

[BramWarrick]

This is what I did for the rooms that lack smart features, and it works out nicely.

            - service: floorplan.style_set
              service_data:
                elements:
                  - hallway
                  - closet-utility
                  - closet-hers
                  - closet-his
                service: floorplan.style_set
                style: >
                  opacity:
                  ${(entities["sensor.opacity_floorplan_general"].state/ 100)};

Thank you for your input through this process and the super-nifty floorplan features!

[OzGav]

Out of interest what are you using to trigger it?