Lovelace: Button card

Yeah. Unfortunately with the method used it is using the long press defined in HA core. So if you don’t have an element that supports long-press in your view, it won’t work

1 Like

So what!
Button-Card IS BACK!
Thanks a lot @iantrich and @RomRider

2 Likes

@RomRider we should probably make a note this or have a fallback for when long press cannot be found. Once we implement roll-up, we should be able to have our own hold implementation.

I suggest we update the documentation for now and add a issue for later.

@petro I added an anchor for styles just yesterday! But, what is the scope for anchors? That is, if I define them in a block early in the ui-lovelace will they be available to all areas below, including into !include files? Or, are anchor scopes perhaps limited somehow?

Starting to integrate the new hold_action into my UI and wanted to share a quick demo GIF to maybe give people an interesting idea: https://gfycat.com/orangeminiatureblacklemur

I have a “Daily Stats” and “Weekly Stats” that are integrated into the same button now thanks to hold_action. Default is daily view and if you long press it swaps it out to a weekly view. Also shoutout to @iantrich Lovelace Text Divider Row.

On the right side is imo a cool usage of both state and animation (blink). When I press the Printer button it shows a conditional card underneath with all my printer stats, but the cool thing is how the icon changes to a big green blinking arrow pointing down so it’s obvious what happened and where to look. When @RomRider awesome looking WIP layout PR gets merged that printer settings button should look nicer too :slight_smile:

2 Likes

@RomRider I have some issues with the tap_action. In the cases (one example below) I replaced the single line “action: more_info” with the two lines below (according to examples in Github) the more_info does not show. (cleared cache etc)

type: 'custom:button-card'
entity: alarm_control_panel.ha_alarm
icon: 'mdi:bell'
tap_action:
  action: more_info
show_state: false
show_name: true
state:
  - value: disarmed
    color: 'rgb(255, 0, 0)'
    icon: 'mdi:bell-off'
    name: 'OFF'
  - value: pending
    color: 'rgb(251, 210, 41)'
    icon: 'mdi:security'
    name: PENDING
  - value: armed_away
    color: 'rgb(0, 255, 0)'
    icon: 'mdi:security'
    name: ARMED

Sorry @Tyfoon, examples in the documentation are not completely up to date :blush: more_info is deprecated, you should use more-info
We’re going to fix the documentation soon.

@RomRider you are amazingly fast. Have been waiting for someone to implement the hold_action for months (I am not a programmer or I would have done it myself haha).

I will definitely try the card again now, but need to find the time to rewrite everything. Amazing job and thank you.

1 Like

Ah, that is a subtle difference;-)

Just updated. None of my buttons work. Here is some example code. What am I missing?

         - cards:
          - color: 'rgb(107, 181, 255)'
            entity: light.living_room_lights
            icon: 'mdi:lightbulb'
            name: Living Room
            type: 'custom:button-card'
            color_type: icon
            tap_action:
              action: toggle    
            hold_action:
              action: none             
          - color: 'rgb(107, 181, 255)'
            entity: light.bedroom_lights
            icon: 'mdi:lightbulb'
            name: Bedroom
            type: 'custom:button-card'
            hold_action:
              action: more-info
            tap_action:
              action: toggle
          - color: 'rgb(107, 181, 255)'
            entity: light.master_bathroom_light
            icon: 'mdi:lightbulb'
            size: 40%
            name: Master Bath
            type: 'custom:button-card'
            tap_action:
              action: toggle    
            hold_action:
              action: none                           
        type: horizontal-stack

Any errors in the browser console? I would venture a guess that you are having errors on not having longpress defined. Try placing a regular entity-button on the view as well

Here is what I’m seeing in the console:

It’s related to longpress. How do I define it? Is that the same as hold_action?

Add an entity-button in your view and long press will work. It’s a caveat of the current implementation. We’ll work on this in the future with @iantrich to not rely on home-assistant’s implementation.

Thanks. Am I not able to use this version without the hold_action? I removed all references to it, but still not able to toggle anything.

You can, but have to have something on the view that implements longpress still:

  • entity-button
  • glance
  • picture-entity
  • picture-glance

Like @RomRider said, we’ll find a way around this

:tada::tada: Version 0.4.1 :tada::tada:
New features

  • confirmation now takes a free text to display in the confirmation box
  • Fallback to simple click support when longpress is not found. Make sure you read this for long press support!

Fixes

  • Fixes #114 (rounded corners with color_type: card) and supports card-modder now

Breaking changes

  • confirmation is now taking a string.

@scfigg, version 0.4.1 which was just released fixes this. Only single click support if longpress is not found.

:tada::tada: Version 0.5.0 :tada::tada:
New features

  • show_units: true/false

  • units: overrides the default units of a sensor

  • overflowing text will be cut at the end with ...
    image

  • layout:
    Fixes #103
    This option enables you to modify the layout of the card.

    It is fully compatible with every show_* option. Make sure you set show_state: true if you want to show the state

    Multiple values are possible, see the image below for examples:

    • vertical (default value if nothing is provided): Everything is centered vertically on top of each other
    • icon_name_state: Everything is aligned horizontally, name and state are concatenated
    • name_state: Icon sits on top of name and state concatenated on one line
    • icon_name: Icon and name are horizontally aligned, state is centered below
    • icon_state: Icon and state are horizontally aligned, name is centered below
    • icon_name_state2nd: Icon, name and state are horizontally aligned, name is above state
    • icon_state_name2nd: Icon, name and state are horizontally aligned, state is above name
4 Likes