Icon color based on state

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';

Thanks. I’ll get started!

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?

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

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

1 Like

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!

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

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

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?

Would like to know too?

Thanks.

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.

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

2 Likes

Excellent news @Mariusthvdb thanks for sharing !

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.)

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.

HI,

since you’re creating template sensors, you need to have the platform: template in your yaml definitions, check https://www.home-assistant.io/components/sensor.template/

Im not sure if you have that, so that would be the first thing to check. Also, as said, you need to update the custom-ui, did you do that?

if so try this:

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

the icon_color template should then work, if it is found in your include directory. I can’t see if that is named correctly, given the structure of your files. but first try the other template and see in dev-state what the result might be

1 Like

Thanks for your answer, i do have the last custom_ui:

.

I have just edited my sensor.yaml file, my sensor was already created with the platform: template :

- platform: template
  sensors:
 
    couloir_template:
      friendly_name: 'Couloir'
      value_template: >
        {% if is_state('binary_sensor.motion_sensor_158d0001d556ae', 'on') %} Détecté
        {% else %} RAS
        {% endif %}
      icon_template: >
        {% if is_state('binary_sensor.motion_sensor_158d0001d556ae', 'on') %} mdi:run-fast
        {% else %} mdi:run
        {% endif %}   

Will tell if it works.

Thanks :bowing_man:

The code you posted is giving me the same result i had before. The states and icons changes are working prefectly, but still not color change with the icons.

‘‘the icon_color template should then work, if it is found in your include directory. I can’t see if that is named correctly’’

Wish directory are you talking about?

Thanks

Hi @Mariusthvdb
Thanks for the warning. After reading your post and some more experimenting, I found that if I changed the device class from ‘device_class: opening’ to ‘device_class: switch’, then I no longer needed the state: template - which was designed to change the default value of “Open/Close” to “On/Off”.

As a bonus, my icon_colors now work again. I don’t understand the underlying reason for the fix…

have a look:

you should have the folder customize, in which you put the other yaml files with the customizations. In that file you should use the customization you already posted…

maybe use the directive:

customize: !include customize.yaml if you have no other files in that folder? Of course put the customize.yaml file in your config directory then.

1 Like

yes. always a good practice, using device_class when you can.

good to hear its working for you now, glad to have been of help

You are the one @Mariusthvdb!

I was editing my config on the customize.yaml instead of in the folder. Dumb…

Thank you to point out my mistake and for the great help you always gave me.:+1:

1 Like