Templating on a Dashboard: Jinja doesn't work but Javascript does?

Configuration
, ,
1

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?

1 Like
2

It’s a custom card. Custom cards do whatever their devs want them to do…

3

That is quite basic… I guess I figured custom card devs hooked into the underlying Homeassistant templating. Thanks for the insight