How to color the icons of a sensor, device class “enum”

I have a sensor defined as an “enum” which has the values “Disarmed”, “Partial Armed” and “Fully Armed”. With a binary sensor you can show the status color at your Lovelace, but with a sensor I haven’t found it. Is this still possible?

sure, but did you enter the search in the search box? there are literally hundreds of these questions and answers here.

Ive you give it some effort, you can probably find yourself, and report back what you tried, so we can help you along

(hint: its not about the device_class, but about the ‘state’ of the entity)

I have searched quite some while. But when I try my sensor is being screwed and doesn’t work anymore. When removing icon_color everything is fine again. This has been defined in my .yaml as a template

    sensor:
      - name: "Area Schuur Status"
        device_class: enum
        icon: mdi:shield-home
        state: >
          {% set mapper =  {
              '0' : 'Disarmed'
              '1' : 'Armed Partial',
              '2' : 'Armed Full'} %}
          {{ mapper.get(trigger.id,  'Unknown') }}
        icon_color: >
          if (state == '1') { 
             return 'rgb(255, 255, 0)';
          }
          else if  (state == '2') { 
             return 'rgb(255, 255, 106)';
          } else {
             return 'rgb(0, 0, 0)';
          }

“>” must be used here, read this.

This is not a valid property for a template sensor (although it can be used by Custom UI which is a custom plugin).

The whole code for “icon_color” seems to be written in JS, but Jinja must be used when defining templates inside template sensors. That is why HA failed to create the sensor.

If your main goal to colorize an icon for a template sensor - your options are:

  1. To colorize the icon in a particular card - use card-mod (main thread, check a link in the end of the 1st post, could be useful). In this case - remove that “icon_color” part from the template sensor’s code.
  2. To colorize the icon in all cards & more-info window - try using Custom UI (google it). For this you will need this “icon_color” code inside a template sensor:
state: ...
icon: ...
icon_color: >-
  {% if this.state == ... -%}
    red
  {%- else -%}
    green
  {%- endif %}

Ofc a logic for “icon_color” may use that “mapper” method.

Unrelated to the main question: you seem to use a trigger-based template sensor; are you sure that you need it, not a “simple sensor”?

I didn’t copy all, a new try:

  - trigger:
      - id: '0'
        platform: event
        event_type: sia_event_12300_100100
        event_data:
            code: 'OP'
      - id: '1'
        platform: event
        event_type: sia_event_12300_100100
        event_data:
            code: 'CG'
      - id: '2'
        platform: event
        event_type: sia_event_12300_100100
        event_data:
            code: 'CL'
    sensor:
      - name: "Area Schuur Status"
        device_class: enum
        icon: mdi:shield-home
        state: >
          {% set mapper =  {
              '0' : 'Disarmed'
              '1' : 'Armed Partial',
              '2' : 'Armed Full'} %}
          {{ mapper.get(trigger.id,  'Unknown') }}
#        icon_color: >
#          if (state == 'Disarmed') return '#6ee86e';
#          if (state == 'Armed Partial') return '#ff9900';
#          if (state == 'Armed Full') return '#ff0000';
#    icon_color: >
#          if (state == '1') { 
#             return 'rgb(255, 255, 0)';
#          }
#          else if  (state == '2') { 
#             return 'rgb(255, 255, 106)';
#          } else {
#             return 'rgb(0, 0, 0)';
#          }

Two versions which I have disabled with #. It should always follow the status and color its icon. I don’t want to do this via a card. It should be implicit in HA, so wherever it’s being used the sensor it should color depending on its status…

Then consider using a Custom UI.
Also, do not have a rich experience with “lock” entities - may be same can be achieved by a template lock? If yes - then you can use either standard “lock colors” or customized by a theme.

It’s maybe simpler to ask the following: isn’t it possible to change the color of a sensor within a trigger? Is it only - in my example - to arrange it in the Custom UI

Any suggestion @Mariusthvdb after some effort? I really hope there is a solution for this, as when the sensor is already programmed like this, you don’t have repeat it in every dashboard.

you can not ‘program’ it in a trigger no.

but, as Ildar already suggested,

you can use it in a customize, or even a customize_glob.

homeassistant:

  customize_glob:

#     sensor.*_battery_state:
#       templates:
#         icon_color: >
#           var colors = {'Full':'gold','Charging':'maroon','Not Charging':'purple'};
#           return colors[state] || 'var(--no-power-color)';

    sensor.*_battery_level:
      templates:
        icon_color: >
          if (state > 75) return 'var(--ok-color)';
          if (state > 50) return 'gold';
          if (state > 25) return 'orange';
          if (state > 10) return 'brown';
          return 'var(--alert-color)';

also, with custom_ui, you can set an attribute icon_color in the template sensor config itself. see custom-ui/EXAMPLES.md at 07ed01d90188471b6b39be4a0753de7633a9a466 · Mariusthvdb/custom-ui · GitHub

you need to use this.state, or any other state you wish to use for that.

  - binary_sensor:

      - unique_id: dark_outside_elevation #donker_buiten
        state: >
          {{state_attr('sun.sun','elevation') < -4}}
        icon: >
          mdi:brightness-{{'4' if this.state == 'on' else '5'}}
# experimental
        attributes:
          icon_color: >
            {{iif(this.state == 'on','var(--state-sun-below_horizon-color)','gold')}}

Please let me stress that core devs are discouraging using customize, even core customize, as it writes to the states machine directly.

In all honesty, I never noticed any performance downgrade using custom-ui, only benefits (it also colorizes the more-info icon) :wink:

I just dont want to promote it too much.

I defined this into my configuration.yaml as a try… What am I doing wrong?

homeassistant:

  customize_glob:

    sensor.area_woonhuis_status:
      templates:
        icon_color: >
          var colors = {'Disarmed':'green','Armed Partial':'maroon','Armed Full':'purple'};
          return colors[state] || 'var(--no-power-color)';

Further into configuration.yaml I have defined my trigger:

  - trigger:
      - id: '0'
        platform: event
        event_type: sia_event_12300_100000
        event_data:
            code: 'OP'
      - id: '1'
        platform: event
        event_type: sia_event_12300_100000
        event_data:
            code: 'CG'
      - id: '2'
        platform: event
        event_type: sia_event_12300_100000
        event_data:
            code: 'CL'
    sensor:
      - name: "Area Woonhuis Status"
        device_class: enum
        icon: mdi:shield-home
        state: >
          {% set mapper =  {
              '0' : 'Disarmed',
              '1' : 'Armed Partial',
              '2' : 'Armed Full'} %}
          {{ mapper.get(trigger.id,  'Unknown') }}

not sure :wink:

I take it the sensor doesnt get a colored icon?

first, check if the resource is correctly loaded. for that use the described method in the docs (check inspector tab Console, custom-ui should be listed

if tit is, then you could first try a single customization

homeassistant:
  customize:
    sensor.area_woonhuis_status:
      icon_color: red

if that works out ok, you can try adding the template on that single sensor.
which would still go under

homeassistant:
  customize:
    sensor.area_woonhuis_status:

Note that you’ve now set it on customize_glob, but dont use a glob (*)…

I wont comment on your sensor itself, for the icon_color, all we need to now is the correct state. you can check that in dev tools States column.
Also, if that does not show as you designed it, you need to find out the cause for that first, as it is the source for your customizations

I dont think you need to use the device_class enum there though, why do you do that?

it’s driving me crazy…

First of all the status of the sensor is ok. I know as I’m using it for days now… also in the entity_card I have turned on colouring:

Screenshot 2024-07-17 at 13.05.42

Next thing I did, is I have moved the customisation to the file customize.yaml. No errors and it seems to be loading well.

When looking at the Developer Tools, I have tested two things 1) the if-then 2) only red

I think I make a simple mistake… but I have no idea where…

PS I have used device_class enum because I thought this is the way according to the documentation… If I better could use a different type, please let me know. Basically, it exactly does what it needs to do. Also in Automations it works fine.

did you in fact install the Custom-ui resource?
please show the inspector line stating it is installed correctly. It should be something along the lines of this:

the fact the attributes show does not mean the system can interprete that. For that, the custom resource (plugin) needs to be installed correctly. Otherwise it’s just a string :wink:

not exactly. as you can see the attributes of your entities dont show (enumerate) the possible options.
this is only for internal usage, and you can leave it out.

check the enumerated option on this entity which is set by the integration itself.

Thanks @maruisthvdb!

It was so simple… I never realised this was all about your HACS frontend add-on. Sorry, I read over it or wasn’t conscious! Problem fixed:

About the device_class “enum” it is shown in the screen dump above and it has been created by myself as a trigger (see code in prior reply). What could I do better? I let it rest as it works?

this really doesn’t make sense. It isnt set as a trigger, you simple added the device_class to you trigger based template sensor entity.

just take it out.

I have done that and it’s still working ;-). I thought you should be as precise as possible… thx.