Custom UI change color of icon

I’m trying to create an icon that changes color when it’s on.
I have created a counter in configuration.yaml like this:

counter:
  counter:
    initial: 0
    maximum: 30
    step: 1

This gives me 30 steps (30 colors, yes 30 not 31 see below) that I can use in a entity.

Then I made two automations, one that increments the counter, and one that resets the counter.

- id: '1583921283128'
  alias: Counter
  description: 'Increment counter one step every two seconds'
  trigger:
  - platform: time_pattern
    seconds: /2 # every two seconds
  condition: []
  action:
  - entity_id: counter.counter
    service: counter.increment


- id: '1583921483424'
  alias: counter reset
  description: 'Reset counter when it hits 30'
  trigger:
  - entity_id: counter.counter
    platform: state
    to: '30' #this resets the counter as soon as it hits 30 meaning i get values between 0-29
  condition: []
  action:
  - entity_id: counter.counter
    service: counter.reset

And that works great. It counts from 0-29 then back to 0 again when I look in Developer Tools -> States.

Then in configurations.yaml I added template:

homeassistant:
 customize:
    switch.sonoff_1000000000:
      friendly_name: Kaffekokaren
      templates:
        icon: mdi:coffee-maker
        icon_color: if (state === 'off') return ''; # if coffee maker is off return nothing. Icon stays unchanged?
                    # below is what I believe will trigger if the coffee maker is not off (on)
                    # look at counter and change icon color accordingly
                    else if (counter.counter === 0) return 'rgb(255, 0, 0)';
                    else if (counter.counter === 1) return 'rgb(235, 20, 0)';
                    else if (counter.counter === 2) return 'rgb(200, 50, 0)';
                    else if (counter.counter === 3) return 'rgb(150, 100, 0)';
                    else if (counter.counter === 4) return 'rgb(100, 150, 0)';
                    # more will be added when I see that it works.
      

But the icon is always in the blue/grey state. (I have waited for numbers between 0-4)
Since the counter counts the way it should I assume it’s my if else that does not.
Anyone that can see what I’m doing wrong?

I have managed to narrow it down some more.
I added the counter to my lovelace and then used a template on the counter like this:

counter.counter:
  friendly_name: counter
  templates:
    icon_color: if (state === "0") return 'rgb(255, 0, 0)';
                else if (state === "1") return 'rgb(235, 20, 0)';
                else if (state === "2") return 'rgb(200, 50, 0)';
                else if (state === "3") return 'rgb(150, 100, 0)';
                else if (state === "4") return 'rgb(100, 150, 0)';

And counter works. But not the coffee maker.
I have tried to use counter.counter.state === “1” in the coffee maker template but that still does not work.
Anyone see a solution?

try this:

    switch.sonoff_1000000000:
      friendly_name: Kaffekokaren
      templates:
        icon: mdi:coffee-maker
        icon_color: if (state === 'off') return return rgb(255,255,224); 
                    if (entities['counter.counter'].state == '0') return 'rgb(255, 0, 0)';
                    if (entities['counter.counter'].state == '1') return 'rgb(235, 20, 0)';
                    if (entities['counter.counter'].state == '2') return 'rgb(200, 50, 0)';
                    if (entities['counter.counter'].state == '3') return 'rgb(150, 100, 0)';
                    if (entities['counter.counter'].state == '4') return 'rgb(100, 150, 0)';

i

1 Like

It’s not correct, but it lead me to find what worked.

Don’t ask me why but it has to be …state == “1” or with three equal signs.
I also believe you made a typo with return return rgb on state off?

The working code in configurator.yaml is

switch.sonoff_1000000000:
  friendly_name: Kaffekokaren
  templates:
    icon: mdi:coffee-maker
    icon_color: if (state === 'off') return '';  # this returns the icon in an unchanged state
                if (entities['counter.counter'].state == "0") return 'rgb(255, 0, 0)';
                if (entities['counter.counter'].state == "1") return 'rgb(235, 20, 0)';
                if (entities['counter.counter'].state == "2") return 'rgb(200, 50, 0)';
                if (entities['counter.counter'].state == "3") return 'rgb(150, 100, 0)';
                if (entities['counter.counter'].state == "4") return 'rgb(100, 150, 0)'; 

Now I just have to fine tune the color changes.

I know…
A kitten dies everytime someone makes a vertical video.

But in this case I wanted to get as much in the frame as possible.

The above video is the following settings:

Automation:

- id: '1583921283128'
  alias: Counter
  description: 'count up every second'
  trigger:
  - platform: time_pattern
    seconds: /1 
  condition: []
  action:
  - entity_id: counter.counter
    service: counter.increment


- id: '1583921483424'
  alias: counter reset
  description: 'Reset counter when you reach end OR when device is toggled on'
# If counter is at the reset (max nunmber you want) number but you restart home assistant
# the counter will continue from max and keep going up. So reset both on number and device toggled on.
  trigger:
  - entity_id: counter.counter
    platform: state
    to: '9' # I only need 8 colors for this since the colors change quite rapidly on the LED strip in real life.
  - entity_id: switch.sonoff_1000000000
    from: 'off'
    platform: state
    to: 'on' 
  condition: []
  action:
  - entity_id: counter.counter
    service: counter.reset

configuration.yaml:

counter: # create a counter to keep track of what color to display
  counter:
    initial: 0
    maximum: 30 
    step: 1

customizer: # add customizer UI https://github.com/andrey-git/home-assistant-custom-ui/blob/5274c9b1e51d8a4ba409cbf510d286472d42c328/docs/installing.md
  custom_ui: local


homeassistant:
 customize:
    switch.sonoff_1000000000: 
      friendly_name: Kaffekokaren
      templates:
        icon: mdi:coffee-maker
        icon_color: if (state === 'off') return '';  # if off return nothing (unchanged icon)
                    # add as many or as few states and colors as needed.
                    if (entities['counter.counter'].state == "0") return 'rgb(255, 0, 0)';
                    if (entities['counter.counter'].state == "1") return 'rgb(155, 100, 0)';
                    if (entities['counter.counter'].state == "2") return 'rgb(50, 200, 0)';
                    if (entities['counter.counter'].state == "3") return 'rgb(0, 255, 0)';
                    if (entities['counter.counter'].state == "4") return 'rgb(0, 155, 100)';
                    if (entities['counter.counter'].state == "5") return 'rgb(0, 50, 200)';
                    if (entities['counter.counter'].state == "6") return 'rgb(0, 0, 255)';
                    if (entities['counter.counter'].state == "7") return 'rgb(100, 0, 155)';
                    if (entities['counter.counter'].state == "8") return 'rgb(200, 0, 50)';

I am playing around with chaning the Icon colour, but I can’t get it to work. what am I missing ?

type: entities
entities:
  - type: divider
  - entity: sensor.givtcp_export_energy_6_month_total_2024_2_compensation
    icon: mdi:currency-gbp
    icon_color: rgb(178, 225, 51)
    Name: 2024 2nd half
    show_state: false
    type: custom:multiple-entity-row
    name: Generated
    entities:
      - entity: sensor.givtcp_export_energy_6_month_total_2022_2_compensation
        format: precision2
        name: 2022 2nd half
      - entity: sensor.givtcp_export_energy_6_month_total_2023_1_compensation
        format: precision2
        name: 2023 1st half
      - entity: sensor.givtcp_export_energy_6_month_total_2023_2_compensation
        format: precision2
        name: 2023 2nd half
      - entity: sensor.givtcp_export_energy_6_month_total_2024_1_compensation
        format: precision2
        name: 2024 1st half
      - entity: sensor.givtcp_export_energy_6_month_total_2024_2_compensation
        format: precision2
        name: 2024 2nd half
  - type: divider
  - entity: binary_sensor.coms_frontroom_firmware_update
    icon: mdi:currency-gbp
    type: custom:multiple-entity-row
    name: SEQ export Daily
    toggle: false
    show_state: false
    state_color: false
    entities:
      - entity: sensor.cost_lost_to_export
        format: precision2
        name: KHW loss to grid (0.17p)
        toggle: false
      - entity: sensor.cost_export_money_made
        format: precision2
        name: Money Made (5.5p)
title: SEG
state_color: true
show_header_toggle: true

You are trying to configure the color in a card, I don’t know if that is even possible.
As posted above you need to do it in configuration.yaml or customize.yaml with the custom UI integration.