Lovelace: Button card


#371

Ah. You are correct on both accounts. Quotes don’t matter and default_color is quoted in an example though not listed under the options.


#372

To reply again, the two things that stand out to me are:

  1. Your use of “default_color:” in the locked condition card. You didn’t specify a color and it looks like default_color should only be decleared when you’re using different state colors or when color is set to auto. As your color_type is set to icon, you haven’t defined a color for the icon. In which case it may be reverting back to your theme’s primary-text-color and making it seem as if it’s not displaying. try declaring a “color:” option and see what that does.

  2. On the unlocked card, you also don’t declare a color anywhere on the card, so it could be the same issue. Again, try declaring a “color:” option and see what that does.


#373

It’s not color related. I declared “color” like you said. The moment I put “show_state: true”, it disappears:


#374

Someone else that experience the following error?

https:/URL:8123/frontend_latest/8ee9235853b66c6b78f9.chunk.js:3254:365 Uncaught TypeError: Cannot read property 'replaceChild' of null

When I out-comment the custom-button cards the error is gone. Already posted an issue at github.


#375

@kuuji can you please take a look at the error?

Love this element. In fact almost replaced all the other elements with yours. It takes much less space, is way more informative.

P.S. Also is there a chance you can review your position on including this in the official repo? A lot of users appreciating your work will benefit from that.
I know about your position from the post on the Oct 18th. But bright ideas come to several people around the world at the same time. So unless large chunks of code were stolen from you - maybe it’s just one of those cases.


#376

In 0.88.0b0 icons and text is left aligned.
Auswahl_018
Can this be fixed with style options?


#377

image

The first 2 buttons are standard lovelace but the third is an input_boolean with the custom button card (so it shows a different colour when it’s on/off - not supported by lovelace one.

Any way to fix the look of this? (Note this is 0.88.0b0 - up to 0.87.1 it was perfect)


#378

Same issue in 0.87.x in Firefox. After refresh from HA the buttons are normal again. Refresh in FF the buttons look like this:
Capture
instead of:
Capture2

The first button is a light, the second a scene and last one a switch


#379

@Kroontje, @DavidFW1960, do you have size options in your button cards?

size: 80px # icon size
style:
  - height: 132px # card size

For me the sizes look good, but the text and icon is top/left aligned.


#380

No, no size options configured. Straight forward config :slight_smile:


#381

How do I get the ‘beach’ icon in the same colour as the other icons (kind a blue, but not black). This seems to be the default colour but the icon on this button card defaults to black.

cards:
  - type: 'custom:button-card'
    entity: input_boolean.vacation
    icon: 'mdi:beach'
    color: var(--primary-text-color)
    color_off: var(--disabled-text-color)
    color_type: card
    default_color: var(--primary-text-color)
    action: call-service
    service: input_boolean.toggle
    service_data:
      entity_id: input_boolean.vacation
    name: VACATION
    state:
      - color: 'rgb(255, 255, 0)'
        value: 'on'
      - color: 'rgb(255, 255, 255)'
        value: 'off'
  - entity: input_boolean.allalarmoff
    icon: 'mdi:bell-ring'
    name: Sirene
    tap_action:
      action: call-service
      service: input_boolean.toggle
      service_data:
        entity_id: input_boolean.allalarmoff
    type: entity-button
  - cards:
      - card:
          action: more_info
          card_style: ''
          color: var(--primary-text-color)
          color_off: var(--disabled-text-color)
          color_type: icon
          default_color: var(--primary-text-color)
          entity: alarm_control_panel.ha_alarm
          icon: 'mdi:security'
          name: ARMED
          size: 40%
          state:
            - color: 'rgb(0, 255, 0)'
              value: armed_away
          type: 'custom:button-card'
        conditions:
          - entity: alarm_control_panel.ha_alarm
            state: armed_away
        type: conditional
      - card:
          action: more_info
          card_style: ''
          color: var(--primary-text-color)
          color_off: var(--disabled-text-color)
          color_type: icon
          default_color: var(--primary-text-color)
          entity: alarm_control_panel.ha_alarm
          icon: 'mdi:shield-home'
          name: ARMED
          size: 40%
          state:
            - color: 'rgb(251, 210, 41)'
              value: armed_home
          type: 'custom:button-card'
        conditions:
          - entity: alarm_control_panel.ha_alarm
            state: armed_home
        type: conditional
      - card:
          action: more_info
          card_style: ''
          color: var(--primary-text-color)
          color_off: var(--disabled-text-color)
          color_type: icon
          default_color: var(--primary-text-color)
          entity: alarm_control_panel.ha_alarm
          icon: 'mdi:bell-off'
          name: 'OFF'
          size: 40%
          state:
            - color: 'rgb(255, 0, 0)'
              value: disarmed
          type: 'custom:button-card'
        conditions:
          - entity: alarm_control_panel.ha_alarm
            state: disarmed
        type: conditional
    type: horizontal-stack
type: horizontal-stack

#382

I have not played with the size options… Might try now…

image

size 60 and height 90


#383

How about this:

        size: 60px
        style:
          - margin-left: auto
          - margin-right: auto
          - width: 50%
          - margin-top: auto
          - margin-bottom: auto
          - height: 80px
          - padding-top: 10px

image

Also try height: auto… not perfect on mobile…


#384

Thanks! Works, but alot to edit.
It’s like sex, better than nothing! :grinning:
Hopefully this will get fixed.


#385
                style:
                  - align-items: center
                  - text-align: center
                  - margin-left: auto
                  - margin-right: auto
                  - width: 50%
                  - margin-top: auto
                  - margin-bottom: auto
                  - height: 80px
                  - padding-top: 4%
                  - padding-right: 0px
                  - padding-bottom: 4%
                  - padding-left: 0px
                  - align-content: normal
                  - align-self: auto
                  - font-size: 1.2rem
                  - font-weight: 400
                  - position: relative

Not sure this is better… just mimicked the standard button attributes…

image


#386

Well, some resizing and some custom colors for on/off is all what the buildin buttons need.
But i love this Button card!


#387

Seems this is what’s caused it…

Note for Lovelace custom card developers: if you relied on the availability of  `<paper-button>` in your code, you will have to update it to  `<mwc-button>`  to work like before.

#388

doesn’t appear to be a straight swap on the syntax though


#389

My button toggles an input boolean which in turn executes an automation. It’s do disable my sirenes etc. if I have a false alarm.

So I can’t really change the button’s color based on the state of the input boolean itself. would love to do this on the state of one of the sirenes. Is this possible ? In other words can I ‘disconnect’ the state part from the actual entity in the button?


#390

According to Balloob (I asked him on Discord) it is but you’re right it doesn’t work.