Need help with sensor icon color based on state

sfnetwork · April 4, 2018, 1:37pm

I’m trying to have my sensor icons change color based on their state (online/offline)

Those sensors are binary sensors using ping platform:

> # Ping sensors
>   - platform: ping
>     host: 192.168.1.254
>     name: sfpfsense
>     count: 2
>     scan_interval: 30
> 
>   - platform: ping
>     host: 192.168.1.15
>     name: hp_printer
>     count: 2
>     scan_interval: 30    
> 
>   - platform: ping
>     host: 192.168.1.10
>     name: sfserver
>     count: 2
>     scan_interval: 30    
> 
>   - platform: ping
>     host: 192.168.1.11
>     name: hdhomerun
>     count: 2
>     scan_interval: 30    
> 
>   - platform: ping
>     host: 192.168.1.35
>     name: sonosonebureau
>     count: 2
>     scan_interval: 30   
> 
>   - platform: ping
>     host: 192.168.1.253
>     name: sfap
>     count: 2
>     scan_interval: 30

Then, in sensor.yaml (to use “online” and “offline” instead of on/off):

> # sensor template for LAN devices
>   - platform: template
>     sensors:
>       sfserver:
>         value_template:  '{% if is_state("binary_sensor.sfserver", "on") %} Online {% else %} Offline {%- endif %}'
>         friendly_name: sfserver        
>       sfpfsense:
>         value_template:  '{% if is_state("binary_sensor.sfpfsense", "on") %} Online {% else %} Offline {%- endif %}'  
>         friendly_name: sf-pfsense router     
>       hp_printer:
>         value_template:  '{% if is_state("binary_sensor.hp_printer", "on") %} Online {% else %} Offline {%- endif %}' 
>         friendly_name: Imprimante HP  
>       sonos_one_bureau:
>         value_template:  '{% if is_state("binary_sensor.sonosonebureau", "on") %} Online {% else %} Offline {%- endif %}' 
>         friendly_name: Sonos One Bureau
>       hdhomerun:
>         value_template:  '{% if is_state("binary_sensor.hdhomerun", "on") %} Online {% else %} Offline {%- endif %}' 
>         friendly_name: HD Homerun   
>       sfap:
>         value_template:  '{% if is_state("binary_sensor.sfap", "on") %} Online {% else %} Offline {%- endif %}' 
>         friendly_name: sf-AP (Asus WiFi)  
>       sfmediabridge:
>         value_template:  '{% if is_state("binary_sensor.sfmediabridge", "on") %} Online {% else %} Offline {%- endif %}' 
>         friendly_name: sf-mediabridge
>       sfn_nvr:
>         value_template:  '{% if is_state("binary_sensor.sfn_nvr", "on") %} Online {% else %} Offline {%- endif %}' 
>         friendly_name: sf-network NVR         
>       sfhue:
>         value_template:  '{% if is_state("binary_sensor.sfhue", "on") %} Online {% else %} Offline {%- endif %}' 
>         friendly_name: sf-Hue  
>       lutronhub:
>         value_template:  '{% if is_state("binary_sensor.lutronhub", "on") %} Online {% else %} Offline {%- endif %}' 
>         friendly_name: Lutron hub  
>       appletv:
>         value_template:  '{% if is_state("binary_sensor.appletv", "on") %} Online {% else %} Offline {%- endif %}' 
>         friendly_name: Apple TV

And finally, in customize.yaml (icons):

> sensor.sfpfsense:
>   icon: mdi:router-wireless 
> sensor.hp_printer:
>   icon: mdi:printer 
> sensor.sfpc06:
>   icon: mdi:desktop-classic 
> sensor.sonos_one_bureau:
>   icon: mdi:speaker
> sensor.hdhomerun:
>   icon: mdi:television-classic 
> sensor.sfap:
>   icon: mdi:wifi
> sensor.sfmediabridge:
>   icon: mdi:access-point 
> sensor.sfn_nvr:
>   icon: mdi:cctv
> sensor.appletv:
>   icon: mdi:apple

I’m not sure why, but I can’t get it to work (changing icon color based on state)…
I tried this in customize_glob.yaml:

> "sensor.*_state":
>   templates:
>     rgb_color: "if (state === 'Online') return [251, 210, 41]; else return [54, 95, 140];"

and I tried this in customize.yaml:

> sensor.sfserver:
>   icon: mdi:server
>   templates:
>     rgb_color: "if (state === 'Online') return [251, 210, 41]; else return [54, 95, 140];"

Nothing seems to work…
I really need help figuring this out…

Mariusthvdb · April 4, 2018, 2:25pm

try like this for sensors:

sensor.tv_auditorium_state:
  templates:
    icon: >
      if (state === 'on') return 'mdi:television';
                            else return 'mdi:television-off';
    rgb_color: "if (state === 'on') return [251, 210, 41]; else return [54, 95, 140];"

and be sure you have the real state in your template (check dev-tools)

sfnetwork · April 4, 2018, 2:49pm

Based on my setup, I’m really not sure how to include this in my HA config…
-My icon is in customize.yaml
-my sensors are templates in sensors.yaml (referring to binary sensors)

Sorry, I’m still new at this lol…

I don’t mind redoing it, basically, I want ping sensors for my LAN devices with specific icon, with online/offline (instead of on/off) and the icons to change color based on the state (online/offline)…

Mariusthvdb · April 4, 2018, 3:04pm

no worries, we’re here to help:

this is my setup:

have this in configuration.yaml:

homeassistant:
  name: HeadQuarters
  latitude: !secret latitude
  longitude: !secret longitude
  elevation: !secret elevation
  unit_system: metric
  time_zone: !secret time_zone
  customize: !include_dir_merge_named customize # customize.yaml
  customize_glob: !include customize_glob.yaml
# https://home-assistant.io/docs/configuration/packages/
  packages: !include_dir_named packages
  whitelist_external_dirs: /config

have files for seperate entities in the folder /config/customize:

if you do it like this, you can have each of these files simply filled with the entitities you like to customize, no indentation or hyphens (-)

just like this:

sensor.tv_library_actueel:
  templates:
    icon: "if (state > 0) return 'mdi:television';
                            else return 'mdi:television-off';"
    rgb_color: "if (state > 0) return [251, 210, 41]; else return [54, 95, 140];"

sensor.tv_library_totaal:
  icon: mdi:television

sensor.kantoor_actueel:
  templates:
    icon: "if (state > 0) return 'mdi:laptop';
                            else return 'mdi:laptop-off';"
    rgb_color: "if (state > 0) return [251, 210, 41]; else return [54, 95, 140];"

sensor.kantoor_totaal:
  icon: mdi:desktop-mac

sensor.audio_gym_actueel:
  templates:
    icon: "if (state > 0) return 'mdi:speaker';
                            else return 'mdi:speaker-off';"
    rgb_color: "if (state > 0) return [251, 210, 41]; else return [54, 95, 140];"

just give it a try and come back with your results,
cheers,
Marius

sfnetwork · April 4, 2018, 4:47pm

thanks!
I took a step back and tried to use the actual binary sensors directly and applied the general settings for the icon color in customize_glob.yaml for it.

> "binary_sensor.*_state":
>   templates:
>     icon: >
>     rgb_color: "if (state === 'on') return [251, 210, 41]; else return [54, 95, 140];"

It worked perfectly.

The point of doing the template sensors was to not see ON/OFF but to my surprise, it shows “connected” for my binary sensors, which is perfect…
Possible the icon color change based on state doesn’t work on template sensors?

Although, I will follow your suggestion, creating multiple files for customize. I like it.

Mariusthvdb · April 4, 2018, 6:50pm

yes, template sensors can use their own template, thats what they are, template sensors…

battery_telefoon:
  friendly_name: Telefoon battery
  unit_of_measurement: '%'
  value_template: >-
      {%- if states.device_tracker.telefoon.attributes.battery %}
          {{ states.device_tracker.telefoon.attributes.battery|round }}
      {% else %}
          {{ states.sensor.battery_telefoon.state }}
      {%- endif %}
  icon_template: >
      {% set battery_level = states.sensor.battery_telefoon.state|default(0)|int %}
      {% set battery_round = (battery_level / 10) |int * 10 %}
      {% if battery_round >= 100 %}
        mdi:battery
      {% elif battery_round > 0 %}
        mdi:battery-{{ battery_round }}
      {% else %}
        mdi:battery-alert
      {% endif %}

vuiperez · May 25, 2018, 10:32am

@Mariusthvdb
hello i’m new at this and i would like to change icon and color when the state is close or open i have this config but the icon is aways mdi:gate and no color change, can you help please

Customize.yaml
sensor.onofredual1601882_sensor_portao:
friendly_name: Estado do Portão
icon: “if (state > 0) return ‘mdi:gate’;
else return ‘mdi:door’;”
rgb_color: if (state === ‘CLOSE’) return [255, 0, 0]; else return [51, 255, 51];

Mariusthvdb · May 25, 2018, 12:24pm

sure see 3 posts above :

sensor.tv_library_actueel:
  templates:
    icon: "if (state > 0) return 'mdi:television';
                            else return 'mdi:television-off';"
    rgb_color: "if (state > 0) return [251, 210, 41]; else return [54, 95, 140];"

btw please use the </> button for posting yaml code to let us check your code and be able to help you.

btw2:
rob_color has changed into icon_color:

sensor.multi_purpose_actueel:
  templates:
    icon: >
      if (state > 0) return 'mdi:power-plug';
      return 'mdi:power-plug-off';
    icon_color: >
      if (state > 0) return 'rgb(251, 210, 41)'; 
      return 'rgb(54, 95, 140)';

be sure to use customize: in your configuration.yaml.

see GitHub - andrey-git/home-assistant-custom-ui: Custom UI elements for https://home-assistant.io for instructions using the custom-ui

Cheers,
Marius

vuiperez · May 25, 2018, 12:29pm

many thanks
tryed like this

sensor.onofredual1601882_sensor_portao:
friendly_name: Estado do Portão
templates:
icon: mdi:gate
icon_color: “if (state === ‘close’) return rgb(251, 210, 41); else return ‘rgb(54, 95, 140)’;”

no changes

vuiperez · May 25, 2018, 1:42pm

is this ok ?
can you help whati’m doing wrong ?

vuiperez · May 25, 2018, 1:42pm

yes

customize: !include customize.yaml

Mariusthvdb · May 25, 2018, 8:46pm

can you show what is in the dev tools <> for this sensor?

vuiperez · June 4, 2018, 6:27pm

thanks i made it
and the text how do i change the color ?

Mariusthvdb · June 4, 2018, 10:41pm

if you want the whole line (icon, name, value) to change color, use theme (which you need to define in the frontend.yaml:

device_tracker.hassio:
  templates:
    theme: >
      if (state === 'home') return 'green';
      return 'red';
    _stateDisplay: >
      if (state === 'home') return 'Online';
      return 'Offline';

vuiperez · June 5, 2018, 9:39am

many thanks.
but if i want to a specific entity example, switch.gate.?

thanks in advance

Mariusthvdb · June 5, 2018, 1:58pm

you best have a look at @andrey 's guide for templating:

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

vuiperez · June 5, 2018, 5:39pm

thanks i read that but don’t show the variable to change the text color, or i’m not seeing it right

Mariusthvdb · June 5, 2018, 9:33pm

as i suggested, use theme for that.

device_tracker.asus_router:
  templates:
    theme: >
      if (state === 'home') return 'green';
      return 'red';
    _stateDisplay: >
      if (state === 'home') return 'Online';
      return 'Offline';

vuiperez · June 7, 2018, 4:21pm

you put this in custumize.yaml

vuiperez · June 7, 2018, 5:48pm

i whant to do your example