Button-card - problem with condition in the template

Configuration Frontend
,
1

I’m trying to add condition in the template for the card border:

type: 'custom:button-card'
icon: 'mdi:lightbulb-outline'
entity: light.living
label: Light living
layout: icon_label
show_label: true
tap_action:
  action: toggle
show_name: false
state:
  - value: 'on'
    styles:
      card:
        - color: var(--button-card-light-color)
        - border: |
            [[[
              if (state_attr('light.living', 'rgb_color') == (255,255,255))
                 return '5px solid var(--card-background-color)'; 
              else
                return '5px solid var(--button-card-light-color)';
            ]]]
      icon:
        - color: var(--paper-item-icon-active-color)
styles:
  card:
    - border: 5px solid var(--card-background-color)
  label:
    - color: var(--primary-text-color)

and I’m getting below error:

ButtonCardJSTemplateError: ReferenceError: state_attr is not defined in 'if (state_attr(‘light.living’, ‘rgb_color’) == (255,255,255)) return ‘5px solid var(–card-ba…’

How can can check light color in this case?

2

The attribute may not be present if the light is off. However I see that this is for the on state, so not likely to be the issue.

Go to the developer tools states menu and find your light, with it on do you see the rgb_color attribute listed in the right hand column?

Also the RGB color value is probably a list, [255,255,255].

3

In the states I can’t see it but in the dev tools in templates below code returns true or false:

{{state_attr('light.living', 'rgb_color') == (255,255,255)}}
4

Have a look at the templating examples for the custom button card on github or in this topic: Lovelace: Button card

I don’t think you have the JavaScript syntax right (it does not use jinja templates like home assistant).

Should be something like:

 if states['light.living'].attributes['rgb_color'] == (255,255,255)
1 Like
5

@tom_l Thank you for help, yes the syntax now looks ok but some how it doesn’t work. The first case is never triggered.

6

You could ask in the button card topic I linked above. There are a lot of button card experts subscribed to that topic.

1 Like
7 
        - border: |
            [[[
              if (if entity.attributes.rgb_color === (255,255,255))
                return '5px solid var(--card-background-color)'; 
              else
                return '5px solid var(--button-card-light-color)';
            ]]]

or

        - border: |
            [[[
              return (entity.attributes.rgb_color === (255,255,255))
                ? '5px solid var(--card-background-color)'
                : '5px solid var(--button-card-light-color)';
            ]]]

EDIT: You may also need to increase the border thickness or use drop-shadow instead.

8

Than you for the examples, unfortunately it still doesn’t work but I redesigned my card and don’t need this condition any more.

9

it’s most likely because border width is set to zero.

10

I think that is something different, always the else part is executing and I can see this border but the thing is that I can’t go into the if part when the light color is white.

11

Then the typing is wrong. Are you sure the resulting type is a tuple? I would assume it’s a list.

        - border: |
            [[[
              return (entity.attributes.rgb_color === [255,255,255])
                ? '5px solid var(--card-background-color)'
                : '5px solid var(--button-card-light-color)';
            ]]]