Help On Custom Button Card Changing Colors Based on Current State

Configuration Frontend
,
1

Hi,
Newbie Home Assistant user here, just started using eco system a couple months ago and I love it; far better than just using HomeKit. I’m at the stage where I would like features not available on the stock install.

That said, I’m using Custom Button-Card, and can’t seem to get the icon color to change based on the state.

Screnshot below, icon is still grey, state shows as “Finished”, but icon won’t change to Green. Any help would be appreciated.

image
image1025×592 26 KB

FYI: I’m not a coder so had to learn YAML from scratch.

Here is the code in text

type: custom:button-card
entity: sensor.dishwasher_current_status
section_mode: true
icon: mdi:dishwasher
show_state: true
name: Dishwasher
color: grey
state:
  - value: finished
    color: green
grid_options:
  rows: 2
  columns: 3
2

I’d say it remains ‘grey’ because

"Finished" isn't equal to "finished".
 ^                         ^

which then results in using the default color.

3

I don’t remember where I got this, but I change the ‘icon’ color. Not just color.

Also, as justone said, verify your state check is correct.

              - type: custom:button-card
                entity: lock.front_door_lock
                tap_action:
                  action: call-service
                  service: script.door_locks
                  data:
                    which_door: lock.front_door_lock
                state:
                  - value: unlocked
                    styles:
                      icon:
                        - color: red
                  - value: locked
                    styles:
                      icon:
                        - color: lime
                show_name: false
                show_state: false
4

Thanks for the responses, truly appreciate this community.

Since my dishwasher is no longer in “Finished” state, I’m testing with the “Off” and “off” state, incorporating @jeffcrum’s suggestion; and it still does not want to work for me; screenshots below. :slightly_frowning_face:

image
image650×452 14 KB

image
image643×441 13.9 KB

Maybe I should find another way to skin this cat. I’m just looking to have a good visual cue on my wall mounted iPad/Dashboard. Any suggestions?

5

In one place you define grey, in another green… remove the “grey” line and define colors for other states.
It is better not to use the “states” option here since you will have to define same grey color for other several possible states. Instead, use JS template to define a color dependently on a state in “styles” option directly, see examples in docs.

6

Thank you for pointing me in the JS direction, time for me to read up. I’ll follow-up once my (old) brain can digest JS.

7

Kind of (untested):

type: custom:button-card
…
styles:
  icon:
    - color: >-
        [[[
          if (…)
            return “green”;
          else
            return “grey”;
        ]]]
9

I figured it out! :grinning: All the suggested codes worked. I was just a dummy newb.

I did not know that what is displayed on “show_state” is not always the actual state value. Example, for LG Dishwashers State of “Off” has the Value of “power_off”.

I learned this by accident, after doing a custom button for motion sensors where State of “Clear” has the Value of “off”.

So to know the different state values, go to Developer Tools → States → look/filter for the entity → and look at Attributes column.

Hopefully this info helps future newbs. :sweat_smile:

For those curious, here is my custom button code for my dishwasher; it has icon changes and a bit of animation. The goal for this button is so I have easy to see visual cue on my wall mounted dashboards.

type: custom:button-card
entity: sensor.dishwasher_current_status
section_mode: true
icon: mdi:dishwasher
show_state: true
name: Dishwasher

# This is for extra animation
extra_styles: |
  @keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes shake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
  }
  @keyframes rotating {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

state:
#  For Finished state us "end"
  - value: 'end' 
    color: green
    icon: mdi:dishwasher-alert
    styles:
      icon:
        - animation: pulse 2s ease-in-out infinite

#  For Off state us "power_off"
  - value: power_off
    color: grey
    icon: mdi:dishwasher-off
    styles:
      card:
        - filter: opacity(50%)

# Below is for all other states
  - operator: default
    color: yellow
    icon: mdi:dishwasher
    styles:
      icon:
        - animation: shake 0.8s ease infinite

grid_options:
  rows: 2
  columns: 3

Thank you to all that responded.

1 Like