#State-driven button images...

1 messages · Page 1 of 1 (latest)

fleet bane
#

I would like to have button that would show a different image based some entities value. It might be a boolean, or might be 3-state, or it might be numeric (where I would like to specify ranges). For at least 2 of these cases, I can approximate with visibility, but it's brittle and repetitive.

Is there something like that already?

brazen perch
#

Generally speaking, when the stock cards don't do what you want or you want to make your own tweaks, that's where custom stuff comes into play. It all starts with installing HACS.

The Home Assistant Community Store (HACS) is a custom integration that provides a UI to manage custom elements in Home Assistant.

#

You could use card_mod to make modifications to the stock cards. For example, something like ```yaml
type: button
entity: input_boolean.tester
card_mod:
style: |
ha-card {
{% if states(config.entity) == 'off' %}
--card-mod-icon: mdi:chat-question;
--card-mod-icon-color: red !important;
{% else %}
--card-mod-icon: mdi:check;
--card-mod-icon-color: green;
{% endif %}
}

#

Another option is the custom:button-card. This card uses JavaScript instead of Jinja so the syntax is a little bit different. A similar looking card to the one above would be ```yaml
type: custom:button-card
entity: input_boolean.tester
icon: |
[[[
if (entity.state == 'off') return 'mdi:chat-question';
else return 'mdi:check';
]]]
styles:
icon:
- color: |
[[[
if (entity.state == 'off') return 'red';
else return 'green';
]]]

#

But, a nice feature of using the custom:button-card is its state feature. This creates the same thing as the two above but, you can see how it can be easier to define different styling for each state.

type: custom:button-card
entity: input_boolean.tester
state:
  - value: 'on'
    color: green
    icon: mdi:check
  - value: 'off'
    color: red
    icon: mdi:chat-question
#

The custom:button-card is a very useful card and you can get it to do almost whatever you want and get it to look however you want. I started using this card several years ago and it is my "go-to" card. I don't use many stock cards. You can incorporate custom_fields and put more information on the card. You can "embed" other cards within the card. You can also define config-templates allowing you to easily reuse a configuration across multiple cards without having to repeat the code in each. This makes your dashboard's code easier to read and modify since a change only needs to happen in one place. You can incorporate variables into your design. Just look over the documentation and make what suits you.

#

A side note about card-mod: There's something new out there called uix. I just noticed it tonight while I was grabbing links to include above. I'm not sure if it is intended to be a replacement to card-mod, another option similar to card-mod, or if card-mod is not being developed any more. But, this could be another option to look into.

frank token
fleet bane
frank token
torpid flint