Breaking! HA 2022.4 (partly) breaks Custom-ui

[Mariusthvdb]

Home assistant changed the way it handles the Frontend, and instead of tracking states, it now subscribes to entities. For core HA this should bring extra speed.

However, this fundamentally breaks the way custom-ui tracks states to implement its template functionality.

The only way we can now make the template kick-in is by reloading the view. The templates still are valid, but are simply not updated anymore on state change.

Writing this as a generic placeholder, and adding the links I posted in the Breaking section in the readme:

Home Assistant 2022.4, PR HAWS 6.1 Websockets.

Checkout Paulus's explanation in the 2022.4 release party on the matter.

For Custom-ui this means the templates we use are no longer immediately executed, but need a View reload. Which obviously makes many templates useless, especially the ones that set an icon on state change (on/off...) or where a signal color was used as the indication of an alert color.

[SFlintstone]

Hello Marius, This is so sad! Last week I was so happy that I found a way(yours way) to customize colors of different icons ... alas! My joy was too short. I'm now on HA 2022.4.1 and all custom_ui customizations are gone. I spent hours yesterday to find where I'm wrong until i read your post here. Anyway, thanks you for your great work and hope you can find a way to fix it again! Cheera!

[ildar170975]

HA 2022.4.1, Win10 + Chrome Browser's cache cleared.

I use Custom_UI for two cases: 1) To specify icon's color for batteries' sensors - dynamically (i.e. dependingly on states). 2) To specify icons, friendly_names & entity_pictures for some other sensors - statically (i.e. NOT dependingly on states).

First I checked all my statically customized entities. They are fine, Custom UI works.

Then I checked my battery sensors. They are fine too, Custom UI works.

Check this example:

input_number:

  # battery level limits
  battery_level_critical: &ref_level
    min: 0
    max: 100
    step: 1
    mode: slider
    unit_of_measurement: '%'
  battery_level_warning:  *ref_level

  # battery level
  test_level_1: *ref_level

sensor:
  - platform: template
    sensors:
      test_battery:
        unit_of_measurement: "%"
        device_class: battery
        value_template: >-
          {{ states("input_number.test_level_1") }}

homeassistant:
  customize_glob:
    sensor.test_battery:
      templates:
        icon_color: >-
          if (entity &&
              entities['input_number.battery_level_critical'] &&
              entities['input_number.battery_level_warning'])
          {
            if (['unavailable','unknown'].includes(state))
              return 'brown';
            else
            {
              var CRITICAL = entities['input_number.battery_level_critical'].state;
              var WARNING = entities['input_number.battery_level_warning'].state;
              if (state <= Number(CRITICAL))
                return 'red';
              else
              if (state <= Number(WARNING))
                return 'rgb(250,218,67)';
              else
                return 'green';
            }
          }
          else
            return 'brown';

Card:

type: entities
entities:
  - entity: input_number.test_level_1
    name: Level
  - entity: sensor.test_battery
    name: Level
  - type: section
  - entity: input_number.battery_level_critical
    name: Critical
  - entity: input_number.battery_level_warning
    name: Warning
state_color: true

Could you explain what does not work anymore? Probably I am missing something.

[Mariusthvdb]

yes, static customizations work fine, as they are loaded upon page load and dont change.

Dynamic (templates) customizations don't work anymore, unless you reload the view. What you see must be a cache thing, I did experience that even during the betas, where .01-03 didnt work anymore, then .4 and 05 again showed the templates correctly, really odd.

upon the release however, all should have stopped working.

I must confess I dont use Windows so it could be that the frontend web sockets are treated differently. I am no expert on the matter..

Ill copy your templates and see what happens.

my test config

    input_number.test_number:
      templates:
        icon_color: >
          if (state == 0) return 'white';
          if (state == 10) return 'yellow';
          if (state == 20) return 'brown';
          if (state == 30) return 'navy';
          if (state == 40) return 'lightblue';
          if (state == 50) return 'green';
          if (state == 60) return 'orange';
          if (state == 70) return 'purple';
          if (state == 80) return 'black';
          if (state == 90) return 'gold';
          return 'red';

input_number:

  test_number:
    name: Test number
    min: 0
    max: 100
    step: 10

which worked allover has really stopped working. Likewise all icon_templates, like

    switch.tester:
      templates:
        icon: >
          return (state === 'on') ? 'mdi:test-tube' : 'mdi:test-tube-off';

btw, I am surprised your template works at all, because you have it under customize_glob, and it isnt a glob, but a single entity customization ... ;-)

update

well, I am officially flabbergasted.... I confirm what you post, and see it coloring the icon indeed. Now how is this possible. I can only think of the fact it is a old style template sensor, and not one of the template: type.

Please check if you can see the icon_template working in your environment ? and maybe the icon_color I posted on the input-number

update

yes, its the old format that makes it happen. change it to:

  - sensor:

      - unique_id: test_sensor_battery
        unit_of_measurement: "%"
        device_class: battery
        state: >-
          {{ states("input_number.test_level_1") }}

and the colors only change on view reload.

the new format being the future, the conclusion must be the same: custom-ui is severely broken. Only static customizations and template on the old style template sensors work, all others require a page reload...

[ildar170975]

What you see must be a cache thing

I made this customization code for this particular sensor (sensor.test_battery) just today. Upgrading to 2022.4.0 was done a few days ago, a browser's cache was cleared too a few times since then.

A similar code for other battery sensors was made a few months ago. I just copied the same code for the newly added test_battery sensor. I believed that only a code for old sensors could be cached.

Tested with a Bravo browser. First it seemed to work - i.e. icon's color was changing dynamically. ~Strange that it stopped working at one moment...~ - my bad, it still works in a fresh Bravo too.

[ildar170975]

yes, its the old format that makes it happen

Not sure. This code:

homeassistant:
  customize_glob:
    input_number.test_level_2:
      templates:
        icon_color: >
          if (state == 0) return 'white';
          if (state == 10) return 'yellow';
          if (state == 20) return 'brown';
          if (state == 30) return 'navy';
          if (state == 40) return 'lightblue';
          if (state == 50) return 'green';
          if (state == 60) return 'orange';
          if (state == 70) return 'purple';
          if (state == 80) return 'black';
          if (state == 90) return 'gold';
          return 'red';

does not work in my setup, works only after page refresh. Probably it was really a cache issue. Strange that:

• clearing cache has no effect;
• code for battery works in a fresh Bravo browser;
• code for battery works with a new sensor too.

Hope that the code (for 0,10,20,...) is 100% correct.

[SFlintstone]

I also made another test and it still doesn't work for me. Newly created simple ON/OFF sensor,

sensor.test: templates: icon_color: > if (state == 'OFF') return 'steelblue'; return 'red';

Few hours ago upgraded to 2022.4.2 on VirtualBox. Testing with Chrome on Win10 from another machine. Page reload makes no change. Just to be sure tried with Edge - same result...

[skynet01]

It works for me as @Mariusthvdb described. Static show up but updated sensors require a page reload now. Tested it on Mac in safari and chrome. Hope someone finds a solution to fix this. You dont realize how much you rely on this plugin until half the dashboard changes colors 😆

[Mariusthvdb]

yes, its really is too bad, and sorely missed for now.

Wat I did do was change all of my domain globs with an on/of template to device_class as much as possible (for the icon) and state_color: true for the color.

real downside to this is I can no longer use an 'alert' color,

          icon_color: >
            return (state === 'on') ? 'var(--alert-color)' : 'var(--primary-color)' ;

and only use paper-icon-color (off) and paper-icon-active-color (on). I've filed a request to add an alert color, to make those stand out some more. Please come in there to support and add to the discussion.

I've also managed to change some extra domain icons in core by PR'ing some domains like switch and boolean etc. so they now change icon natively and no customization is required anymore.

Its really best to go with the flow of core Home Assistant Lovelace and prepare for that as much as possible. (I also migrated all of my template sensors to he new template: format (and they're many...)

still, that leaves the dynamic icon coloring and some special icons, and entity_pictures to be customized. For which I hope I can get assistance to rewrite this custom-ui resource.

fingerscrossed

[wklink]

I'm mostly replacing the code on my dashboards with custom:button-cards (https://github.com/custom-cards/button-card). It means replicating all the logic that was defined once in the lovelace (dashboard) yaml and rewriting nearly everything. The button-card does have it's own templating and inheritance system, but it's still a large amount of tedious work.

[Mariusthvdb]

yes we can do that. its not the same however, as the changes wont apply to the entity itself (as with custom-ui) and only on the frontend representation of the entities. That has always been most obvious in the more-info panels, where the custom-ui customization was also visible (because applied to the entity).

imagine how to replace :

    sensor.*_sensor*temperature:
      <<: *hide
      templates:
        icon_color: >
          if (state < -20) return 'black';
          if (state < -15) return 'navy';
          if (state < -10) return 'darkblue';
          if (state < -5) return 'mediumblue';
          if (state < 0) return 'blue';
          if (state < 5) return 'dodgerblue';
          if (state < 10) return 'lightblue';
          if (state < 15) return 'turquoise';
          if (state < 20) return 'green';
          if (state < 25) return 'darkgreen';
          if (state < 30) return 'orange';
          if (state < 35) return 'crimson';
          return 'firebrick';

on all of these sensors in the Frontend...... we might be able to use an anchor here or there, if and when these sensors are displayed on the same view, or maybe even with a card-mod-theme mod.

there's nothing like custom-ui in that respect. simply set a glob like above, set and forget ;-)

so, Hoping we can restore functionality! (not holding my breath though....)

Btw, I have enabled Discussion on this repo, so for general followup or otherwise move there, and keep this 'issue' on topic ;-)

[smith844]

Such a shame this version has broken the effect of icon colour changing on change of state, it is so striking and useful. I am seriously considering reverting to 2022.3 Thank you to you @Mariusthvdb for your continued work to try to rectify it. I have my fingers crossed for your success.

[Mariusthvdb]

Honestly, don't go back to 2022.3. The improvements in modern HA are huge and you don't want to miss out on those.

Only way forward would be to fix custom-ui, not hold back on the core HA itself.

[skynet01]

Not sure why this is not a core feature. The whole point of the dashboard is for your to overview your home and take action if needed. How are you suppose to do that when everything is the same color 😄

[Mariusthvdb]

please see the beta version I released, and give it a go. Seems to be working nicely in my configs. Hoping this is a solid restart.

[bratanon]

PR now merged!

Do keep in mind that state templating is not working at the moment and will be removed in #54.

[skynet01]

I thought the beta version fixed it? At least it looks like it's working for @Mariusthvdb ... I am running beta right now and state templating is working for me, for example:

icon_color: if (state === 'on') return '#FF1C8C'; Works properly and I can see colors update without the need of refreshing a page.

Does it mean that #54 and later removes this feature?

[Mariusthvdb]

No that is core functionality ;-)

Templates on state: are no longer supported.