Floor plan layer sun/cloud effect with opacity

[Trzinka]

Hello.

I had a problem when I made the image change depending on the time of day.

I didn't like the realistic display of the brightness of the image,

for example at noon (the image shows full brightness),

when the external situation was completely different (cloudy).

Example image at noon:

A more realistic display:

First I tried the code for Cloud coverage:

  - platform: template
    sensors:
      cloud_coverage:
        friendly_name: "Cloud coverage"
        value_template: >-
          {% set elevation = state_attr('sun.sun','elevation') | float %}
          {% set cloud_coverage = states('sensor.astroweather_cloud_cover') | float %}
          {% set cloud_factor = (1 - (0.75 * ( cloud_coverage / 100) ** 3 )) %}
          {{ cloud_factor | round(2) }}
        unit_of_measurement: '%'
        device_class: 'illuminance'

Since I don't have a local external Illuminance sensor (lx) yet, I used sensor.astroweather_cloud_cover, which does not show the real situation where I live (distance from the capital Ljubljana, which is the only one I can choose from the list).

So I made another sensor for Sun brightness:

sun_brightness:
        friendly_name: "Sun brightness"
        value_template: >-
          {% set min_bright_percent = 50 %}
          {% set max_bright_percent = 100 %}
          {% set mins_span = 30 %}
          {% set sr = today_at((state_attr('sun.sun', 'next_rising') | as_datetime | as_local).strftime('%H:%M')) %}
          {% set pre_sunrise =  sr - timedelta(minutes=mins_span ) %}
          {% set post_sunrise = sr + timedelta(minutes=mins_span ) %}
          {% set ss = today_at((state_attr('sun.sun', 'next_setting') | as_datetime | as_local).strftime('%H:%M')) %}
          {% set pre_sunset = ss - timedelta(minutes=mins_span ) %}
          {% set post_sunset = ss + timedelta(minutes=mins_span ) %}
          {% set t = now() %}
          {{ { pre_sunrise <= t < post_sunrise: max_bright_percent - min_bright_percent + ((t - pre_sunrise).seconds * (max_bright_percent - min_bright_percent )/3600)|int(0),
              post_sunrise <= t < pre_sunset: max_bright_percent,
              pre_sunset <= t < post_sunset: max_bright_percent - ((t - pre_sunset).seconds * (max_bright_percent - min_bright_percent )/3600)|int(0)
            }.get(true, min_bright_percent) }}  
        unit_of_measurement: '%'
        device_class: 'illuminance'

To get the position of the sun and Sun brightness

After that I also like to looked at the UV sensor:

I have an internal sensor with a built-in meter (lx):

At the same time (evening/night) I also watched:

Now the outside looks somewhat comparable to this:

I have a desire and would like to ask if someone is willing to write me a code that would calculate the transparency from the given parameters.

Which I would then use in the floor plan for the layer.

- element: background
  entity: sensor.sunlight_opacity
  tap_action: false
  hover_action: false
  state_action:
    action: call-service
    service: floorplan.style_set
    service_data: |
      >
        var opacity = '';
        switch (entity.state) { 
         case '0.0': opacity ='0.1'; break; 
         case '0.1': opacity ='0.1'; break; 
         case '0.2': opacity ='0.2'; break; 
         case '0.3': opacity ='0.3'; break; 
         case '0.4': opacity ='0.4'; break; 
         case '0.5': opacity ='0.5'; break; 
         case '0.6': opacity ='0.6'; break; 
         case '0.7': opacity ='0.7'; break; 
         case '0.8': opacity ='0.8'; break; 
         case '0.9': opacity ='0.9'; break; 
         case '1.00': opacity ='1'; break; 
          }
      return `opacity: ${opacity};`;

Thank you.

[OzGav]

Which given parameters? If you mean all of the above then you would have to provide an algorithm that explains when one should be used over another or if you want the sensors combined then how would you want them combined?

[OzGav]

I can't test this but see if this works. Look in the browser console for errors if it doesn't. I also put a log line in there which I hope works which will show you the value getting returned.

- element: background
  tap_action: false
  hover_action: false
  state_action:
    service: floorplan.style_set
    service_data: |
      >
        var opacity = parseFloat((hass.states["sensor.cloud_coverage"].state +
                      Math.floor(hass.states["sensor.pir_je_illuminance_lux"].state / 100) +
                      Math.min(1,Math.floor(hass.states["sensor.weatherapi_dom_uv_index"].state / 10)) +
                      ) / 3 ).toFixed(1);
      console.log('opacity', ${opacity});              
      return `opacity: ${opacity};`;

[Trzinka]

Hi!

Thanks for an idea.

I'm somehow solving the matter and I encountered a banal problem when the only time in the calculation/average the result comes to 2 decimal places. ;=((((

Templets that I made:

  - platform: template
    sensors:
      cloud_coverage:
        friendly_name: "Cloud coverage"
        value_template: >-
          {% set elevation = state_attr('sun.sun','elevation') | float %}
          {% set cloud_coverage = states('sensor.astroweather_cloud_cover') | float %}
          {% set cloud_factor = (1 - (0.75 * ( cloud_coverage / 100) ** 3 )) %}
          {{ cloud_factor | round(1) }}
###############
      pir_illuminance:
        friendly_name: "PIR osvetljenost"
        value_template: >-
          {% set pir_illuminance = states('sensor.pir_je_illuminance_lux') | float / 100 %}
          {{ pir_illuminance | round(1) }}
##
      uv_index_pretvorba:
        friendly_name: "UV index pretvorba"
        value_template: >-
          {% set uv_index = states('sensor.weatherapi_dom_uv_index') | float / 10 %}
          {% if uv_index == 11 %}
            {% set uv_opacity = 1 %}
          {% else %}
            {% set uv_opacity = (uv_index * 1) | round(1) %}
          {% endif %}
          {{ uv_opacity | round(1) }}

  - platform: average
    name: 'Povprecje zatemnitve doma'
    entities:
      - sensor.cloud_coverage
      - sensor.pir_illuminance
      - sensor.uv_index_pretvorba

in floor plan card:

 - element: bg
              entity: sensor.povprecje_zatemnitve_doma
              tap_action: false
              hover_action: false
              state_action:
                action: call-service
                service: floorplan.style_set
                service_data: |
                  >
                    var opacity = '';
                    switch (entity.state) { 
                     case '0.0': opacity ='0.1'; break; 
                     case '0.1': opacity ='0.1'; break; 
                     case '0.2': opacity ='0.2'; break; 
                     case '0.3': opacity ='0.3'; break; 
                     case '0.4': opacity ='0.4'; break; 
                     case '0.5': opacity ='0.5'; break; 
                     case '0.6': opacity ='0.6'; break; 
                     case '0.7': opacity ='0.7'; break; 
                     case '0.8': opacity ='0.8'; break; 
                     case '0.9': opacity ='0.9'; break; 
                     case '1.00': opacity ='1'; break; 
                      }
                    return `opacity: ${opacity};`;

Now I just have to figure out how to round to 1 decimal for the average sensor!!!!

Any idea?

[OzGav]

Try changing entity.state to parseFloat(entity.state).toFixed(1)

[OzGav]

Actually you don’t even need to do that as you could just set the opacity to the entity state as your switch/case is doing nothing

so

return `opacity: ${entity.state};`;

[Trzinka]

Thanks!

The end result:

I hope it's not a coincidence that right now the average is at 1 decimal place.

The final code should be for the floor plan card:

- element: bg
              entity: sensor.povprecje_zatemnitve_doma
              tap_action: false
              hover_action: false
              state_action:
                action: call-service
                service: floorplan.style_set
                service_data: |
                  >
                    var opacity = '';
                    switch (entity.state) { 
                     case '0.0': opacity ='0.1'; break; 
                     case '0.1': opacity ='0.1'; break; 
                     case '0.2': opacity ='0.2'; break; 
                     case '0.3': opacity ='0.3'; break; 
                     case '0.4': opacity ='0.4'; break; 
                     case '0.5': opacity ='0.5'; break; 
                     case '0.6': opacity ='0.6'; break; 
                     case '0.7': opacity ='0.7'; break; 
                     case '0.8': opacity ='0.8'; break; 
                     case '0.9': opacity ='0.9'; break; 
                     case '1.00': opacity ='1'; break; 
                      }
                    return `opacity: ${entity.state};`;

[OzGav]

Remove the entire switch statement as it is doing nothing.

[Trzinka]

Did you mean so:

- element: bg
  entity: sensor.povprecje_zatemnitve_doma
  tap_action: false
  hover_action: false
  state_action:
    action: call-service
    service: floorplan.style_set
    service_data: |
      >
       var opacity = '';
         return `opacity: ${entity.state};`;

[OzGav]

Yes but you also remove the var opacity line and the | and > and put the return on the service_data line