Custom button card entity attributes

I’m struggling to get a custom button card to work with entity attributes.

When I use the below in dev tools templates, it works great, so my logic is sound:

{%if (state_attr('climate.central_heating', 'hvac_action') == "off") %}
white

{%elif (state_attr('climate.central_heating', 'hvac_action') == "idle")
and (states('sensor.central_heating_socket_power') | int < 10) %}
blue

{%elif (state_attr('climate.central_heating', 'hvac_action') == "heating")
and (states('sensor.central_heating_socket_power') | int < 300) %}
blue

{%elif (state_attr('climate.central_heating', 'hvac_action') == "heating")
and (states('sensor.central_heating_socket_power') | int > 400) %}
orange

{% endif%}

However, it doesn’t work when I convert that, using my limited skills, for the custom button card to this. The first if is always evaluated as true.

        [[[
          if (states['climate.central_heating'].attributes.hvac_action == "off")
            return 'white';
          if (states['climate.central_heating'].attributes.hvac_action = "idle")
            and (states['sensor.central_heating_socket_power'].state < 10)
            return 'rgb(3, 123, 252)';
            // blue
          if (states['climate.central_heating'].attributes.hvac_action = "heating")
            and (states['sensor.central_heating_socket_power'].state < 300)
            return 'rgb(3, 123, 252)';
            // blue
          if (states['climate.central_heating'].attributes.hvac_action = "heating")
            and (states['sensor.central_heating_socket_power'].state > 400)
            return 'rgb(252, 86, 3)';
            // orange     
        ]]]

I’m sure that there’s something wrong with the way I’m accessing the attribute .hvac_action but I can’t figure it.

Any ideas?

I’m not sure if my problem is the same, but I’ve found custom:button-card seems to be fairly broken with respect to attributes.

Take the following example, you can see a standard entity card beside the identical custom:button-card showing completely different data. In some cases I can’t even work out where the data is coming from, it’s not the entity and it’s not the attribute. In a few cases it’s using wording I can’t even find in dev-tools.

type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - type: entity
    entity: sensor.car_lock
    attribute: decklidstatus
    name: Boot
    icon: mdi:car-back
  - type: custom:button-card
    entity: sensor.car_lock
    state_display: '[[[ return entity.attributes.decklidstatus ]]]'
    show_state: true
    show_name: false
    show_icon: false
  - type: entity
    entity: sensor.car_lock
    attribute: doorlockstatusgas
    icon: mdi:gas-station-outline
    name: Fuel cap
  - type: custom:button-card
    entity: sensor.car_lock
    state_display: '[[[ return entity.attributes.doorlockstatusgas ]]]'
    show_state: true
    show_name: false
    show_icon: false
  - type: entity
    entity: sensor.car_lock
    attribute: sunroofstatus
    name: Sunroof
    icon: mdi:car-convertible
  - type: custom:button-card
    entity: sensor.car_lock
    state_display: '[[[ return entity.attributes.sunroofstatus ]]]'
    show_state: true
    show_name: false
    show_icon: false
  - type: entity
    entity: sensor.car_lock
    attribute: doorstatusfrontright
    name: Driver Door
    icon: mdi:car-door
  - type: custom:button-card
    entity: sensor.car_lock
    state_display: '[[[ return entity.attributes.doorstatusfrontright ]]]'
    show_state: true
    show_name: false
    show_icon: false
  - type: entity
    entity: sensor.car_lock
    name: Bonnet
    attribute: engineHoodStatus
    icon: mdi:car-cog
  - type: custom:button-card
    entity: sensor.car_lock
    label: Front Left
    show_state: true
    show_name: false
    show_icon: false
    state_display: '[[[ return entity.attributes.engineHoodStatus ]]]'
layout:
  grid-template-columns: 50% 50%

I just did a basic card for someone and attributes worked. Maybe it will help.

type: custom:button-card
tap_action:
  action: call-service
  service: script.fan_speed_1
  target: {}
icon: mdi:cctv
styles:
  card:
    - border-radius: 24px
    - background-color: black
  icon:
    - width: 21px
    - height: 21px
    - color: white
    - padding: 10.5px
    - border-radius: 100%
    - background: |
        [[[
         if (states['fan.bedroom_fan'].attributes.direction == 'forward') 
         return "red";
           else
             return "grey";
           ]]]

This just worked too

type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - type: entity
    entity: sensor.basement_sensor
    attribute: decklidstatus
    name: Boot
    icon: mdi:car-back
  - type: custom:button-card
    entity: sensor.basement_sensor
    state_display: | 
      [[[ return entity.attributes.humidity ]]]
    show_state: true
    show_name: false
    show_icon: false

1 Like

@ashscott I think your issue is with integers in your IF statement here.

if (states['climate.central_heating'].attributes.hvac_action = "heating")
            and (states['sensor.central_heating_socket_power'].state  < 300)
            return 'rgb(3, 123, 252)';
            // blue
          if (states['climate.central_heating'].attributes.hvac_action = "heating")
            and (states['sensor.central_heating_socket_power'].state > 400)
            return 'rgb(252, 86, 3)';
            // orange     
        ]]]

Try this, I don’t have a thermostat configured my HA so I didn’t test it.

[[[
          if (states['climate.central_heating'].attributes.hvac_action == "off")
            return 'white';
          if (states['climate.central_heating'].attributes.hvac_action = "idle")
            and (states['sensor.central_heating_socket_power'].state | int < 10)
            return 'rgb(3, 123, 252)';
            // blue
          if (states['climate.central_heating'].attributes.hvac_action = "heating")
            and (states['sensor.central_heating_socket_power'].state | int < 300)
            return 'rgb(3, 123, 252)';
            // blue
          if (states['climate.central_heating'].attributes.hvac_action = "heating")
            and (states['sensor.central_heating_socket_power'].state | int > 400)
            return 'rgb(252, 86, 3)';
            // orange     
        ]]]

Here’s another example of completely inconsistent data compared to the sensor attributes I can see elsewhere. In some cases they make no sense, in others it’s more useful (like “locked int” tells me it was locked from the inside, but I cant see thay info if I look at the sensor attributes.

Try changing state_display: '[[[ return entity.attributes.decklidstatus ]]]'

to

state_display: | 
  [[[ return entity.attributes.decklidstatus ]]]

I was getting an error with your method, so it’s worth testing/eliminating.

I just tried that with no difference (the pipe to new line and removing the inverted commas)

You actually have some field that don’t exist. Try this but replace the entities

type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - type: entity
    entity: sensor.basement_sensor_battery
    icon: mdi:gas-station-outline
    name: Fuel cap
  - type: custom:button-card
    entity: fan.bedroom_fan
    show_state: true
    show_label: true
    state:
      - operator: template
        value: |
          [[[
            return states['fan.bedroom_fan'].attributes
            && (states['light.night_stand_bed'].attributes.direction <= 'forward')
          ]]]
        icon: mdi:alert
      - operator: default
        icon: mdi:fan
  - type: entity
    entity: sensor.basement_sensor_battery
    icon: mdi:gas-station-outline
    name: Fuel cap
  - type: custom:button-card
    entity: light.night_stand_bed
    show_state: true
    show_label: true
    state:
      - operator: template
        value: |
          [[[
            return states['light.night_stand_bed'].attributes
            && (states['light.night_stand_bed'].attributes.brightness <= 100)
          ]]]
        icon: mdi:lightbulb
      - operator: default
        icon: mdi:alert
  - type: entity
    entity: sensor.basement_sensor_battery
    icon: mdi:gas-station-outline
    name: Fuel cap
  - type: custom:button-card
    entity: light.night_stand_corner
    show_state: true
    show_label: true
    state:
      - operator: template
        value: |
          [[[
            return states['light.night_stand_corner'].attributes
            && (states['light.night_stand_corner'].attributes.brightness <= 100)
          ]]]
        icon: mdi:lamp
      - operator: default
        icon: mdi:lightbulb
layout:
  grid-template-columns: 50% 50%

I’m not sure I understand what you mean. I only want to display attributes for the sensor.

When I display them all using an entity card they display fine, which is solely there to show that the attributes exist and work, I’d never normally display the same thing side by side. So, left hand side is purely for debugging and showing the attributes exist and display correctly. Right hand side is button card, and not displaying attributes correctly (despite using the same method to display the volume attirbute for some of my other cards elsewhere successfully).

What I’d expect to see is that the right hand side data mirrors the left… which is not happening.

See my edit above :arrow_up:

@jfitzell
state_display isn’t what you think it is and attribute is not a field. Sorry for the confusion. Haven’t coded Button Cards in a bit.

I didn’t explain myself well last night. I recreated what you were describing…

Example 1 (single entity both cards)
It is a fan and it displays the direction attribute in the right column.

Example 2 (two entitles one per card cards)
The fan is on the left and a light’s RGB state is on the right.

Example 3 (two entitles one per card cards)
The fan is on the left and a light’s RGB state and the fan’s direction attribute is on the right.

type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - type: entity
    entity: fan.bedroom_fan
    icon: mdi:fan
    name: Example 1
  - type: custom:button-card
    entity: fan.bedroom_fan
    show_state: false
    show_icon: false
    show_name: false
    show_label: true
    label: >
     [[[
      var direction = states['fan.bedroom_fan'].attributes.direction;
      return  (direction ? direction : '0');
     ]]]
  - type: entity
    entity: fan.bedroom_fan
    icon: mdi:fan
    name: Example 2
  - type: custom:button-card
    entity: fan.bedroom_fan
    show_state: false
    show_icon: false
    show_name: false
    show_label: true
    label: >
     [[[
      var color = states['light.pc_hue_bar'].attributes.rgb_color;
      return  'RGB: ' +(color ? color : '0');
     ]]]   
  - type: entity
    entity: fan.bedroom_fan
    icon: mdi:fan
    name: Example 3
  - type: custom:button-card
    entity: fan.bedroom_fan
    show_state: true
    show_icon: false
    show_name: false
    show_label: true
    label: >
     [[[
      var color = states['light.pc_hue_bar'].attributes.rgb_color;
      return  'RGB: ' +(color ? color : '0');
     ]]]   
    state_display: |
      [[[ return [entity.attributes.direction]]]]
layout:
  grid-template-columns: 50% 50%

Thanks @LiQuid_cOOled. I understand you can’t use the same sensors, but it’s making it difficult for me to interpet what I’m doing wrong from your examples.

If we ignore the cards for a second, I have a single sensor (car_locked) that is showing me different data in different situations. My issue is working out how to get it to show what I want in button card. Based on guidance for a different scenario (volume for an amplifier state) I’d been using the state_display function… but perhaps Im going about it all wrong.


Try label verse state_display because state_display is tied to the actual state of the main entity.

I’ll try setting up one basic card with you actual entities. If you use a sensor as the main entity they generally don’t have attributes

the second pic is the actual device correct? Let’s switch to DM so you can share the device entity name. I see what the issue is now. Your pics help enormously

Thanks Liquid, I replied directly. I think I am using the correct entity, but it is definitely a little odd and might be due to the car manufacturer doing something weird, or the custom component thats getting it into HA.

After researching, it is definitely the Mercedes custom component, but I don’t think its a deal breaker for your needs.