Lovelace: Button card

@DavidFW1960, this should be fixed in the latest PR :slight_smile:

2 Likes

Awesome! I had considered this to be abandoned before you came along! Thanks a lot!

Iā€™ve added blink animation support in the PR, letā€™s wait for the merge to happen :slight_smile:
blink-animation

6 Likes

@RomRider you are a rock star!

1 Like

So I loaded the card from the PR because itā€™s not merged yet and it looks great! Fixed the layout issue and works as expected. Thanks!

:tada: Version 0.1.0 Released :tada:

Lots of breaking changes in this release but a big push towards alignment with other standards and some cool new features. Great work @RomRider!

Breaking Changes

  • color_off is now deprecated, use state instead if you want to redefine the color when off
    Instead of:
      - type: "custom:button-card"
        name: Switch
        entity: switch.main
        color: red
        color_off: green
    
    Use:
      - type: "custom:button-card"
        name: Switch
        entity: switch.main
        color: red
        state:
          - value: 'off'
            color: green
    
    Or:
      - type: "custom:button-card"
        name: Switch
        entity: switch.main
        state:
          - value: 'off'
            color: green
          - value: 'on'
            color: red
    
  • default_color is deprecated as it seems redundant with color (when light is not rgb). For rgb light, you can still define a specific color for the off state for example.
  • service has been deprecated in favor of tap_action, see below
  • action has been replaced by tap_action to mimic the default button card and allow for future options like hold_action
  • more_info renamed to more-info, more_info still works
  • service now takes the full service name light.turn_on
  • Add default entity icon support, Fix #53, add show_icon to decide whether to display the icon or not

Others

  • blink animation support, see examples
    blink-animation
  • tap_action supports navigate. Fix #75 & Fix #31
  • Support for style definition in state. Fix #41
  • Disable click when not needed
  • Refactored the code for faster rendering
  • Documentation update
  • Fix #71

:tada: Version 0.1.1 Released :tada:

  • New confirmation option that produces a popup confirmation dialog to avoid accidental clicks

Is there a way to have different actions based on state?

Iā€™d recommend the config-template-card to handle different actions per state

1 Like

The latest update is awesome!! Thanks @RomRider and @iantrich for continuing support on this card

2 Likes

Hovering with the mouse over a button changes the color and the last clicked button stays with this color.
Auswahl_191
Is there a way to deactivate this, or change this color in the theme?
THANKS to all for working on this card again!

Iā€™ve seen that also, going to check this out.

1 Like

@anilet, what would be the use case?
With a home assistant script you can do exactly that. Call the script from the button, test the state in the script and run the appropriate actions.

This latest update is absolutely amazing!! It fixes almost all of my nitpicks with the card.

I especially love the ability to leave off the icon and let it use the existing icon for that entity, can do much more things now with sensors that dynamically change their icons like weather-related ones for example. Now I have a really nice button for sensor.dark_sky_hourly_summary.

Blink is also fantastic - one of my Apple TVā€™s acts up and goes to ā€œunavailableā€ state where it continuously spams home assistant logs with an error. But now with blink I can see right away if I need to take action and reboot the Apple TV. So besides just the ā€œintruder alertā€ demo gif, it also is an excellent way to monitor devices. Just look for ā€œunavailableā€ state and blink.

Thank you so much @RomRider!

Two things I noticed so far while updating:

  1. It no longer seems to have more-info as the default. Many of my buttons do nothing when clicked on, when before they used to open more-info window. Is this a bug or an intentional change? Here is an example of a button that use to have more-info but no longer does anything when interacted with.
  - type: "custom:button-card"
    name: 
    entity: sensor.dark_sky_hourly_summary
    show_state: true
    color_type: card
  1. The documentation for the input_select near the bottom of page (where it mentions input_select.cube_mode) is incorrect. Instead of toggle, it should be:
    tap_action:
      action: service
      service: input_select.select_next
      service_data:
        entity_id: input_select.cube_mode

(I would edit that myself but I donā€™t have permissions, says I need to be on a branch.)

Thanks again for these awesome improvements.

Playing with the custom:mini-media-player, and adding speaker overview to see which speakers are are used by the Rotels input sources.

Ten button cards in a horizontal-stack, using color_type: blank-card, for empty space.

Looks like when decreasing the button, the button icon does not stay in the middle of the button.
Just nit-picking, any way to make the icon stay in the center?

Any reason its not possible to declare the width of a button (now it auto adjust depending on the card and number of collums)?

Ll-BC-IconAllign

Love the new features, but my code no longer works. How would I fix this to show switch.one, but toggle switch.two?

  - action: call-service
    color_type: icon
    entity: switch.one
    service:
      domain: switch
      action: toggle
      data:
        entity_id: switch.two
    type: 'custom:button-card'

I had to move back to the regular built in button. This button is so out of date at this point that it just doesnā€™t work. Regular button has everything I want at this point. I had to combine it with the card modder to get the colors for the buttons.

toggle is default with most recent changes

You canā€™t submit a PR now? I did lock down the master branch so that you need a PR, but you should be able to still do that.

Hi @RichardU,

The way to call a service has changed in the latest version, please check the documentation (https://github.com/custom-cards/button-card/blob/master/README.md)

However, in your case it should be now:

- type: 'custom:button-card'
  color_type: icon
  entity: switch.one
  tap_action:
    action: call-service
    service: switch.toggle
    service_data:
      entity_id: switch.two

Cheers

@RomRider has resolved most issues

1 Like