Custom Button Card

Configuration
1

I’m trying to make a double custom button card, but somehow it say’s that the card type is not configured.

- type: horizontal-stack
  cards:
    - type: 'custom:button-card'
      color_type: label-card
      color: 'rgb(44, 109, 214)'
      name: Keukenstuff
- type: horizontal-stack
  cards:
    - type: 'custom:button-card'
      entity: light.dressoir_lamp
      color: auto
      name: 's:default h:200px'
      styles:
        card:
          - height: 200px
    - type: 'custom:button-card'
      entity: light.dressoir_lamp
      color_type: card
      color: auto
      name: 's:100% h:200px'
      size: 100%
      styles:
        card:
          - height: 200px
    - type: 'custom:button-card'
      entity: light.dressoir_lamp
      color_type: card
      color: auto
      size: 10%
      name: 's:10% h:200px'
      styles:
        card:
          - height: 200px
- type: horizontal-stack
  cards:
    - type: 'custom:button-card'
      entity: light.dressoir_lamp
      color: auto
      name: 60px
      styles:
        card:
          - height: 60px
          - width: 60px
    - type: 'custom:button-card'
      entity: light.dressoir_lamp
      color_type: card
      color: auto
      name: 80px
      styles:
        card:
          - height: 80px
          - width: 30px
    - type: 'custom:button-card'
      entity: light.dressoir_lamp
      color_type: card
      color: auto
      name: 300px
      styles:
        card:
          - height: 300px

It should be 3 horizontal rows.
1 row with 1 card for a title and 2 rows of 3 cards.

Anyone has a suggestion what’s wrong here?

2

Did you install the custom button-card? Does it work for a single button card?

3

Yep. All works fine except this one.

4

why use the horizontal-stack for the title? seems not necessary at all?

5

Maybe. But that doesn’t change the problem if i remove it.

6

just takeout out as its superfluous.

You did put these horizontal stacks in a vertical-stack on entities card?

7

I took it out.
I’ve put this whole part of code in a manual card.

8

You missed a parent type stack:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        color_type: label-card
        color: 'rgb(44, 109, 214)'
        name: Keukenstuff
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: light.left_den_lamp
        color: auto
        name: 's:default h:200px'
        styles:
          card:
            - height: 200px
      - type: 'custom:button-card'
        entity: light.left_den_lamp
        color_type: card
        color: auto
        name: 's:100% h:200px'
        size: 100%
        styles:
          card:
            - height: 200px
      - type: 'custom:button-card'
        entity: light.left_den_lamp
        color_type: card
        color: auto
        size: 10%
        name: 's:10% h:200px'
        styles:
          card:
            - height: 200px
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: light.left_den_lamp
        color: auto
        name: 60px
        styles:
          card:
            - height: 60px
            - width: 60px
      - type: 'custom:button-card'
        entity: light.left_den_lamp
        color_type: card
        color: auto
        name: 80px
        styles:
          card:
            - height: 80px
            - width: 30px
      - type: 'custom:button-card'
        entity: light.left_den_lamp
        color_type: card
        color: auto
        name: 300px
        styles:
          card:
            - height: 300px
1 Like
9

First, I love this addition to HA, and use it extensively on my UI. I have a fan automation and use mdi:fan as the icon on a button. I also used the “spin” attribute to animate the fan when it is ON. Really cool!

What I didn’t like though, is that the fan spins backwards! I looked into it a bit, and found a way to style the icon to flip horizontal, which worked like a charm, as long as it was off. As soon as it turned on, however, it flipped back and spun in the wrong direction as before. The style is not honored in the JS.

So, I looked a little deeper and found the code for the rotation effect (spin) at about line 1302, and added “reverse” to the CSS, and saved the updated JS file to my config/www folder in place of the original. The lines now look like this:

  [rotating] {
    -webkit-animation: rotating 2s linear infinite reverse;
    -moz-animation: rotating 2s linear infinite reverse;
    -ms-animation: rotating 2s linear infinite reverse;
    -o-animation: rotating 2s linear infinite reverse;
    animation: rotating 2s linear infinite reverse;
  }

and it works wonderfully. Just a shout out to RomRider and all who have worked on this code. Perhaps they might consider adding a spin-reverse option to the State section. In the meantime, for others who just can’t get over their fans running backwards, here is an easy solution. My contribution. :wink:

Cheers

UPDATE: Hmm… but what’s interesting is that the mobile app for iphone still shows it going the wrong way! How can that be? They should be using the same JS file, located on my host. Even a refresh and updating the app didn’t help. Maybe the browser in the app doesn’t support the ‘reverse’ CSS option? I find that hard to believe. I even updated the resource in Lovelace on the iPhone, thinking maybe it had cached the JS file somewhere. :frowning: Maybe I’m missing something.

1 Like