custom:button-card state animation | Home Assistant | Page 1

icy kite Nov 1, 2024, 7:21 PM

#

For the life of me, I cant get the state animation to work, even when following the docs to the letter. https://github.com/custom-cards/button-card?tab=readme-ov-file#configuration-with-states

I'm wrapping the custom:button-card inside a conditional card:

        - type: conditional
          conditions:
            - entity: light.livingroom_ceiling_fan
              state_not: unavailable
          card:
            type: custom:button-card
            entity: light.livingroom_ceiling_fan
            name: Ceiling Fan
            template: fan-button
            icon: mdi:fan
            aspect_ratio: 1/1.1
            hold_action:
              action: more-info

As for the animation, the docs say to do this:

        - type: conditional
          conditions:
            - entity: light.livingroom_ceiling_fan
              state_not: unavailable
          card:
            type: custom:button-card
            entity: light.livingroom_ceiling_fan
            name: Ceiling Fan
            template: fan-button
            icon: mdi:fan
            aspect_ratio: 1/1.1
            hold_action:
              action: more-info
            state:
              - value: 'on'
                styles:
                  icon:
                    - spin: true

however, this does not work.

If I remove the state: requirement, and move the styles: to the same level as the rest of the card options, then the icon spins.
I know using a 'light' entity for a fan is non-standard, this is a dimmer switch flashed to ESPhome presenting the dimmer as a brightness value.
I've verified the state of the entity is actually 'on' when the entity is on:
[<template TemplateState(<state light.livingroom_ceiling_fan=on; supported_color_modes=[<ColorMode.BRIGHTNESS: 'brightness'>], color_mode=brightness, brightness=38, icon=mdi:fan, friendly_name=Livingroom Ceiling Fan, supported_features=40 @ 2024-11-01T14:11:02.156155-05:00>)>]

GitHub

GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home...

❇️ Lovelace button-card for home assistant. Contribute to custom-cards/button-card development by creating an account on GitHub.

vapid oak Nov 1, 2024, 7:27 PM

#

does it work if you take it out of the conditional card?

icy kite Nov 1, 2024, 7:28 PM

#

I meant to mention that. It does not work outside of the conditional card either

vapid oak Nov 1, 2024, 7:29 PM

#

ok, that's something at least

#

just to rule it out can you try replacing the value line with:

- operator: template
  value: '[[[ return entity.state == "on" ]]]'

#

also, can you paste your template: fan-button and any other sub-templates?

icy kite Nov 1, 2024, 7:38 PM

#

button_card_templates:
  standard:
    color_type: card
    size: 80%
    hold_action:
      action: more-info
    styles:
      card:
        - padding: 0.2em
        - '--mdc-ripple-color': yellow
        - '--mdc-ripple-press-opacity': 0.5
      icon:
        - opacity: 0.5
      name:
        - font-size: 0.65em
        - white-space: normal
      state:
        - font-size: 0.65em
        - white-space: normal
      label:
        - font-size: 0.4em
        - white-space: normal
  standard-button:
    template: standard
    state:
      - value: 'on'
        styles:
          card:
            - background-color: gold
          name:
            - color: blue
          icon:
            - color: blue
            - opacity: 1
      - value: 'off'
        styles:
          card:
            - background-color: slategrey
          name:
            - color: white
          icon:
            - color: white
            - opacity: 0.5
  fan-button:
    template: standard-button
    state:
      - id: value_on
        value: 'on'
        icon: mdi:fan
      - id: value_off
        value: 'off'
        icon: mdi:fan-off

vapid oak Nov 1, 2024, 7:38 PM

#

oh wait, never mind

#

i think i've got it

#

spin: true doesn't go in the style section

#

state:
  - value: 'on'
    spin: true

https://github.com/custom-cards/button-card?tab=readme-ov-file#state

icy kite Nov 1, 2024, 7:43 PM

#

Not seeing any difference

            type: custom:button-card
            entity: light.livingroom_ceiling_fan
            name: Ceiling Fan
            template: fan-button
            icon: mdi:fan
            aspect_ratio: 1/1.1
            hold_action:
              action: more-info
            state:
              - value: "on"
                spin: true

vapid oak Nov 1, 2024, 7:44 PM

#

working fine for me

icy kite Nov 1, 2024, 7:44 PM

#

looks like two areas state: can be declared?

- type: custom:button-card
  [...]
  styles:
    card:
      - xxxx: value
    icon:
      - xxxx: value
    entity_picture:
      - xxxx: value
    name:
      - xxxx: value
    state:
      - xxxx: value
    label:
      - xxxx: value
  state:
    - value: 'on'
      styles:
        card:
          - yyyy: value
        icon:
          - yyyy: value
        entity_picture:
          - yyyy: value
        name:
          - yyyy: value
        state:
          - yyyy: value
        label:
          - yyyy: value

vapid oak Nov 1, 2024, 7:48 PM

#

i think that styles > state is fundamentally different

#

but idk, i've never used it

icy kite Nov 1, 2024, 7:50 PM

#

alright. Let me try with a new dashboard

vapid oak Nov 1, 2024, 7:53 PM

#

well like i said, this is working for me

type: custom:button-card
entity: binary_sensor.home_occupied
name: Ceiling Fan
icon: mdi:fan
hold_action:
  action: more-info
state:
  - value: 'on'
    spin: true

(I set it up before you copied the templates so i deleted that bit)

icy kite Nov 1, 2024, 7:58 PM

#

okay, I'm getting somewhere now, thanks for the help!
On a new dashboard, the entity works as expected:

views:
  - title: Home
    cards:
      - type: custom:button-card
        entity: light.livingroom_ceiling_fan
        name: Ceiling Fan
        icon: mdi:fan
        aspect_ratio: 1/1.1
        color_type: card
        size: 80%
        hold_action:
          action: more-info
        styles:
          card:
            - padding: 0.2em
            - '--mdc-ripple-color': yellow
            - '--mdc-ripple-press-opacity': 0.5
          icon:
            - opacity: 0.5
          name:
            - font-size: 0.65em
            - white-space: normal
          state:
            - font-size: 0.65em
            - white-space: normal
          label:
            - font-size: 0.4em
            - white-space: normal
        state:
          - value: 'on'
            spin: true
          - id: value_on
            value: 'on'
            icon: mdi:fan
          - id: value_off
            value: 'off'
            icon: mdi:fan-off
          - value: 'on'
            styles:
              card:
                - background-color: gold
              name:
                - color: blue
              icon:
                - color: blue
                - opacity: 1
          - value: 'off'
            styles:
              card:
                - background-color: slategrey
              name:
                - color: white
              icon:
                - color: white
                - opacity: 0.5

#

I removed all the templates and consolidated them to a single card

vapid oak Nov 1, 2024, 7:59 PM

#

weird....

icy kite Nov 1, 2024, 8:02 PM

#

okay, copy/pasted the working card on top of the broken card in the original dashboard, and the animation works.

#

It must have something to do with the templates

vapid oak Nov 1, 2024, 8:17 PM

#

very strange

icy kite Nov 1, 2024, 8:30 PM

#

It's this template breaking the spin feature:

  standard-button:
    template: standard
    state:
      - value: 'on'
        styles:
          card:
            - background-color: gold
          name:
            - color: blue
          icon:
            - color: blue
            - opacity: 1
      - value: 'off'
        styles:
          card:
            - background-color: slategrey
          name:
            - color: white
          icon:
            - color: white
            - opacity: 0.5

#

frustrating thing is that IIRC, the docs specifically state that templates can be overridden

vapid oak Nov 1, 2024, 8:33 PM

#

They can, I have done that myself

#

Do you know which bit is breaking it? Just deleting sections until you find the minimum boot that stops it working

icy kite Nov 1, 2024, 8:35 PM

#

That's what I'm doing now -
this standard-button: config still results in a non-spinning icon:

  standard-button:
    template: standard
    state:
      - value: 'on'
        styles: null
      - value: 'off'
        styles: null

#

If I remove the state: and everything underneath, then the icon spins

vapid oak Nov 1, 2024, 8:37 PM

#

Hmmm

icy kite Nov 1, 2024, 8:38 PM

#

I'm curious why , for example, template fan-button: utilizes state IDs, and standard-button: has direct state values

vapid oak Nov 1, 2024, 8:39 PM

#

I didn't even know id was a key for state

icy kite Nov 1, 2024, 8:40 PM

#

I'm thinking I should mirror the fan-button configuration to the standard-button template, then set up the values again

vapid oak Nov 1, 2024, 8:40 PM

#

But it worked in your big merged one

icy kite Nov 1, 2024, 8:40 PM

#

true

vapid oak Nov 1, 2024, 8:42 PM

#

Grrr

icy kite Nov 1, 2024, 8:42 PM

#

yep, that was it

vapid oak Nov 1, 2024, 8:42 PM

#

Oh yeah?

icy kite Nov 1, 2024, 8:42 PM

#

Templates

button_card_templates:
  container:
    color_type: label-card
    color: dimgray
    styles:
      card:
        - padding: 0
      name:
        - border-radius: 0.4em 0.4em 0 0
        - padding: 0.1em
        - width: 100%
        - font-weight: bold
      grid:
        - grid-template-areas: '"i" "n" "buttons"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      custom_fields:
        buttons:
          - background-color: rgba(0,0,0,0.3)
          - margin: 0
          - padding: 0.3em
  standard:
    color_type: card
    size: 80%
    hold_action:
      action: more-info
  standard-button:
    template: standard
    state:
      - id: value_on
        value: 'on'
        styles:
          card:
            - background-color: gold
          name:
            - color: blue
          icon:
            - color: blue
            - opacity: 1
      - id: value_off
        value: 'off'
        styles:
          card:
            - background-color: slategrey
          name:
            - color: white
          icon:
            - color: white
            - opacity: 0.5
  fan-button:
    template: standard-button
    state:
      - id: value_on
        value: 'on'
        icon: mdi:fan
        spin: true
      - id: value_off
        value: 'off'
        icon: mdi:fan-off

This works!

#

Button Config

                - type: conditional
                  conditions:
                    - entity: light.livingroom_ceiling_fan
                      state_not: unavailable
                  card:
                    type: custom:button-card
                    template: fan-button
                    entity: light.livingroom_ceiling_fan
                    name: Ceiling Fan
                    icon: mdi:fan

vapid oak Nov 1, 2024, 8:47 PM

#

Sweet

icy kite Nov 1, 2024, 8:47 PM

#

Thanks again for bouncing ideas 🙂

vapid oak Nov 1, 2024, 8:48 PM

#

Ah yes
https://github.com/custom-cards/button-card?tab=readme-ov-file#merging-state-by-id

GitHub

GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home...

❇️ Lovelace button-card for home assistant. Contribute to custom-cards/button-card development by creating an account on GitHub.

#

It's required for templates overrides of state apparently

icy kite Nov 1, 2024, 8:50 PM

#

ahh, makes perfect sense now. I have no idea what I'm doing, so I've been copypasta creating buttons that utilize custom:button-card

vapid oak Nov 1, 2024, 8:51 PM

#

Ah lol

#

Here I thought you were being so fancy with your nested templates :p

icy kite Nov 1, 2024, 8:54 PM

#

Oh, that was from https://community.home-assistant.io/t/fun-with-custom-button-card/238450
to ensure the entire array utilizes the same format.
I thought it was a good idea, so I kept it.
ESPhome utilizes the same idea in their device configurations

Home Assistant Community

Fun with custom:button-card

I’ve recently discovered the power of custom:button-card (GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant) and want to share some nice layouts I created. Be sure to read the documentation for the button-card at that link if you try to use any of these examples. I make extensive use of its templating feature. If...

vapid oak Nov 1, 2024, 8:54 PM

#

Nice. That's very organised

icy kite Nov 1, 2024, 8:57 PM

#

Now the next project - and I'm not asking for help, so don't feel obligated 🙂
Consolidate Low/Med/High/Off to a single button. Havent decided yet whether to do a vertical-stack and keep the discrete settings, or just have a single button activate select.select_next and output the current state

vapid oak Nov 1, 2024, 8:59 PM

#

Do a slider

icy kite Nov 1, 2024, 9:00 PM

#

I'm trying out a few different dashboard configurations -
I have smart switches, that can be set to 'relay-on' or 'relay-switched', depending on whether smart bulbs are attached to the switch circuit. I'm looking for the best way to include both the relay-state, plus I'm already using a conditional to show either the button for the switch or the button for the smart bulbs depending on the relay-state

vapid oak Nov 1, 2024, 9:02 PM

#

Template number helper to translate between fan states and 0-3 and then use a mushroom number card to make it pretty in the dashboard

icy kite Nov 1, 2024, 9:02 PM

#

If the switch is in 'switched' mode, then the switch button directly operates the relay. If the switch is in 'always-on' mode, then the button sends an event to HA which is translated to operate the bulbs.

vapid oak Nov 1, 2024, 9:04 PM

#

I know the kind, yeah

icy kite Nov 1, 2024, 9:04 PM

#

I love the mushroom cards, but I havent been able to get them set up

#

still struggling to apply the background, but that's a problem for another day

vapid oak Nov 1, 2024, 9:06 PM

#

Ah well. Good luck!

#custom:button-card state animation