full card reload any time an entity has a value change

[JunghaJungha]

Hi, it seems since HA version 2021.9.0 the config-template-card fully reloads as soon as any entity has a value change. It worked perfect in previous versions.

I use this card in my floorplan and uses the light entities to update the floorplan.

Since this version, it gives the blue round circles when in loading phase (it did not in previous HA version) and it will reload (disappear and start over again building the card) as soon as it gets triggered by an entity.

Thanks in advance for support.

[MaxxKra]

I have the same problem since updating to 2021.9.x. The UI works without "config-template-card", but I need templates to display the LED colors

[iantrich]

@bramkragten you happen to know what might have caused this off the top of your head? I haven't been keeping up on frontend changes as of late. Thanks!

[iantrich]

Possible Lovelace issue: https://github.com/home-assistant/frontend/issues/9988

[bkr1969]

I have no problem with the entities initially loading, but I too have the entire screen reloaded each time a state changes or is even polled. It's particularly bad when my roomba is running and the screen reloads literally every second. I haven't seen the blue circles, but I do get a grey "area" around any entity that I click, i.e. icons or images used to toggle lights and fans that lingers until the screen is reloaded. I skipped core 2021.8 due to thermostat issues but I did not have this issue on 2021.7

[bkr1969]

@bramkragten has closed all issues with this relating to front end. Definitely needs to be looked at from the card side, likely combined with front end.

[smonesi]

I forced home-assistant-frontend==20210818.0 (but kept everything else aligned to 2021.9) and the issue disappeared.

It is still present with home-assistant-frontend==20210825.0, so the issue is caused by something committed between those two tags (I see that https://github.com/home-assistant/frontend/pull/9690 contains a change regarding ha-circular-progress but I have no real clue if this is related or not).

[bkr1969]

Can you please tell me how you did the 0818.0 frontend? I skipped all 08 due to issues with my thermostat integration. Those were fixed with 09 but if I'm able to just revert the frontend and keep the thermostats working, that would be great until this issue is fixed.

[JunghaJungha]

Yes, please let me know how to force to a previous version.

[JunghaJungha]

Correction:

Also I reprogrammed my floorplan without config-template-card, but just the picture elements card. --> I do get the spinning circles only the first time and after that it doesn't reload the card anymore.

But it also does not update when a light is being turned on. And of course the "mix-blend-mode: lighten" function doesn't work. That's why I need the config-template-card.

[smonesi]

Yes, please let me know how to force to a previous version.

I have a manual installation of Home Assistant in a python virtual environment. In the root directory of the python env, I edited lib64/python3.9/site-packages/homeassistant/package_constraints.txt replacing home-assistant-frontend==20210830.0 with home-assistant-frontend==20210818.0 and I also changed in the same way the lib64/python3.9/site-packages/homeassistant/components/frontend/manifest.json file.

Then I run pip3 install home-assistant-frontend==20210818.0 although I think this step is useless (it was the first thing I tried but without changing the files above, the latest version was automatically installed).

I'm not sure this is the best way to do this (and I'm not even sure if it may cause unwanted side-effects), but for now it looks like a good workaround.

[bkr1969]

Unfortunately that will not work for me. :-|

[iantrich]

Could someone try to get me a really simple config that replicates this issue? Thanks.

[bkr1969]

About as simple as I can get.

type: custom:config-template-card
entities:
  - switch.ceiling_fan
card:
  type: picture-elements
  elements:
    - type: image
      tap_action:
        action: toggle
      entity: switch.ceiling_fan
      image: /local/floorplan/famfanoff.png
      state_image:
        'on': /local/floorplan/famfanon.png
      style:
        top: 80.3%
        left: 77.6%
  image: https://demo.home-assistant.io/stub_config/floorplan.png

I included my still and animated fan.png

[JunghaJungha]

Hi, if you take the example of Brian and replace the fan switch with a light switch you can physical control on the wall, you will see it will reload the floorplan each time you switch the light.

[Nantero1]

+1 on this one, same problems here. Stripped down everything from my config, till I could clearly isolate, that the issue is with custom:config-template-card together with the new HA 2021.9.x update :(

A google search for this issue brought me here. Exactly what I am experiencing. Unfortunately, the browser debugging didn't give me any additional clues about what might be "broken" since the latest HA update.

[lockyt]

Getting the same issues. I will also add that it flattens the battery on my iPad in the wall faster than it will charge when I have HA app loaded and displayed. Doesn't when I close it down - so lots of processing going on.

[MaxxKra]

With version 2021.9.6, the error no longer occurred with my configuration. I don't know what was changed but it seems to work.

Update!

After a while the message "New Version of Frontend available" appeared. When I confirmed this, the blue circles were back and the reload started all over again. So I went back to version 2021.8.8.

[JunghaJungha]

I am also running 2021.9.6 and the reloading is still there, although it seems to be a bit quicker. I can still trigger the reloading by switching on a light.

[Nantero1]

With version 2021.9.6, the error no longer occurred with my configuration. I don't know what was changed but it seems to work.

Nope. Issue is still there. Of course the minimal configuration is minimal, but with a more sophisticated configuration the reloading is a big pain.

[TCoughlin02]

I am having the same issue, even after updating to 2021.9.6

[GraemeAllen]

Same issue for me after updating to 2021.9.6. Rolled back to 2021.8.8 and the problem has gone.

Edit: Despite rolling back Home Assistant Core to 2021.8.8, the problem persists in the Android app (app version 2021.9.0-minimal). The card is working correctly on both Firefox and Chrome browsers on my Android device.

[smonesi]

I had a deeper look at https://github.com/home-assistant/frontend/pull/9690 and although I'm not really a Java/TypeScript developer I believe this PR does more than "Only update cameras when they are visible" as it introduces the concept of image "loading" (and the spinning image) for all the images, not just cameras.

It looks like the "loading" code is triggered when a picture-elements is first loaded but, for some reason, also every time it is re-loaded due to its content being changed by the surrounding config-template-card. This affects all the images content of the picture-elements, including the main image whose height is also reset to the default 100px during load (hence the "squeeze" effect shown in the screenshot above).

Unfortunately I am not able to even try to fix either the hui-image code (by removing the "loading" feature on static images, that seems a bit unnecessary) or the config-template-card (if possible, to avoid it triggering a complete reload of its inner card).

[iantrich]

I'll try to take a look tonight or tomorrow.

[JunghaJungha]

I had a deeper look at https://github.com/home-assistant/frontend/pull/9690 and although I'm not really a Java/TypeScript developer I believe this PR does more than "Only update cameras when they are visible" as it introduces the concept of image "loading" (and the spinning image) for all the images, not just cameras.

It looks like the "loading" code is triggered when a picture-elements is first loaded but, for some reason, also every time it is re-loaded due to its content being changed by the surrounding config-template-card. This affects all the images content of the picture-elements, including the main image whose height is also reset to the default 100px during load (hence the "squeeze" effect shown in the screenshot above).

Unfortunately I am not able to even try to fix either the hui-image code (by removing the "loading" feature on static images, that seems a bit unnecessary) or the config-template-card (if possible, to avoid it triggering a complete reload of its inner card).

Good work. You might involve @bramkragten if that didn't happen yet.

[iantrich]

Took a quick glance at my code and I believe the issue is that the card is re-rending on updates. Not sure why I designed it that way, but that's super inefficient. It's gone unnoticed because it was rendered so quickly, I'm guessing. A fix should be easy enough for the performance aspect. For those that have images not loading at all and stay as loading symbols, might something more to that I think.

[bkr1969]

@iantrich, thanks for your time on this. I have found that most people who are involved with HA are pretty committed to it despite being a non-paying job. Looking forward to this fix!

[iantrich]

Okay, got back to my laptop and looked a bit closer at the problem and the issues described here and actually think it is just the use of picture-elements in general. I added element as an option for this exact reason, as watching at the top level of the card is just a really bad idea with this card.

So, I think the main problem is actually how this is being used with picture-elements cards. Instead of using this card at the top-level you should be using it at the element level per the docs: https://github.com/iantrich/config-template-card#picture-elements-card-example

This will be the best for performance and will not cause the full card to re-render.

I'm hopeful that changing your configs in such a way will fix your issues and unless anyone here has a good reason to do picture-elements at the card-level, I think I'll disallow type: picture-elements from being used in such a manner.

[bkr1969]

Can you modify the simple config example I posted to show this? I'm leery about all the sunlight opacities and whatnot in my actual config.

[iantrich]

type: picture-elements
image: https://demo.home-assistant.io/stub_config/floorplan.png
elements:
  - type: custom:config-template-card
    entities:
      - switch.ceiling_fan
    element:
      type: image
      tap_action:
        action: toggle
      entity: switch.ceiling_fan
      image: /local/floorplan/famfanoff.png
      state_image:
        'on': /local/floorplan/famfanon.png
      style:
        top: 80.3%
        left: 77.6%

[bkr1969]

That doesn't seem to work with the sunlight opacity. Here's the start of my original code:

type: custom:config-template-card
entities:
  - sun.sun
  - light.couch_light
  - light.table_light
  - light.chair_light
  - light.main_light
  - light.dinning_room
  - light.kitchen
  - light.0420038868c63abfbb83
  - light.sink
  - switch.patio
  - switch.coach_lights
  - light.living_room_lamp
  - light.living_room
  - light.front_room
  - light.foyer
  - switch.warmer
  - light.stairs
  - switch.moms_lamp
  - light.entry_hall
  - switch.liv_tree
  - binary_sensor.shelly1_500291ed53d5_input
  - person.brian_2
  - person.desiree
  - person.mia
  - lock.front_door
  - sensor.front_door_battery
  - switch.flower_bed_4
  - switch.front_yard_2
  - switch.side_yard_2
  - switch.main_backyard_2
  - switch.patio_3
  - switch.north_backyard_2
  - input_boolean.downtherm
  - climate.downstairs
  - sensor.recycle
  - sensor.trash
  - alarm_control_panel.alarm_com
  - weather.home
  - vacuum.downstairsroomba
  - switch.ceiling_fan
  - input_boolean.mominfo
  - switch.moms_lamp
  - switch.office
  - switch.purple
  - switch.white_fan
  - input_boolean.momalexa
  - media_player.mom_s_office
  - input_boolean.famalexa
  - media_player.tv_room
card:
  type: picture-elements
  image: /local/floorplan/darkpanel.png
  style: |
    ha-card:first-child {
      background: rgba(42, 46, 48, 1)
    }
  elements:
    - type: image
      action: none
      entity: sun.sun
      state_image:
        above_horizon: /local/floorplan/lightpanel.png
        below_horizon: /local/floorplan/transp.png
      style:
        height: 100%
        left: 50%
        mix-blend-mode: lighten
        opacity: ${ states['sensor.sunlight_opacity'].state }
        top: 50%
        width: 100%
      tap_action:
        action: none
      hold_action:
        action: none
    - type: image
      action: none
      entity: light.couch_light
      hold_action:
        action: none
      image: /local/floorplan/transcouch.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['light.couch_light'].state === 'on' ?
          (states['light.couch_light'].attributes.brightness / 255) :'0'}
        top: 50%
        width: 100%
        height: 100%
      tap_action:
        action: none

How do I modify it? I'm getting errors that I can't completely read because they're off the screen to the left, but It looks like there's a problem with my daylight png and definitely something with the sunlight opacity.

[bkr1969]

Even with this completely cut down card, the daylight image doesn't line up and the opacity does not work.

type: picture-elements
image: /local/floorplan/darkpanel.png
style: |
  ha-card:first-child {
    background: rgba(42, 46, 48, 1)
  }
elements:
  - type: custom:config-template-card
    entities:
      - sun.sun
    element:
      type: image
      action: none
      entity: sun.sun
      state_image:
        above_horizon: /local/floorplan/lightpanel.png
        below_horizon: /local/floorplan/transp.png
      style:
        height: 100%
        left: 50%
        mix-blend-mode: lighten
        opacity: ${ states['sensor.sunlight_opacity'].state }
        top: 10%
        width: 100%
      tap_action:
        action: none
      hold_action:
        action: none

[bkr1969]

OK...I'm giving a lot of feedback to hopefully pin this down. First of all, the simple example you reposted does not allow placement of the fan image. It always hangs off the bottom left corner barely visible. When I take it out and put it as an element of the picture-elements card, it is moveable but always has a grey circle around it until I click somewhere else. That isn't right. I got my daylight image to align by making it an element of picture-element, but because it is now not nested inside the config-template card, the opacity doesn't work at all. I'm beginning to feel like there is no work around for this. Picture-elements has to be a child of config-template, not the other way around.

[iantrich]

I messed up the example. style should be at the level of config-template-card, not under element

[bkr1969]

Helpful, but I still cannot get my images for lights on to show, or if I get them to show they don't toggle. Take a look at this and tell me what's wrong (there are multiple alerts not fully visible off the left side of the screen):

type: picture-elements
image: /local/floorplan/darkpanel.png
style: |
  ha-card:first-child {
    background: rgba(42, 46, 48, 1)
  }
elements:
  - type: custom:config-template-card
    entities:
      - sun.sun
    element:
      type: image
      image: /local/floorplan/transp.png
      action: none
      state_image:
        above_horizon: /local/floorplan/lightpanel.png
        below_horizon: /local/floorplan/transp.png
      style:
        height: 100%
        left: 50%
        mix-blend-mode: lighten
        opacity: ${ states['sensor.sunlight_opacity'].state }
        top: 50%
        width: 100%
      tap_action:
        action: none
      hold_action:
        action: none
  - type: custom:config-template-card
    entities:
      - light.couch_light
    element:
      type: image
      image: /local/floorplan/transcouch.png
      action: none
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['light.couch_light'].state === 'on' ?
          (states['light.couch_light'].attributes.brightness / 255) :'0'}
        top: 50%
        width: 100%
        height: 100%

[smonesi]

I think there is something wrong about the style placement: if I put it at the same level as config-template-card I get a "No style defined for element" error (this happens even with the documented koala example), if I put it inside element I got no error but the style seems to be ignored.

[bkr1969]

Exactly what I’m finding.

[bkr1969]

So I've managed to get the lamp light image to show up but it doesn't dim nor does the daylight opacity work. I think if we can crack that all will be good.

[iantrich]

I think I see the bug related to style. For testing can you try putting your actual style at the config-template-card level and then just an empty style tag in the element. It looks like just my error handling is incorrect.

[bkr1969]

That's how I got the lamp image to show up, but why doesn't the opacity work? Also, when I put the icon over the lamp to toggle it, I'm still getting the odd behavior where a grey circle shows up when it's clicked and doesn't disappear until clicking elsewhere.

[bkr1969]

OK...the opacity does work if stated explicitly (i.e. 50%) but will not pull from the brightness attribute for the light whether directly inline or by using variables. This seems to be the lynchpin. Comparing the 'old' code vs. now, the opacity was being set at the image level before, but now has to be set at the element level. Since it makes no difference in the functionality based on if it's now set at either level, I'm pretty sure it has to do with the picture-elements card being nested inside the config-template card previously instead of the other way around now. Nothing I've tried makes any type of opacity work unless explicitly set this way. I've even tried setting only a singe config-template card with the lamp on image, no picture-elements card at all, and the opacity will not change.

[iantrich]

Okay, we'll it sounds like the initial issue is worked out and you can open another issue or go to the forums for your opacity issue. I'll make the change to fix the error handling and consider this fixed. Will also present a warning if used at the top-level of a picture-elements card.

[JunghaJungha]

So can anyone provide me with a working example?

[iantrich]

https://github.com/iantrich/config-template-card/releases/tag/1.3.2

[iantrich]

So can anyone provide me with a working example?

This should work with 1.3.2

type: picture-elements
image: https://demo.home-assistant.io/stub_config/floorplan.png
elements:
  - type: custom:config-template-card
    style:
      top: 80.3%
      left: 77.6%
    entities:
      - switch.ceiling_fan
    element:
      type: image
      tap_action:
        action: toggle
      entity: switch.ceiling_fan
      image: /local/floorplan/famfanoff.png
      state_image:
        'on': /local/floorplan/famfanon.png

[iantrich]

Looks like the release failed. That's what I get for trying to code from my phone. Will take a look when I get back to my computer.

[bkr1969]

I believe the opacity issue is with the config-template card since it works fine with picture-elements. Is that the new issue you'd like me to open?

[iantrich]

I believe the opacity issue is with the config-template card since it works fine with picture-elements. Is that the new issue you'd like me to open?

Yes, it is not related to this initial issue

[bkr1969]

@ Koendejongh, here is the begining of mine (quite a chore to change everything over). Basically, you have to have a new costom-config-card for each entity. Remember, though, that the transparencies are not working yet.

type: picture-elements
image: /local/floorplan/darkpanel.png
style: |
  ha-card:first-child {
    background: rgba(42, 46, 48, 1)
  }
elements:
  - type: custom:config-template-card
    variables:
      - states['sensor.sunlight_opacity'].state
    entities:
      - sun.sun
      - sensor.sunlight_opacity
    element:
      type: image
      entity: sun.sun
      image: /local/floorplan/transp.png
      action: none
      state_image:
        above_horizon: /local/floorplan/lightpanel.png
        below_horizon: /local/floorplan/transp.png
      style:
        left: 50%
    style:
      height: 100%
      left: 50%
      mix-blend-mode: lighten
      opacity: '${ states[''sensor.sunlight_opacity''].state }'
      top: 50%
      width: 100%
    tap_action:
      action: none
    hold_action:
      action: none
  - type: custom:config-template-card
    entities:
      - light.couch_light
    element:
      type: image
      entity: light.couch_light
      image: /local/floorplan/transp.png
      state_image:
        'on': /local/floorplan/transcouch.png
      tap_action:
        action: none
      style:
        left: 50%
    style:
      mix-blend-mode: lighten
      opacity: >-
        ${states['light.couch_light'].state === 'on' ?
        (states['light.couch_light'].attributes.brightness / 255) :'0'}
      width: 100%
      top: 50%
      left: 50%

[Nantero1]

@bkr1969 looking at your example: Is ?{ expression } the same as ${ expression }? ? vs $

[iantrich]

It is not the same and likely why they are not working 😉