Icon color based on state

[mattjham]

I know this has been covered, I’ve read the articles but cannot get this to work. In lovelace I have an “entity-button” card that will display if my Nest has a leaf or not (eco mode). I can get the icon to change from the default check mark to a leaf. However, When the Nest does have a leaf the color of the icon is yellow, i’d like it to be green. In my customize.yaml I have the following

binary_sensor.main_floor_thermostat_has_leaf:
  friendly_name: Leaf Status
  icon: mdi:leaf
  templates:
    rgb_color: >
      if (state === 'on')
        return [92, 255, 0];
      else
        return [0, 0, 0];

and in ui-lovelace.yaml

  - title: Main Floor
    cards:
      - type: vertical-stack
        cards:
          - type: thermostat
            entity: climate.main_floor
          - type: horizontal-stack
            cards:
              - type: gauge
                entity: sensor.main_floor_thermostat_humidity
                title: Humidity
                severity:
                  red: 0
                  yellow: 30
                  green: 40
              - type: entity-button
                entity: binary_sensor.main_floor_thermostat_has_leaf

I looked at the entity and sensor, everything matches up by case and spelling. I feel I’m close, I’ve tried icon_color and rgb_color, and every variation in between. Thanks!

[petro]

This template only works with CustomUI, which is an extension of the frontend. Not Lovelace. I.E. It will never work in Lovelace. EDIT: Aparently the colors do. You probably don’t have CustomUI set up.

@mattjham

  templates:
    rgb_color: >
      if (state === 'on')
        return [92, 255, 0];
      else
        return [0, 0, 0];

[Mariusthvdb (Marius)]

@petro

I.E. It will never work in Lovelace.

why would you say that? I have many colored icons in Lovelace:

btw not using rgb_color with isn’t supported any more. Use icon_color instead. Custom-ui seems to be rather well supported in Lovelace. No extra_badges, but the coloring is fine.

[petro]

And these are coming from the CustomUI or did you configure them in Lovelace?

[Mariusthvdb (Marius)]

@petro

coming from the CustomUI or did you configure them in Lovelace?

Custom-ui. Ive only just setup Lovelace, and was pleasantly surprised all the icon colors showed as hoped for…(took some dedication to get it all there…)
Surpisingly the cards card doesn’t work as expected. But then I only copied my config over to that format legacy-config. So maybe further tweaking is needed there. Tiles are showing though, which is a second relieve of todays job.

lovelace:

regular Tiles:

[petro]

That’s good to know. I’m wondering if other people didn’t have CustomUI set up then.

[mattjham]

Sounds like I need to set up CustomUI then. I’ll try to figure that out this week. Otherwise, I updated my customize.yaml to look like the following . So once CustomUI is working, my green icon should work?

binary_sensor.main_floor_thermostat_has_leaf:
  friendly_name: Leaf Status
  icon: mdi:leaf
  templates:
    icon_color: >
      if (state === 'on' return '#63ff02';
      return '#808080';

[petro]

Apparently, yes. But your code is alittle off, use this:

binary_sensor.main_floor_thermostat_has_leaf:
  friendly_name: Leaf Status
  icon: mdi:leaf
  templates:
    icon_color: >
      if (state === 'on') return '#63ff02';
      return '#808080';

[mattjham]

Thanks. I’ll get started!

[mattjham]

Installing CustomUI seems to have broken lovelace. I ran the follwoing commands the got the error below. The regular Frontend still works. Then followed the activation page from https://github.com/andrey-git/home-assistant-custom-ui/blob/master/docs/activating.md

Anyway to reverto or fix?

• curl -o update.sh “https://raw.githubusercontent.com/andrey-git/home-assistant-custom-ui/master/update.sh?raw=true”

• chmod u+x update.sh
  

• ./update.sh
  

TypeError: ‘NoneType’ object is not iterable

2018-12-03 14:20:52 ERROR (MainThread) [homeassistant.components.websocket_api.decorators] Unexpected exception

Traceback (most recent call last):

File "/srv/homeassistant/lib/python3.6/site-packages/homeassistant/components/websocket_api/decorators.py", line 16, in _handle_async_response

await func(hass, connection, msg)

File "/srv/homeassistant/lib/python3.6/site-packages/homeassistant/components/lovelace/__init__.py", line 476, in send_with_error_handling

result = await func(hass, connection, msg)

File "/srv/homeassistant/lib/python3.6/site-packages/homeassistant/components/lovelace/__init__.py", line 508, in websocket_lovelace_config

return await hass.async_add_executor_job(load_config, hass)

File "/usr/lib/python3.6/concurrent/futures/thread.py", line 56, in run

result = self.fn(*self.args, **self.kwargs)

File "/srv/homeassistant/lib/python3.6/site-packages/homeassistant/components/lovelace/__init__.py", line 160, in load_config

for card in view.get('cards', []):

TypeError: 'NoneType' object is not iterable

[mattjham]

For anyone else seeing that error the fix is you have a view with “cards:” defined, but no cards in it.

[Trouble-51]

Can you share what you did to get the colours as shown? Maybe a copy of the relevant parts of the files? Your help would be much appreciated!

[Mariusthvdb (Marius)]

@Trouble-51

Can you share what you did to get the colours as shown?

I already did on many occasions , here’s one:

Global customize icon color for state sensors don't work

some time ago rgb_color was disabled and changed into icon_color for customizations. Note, this was before Lovelace, so maybe not up to date, bit still, you might try this: sensor.dorm_state: templates: icon: > if (state === 'on') return 'mdi:human-child'; return 'mdi:hotel'; icon_color: > if (state === 'on') return 'rgb(251, 210, 41)'; return 'rgb(54, 95, 140)'; and see what happens. I use this on 0.81.6 non_lovelace with custom-ui installed, and works withou…

what the sensor you want to colorize ? post it and we’ll see how to help

[MarkR]

I have custom icon colours working perfectly in the old interface, via customUI… any idea how I can get the icon colours into love lace please?

[Romquenin]

Would like to know too?

Thanks.

[km2000us]

I have the same problem… icon_color worked in the old interface but not with lovelace.

My customize.yaml:

binary_sensor.door_window_sensor_bedroom_fan:
  templates:
    icon: if (state === 'on') return 'mdi:pinwheel-outline'; else return 'mdi:pinwheel';
    icon_color: if (state === 'on') return '#00ff00'; else return '#ff0000';
    state: if (state === 'on') return 'On'; else return 'Off';

My dev-state page for the relevant sensor:

Open since: 0
battery_level: 49
friendly_name: Bedroom Fan Sensor
device_class: opening
templates: { “icon”: “if (state === ‘on’) return ‘mdi:pinwheel-outline’; else return ‘mdi:pinwheel’;”, “icon_color”: “if (state === ‘on’) return ‘#00ff00’; else return ‘#ff0000’;”, “state”: “if (state === ‘on’) return ‘On’; else return ‘Off’;” }
icon: mdi:pinwheel
icon_color: #ff0000
state: Off

I have CustomUI Installed. It says:
Custom UIs:
CustomUI: 20190113

Any help is much appreciated.

[Mariusthvdb (Marius)]

custom-ui has been updated, see https://github.com/andrey-git/home-assistant-custom-ui/blob/master/CHANGELOG.md

can confirm it does the job fine again

[Romquenin]

Excellent news @Mariusthvdb thanks for sharing !

[Mariusthvdb (Marius)]

@km2000us

state: if (state === ‘on’) return ‘On’; else return ‘Off’;

Hi @km2000us,

does that state template actually work? Ive never seen that before, and used _stateDisplay instead. Since that has been deprecated in the newer versions of HA, a working state template would be very welcome… Is any documentation on that available?

edit
nevermind, got confused… here is the doc: home-assistant-custom-ui/docs/features.md at master · andrey-git/home-assistant-custom-ui · GitHub

be ware that this can be dangerous, as the docs state, and can mess with your HA inner workings (it actually changes the state, not only the display of the state.)

[Romquenin]

Hi @Mariusthvdb, i’m struggeling to make it work and unfortunately it doesn’t.
If you don’t mind i will need your precious help.
I have some templates sensors which i changed the name, state and icons and they are working great.
I’m trying to use custom_ui for the icon colors without succes.

Here is my code so far:

sensor.yaml

couloir_template:
  friendly_name: 'Couloir'
  value_template: "{{ 'Détecté' if is_state('binary_sensor.motion_sensor_158d0001d556ae', 'on') else 'RAS' }}"
  icon_template: "{{ 'mdi:run-fast' if is_state('binary_sensor.motion_sensor_158d0001d556ae', 'on') else 'mdi:run' }}"  

customize.yaml

sensor.couloir_template:
  templates:
    icon_color: >
      if (state === 'RAS') return 'green';
      return 'red';

configuration.yaml

  customize: !include_dir_merge_named customize/

customizer:
  custom_ui: local

frontend:
  themes: !include_dir_merge_named themes/
  javascript_version: latest
  extra_html_url:
    - /local/custom_ui/state-card-custom-ui.html
  extra_html_url_es5:
    - /local/custom_ui/state-card-custom-ui-es5.html

I hope you have an idea on what i’m missing.

Thanks.