Entity Icon color & custom icon color based on state (customise icon_color)

Tags: #<Tag:0x00007f78011c4988>

Help! kind people,
I still can not get the icon color to work on HA 0.110 even with copied state-card-custom-ui.html
I have tried for most of the day to implement the change given in the link from Marius. I have checked my state-card-custom-ui.html file that i grabbed from the fork(patch-2) and the wording is the new wording but i cannot get the icons to be the correct icon color.
Here is what i have in an entity card:


and here is more-info showing that it has used the template as far as I can understand

and here is my frontend code:
in_frontend.yaml

frontend:
  themes: !include_dir_merge_named ../themes
  extra_html_url:
    - /local/custom_ui/state-card-custom-ui.html
  #extra_html_url_es5:
  #  - /local/custom_ui/state-card-custom-ui-es5.html
  extra_module_url:
    - /local/custom-sidebar.js

and config.yaml entries:

homeassistant:
  customize: !include customize.yaml
  customize_glob:
    light.*:
      custom_ui_state_card: state-card-custom-ui
    switch.*:
      custom_ui_state_card: state-card-custom-ui
      templates:
        icon_color: if (state === 'on') return 'green'; else return 'red'
    sensor.temperature_158*:
      custom_ui_state_card: state-card-custom-ui
      templates:
        icon_color: >-
          if (state > 22) return 'red';
          if (state <= 18 )return 'blue';
          return 'green';

I had been using templates within the customize.yaml, they all worked up until the 0.110
this is typical of the code for the color of a switch:

templates:
    icon_color: if (state === 'off') return 'rgb(255,0,0)';  if (state ==='unavailable')
      return 'rgb(128,128,128)';  if (state ==='on')return 'rgb(0,255,0)';

I have tried all sorts of stuff, deleted contents of www/custom-ui then copied from downloaded (from patch-2 branch of Marius’) folder. I have emptied the cache on windows pc (chrome) used Macbook, also on chrome but to no avail, restarted, rebooted, all things inbetween…
Can anyone shine some light on this before i downgrade back to 0.109

Me too… also have this problem :frowning:

I’ve hacked the state-card-custom-ui.html file, and just upgraded to 0.110 - no issues.

However my configuration is different - no state-card-custom-ui:

  customize_glob:
    "*.*":
      custom_ui_state_card: state-card-custom-ui
    sensor.*battery*:
      templates:
        icon_color: >
          if (state > 75) return 'green';
          if (state > 50) return 'gold';
          if (state > 25) return 'orange';
          if (state > 10) return 'brown';
          return 'red';

This is using Chrome under windows.

Is there any way to ask the guys behind Home Assistant to bring back the option to do the:

icon_color, etc

stuff in next update?

It was Wonderfull to make everything your own… now we need to do lots of things to let it work.

I have many many configs like this:

sensor.buienradar_temperature_2d:
  friendly_name: "Temp. after 2 days"
  templates:
    icon_color: >-
      if (state > 38) return 'rgb(181,14,2)';
      if (state > 32) return 'rgb(214,18,4)';
      if (state > 27) return 'rgb(255,0,0)';
      if (state > 21) return 'rgb(255,150,0)';
      if (state > 16) return 'rgb(255,204,0)';
      if (state > 10) return 'rgb(0,255,0)';
      if (state > 4) return 'rgb(4,181,4)';
      if (state > -1) return 'rgb(0,170,217)';
      if (state > -7) return 'rgb(0,0,255)';
      if (state > -12) return 'rgb(121,24,196)';
      if (state > -18) return 'rgb(176,0,189)';
      if (state > -23) return 'rgb(189,0,107)';
      return 'rgb(0,0,0)';

Don’t use the wildcard option, because some entities need different things.

Now have to change the whole config. More then 150 entities I must edit somewhere in HA in stead of 1 file with all the customize stuff in it.

You’ve posted this in a few threads now but you haven’t bothered searching for the solution… which is listed in this thread 4 posts up from this.

I have searched and tried several things I read here.
But there is so many posts that sometimes it’s not clear if that is the solution or not. But thanks for the link to it.

I have found my problem with icon_color in 110.0
In my custom_ui directory I had extra files (state-card-custom-ui.html.gz for example)
once i removed these and now only have:
state-card-custom-ui.html (modified as per Marius direction)
state-card-custom-ui-es5.html

and once I had cleared the cache several times it now loads the icon colors as it did before.
Thanks again to @Mariusthvdb
Lets hope the devs either incorporate the ability to change icon and icon color as the user. I know he has explained the need far better than I could on another thread.

Not sure that caused it. Rather, I suspect it to be a cache issue, which has resolved itself.

You could test by adding a file again.
Anyways, glad it is working again… a huge relief…

Team, I still get an error after running the latest (patch1) html file.
What am I missing here?

020-05-22 18:08:05 ERROR (MainThread) [frontend.js.latest.202005191] https://pcznjl1x6a213f1n9ktwshwtt48uohvx.ui.nabu.casa/local/custom_ui/state-card-custom-ui.html.js:26:8912 Uncaught TypeError: e.push is not a function

that is an error that has been around for very long now, and it doesn’t hurt operation.

Remember custom-ui was developed for States, no Lovelace, and hasn’t been updated for a year now, so HA code has changed a lot since then.

fwiw, I seem to get the error when loading custom-ui via customizer, and didnt see it when loaded via extra_html_url…

but, since extra_html_url is discouraged (maybe worse) I am not sure I should advice you to use that :wink:

haven’t tried this yet, but maybe we can simply take the

e.push("pages",e.localize?"customui":{domain:"customui",caption:"Custom UI",description:"Set UI tweaks.",loaded:!0})

out of line 27 of the file.

Okay, thanks. I only see the behaviour when clicking the “Configuration” tab.
I’ll just ignore it now. Thanks

ignore my bit about loading the custom-ui, it doesnt influence, I see it also…

one would expect it to show on developer, but I see it on configuration too like you.

I can confirm that replacing

Object.assign(this._icon.style,{color:s.attributes.icon_color,filter:""})

with

this._showIcon=true,this._iconStyle={color:s.attributes.icon_color}

fixes the issue and my icons have color again!

I made the change in state-card-custom-ui.html but the color change didn’t work.

image

image

What else should I do?

see https://github.com/Mariusthvdb/custom-ui

take out the state: template. that will lead to unexpected, and/or undesired effects.

if you change the actual state, (which is what this does) the template above it won’t work anymore, since you have them evaluate ‘on’ and ‘off’…

you will have to wait until we manage to re-introduce _stateDisplay or, use template-entity-row to make it show whatever you want.

and yes, follow https://github.com/Mariusthvdb/custom-ui#installing-is-super-easy. :wink:

Refresh cache …
Works

THX

To help myself out (and others trying to work out how to have an icon colour change on state):

I’m running Home Assistant (previously called hassio on a pi. After hours of trying to work out what to do reading forum posts, finding Custom-UI got broken, then fixed, the broken etc and running round in circles. Should we use the HACS plugin you’ve linked instead of the normal copy files and edit configuration.yaml chaos?

Also have a look here:

either or.

If you are starting from scratch, https://github.com/Mariusthvdb/custom-ui is clearer as it is up to date with the way lovelace works today

If you have HACS installed, all you need to do is add https://github.com/Mariusthvdb/custom-ui as custom repository