Icon templates color stopped working

ross.pollard · September 28, 2018, 6:54am

Hey,

So I did an update to 0.78.3 and my icon colors stopped working. I had them setup to change color when online or offline but that has stopped

Does anyone know why?

here is a snipped of the config

sensor.googlewifi_upstairs:
  templates:
    icon_color: > 
      if (state === "online") {return "green";}
      else {return "red";}

petro · September 28, 2018, 12:16pm

i don’t see anything wrong with the code.

you could try this:

sensor.googlewifi_upstairs:
  templates:
    icon_color: > 
      return (state === "online") ? "green" : "red";

The outcome is the same but maybe the interpreter will handle it better?

ross.pollard · October 4, 2018, 9:05am

Hi Petro,

Thanks for the reply, I gave it a shot no difference I’m afraid. Can’t see any errors either, so not sure how to provide more info

petro · October 4, 2018, 11:55am

Not sure either. I’ve never done this but I know code pretty well. @Mariusthvdb have any suggestions?

Mariusthvdb · October 4, 2018, 12:15pm

try:

sensor.googlewifi_upstairs:
  templates:
    icon_color: > 
      if (state === 'online') return 'green';
      return 'red';
    icon: >
      if (state === 'online') return 'mdi:wifi';
      return 'mdi:wifi-off';

added a little bonus
assuming you have custom-ui installed? be sure to check the quotes are true single quotes, the forum software sometimes makes these funny curly quotes here. And, be sure to check the state (‘online’ seems unlikely) is the real state. case-sensitive.

ross.pollard · October 4, 2018, 12:42pm

Thanks for the help guys I will give this a try, also now that you mention custom-ui, I think I am going to “re-install” that also. Will let you guys know what happens.

@Mariusthvdb - you are correct the state “online” is a custom config, what I did was use nmap device tracker which as you know returns home or not_home, but I was not happy with those states. so i created template sensors instead as below:

googlewifi_upstairs:
        friendly_name: 'Upstairs AP'
        value_template: >-
          {% if is_state("device_tracker.googlewifi_upstairs", "home") %}
            online
          {% else %}
            offline
          {% endif %}
        icon_template: >
          {% if is_state("device_tracker.googlewifi_upstairs", "home") %}
            mdi:wifi
          {% else %}
            mdi:wifi-off
          {% endif %}

Mariusthvdb · October 4, 2018, 12:48pm

ok, thats what I suspected. I that case, ditch the icon template I added, cause that wont work with template sensors, since they have their own icon_template as you already use.

the icon_color should be good then.

or…

you could do away with the template sensor, and use my above customization on the device_tracker, and add:

device_tracker.googlewifi_upstairs:
  show_last_changed: true
  templates:
    icon: >
      if (state === 'home') return 'mdi:wifi';
      return 'mdi:wifi-off';
    icon_color: >
      if (state === 'home') return 'green';
      return 'red'; #or use 'grey' which is better on the eye unless u really want an alert...
    _stateDisplay: >
      if (state === 'home') return 'online';
      return 'offline';

ross.pollard · October 4, 2018, 1:28pm

@Mariusthvdb - Thanks for the config examples I have not seen _stateDisplay for the device tracker, where can I find out more on those kind of configs? Double checked the HA page on device tracker and it doesn’t mention that, probably because its under an advanced page somewhere.

OK so its working again, turns out its not a config issue but a browser issue, came across a post with custom ui issues and HA 0.7+, honestly didn’t think to look for custom ui posts around this issue. Anyway turns out I just needed to flush my browser cache, in chrome specifically I just flushed “cached images and files” and everything came back.

Sorry wasting your time with config help, but I did learn new things, thanks so much for the help guys @petro and @Mariusthvdb , very much appreciated.

Mariusthvdb · October 4, 2018, 1:51pm

see: home-assistant-custom-ui/docs/features.md at master · andrey-git/home-assistant-custom-ui · GitHub
and home-assistant-custom-ui/docs/templates.md at master · andrey-git/home-assistant-custom-ui · GitHub

so you say this:

sensor.googlewifi_upstairs:
  templates:
    icon_color: > 
      if (state === "online") {return "green";}
      else {return "red";}

works?

petro · October 4, 2018, 2:04pm

Yah, that should work. same with this:

    icon_color: > 
      return (state === "online") ? "green" : "red";

Mariusthvdb · October 4, 2018, 2:27pm

well, its a first for me, I never new template sensors could have their icon_color set through customize like this, native HA, without custom-ui installed It’s undocumented…

strangest thing is he uses the custom-ui format of

templates:
  icon_color:

without having custom-ui installed. So I am a bit baffled…

no Icon_color mentioned.

not that I don’t welcome it, not at all!

Mariusthvdb · October 4, 2018, 2:30pm

even better. shorter!

Mariusthvdb · October 4, 2018, 2:36pm

in need for a little help myself here.

have this template sensor using this entity_picture_template:

entity_picture_template: >
  {{ '/local/tiles/family/w_{}.png'.format(states('sensor.w_life360_state')) }}

I now need that same template to work in a customization of another sensor, in the format

templates:
  entity_picture:
     '/local/tiles/family/w_{}.png'.format(states('sensor.w_life360_state'))

~~but it wont work, no matter what I try. {{ }}, no quotes, what have you. Any thoughts I could test?,~~

nevermind. duh. missed the return …

in case anyone needs it heres how to customize an entity’s icon, based on the state of another entity’s state:

sensor.m_places:
  templates: 
    entity_picture: >
      return '/local/tiles/family/m_' + entities['sensor.m_life360_state'].state + '.png';

provided you have pictures for these states, and custom-ui installed

petro · October 4, 2018, 5:04pm

Thats jinja.

That’s JS.

They aren’t the same syntax, so those methods are not interchangeable.

Mariusthvdb · October 4, 2018, 5:46pm

Yes I know.
The Jinja was from a template sensor , and because I needed the same logic now in another sensor, needed to use the custom-ui, that uses JavaScript…

Hence my search. But I found it.

Both are doing their job now just fine!

petro · October 4, 2018, 5:56pm

fyi this is eqivalent to pythons .format().

sensor.m_places:
  templates: 
    entity_picture: >
      return `/local/tiles/family/m_${entities['sensor.m_life360_state'].state}.png`;

Mariusthvdb · October 4, 2018, 9:12pm

yes, great that you mention that! ive used this before without truly understanding the syntax.
not really sure what the $ does.

its on the documentation of custom-ui too, but rather unexplained…

github.com

andrey-git/home-assistant-custom-ui/blob/master/docs/templates.md#examples

# Templates

The `templates` attributes allow you to inject your own expressions and code using JavaScript code or template literals in order to override entity attributes and state. Within the code / template literals, you have full access to the entity's state object, which allows you to access other properties such as last_changed, attributes.friendly_name, etc. The full set of objects available is shown below.

Additionally, `extra_data_template` attribute is always evaluated as a template without using `templates` attributes for it.

In order for a template to return "nothing", for example so that `extra_data_template` won't take space or allow showing `show_last_changed` - return `null` from your template. Note that `null` can only be returned using code format, as template literal format always returns a string.

**Note that those are JavaScript templates evaluated in your browser, not Jinja2 templates which are evaluated server-side and use a different syntax.**

### Available variables
#### Global variables
Those variables allow one entity to set state / attribute based on another entity or some other "external" thing. Using those hurts UI performance, so use them only if you indeed want an entity to depend on something external.

`hass` - the hass object

`entities` - a map object from `entity_id` to state objects.

#### Local Variables
`entity` - the state object for the current entity.

This file has been truncated. show original

petro · October 4, 2018, 9:59pm

It’s just an identifier for a variable inside a string.

isidrology · February 28, 2020, 4:50am

Did anyone figure out what happened to icon_color?

it’s missing from sensor template, so hence it’s not registering,

what is everyone doing now to change the state color of the icon?

at the moment the below works if I remove the icon_color portion:

  - platform: template
    sensors:
        entry_motion:
          value_template: >-
            {% if states.binary_sensor.entry_multi_18.state == 'on' %}
              Detected
            {% elif states.binary_sensor.entry_multi_18.state == 'off' %}
              Normal
            {% endif %}
          icon_template: >-
            {% if states.binary_sensor.entry_multi_18.state == 'on' %}
              mdi:motion-sensor
            {% elif states.binary_sensor.entry_multi_18.state == 'off' %}
              mdi:walk
            {% endif %} 
          icon_color: >-
            {% if states.binary_sensor.entry_multi_18.state == 'on' %}
              red
            {% elif states.binary_sensor.entry_multi_18.state == 'off' %}
              blue
            {% endif %}

petro · February 28, 2020, 12:22pm

icon_color isn’t a valid entry for a template sensor. Not sure where you got this idea from. Everything in this thread is for custom_ui and it goes in the customize section. Always consult the documents. If the documents do not contain a entry/field, then you can’t use that entry/field.

@Mariusthvdb’s post has the documents for custom ui