Row/card inside config-template-card is flickering if entity is customized by Custom UI

[ildar170975]

This issue appeared after updating to some of the latest version of Custom UI.
Currently using Custom UI 20220419.1 (Win10x64, Chrome).

When a customized entity is inside a config-template-card it may loose it's color.
The code:

type: custom:config-template-card
entities:
  - input_number.test_level_2
card:
  type: entities
  entities:
    - input_number.test_level_2

The entity is customized by Custom UI:

homeassistant:
  customize_glob:
    input_number.test_level_2:
      templates:
        icon_color: >-
          if (state <= 10) return 'yellow';
          else
          if (state <= 20) return 'brown';
          else
          if (state <= 30) return 'magenta';
          else
          if (state <= 40) return 'lightblue';
          else
          if (state <= 50) return 'green';
          else
          if (state <= 60) return 'orange';
          else
          if (state <= 70) return 'purple';
          else
          if (state <= 80) return 'red';
          else
          if (state <= 90) return 'gold';
          else
          return 'cyan';

The icon is flickering:

A similar case - when the customized entity is used inside multiple-entity-row inside config-template-card:

Customization is just setting an entity_picture value (not dynamically changing value).

Probably a similar case - a customized person entity placed inside a map card WITHOUT config-template-card - then the whole map is flickering and restoring it's scale (described here - home-assistant/frontend#12357).

[Mariusthvdb]

well, I am not sure just yet which causes what.

to start with: my person entities only use the mobile_app device_tracker, so it only updates when those update.

Having said that:

I have a set of person entities with customized entity_pictures showing dynamically on several Maps (see below), and they are rock solid.
The maps themselves are configured inside a config-template-card for the dark or light versions, so all possible customizations at work ;-)

however, the HA Frontend changed quite a bit, and now 'subscribes' to the entities. config-tmeplate-card always was a card in my configs that caused some serious lag/performance, thats why I was very cautious in using it.

It might be that all has come together now, and the flickering you experience is cause by the Congo-template-card updating the frontend. Did you test without it? (in other words: is it config-template-card or is it something else...)

fwiw, this is an example config:

type: conditional
conditions:
  - entity: binary_sensor.family_home_united
    state: 'off'
card:
  type: entities
  title: Family on the road
  card_mod:
    class: class-header-margin
  entities:

    - type: custom:auto-entities
      card:
        type: entities
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              margin: -8px -16px -16px -16px;
            }
      show_empty: false
      filter:
        exclude:
          - state: home
        include:
          - domain: person

    - type: custom:fold-entity-row
      head:
        type: section
        label: Map
        card_mod: &label
          style: |
            .label {
              margin-left: 0px;
            }
      card_mod:
        style: |
          div#items {
            margin: 16px -16px -16px -16px;
          }
      padding: 0
      entities:

        - type: custom:config-template-card
          entities:
            - input_select.theme
          variables:
            theme: states['input_select.theme'].state
          card:
            type: custom:auto-entities
            show_empty: false
            filter:
              include:
                - domain: person
                  not:
                    state: home
            card:
              type: map
              hours_to_show: 48
              dark_mode: ${(/ight|Dark|Matrix/).test(theme)}
              card_mod:
                style: |
                  ha-card {
                    box-shadow: none;
                  }

and it doesnt suffer the frequent updating @bratanon suffers in the linked frontend issue either. As said, rock solid currently.
HA 2022.5.0.dev20220421
Frontend 20220420.0 - latest
Custom-ui: 20220419.1

and customizations:

homeassistant:

  customize:

    person.marijn: &picture
      hide_attributes:
        - templates
      templates:
        entity_picture: >
          var id = entity.entity_id.split('.')[1];
          var sensor = 'sensor.' + id + '_picture';
          if (entities[sensor]) return entities[sensor].state;
          return '/local/family/' + id + '_not_home.png';
        country: >
          var id = entity.entity_id.split('.')[1];
          var sensor= 'sensor.' + id + '_app_geocoded_location';
          if (entities[sensor]) return entities[sensor].attributes.Country;
          return 'Searching...'

for all person entities....

[Mariusthvdb]

btw @ildar170975 Ildar, please try if rewriting your template in a better way helps:

        icon_color: >-
          if (state <= 10) return 'yellow';
          if (state <= 20) return 'brown';
          if (state <= 30) return 'magenta';
          if (state <= 40) return 'lightblue';
          if (state <= 50) return 'green';
          if (state <= 60) return 'orange';
          if (state <= 70) return 'purple';
          if (state <= 80) return 'red';
          if (state <= 90) return 'gold';
          return 'cyan';

[ildar170975]

please try if rewriting your template in a better way helps:

Surely I may rewrite the code.
But from my very old Java experience these codes are supposed to give same result:

        icon_color: >-
          if (...) return 'yellow';
          else
          if (..) return 'brown';
          else
          return 'cyan';

vs

        icon_color: >-
          if (...) return 'yellow';
          if (..) return 'brown';
          return 'cyan';

The same approach is in C/C++ (using it from 1997).
In the 2nd method in general you MAY get wrong results in case of using do_something() instead of return(...).
So I usually use the 1st method, it's a matter of habit.

---

my person entities only use the mobile_app device_tracker, so it only updates when those update.

I noticed a flickering in the Map card when the person entity was not changing neither it's state nor it's attributes.
When I got rid of Custom UI and customized entity_picture by a "traditional" way - this flickering stopped occurring.
No config-template-card was used for the map (as I said in the 1st post).

The same was with entities inside multiple-entity-row.
See the 2nd GIF in my 1st post.
Here flickering occurred as changing a box-shadow (or similar) style.
The main entity in the row was a sensor (not a person entity) with customized entity_picture by Custom UI. Other elements of the multiple-entity-row are this sensor's attributes. All these data were NOT changing during the test.
The config-template-card is ONLY used inside a tap_action for the right icon - I am using an attribute which is URL to open a weblink.

Currently I only keep using Custom UI for:

• battery level sensors (icon color green, yellow, red);
• test samples.

[Mariusthvdb]

there are so many variables in this post, it is hard to track tbh.

I didnt say the template was wrong, I just asked you to try the cleaner method. It is what is working in my 3 test setups, so I can compare.
I need to stay at that format, as it has been working ever since the conception of the original custom-ui.

as for the multiple-entity-row: I have several card setup with that where custom:auto-entities is filled with eg

switches, (and their power and energy)

or lights:

and none of them blink at all, and have customized icons and/or color.

so hard for me to reproduce that

person entities are spot on, no blinking at all, and customized in rather an extensive way in my config.

config-template-card is a hard one for the system, and I do feel we need to keep it at a minimum, as it seems to recalculate anything in the card when the variable changes. this can truly become cumbersome depending on the embedded card config.

So if we want to get this further, I feel we need to break down in a single problem issue, and go from there

[bratanon]

@ildar170975 I have tested your config now (for the first icon flickering problem you mentioned), and I can not reproduce the issue you having with config-template-card.

This got me thinking. As we are doing this on the client side (browser), in some cases, the browser could be the failing point.
I mean, we have no control over the client. If the client is super slow, have a bad connection, hitting a RAM usage limit or something like that, it could take a while to process our script, and change the color/icon.

Could this be the case here?

[bratanon]

Same with the multiple-entity-row. Can't reproduce it.

[ildar170975]

the browser could be the failing point

Could be.
But - this flickering

• on Map card (w/o config-template-card),
• on Entities card (with config-template-card),
• on multiple-entity-row (with config-template-card)

a) was happening in Chrome (cache cleared many times within these last week),
b) was happening in Firefox (cache was not cleared for 2-3 months - cannot do it now, many tabs are open & history is needed),
c) stopped occurring right after rewriting these entities w/o Custom UI.

It's OK that someone do not see it.
For me that was just a reason to find other options.

I will continue testing Custom UI.

[Mariusthvdb]

closing as this can not be reproduced.
please create a new issue on an isolated config concerning custom-ui if needed, so we can reproduce.

[Mariusthvdb]

please be nice, and help us help you. no need to be so personally involving.
we all want a faultless experience.

I guess what I was saying is we need more to be able to boil it down to custom-ui

[bratanon]

No need to be offended.

We tested this in a clean install of HA, and it works like it should for us. Why its not working for you in your setup is impossible for us to tell when we dont have access to your whole setup.

When not testing on a clean installation, there are so many other possibilities of failure and things that could cause the issues you are seeing, but we are unfortunately not able to investigate your specific setup.

I did test this with the cards you mentioned, and the result was fine. That why we concluded that custom-ui works when no other things interfere with it, so it has to be something special in your setup.