I can’t quite figure out why this works one way, but not the other. The use case here is a dashboard card where I am changing the color based on the state of an entity. Here is the Jinja code that doesn’t work, specifically at the bottom under color
:
- type: custom:button-card
entity: sensor.bird_last_seen
show_state: true
show_icon: true
show_name: false
icon: mdi:timer-refresh-outline
styles:
card:
- border: none
- background: transparent
icon:
- color: |
{% if (states['sensor.bird_last_seen'].state) < "1 minute" %}
green
{% else %}
{% set seen_num = states('sensor.bird_last_seen')[:-7] | float %}
{% if seen_num > 1 and seen_num < 5 %}
yellow
{% elif seen_num > 5 and seen_num < 10 %}
orange
{% else %}
red
{% endif %}
{% endif %}
Right next to that card on the same dashboard, I have the same exact card, except instead of using Jinja, I’m using Javascript. Here’s the card, same important portion is at the bottom under color
:
- type: custom:button-card
entity: sensor.bird_last_seen
show_state: true
show_icon: true
show_name: false
icon: mdi:timer-refresh-outline
styles:
card:
- border: none
- background: transparent
icon:
- color: |
[[[
var y = states['sensor.bird_last_seen'].state;
let x = y.slice(0, 2);
var e = Number(x);
if (e < 5) return 'red';
if (e < 10) return 'blue';
if (e < 15) return 'yellow';
if (e < 20) return 'grey';
if (e < 30) return 'purple';
else return 'orange';
]]]
I’ve put them both under Developer Tools > Template and then both return the values as I expect them to. But in lovelace, only the javascript code actually changes the color.
Am I missing something really basic?