Dynamic Picture Elements image opacity

Configuration
1

Hi! I’m trying to make the opacity of an image in the Picture Card change according with the brightness of a light. I’m editing the code with the code editor on the UI and every time I save the core like this:

  - type: image
    entity: light.bedroom_dimmer
    image: /local/images/3d_floorplan/bedroom.png
    style:
      left: 50%
      top: 50%
      width: 100%
      mix-blend-mode: lighten
      opacity: "${states['light.bedroom_dimmer'].state === 'on' ? (states['light.bedroom_dimmer'].attributes.brightness / 255) : '0'}"

the opacity line get edited to be:

opacity: >-
        ${states['light.bedroom_dimmer'].state === 'on' ?
        (states['light.bedroom_dimmer'].attributes.brightness / 255) : '0'}

And the opacity is not affected when I change the light brightness. I’m following this config. Can anyone help me with this? Thanks!

2

Hi.
Did you manage to do it in the end?
I currently have a similar problem with dynamic opacity. The opacity is not affected when I change the light brightness…

3

Hi. No, unfortunately I didn’t. I have it only turning on or off, the brightness doesn’t have any impact on the picture card in my case. If you find a solution for this please post it here, thanks!

4

Hi.

Finally I got it working!
You have to use html-template-card to get full control of CSS-styles.

This html-template-card should be the first layer within picture-elements.
With “content” you can put all needed img-elements, starting with the background.
After that you can place all other switches/buttons …

I start with the background, then room-overlays with daylight to display the brightness of each room, regardless of whether the lights are switched on or off. And on this all light-overlays.

Regards,
Andreas

type: picture-elements
elements:
  - type: custom:html-template-card
    title: ''
    ignore_line_breaks: true
    content: |
      <img src="/local/wohnung/wohnung_hintergrund_nacht.jpg" style="width:100%;left:0%;top:0%;padding:0;margin:0;position:absolute;"/>

        <img src="/local/wohnung/raum_tag_gang.png" style="width:100%;left:0%;top:0%;opacity:{{
        100/130*(states('sensor.helligkeit_gang') | float )/ 100 }};padding:0;margin:0;position:absolute;"/> 

        <img src="/local/wohnung/raum_tag_kind.png" style="width:100%;left:0%;top:0%;opacity:{{
        100/400*(states('sensor.helligkeit_kinderzimmer') | float )/ 100 }};padding:0;margin:0;position:absolute;"/> 

        <img src="/local/wohnung/raum_tag_wohnen.png" style="width:100%;left:0%;top:0%;opacity:{{
        100/300*(states('sensor.helligkeit_bewegung_esszimmer') | float )/ 100 }};padding:0;margin:0;position:absolute;"/> 

        <img src="/local/wohnung/raum_tag_schlafzimmer.png" style="width:100%;left:0%;top:0%;opacity:{{ 100/300*(states('sensor.helligkeit_schlafzimmer') | float )/ 100 }};padding:0;margin:0;position:absolute;"/> 

        <img src="/local/wohnung/raum_tag_bad.png" style="width:100%;left:0%;top:0%;opacity:{{
        100/200*(states('sensor.helligkeit_bad') | float )/ 100 }};padding:0;margin:0;position:absolute;"/>

        <img src="/local/wohnung/licht_kleiderschrank_weiss.png"
        style="width:100%;left:0%;top:0%;opacity:{{(state_attr('light.kleiderschrank', 'brightness') | float ) / 255}};padding:0;margin:0;position:absolute;"/>

        <img src="/local/wohnung/licht_gang.png"
        style="width:100%;left:0%;top:0%;opacity:{{(state_attr('light.gang_licht', 'brightness') | float ) / 255}};padding:0;margin:0;position:absolute;"/>

        <img src="/local/wohnung/licht_basilikum.png"
        style="width:100%;left:0%;top:0%;opacity:{{(state_attr('light.basilikum', 'brightness') | float ) / 255}};padding:0;margin:0;position:absolute;"/>

        <img src="/local/wohnung/licht_fernseher_ambient.png"
        style="width:100%;left:0%;top:0%;opacity:{{(state_attr('light.fernseher_licht', 'brightness') | float ) / 255}};padding:0;margin:0;position:absolute;"/>

        <img src="/local/wohnung/licht_spritzschutz.png"
        style="width:100%;left:0%;top:0%;opacity:{{(state_attr('light.spritzschutz', 'brightness') | float ) / 255}};padding:0;margin:0;position:absolute;"/>

        <img src="/local/wohnung/licht_fotos.png"
        style="width:100%;left:0%;top:0%;opacity:{{(state_attr('light.fotos', 'brightness') | float ) / 255}};padding:0;margin:0;position:absolute;"/>

         <!-- ... place for all other light-overlays -->

    style:
      top: 50%
      left: 50%
      width: 100%
      height: 100%
  - type: image
    entity: switch.heizsstrahler_wickeltisch
    ...

Floorplan
Floorplan1577×912 131 KB

2 Likes
5

Check this! It works with demo lighting entities

type: custom:config-template-card
variables:
  - states['light.kitchen_lights'].attributes.brightness
  - states['light.kitchen_lights'].state
entities:
  - light.kitchen_lights
card:
  type: picture-elements
  image: local/pictures/F0_00_Dark_15.png
  elements:
    - type: image
      entity: light.kitchen_lights
      tap_action: none
      hold_action: none
      state_image:
        'on': local/pictures/F0_00_Day.png
        'off': local/pictures/F0_00_Dark_15.png
      style:
        top: 50%
        left: 50%
        width: 100%
        opacity: '${vars[1] === ''on'' ? vars[0] / 255.0 : 0}'