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?
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?
- 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)';
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.
