Change sensor icon color based on input boolean state

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…

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

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

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

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!!!

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.

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:

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?

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

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…

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.

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?

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