Auto-entities, custom:button-card and animation

Configuration Frontend
1

Using custom:button-card with animation based on state. If I use a single entity everything works just fine -

      - type: custom:button-card
        color_type: card
        aspect_ratio: null
        entity: fan.family_room_fan
        show_entity_picture: true
        name: Family Room Fan
        tap_action:
          action: toggle
        state:
          - value: 'on'
            color: green
            styles:
              icon:
                - animation:
                    - rotating 1s linear infinite

The problem is when I add custom:auto-entries icon color and automation does not work -

          - type: custom:button-card
            name: Fans
            show_icon: true
            show_name: true
            styles:
              card:
                - border: 3px solid
                - border_radius: 10%
                - spacing: 250px
                - '--mdc-ripple-color': blue
                - '--mdc-ripple-press-opacity': 0.5
                - height: 75px
                - width: 150px
            tap_action:
              action: call-service
              service: browser_mod.popup
              data:
                dismissable: true
                title: Fans
                content:
                  show_name: true
                  show_icon: true
                  state_color: true
                  show_state: true
                  type: custom:auto-entities
                  card:
                    type: glance
                  sort:
                    method: entity_id
                    ignore_case: true
                  filter:
                    exclude: []
                    include:
                      - domain: fan
                        options:
                          type: custom:button-card
                          color_type: card
                          show_entity_picture: true
                          tap_action:
                            action: toggle
                          state:
                            - value: 'on'
                              color: green
                              styles:
                                icon:
                                  - animation:
                                      - rotating 1s linear infinite

I am in need of assistance please. I have searched for an answer and tried many different versions of code and having no luck.

Thank!

2

What I can see here:

  1. There is a custom:button-card.
  2. On a tap_action you are showing a browser-mod popup.
  3. This popup is a Glance card filled by with a custom:button-card.

And you got some issues.
Was it all your code or taken from somewhere?
Do you know that testing some code is usually done like “part by part”, not in a complex combination from a beginning?
Saying this because you cannot place custom:button-card inside a Glance card. It is unsupported. You could have noticed it - in case of testing this “auto-entities” part w/o all that “sandwich”.
If you need to place button-card into a grid-like structure - consider a Grid card.

3

Thank you for your response.

The code was rewritten from code several code examples googling over a week trying anything. I currently have another button setup just the same and it is working fine with the glance card. I have not seen anything documented that the glance card cannot be used with custom:button. In fact I replaced the glance card with a grid and it generates an error which flashes by so quickly I cannot tell what is. No log file has an error for it.

I’ve been coding for many years yet YAML is new to me. You seem to come across like I have never done any coding. You do not know me so in my opinion please don’t talk down like you seem to doing. No disrespect to you insinuated.

I tested the code as a single card before trying and it works fine:

type: custom:button-card
color_type: card
aspect_ratio: null
entity: fan.family_room_fan
show_entity_picture: true
name: Family Room Fan
tap_action:
  action: toggle
state:
  - value: 'on'
    color: green
    styles:
      icon:
        - animation:
            - rotating 1s linear infinite

Below is the first test “part in part” using auto-entities and then adding it in a vertical stack which runs fine. The code section I am having issues is with the animation and color. The card works except for any new custom:button options.

type: custom:button-card
name: Lighting
show_icon: true
show_name: true
styles:
  card:
    - border: 3px solid
    - border_radius: 10%
    - spacing: 250px
    - '--mdc-ripple-color': blue
    - '--mdc-ripple-press-opacity': 0.5
    - height: 75px
    - width: 150px
tap_action:
  action: call-service
  service: browser_mod.popup
  data:
    dismissable: true
    title: Lighting
    content:
      show_name: true
      show_icon: true
      show_state: true
      state_color: true
      type: custom:auto-entities
      card:
        type: glance
      sort:
        method: entity_id
        ignore_case: true
      filter:
        exclude:
          - entity_id: switch.*led
          - entity_id: light.*backlight
          - entity_id: light.lumary*
          - entity_id: light.13a75d36_1c43b662_screen
          - entity_id: switch.pond_area_siren
        include:
          - domain: light
          - domain: switch
            options:
              type: custom:mushroom-light-card
              icon: mdi:lightbulb
              tap_action:
                action: toggle
4

No, I never meant that you had never coded.
And ofc I did not mean that someone who never coded is a wrong person.
I only meant what I wrote explicitly: “Do you know that testing some code is usually done like “part by part”, not in a complex combination from a beginning?”
And I see that you still trying to debug a code after mixing different parts together, not “part by part”.
This is not about “programming in yaml”, this is SAME for ANY language.
“Part by part” - in this particular case is:
– first create a card which you want to be shown in a popup;
– test this card in the simplest configuration; make it more complex step by step;
– then test the main card n the same step-by-step way;
– then add the 1st card into a popup and check if it is still properly shown inside a popup.

As for the Glance card.
In fact you can place “custom:button-card” inside Glance card:

image
image1139Ă—153 6.87 KB

So, my words are not exactly true:

But this is not correct. Grid should be used instead.

Did you use “card_param: cards” in you attempt with the Grid card?

image
image974Ă—321 18.7 KB

type: custom:auto-entities
card:
  type: grid
  square: false
card_param: cards
filter:
  include:
    - domain: light
      options:
        type: custom:button-card
        entity: this.entity_id
1 Like
5

That fixed it when using the grid. I do not understand what this parameter is though.

Only one thing left is some lights are defined as switches. When used they display an error: No card type configured

Should they be redefined as lights? Probably

6

It is described in the “auto-entities” docs.
Defines which target card’s option to “feed”.

Where “light is defined as a switch”?
Post a short code & a screenshot.

7

Ok, I figured it out. I had two domains defined in the auto-entities for switches. Domain switches had a card option defined whereas I did not define one for lights.

Thank you for your patience and assistance!

1 Like