icon_color don‘t work anymore with ha 0.110

[Krocko]

Checklist

• [ x] I'm running the latest version of CustomUI (Update guide) or using a specific release that is not marked as "Broken".
• [x ] I tried to force-refresh (Ctrl+Shift+R / Ctrl+F5) the browser
• [ x] (Optional, but recommended) I'm using Chrome or tried to reproduce the feature on Chrome.

Browser + Version:
Safari, Chrome

CustomUI version:

20190518

Home Assistant release (hass --version):
0.110.0b0
Problem-relevant configuration.yaml entries:

  icon_color: >
    if (state === 'on') return '#FF0000';
    if (state === 'off') return '#00FF00';
    return icon_color;

Problem-relevant Home Assistant log entries:

Any errors from browser Javascript console:

[Mariusthvdb]

no sure about the format you use, (and not in 110 yet) but did you try

templates:
  icon_color: >
    if (state == 'on') return '#FF0000';
    return '#00FF00';

assuming this is an entity being either 'on' or 'off' (and you did have custom-ui working before ?)

if not that would be a huge breaking change on HA.... Hope this isn't true.

[Krocko]

It was working with ha version 0.109.
With ha version 0.110 this don’t work anymore.
Not sure what you mean with the format.
This is one of the entries in the customize.yaml

binary_sensor.couchsensor:
  device_class: vibration
  templates:
    icon_color: >
      if (state === 'on') return '#FF0000';
      if (state === 'off') return '#00FF00';
      return icon_color;

[Mariusthvdb]

seems core HA changes the way it treats icons, so all custom cards using icons the 'old' way are touched by this. Since @andrey-git is no longer here, it seems this deprecates custom-ui even further, (was still only using icon and icon_color templates myself)...
having said that, about my suggestion for your template, it should work and is shorter ;-)

[Krocko]

Yes, your template is shorter. But if the entity is 'unavailable' it is also '#00FF00'.

[Mariusthvdb]

this is now solved, Ive created a PR, but the fix is explained here:
home-assistant/frontend#5892 (comment)

hurray!

[smith844]

this is now solved, Ive created a PR, but the fix is explained here:
home-assistant/frontend#5892 (comment)

hurray!

I have tried to replace my state-card-custom-ui.html with the one in your branch but the icon_color is still not functioning correctly. Do i need to do anything else other than replace the file with the edited one and clear the cache on my browsers ?
Thanks for taking this on, you are right that without the ability to apply colours to icons and other Custom UI tricks the frontend is a little bland.

[Mariusthvdb]

not really....

only issue I have found just a few moments ago is with the iPhone Safari browser. Unless you're talking about that, the other installs should work.
Ive tested Mac Desktop Safari, Chrome and Firefox: all work
Chrome Iphone: works
Safari iPhone: doesnt (yet) color icons

Hope it to be a cache issue. Fear it is a iOS thing though, as there are other issues reported also concerning HA on iPhone.

[Krocko]

No problem for me with iPhone safari browser.

[Mariusthvdb]

good the hear...
what iOs firmware version are you on? things went awol since 13.4 I believe

edit:
nevermind. It started showing! I click the refresh icon vehemently ;-) Nice!

something else: do you also notice a certain lag for the icon change? On 109 when toggling a switch, the icon and icon_color change was immediate. on Ha 110, this is happening significantly slower.

[ybist]

same problem
0.109 is ok.

binary_sensor.pir_*: templates: icon: > if (state == 'on') return 'mdi:motion-sensor'; return 'mdi:walk'; icon_color: > if (state == 'on') return 'red'; return 'green';

[Krocko]

@Mariusthvdb do you mean a lag if you open homeassistant in safari?
The app is smooth. No lag or delay. I think there is a little 'animation' on the icon if the state changes.

Edit: tested on safari. There is also no lag or delay.
(iPhone 11 Pro, iOS 13.4.1)

[Mariusthvdb]

Lag on icon change. Could be called animation.... Ha, Lets wait and see what the effect in my production setup is, which has quite some more custom-ui

109.6:

110:

[Mariusthvdb]

same problem
0.109 is ok.

binary_sensor.pir_*: templates: icon: > if (state == 'on') return 'mdi:motion-sensor'; return 'mdi:walk'; icon_color: > if (state == 'on') return 'red'; return 'green';

Did you edit the state-card-custom-ui.html?

[ybist]

same problem
0.109 is ok.
binary_sensor.pir_*: templates: icon: > if (state == 'on') return 'mdi:motion-sensor'; return 'mdi:walk'; icon_color: > if (state == 'on') return 'red'; return 'green';

Did you edit the state-card-custom-ui.html?

Yes,i did.

home-assistant/frontend#5892 (comment)

[Mariusthvdb]

any errors in inspector?

[smith844]

this is now solved, Ive created a PR, but the fix is explained here:
home-assistant/frontend#5892 (comment)
hurray!

I have tried to replace my state-card-custom-ui.html with the one in your branch but the icon_color is still not functioning correctly. Do i need to do anything else other than replace the file with the edited one and clear the cache on my browsers ?
Thanks for taking this on, you are right that without the ability to apply colours to icons and other Custom UI tricks the frontend is a little bland.

I have resolved my issue.
I removed all files from www/custom_ui and only left the modified version of
state-card-custom-ui.html and
state-card-custom-ui-es5.html
this seems to have resolved my issues and i now have icon_color working as it should on 0.110.0
thanks all.

[ybist]

this is now solved, Ive created a PR, but the fix is explained here:
home-assistant/frontend#5892 (comment)
hurray!

I have tried to replace my state-card-custom-ui.html with the one in your branch but the icon_color is still not functioning correctly. Do i need to do anything else other than replace the file with the edited one and clear the cache on my browsers ?
Thanks for taking this on, you are right that without the ability to apply colours to icons and other Custom UI tricks the frontend is a little bland.

I have resolved my issue.
I removed all files from www/custom_ui and only left the modified version of
state-card-custom-ui.html and
state-card-custom-ui-es5.html
this seems to have resolved my issues and i now have icon_color working as it should on 0.110.0
thanks all.

0.110.1 is ok

thanks all.

[SupremeSports]

Making the changes in 5892 and 6028 fixed everything for me

Steps:
1 - Delete everything into the folder \config\www\custom_ui
1a- RESTART your HA
2 - Create a new file named state-card-custom-ui.js into the folder \config\www\custom_ui
3 - Copy state-card-custom-ui.html into your state-card-custom-ui.js
4 - Delete the first line
<script>/*! For license information please see scripts.js.LICENSE */
5 - Delete </script> on the last line
6 - Change you configuration.yaml

frontend:
  extra_module_url:
    - /local/custom_ui/state-card-custom-ui.js

7 - RESTART your HA
8 - Icons should be working

EDIT - Just tried it on my second HA installation and works flawlessly too

[Mariusthvdb]

I did the exact same thing before, asked to do so by Thomas, (see link) and kept receiving errors in inspector about this home-assistant/frontend#6028 (comment)
will test again, because that would really be the best future-proof solution.

Nope:

and proof it loaded the correct file:

Are you sure your cache isn't still loading (took more than a few restarts in my setup to get the edited custom-ui card to work..)

btw you're missing a step 1a2: comment the configuration section in configuration.yaml.... need to do that before restart....

edit

duh, I had tested with the old version html before my own edits......

works now indeed, so thanks for reminding me to try again ;-) !

see here for more info: home-assistant/frontend#6028 (comment)