Cloud coverage over floor plan card "darken" #404

Trzinka · 2024-01-15T12:09:26Z

Trzinka
Jan 15, 2024

Hello!
I have a wish again, namely how to darken the picture:

I made a cloud based sensor:

  - platform: template
    sensors:
      sunlight_pct:
        friendly_name: "Sončna osvetlitev"
        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 )) %}
          {%- set min_elevation = -6 %}
          {%- set max_elevation = 90 %}
          {%- set adjusted_elevation = elevation - min_elevation %}
          {%- set adjusted_elevation = [adjusted_elevation,0] | max %}
          {%- set adjusted_elevation = [adjusted_elevation,max_elevation - min_elevation] | min %}
          {%- set adjusted_elevation = adjusted_elevation / (max_elevation - min_elevation) %}
          {%- set adjusted_elevation = adjusted_elevation %}
          {%- set adjusted_elevation = adjusted_elevation * 100 %}
          {%- set brightness = adjusted_elevation * cloud_factor %}
          {{ brightness | round }}
        unit_of_measurement: '%'
        device_class: 'illuminance'
#        
      sunlight_opacity:
        friendly_name: "Sončna prosojnost"
        value_template: >-
          {%- set sunpct = states('sensor.sunlight_pct') | float %}
          {%- set opacity = sunpct / 100 | float %}
          {{ opacity }}

Solar lighting sensor

Solar transparency sensor:

Is there any solution to make the sunny day image "darken" according to the sensor?

Answered by Trzinka

Jan 17, 2024

I found some sort of instant solution!

If this works it will be great because I won't need the following anymore:

A sensor that determines what part of the day it is:

  - platform: template
    sensors:
      del_dneva:
        friendly_name: "Del dneva"
        value_template: >
          {% set current_hour = strptime(states('sensor.time'), "%H:%M").hour %}
          {% set sun_state = states('sun.sun') %}
          {% if sun_state == "below_horizon" and current_hour < 22 %}
            Noč
          {% elif sun_state == "above_horizon" and current_hour < 6 %}
            Jutro
          {% elif '09:00' <= states('sensor.time') <= '11:45' %}
            Dopoldan
          {% elif '11:45…

View full answer

OzGav · 2024-01-16T13:02:20Z

OzGav
Jan 16, 2024

You could perhaps change the opacity of the image and have a black background behind it?

1 reply

Trzinka Jan 16, 2024
Author

Thanks for the reply.
Any idea how to write the code for this?

Some code example, maybe, because you almost know the entire composition of my floor plan card!

Eloura74 · 2024-01-17T10:33:09Z

Eloura74
Jan 17, 2024

with sweethome you can take captures at different times of the day which will change the brightness, and then create a binary.sensor with "I tried some time ago" for the times of the day (morning, noon, evening, night) .
then in your floorplan with a condition you put the image according to the time:

conditions:
- entity: binary_sensor.matin
state: 'on'
elements:
- type: image
entity: binary_sensor.matin
image: /local/Floor_Blue/HA/transparent.png
style:
name: Luminosité matin
left: 50.00%
top: 50.00%
width: 100%
state_image:
'on': /local/Floor_Blue/HA/off_10h.png
type: conditional

5 replies

Trzinka Jan 17, 2024
Author

Hi
Thanks for the reply.

I have a pic/image depending on the state of the day! It works great.
But that's not realistic.

For example, in real time it's cloudy outside, but my image/picture is perfectly bright because it's the middle of the day!

If you notice I have two sensors (Sončna osvetlitev=Solar Exposure and Sončna prosojnost=Solar Transparency " 
I found the code on the internet and adapted it to my needs") which are based on (sensor.astroweather_cloud_cover).

Now I don't know how to use the sensor, especially not which of the two mentioned sensors

(due to lack of knowledge in this field) and finally how to write the code!

OzGav Jan 17, 2024

It looks to me that you could use either sensor. You then need to decide how many different images you are going to use. Then just do the same type of code that you used in your sensors.yaml here #396 (comment) using values that you find work well to have the image represent the outside conditions

The only thing to note is the floorplan rules use JavaScript so you need to use this syntax https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else look here for an actual example https://experiencelovelace.github.io/ha-floorplan/docs/example-light/

Trzinka Jan 17, 2024
Author

Thanks again for your reply!

I tried the setup below

#background {
  mix-blend-mode: lighten !important;
	opacity: 0.5  !important;
}

and got such a result: with opacity: 0.5

without opacity

Now my question is how to write the code that would use the opacity sensor?

OzGav Jan 17, 2024

I’m not at home to check it works but something like this

      element: background
      entity: sensor.sončna_osvetlitev
      state_action:
        - service: floorplan.style_set
          service_data: |
            >
              var opacity = 0;

              if (entity.state < 0.06) {
                  opacity = 0.5
                }
                else  {
                  opacity = 1;
                }
              return `opacity: ${opacity};`;

Trzinka Jan 17, 2024
Author

Hi!

It works with a little tweak:

    - 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 = 0;
            if (entity.state < 0.06) {
                opacity = 0.5
              }
              else  {
                opacity = 1;
              }
            return `opacity: ${opacity};`;

Is it possible to read the opacity from the sensor instead of 0.5?

Trzinka · 2024-01-17T19:06:10Z

Trzinka
Jan 17, 2024
Author

I found some sort of instant solution!

If this works it will be great because I won't need the following anymore:

A sensor that determines what part of the day it is:

  - platform: template
    sensors:
      del_dneva:
        friendly_name: "Del dneva"
        value_template: >
          {% set current_hour = strptime(states('sensor.time'), "%H:%M").hour %}
          {% set sun_state = states('sun.sun') %}
          {% if sun_state == "below_horizon" and current_hour < 22 %}
            Noč
          {% elif sun_state == "above_horizon" and current_hour < 6 %}
            Jutro
          {% elif '09:00' <= states('sensor.time') <= '11:45' %}
            Dopoldan
          {% elif '11:45' <= states('sensor.time') <= '12:15' %}
            Poldne
          {% elif '12:15' <= states('sensor.time') <= '19:00' %}
            Popoldan
          {% elif sun_state == "below_horizon" and current_hour < 16 %}
            Večer
          {% endif %}

Setting in the floorplan card:

rules:
            - element: del_dneva
              entity: sensor.del_dneva
              tap_action: false
              hover_action: false
              state_action:
                action: call-service
                service: floorplan.image_set
                service_data: |
                  >
                   var imageName = ''; 
                   switch (entity.state) { 
                     case 'Jutro': imageName ='jutro'; break; 
                     case 'Dopoldan': imageName = 'dopoldan'; break; 
                     case 'Poldne': imageName = 'poldne'; break; 
                     case 'Popoldan': imageName = 'popoldan'; break; 
                     case 'Večer': imageName = 'vecer'; break; 
                     case 'Noč': imageName = 'noc'; break;  
                   } 
                   return '/local/img/fp/' + imageName + '.png';

New sensor configuration that I will have to adjust (for now it works):

  - platform: template
    sensors:
      sunlight_pct:
        friendly_name: "Sončna osvetlitev"
        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 )) %}
          {%- set min_elevation = -6 %}
          {%- set max_elevation = 90 %}
          {%- set adjusted_elevation = elevation - min_elevation %}
          {%- set adjusted_elevation = [adjusted_elevation,0] | max %}
          {%- set adjusted_elevation = [adjusted_elevation,max_elevation - min_elevation] | min %}
          {%- set adjusted_elevation = adjusted_elevation / (max_elevation - min_elevation) %}
          {%- set adjusted_elevation = adjusted_elevation %}
          {%- set adjusted_elevation = adjusted_elevation * 100 %}
          {%- set brightness = adjusted_elevation * cloud_factor %}
          {{ brightness | round }}
        unit_of_measurement: '%'
        device_class: 'illuminance'
#        
      sunlight_opacity:
        friendly_name: "Sončna prosojnost"
        value_template: >-
          {%- set sunpct = states('sensor.sunlight_pct') | float %}
          {%- set opacity = sunpct / 100 | float %}
          {{ opacity }}
#          
      visina_sonca:
        friendly_name: "Višina sonca"
        value_template: >-
          {% if state_attr('sun.sun','elevation') > 20  %}
            svetlo
          {% elif state_attr('sun.sun','elevation') > 9 %}
            vmesno
          {% elif state_attr('sun.sun','elevation') > -3 %}
            temno
          {% else %}
            črno
          {% endif %}

New configuration in floorplan card:

- 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.3'; break; 
                     case '0.01': opacity ='0.3'; break; 
                     case '0.02': opacity ='0.3'; break; 
                     case '0.03': opacity ='0.3'; break; 
                     case '0.04': opacity ='0.4'; break; 
                     case '0.05': opacity ='0.5'; break; 
                     case '0.06': opacity ='0.6'; break; 
                     case '0.07': opacity ='0.7'; break; 
                     case '0.08': opacity ='0.8'; break; 
                     case '0.09': opacity ='0.9'; break; 
                     case '0.10': opacity ='1'; break; 
                      }
                    return `opacity: ${opacity};`;

Now I'm just using one main image for the background and if everything works (I doubt it will immediately) the image should now be affected by the current clarity/cloudiness in my location so I no longer have the image colored by the midday sun when it's outside due to cloud cover almost dark!

Current display of the night:

I'm currently using this image:

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cloud coverage over floor plan card "darken" #404

{{title}}

Replies: 3 comments 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Cloud coverage over floor plan card "darken" #404

Trzinka Jan 15, 2024

I found some sort of instant solution!

If this works it will be great because I won't need the following anymore:

Replies: 3 comments · 6 replies

OzGav Jan 16, 2024

Trzinka Jan 16, 2024 Author

Eloura74 Jan 17, 2024

Trzinka Jan 17, 2024 Author

Now I don't know how to use the sensor, especially not which of the two mentioned sensors

(due to lack of knowledge in this field) and finally how to write the code!

OzGav Jan 17, 2024

Trzinka Jan 17, 2024 Author

Thanks again for your reply!

Now my question is how to write the code that would use the opacity sensor?

OzGav Jan 17, 2024

Trzinka Jan 17, 2024 Author

Is it possible to read the opacity from the sensor instead of 0.5?

Trzinka Jan 17, 2024 Author

I found some sort of instant solution!

If this works it will be great because I won't need the following anymore:

New sensor configuration that I will have to adjust (for now it works):

Trzinka
Jan 15, 2024

Replies: 3 comments 6 replies

OzGav
Jan 16, 2024

Trzinka Jan 16, 2024
Author

Eloura74
Jan 17, 2024

Trzinka Jan 17, 2024
Author

Trzinka Jan 17, 2024
Author

Trzinka Jan 17, 2024
Author

Trzinka
Jan 17, 2024
Author