Templating card icon color based on state value in a custom:button-card

Configuration Frontend
1

Hi everyone, i’d need some help about this thing:

My goal is using a template , in a custom:button-card, to retrieve the state value of a media_player, and using it inside a state value list belonging to another entity(that is, the main one of the card.

so I tried to template the color attribute but it seems that either it can’t accept the templating, either (maybe) inside the template it can’t retrieve the value that is necessary to switch between the 2 colors.

I tried writing just a color value and it works,while the templating doesn’t.

type: custom:button-card
icon: mdi:television-box
size: 20%
name: req. ch.
entity: input_select.tv_ch_list
state:
  - value: 24
    operator: '=='
    styles:
      icon:
        - color: |
            {%if is_state('media_player.livingroom_tv','on') %}
            '#00ccff'
            {% else %}
            'gray'
            {% endif %}
  - value: 24
    operator: '!='
    color: '#336699'
tap_action:
  action: call-service
  service: input_button.press
  target:
    entity_id: input_button.tv_ch_ch
2

https://community.home-assistant.io/t/how-to-help-us-help-you-or-how-to-ask-a-good-question/114371#oneone-format-it-properly-16

1 Like
3

Templates in button-card must be written on JS, not jinja.
Smth like

color: >-
  [[[
    if (...)
    {
      var xxx;
      ...
      return (xxx);
    }
    else
    {
      var yyy;
      ...
      return (yyy);
    }
  ]]]
1 Like
4

sounds clearer now ,I give a try (Y) thanks!

5

ok, it was really helpful, and this shows also how much I still have to learn about hassio.

Anyway I solved my problem, this is the way i did:

state:
          - value: 24
            operator: '=='
            styles:
                  icon:
                   - color: >
                            [[[
                             if (states['media_player.livingroom_tv'].state=='on'){
                             return ('#00ccff')
                             }else{ 
                             return  ('grey')
                             }
                            ]]]

thank you for the help!

1 Like
6

Another way

icon:
                  - color: >
                      [[[ return states['media_player.livingroom_tv'].state =='on'  ? '#00ccff' :  'grey';
                      ]]]
7

yeah, you’re right: the binary option in Js never gets into my head!