"Flicker" on card since HA Core update to 2022.11.1

[SdeGeata]

So I, as I'm sure many of you have updated to HA Core 2022.11.1. As soon as I did so, I noticed a "flicker" on my floor-plan card. I was told by someone after I reported it as a bug, that is has to do with the Config-Template-Card refreshing as entity states are changed - only I hadn't changed and entity states. It was a flicker that just went every couple of seconds no matter what was going on. It only manifested after the core update. Please see attached video capture to see the effect.

Has anyone else noticed this? if so, what is the remedy?

My temporary fix was to downgrade the Core to 2022.10.5, so it is at least usable and doesn't manifest the undesired effect. I admit though, this is a temporary fix.

Any input is appreciated.

https://user-images.githubusercontent.com/5808871/200188813-846a8a93-22fa-49f1-b88e-58edca5e5598.mov

[detroitgoose]

@SdeGeata Yes same issue.

As noted here https://github.com/iantrich/config-template-card/issues/114, the issue appears to be that we've wrapped the entire picture-element card inside of the config-template-card.

This basically means a rewrite of the yaml to put each element into it's own config-template-card. I've yet to do this, and so can't say how it will all work.

The code below is an example of a "properly configured" elements card, as suggested by the author of the config-template-card:

type: picture-elements
image: http://hs.sbcounty.gov/CN/Photo%20Gallery/_t/Sample%20Picture%20-%20Koala_jpg.jpg?Mobile=0
elements:
  - type: 'custom:config-template-card'
    variables:
      - states['light.bed_light'].state
    entities:
      - light.bed_light
      - sensor.light_icon_color
    element:
      type: icon
      icon: "${vars[0] === 'on' ? 'mdi:home' : 'mdi:circle'}"
      style:
        '--paper-item-icon-color': '${ states[''sensor.light_icon_color''].state }'
    style:
      top: 47%
      left: 75%

Yes. I expect this to be a big headache to rewrite...

[detroitgoose]

@SdeGeata

I took a few hour today to rewrite my picture-elements card with the previous mentioned changes in structure and it has definitely reduced the "flickering."

Now with the picture-elements card no longer nested in a config-template-card, and each element now nested in its own config-template-card, there is no flickering on state change*

*That said, this issue is still exists for individual picture elements IF you are using the sensor.time entity

I've got my card changing every couple of hours to show daylight/shadows, and those images still flicker every minute when the time sensor updates. A workaround could be making a template sensor that uses sensor.time but only updates the dummy sensor every few hours.

Hope this helps Cheers

[ssiillvvyyaannaa]

• In the plane, my active points, of the lights, stopped working.
• In the plane, My active points, of the power switches, If they work.
• I went back to the previous version
• I already published it.

[SdeGeata]

@detroitgoose Thanks for your input. I also sat down and rewrote all my YAML. Finally, I really only needed three custom-template-cards, as those are the only entities that required templates to modify the css of the image layers. For all the other lighting layers, there are exposed by simply using a condition if the entity is on.

Using only three custom-template-cards within the picture-elements-card seems to have solved it for me.

[anto86na]

@SdeGeata Yes same issue.

As noted here iantrich/config-template-card#114, the issue appears to be that we've wrapped the entire picture-element card inside of the config-template-card.

This basically means a rewrite of the yaml to put each element into it's own config-template-card. I've yet to do this, and so can't say how it will all work.

The code below is an example of a "properly configured" elements card, as suggested by the author of the config-template-card:

type: picture-elements
image: http://hs.sbcounty.gov/CN/Photo%20Gallery/_t/Sample%20Picture%20-%20Koala_jpg.jpg?Mobile=0
elements:
  - type: 'custom:config-template-card'
    variables:
      - states['light.bed_light'].state
    entities:
      - light.bed_light
      - sensor.light_icon_color
    element:
      type: icon
      icon: "${vars[0] === 'on' ? 'mdi:home' : 'mdi:circle'}"
      style:
        '--paper-item-icon-color': '${ states[''sensor.light_icon_color''].state }'
    style:
      top: 47%
      left: 75%

Yes. I expect this to be a big headache to rewrite...

hi the only ways to solve flickering is to downgrade or rewrite all code?