Change sensor icon color based on input boolean state

Configuration
1

Hi, I wasn’t really able to find a solution after reading about this for my specific setup…
I have an alarm configured.
I basically would like the sensor icon (ajustement alarme) to change color when I enable the input boolean (activer alarme)…

2018-10-18%2010_36_43-Home%20Assistant

My sensor (the one that needs to change color based on the input boolean)

  - platform: template
    sensors:
      alarm_time:
        value_template: '{{ "%0.02d:%0.02d" | format(states("input_number.alarm_clock_hour") | int, states("input_number.alarm_clock_minute") | int) }}'

my input boolean:

alarm_clock_status:
  name: activer alarme
  icon: mdi:alarm-check   
  initial: off

Thanks in advance…

2

Is it at least possible or only the entity that triggers can change its own icon?

3

sure,
using custom-ui, you can do this:

input_boolean.*:
  templates:
    icon_color: >
      if (state === 'on') return 'rgb(251, 210, 41)';
      return 'rgb(54, 95, 140)';

or:

input_boolean.home_mode_party:
  templates:
    icon: >
      if (state === 'on') return 'mdi:cake-layered';
      return 'mdi:hotel';
    icon_color: >
      if (state === 'on') return 'rgb(251, 210, 41)';
      return 'rgb(54, 95, 140)';

or using the state of another entity:

group.personal:
  templates:
    icon: >
      if (entities['sensor.family_home'].state === '0') return 'mdi:account-off';
      if (entities['sensor.family_home'].state === '1') return 'mdi:account';
      if (entities['sensor.family_home'].state === '2') return 'mdi:account-multiple';
      if (entities['sensor.family_home'].state === '3') return 'mdi:account-multiple-check';
      return 'mdi:account-group';

for template sensors, the built-in HA options are here: https://www.home-assistant.io/components/sensor.template/#configuration-variables

1 Like
4

Specifically for my needs, what would be the advantages of custom UI vs built-in?
I’m trying to avoid too much custom stuff (as much as possible).

And using builtin, I have no idea how to do this honestly… still learning

5

I need help finishing this up (I think I’m close) but I’m lost in the syntax of this…
I’m try the builtin way (no custom-UI)

Am I close? I’m trying, in customize.yaml to have the sensor “sensor.alarm_clock_time_long” change color when the input boolean “input_boolean.alarm_clock_status” is “on” (and back to original color when it’s off).

sensor.alarm_clock_time_long:
  hidden: true
  icon: mdi:alarm  
  friendly_name: 'Alarme'
  templates:
    rgb_color: "if (states.input_boolean.alarm_clock_status === 'on') return [253, 216, 53]; else return [68, 115, 158];"

Getting this would help me understand better other things as well.
Thanks again in advance!!!

6

reading the topic title, that would be it. Cant do that with regular sensor template.
btw Custom-ui is one of the most accepted custom cards, and brings heaps of frontend improvements I could do without. Easy install, very light weight.

7

try:

sensor.alarm_clock_time_long:
  #hidden: true
  icon: mdi:alarm  
  friendly_name: 'Alarme'
  templates:
    icon_color: >
      if (entities['input_boolean.alarm_clock_status'] === 'on') return 'rgb(253, 216, 5)'; 
      return 'rgb(68, 115, 158)';

not sure why you want to customize it if you’re hiding it… :wink:

8

The hidden part was a mistake, I changed it to “false”.
I tried this as you suggested in customize.yaml but after reboot, it still doesn’t work…

sensor.alarm_clock_time_long:
  hidden: false
  icon: mdi:alarm
  friendly_name: Alarme
  templates:
    icon_color: >
      if (entities['input_boolean.alarm_clock_status'] === 'on') return 'rgb(253, 216, 5)'; 
      return 'rgb(68, 115, 158)';

I confirmed the state of the input boolean is really switching to “on”.
Man I feel, it’s close…

BTW, is this using custom-ui or builtin?

9

this is custom-ui. as said, icon_color is not an option for built-in template sensors. You need to install custom-ui first for this to be used in your setup . See the link I provided earlier to do so.

1 Like
10

ok and the template lines you shared, need to be in customize or customizer? Sorry, I just want to make sure I get the differences…

11

did you read the doc’s I posted? It’s all there…

I use a config/customize folder where all my customizations are stored.And referenced in configuration.yaml by:

homeassistant:
  name: Home
  latitude: !secret latitude
  longitude: !secret longitude
  elevation: !secret elevation
  unit_system: metric
  time_zone: !secret time_zone
  customize: !include_dir_merge_named customize
  customize_glob: !include customize_glob.yaml
  packages: !include_dir_named packages
  whitelist_external_dirs: /config

Ultimately, it simply needs to be under

homeassistant:
  customize:
    sensor.alarm_clock_time_long:
     #hidden: true
      icon: mdi:alarm  
      friendly_name: 'Alarme'
      templates:
        icon_color: >
          if (entities['input_boolean.alarm_clock_status'] === 'on') return 'rgb(253, 216, 5)'; 
          return 'rgb(68, 115, 158)';

depending on your splitting up the configuration, his needs to be adapted accordingly.

12

I did and I thought I got it but it doesn’t work so I question myself…

in my configuration.yaml:

  customize: !include customize.yaml
  customize_glob: !include customize_glob.yaml

# Enable the auth component
# auth:  
  
# Show links to resources in log and frontend
#introduction:

# Enables the frontend
frontend:
  extra_html_url:
    - /local/custom_ui/state-card-custom-ui.html
  extra_html_url_es5:
    - /local/custom_ui/state-card-custom-ui-es5.html

and

customizer: !include customizer.yaml

in my customize.yaml

sensor.alarm_clock_time_long:
  #hidden: true
  icon: mdi:alarm  
  friendly_name: 'Alarme'
  templates:
    icon_color: >
      if (entities['input_boolean.alarm_clock_status'] === 'on') return 'rgb(253, 216, 5)'; 
      return 'rgb(68, 115, 158)';

in my customizer.yaml:

custom_ui: local

And all files are placed in correct locations based on the docs…
Am I missing something?

13

take out the customizer part? I don’t use that option for custom_ui.
bw, I use a dir_merge_named customize and folder /config/customize

in that folder I have dedicated files .yaml for all of my customizations