Icon color based on state

Mariusthvdb · April 1, 2019, 1:34pm

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

Romquenin · April 1, 2019, 1:47pm

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

Romquenin · April 1, 2019, 2:02pm

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

km2000us · April 1, 2019, 3:00pm

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…

Mariusthvdb · April 1, 2019, 3:01pm

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.

Mariusthvdb · April 1, 2019, 3:02pm

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

Romquenin · April 1, 2019, 3:13pm

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.

Mariusthvdb · April 1, 2019, 9:06pm

Most welcome!

pepeEL · December 29, 2019, 7:51pm

Hi
I try change icon for my cover in home assistant and i add to customize.yaml file this but no working… Still show default icon:

cover.roller_shutter_for_ha_0_1:
  templates:
    icon: >
      {% if is_state('cover.roller_shutter_for_ha_0_1', 'open') %} mdi:window-shutter-open
      {% else %} mdi:window-shutter
      {% endif %}

Please anybody can help me…

Vlad · December 29, 2019, 10:45pm

I’m using following:

    icon: "if (state === 'off') return 'mdi:door-closed'; else if (state == 'on') return 'mdi:door-open';"

pepeEL · December 29, 2019, 11:15pm

OK i test you solution but also not working. I add it to customize.yaml for my Roller Shutter and it looks like:

cover.roller_shutter_for_ha_0_1:
  icon: "if (state === 'open') return 'mdi:window-shutter-open'; else if (state == 'closed') return 'mdi:window-shutter';"

Now for Roller not show any icon.

Yau are using it on default entity card ?

And you have this code for icon in customize.yaml or in code card in Lovelace ?

And what type entity is your ? It is platform templating or binary sensor ?

Mariusthvdb · December 30, 2019, 7:12am

your template seems fine, what happens in developer/template?

if that works, you should be able to use it as an icon_template, provided the component supports an icon template. don’t think Cover does though: Cover - Home Assistant

If not you could use custom-ui, and use the JS template

homeassistant:
  customize:
    cover.roller_shutter_for_ha_0_1:
      templates:
        icon: >
          if (state === 'open') return 'mdi:window-shutter-open';
          return 'mdi:window-shutter';

note this is not in Lovelace cards. Depending on the cards you use Lovelace cards need their own syntax, or can’t use templating at all…

pepeEL · December 30, 2019, 11:17am

Summary
For cover i can not change icon ?
Only by custom UI i can ?

Mariusthvdb · December 30, 2019, 11:18am

not sure, did you try what I suggested above?

pepeEL · December 30, 2019, 11:20am

i put this to template in developer tool it show error:

Error rendering template: TemplateSyntaxError: unexpected char ‘‘’ at 15

pepeEL · December 30, 2019, 11:23am

correct to

{% if is_state('cover.roller_shutter_for_ha_0_1', 'open') %} mdi:window-shutter-open {% else %} mdi:window-shutter {% endif %}

and in dev tool - template show only: mdi:window-shutter (state is closed)
But when state is open show in dev-tool template mdi:window-shutter-open

add it to config card entity and it looks like:

entities:
  - entity: scene.swiatlo_scene
  - entity: cover.roller_shutter_for_ha_0_1
    templates:
      icon: >
        {% if is_state('cover.roller_shutter_for_ha_0_1', 'open') %}
        mdi:window-shutter-open {% else %} mdi:window-shutter {% endif %}
show_header_toggle: false
title: Sceny
type: entities

and also not showing correct icon. Still default icon.

Mariusthvdb · December 30, 2019, 11:34am

haha, note that the quote was your own code, but because of the editor here in the community that sometimes gets changed to us reversed quotes, always be careful copying from the community

so, the template itself is correct.

next step would be to add it in the config to customize the entity, following these guidelines: https://www.home-assistant.io/docs/configuration/customizing-devices/

but since you need the template, this can’t be done straightaway. Now I dont know about the cover integration, but the docs seems not to show an option for customizing the icon? You could try of course it would probably say ‘invalid config’ is not supported.

After that, your final solution would be to use custom-ui indeed. Which makes it all possible… use the js template I suggested, and you’re done.

the card you show above is a lovelace card, the cant use templates at all. so you should take that out.

You can use other cards, like custom button card, and have icons change depending on state.

Or have a look at Picture entity card and use the state filter: https://www.home-assistant.io/lovelace/picture-entity/#examples (picture, not icon though)

pepeEL · December 30, 2019, 11:42am

i added it to customize.yaml and still not working:

cover.roller_shutter_for_ha_0_1:
  templates:
    icon: >
      {% if is_state('cover.roller_shutter_for_ha_0_1', 'open') %} mdi:window-shutter-open {% else %} mdi:window-shutter {% endif %}

If no working solution is only use custom card to do it ?
I dont know why option change icon for cover is no implement in Home Assistant. This is no look good…

browetd · December 30, 2019, 12:14pm

I am using customizer and customize_glob.yaml (add on for HA) as mentionned by @km2000us on Mar 21, 19…

Here is an example from customize_glob.yaml:

"switch.etang_interieur":
  friendly_name: Pompe Etang Intérieur
  templates:
    icon_color: if (state === 'on') return 'lime'; else return 'red';
    icon: if (state === 'on') return 'mdi:water-pump'; else return 'mdi:water-pump-off';

pepeEL · December 30, 2019, 12:20pm

But it is for switch not for cover.