Lovelace: Button card

You gotta use the anchors like lovelace cards. Just putting the anchor in your file won’t make all the buttons like that.

                    - <<: *cb_remote_zone_control
                      icon: mdi:volume-high
                      entity: switch.yamaha_volume_control

Is there a way using the button to show feedback? I have a bunch of buttons that are 1 liner scripts that have no on/off status. I’d like to flash the button with a different style for half a second to let the user know the button was pressed. Is this possible?

BTW how did you get the rounded edges like this?

image

    styles:
      card:
        - border-radius: 15px
1 Like

Wow, I never thought of passing 0 in as the brightness for light.turn_on in order to turn it off! I learned something today. :slight_smile:

I don’t know if this is of any use to anyone, but I wanted to share my lovelace setup with you guys. Why in this thread you might ask? Well because the majority of my lovelace setup consists of this mighty button-card (lets say almost 80% of my setup are these buttons?).

Anyways I hope you guys can make use of it.
Thread:

Repo:

5 Likes

Add a delay to the end of the script.

anyone else seeing this:

no idea which file it can’t find, they are all there…in fact, im not using any files at all, only some mdi: icons and they are all showing…

You’re not using the latest version (or you didn’t clear your cache). This is fixed in 1.9.0.

Thanks , thought I did both but will check again. no easy way of finding the version in the .js file?

Made me thinking : this couldn’t be caused by entities not being available? I ask because I have my Hue lights on the buttons, and they are logged ‘unavailable’ regularly… (long story)

Also some simply are powered off, so they should show unavailable on the button (which they do btw)

Nope. However if you use custom updater, you should use the /customcards endpoint instead of /local for your card files to skip cache. See https://custom-components.github.io/custom_updater/How-it-works

And it’s unrelated it entities that are unavailable.

cool, thanks, no worries: I simply always dl the file from https://raw.githubusercontent.com/custom-cards/button-card/master/dist/button-card.js and trust is is the latest :wink:

have custom updater installed, but didn’t yet change to the new endpoints, since I don’t like custom cards requiring extra system file settings in my setup. Since the card changed white a bit lately, Ill hit and hold till things have materialized. manual updating till that time for me.

good to know! thanks.

Good thing is I used your code and I just used the option you think is even better and that one works :smiley: Thanks!
To make it perfect I am wondering if there’s a way to get this back as a status to this button card. Would be cool if I could get the status to switch between off / dim / on, where it now does off / on / on. If I could have different states there, then I can also use different styling for each, where I could make it greyscale when off, icon light up when dimmed and the full card light up when fully on.

color: auto is what you’re looking for :slight_smile:, the color of the icon color will change automatically based on the light brightness.
However for the state it’s not possible (as a light is either on or off), you’ll have to use label_template and display what you want based on the state of your light.
Something like:

show_label: true
show_state: false
label_template: >
  if (entity.state == 'on' && entity.attributes.brightness && entity.attributes.brightness < 255) return "Dim";
  if (entity.state == 'on') return "On";
  return "Off";

Ok, so I understand I need to add conditional labels and use those instead of states, but that also means I cannot do something like below? (Mock-up in Excel…, will recreate later in HASS)

Lights_layout

Sure you can, using state on top of it:

state:
- operator: template
  value: >
    return entity.state == 'on' && entity.attributes.brightness && entity.attributes.brightness < 255;
  styles:
    # Your Dim Styles
- operator: template
  value: >
    return entity.state == 'on'
  styles:
   # Your On Styles
- operator: default
  styles:
    # Your Off Styles
1 Like

Cool! Gonna try that immediately when I get home. Will show the results :smiley:

That’s what I’m currently doing but I noticed that there is a graphic for pressed events. I want to modify that graphic instead of adding or creating scripts with a delay at the end. Also, the delay in response on a cellphone is long enough that the on/off doesn’t register.

There is already feedback when the button is pressed (ripple effect), but because your background is really dark, you can’t see it. I would have to modify the color of the ripple effect based on the background color, or maybe use the color as the feedback color for the ripple effect.

Is there a way for me to do it with CSS in the style section? If not, that could be a good enhancement. Nothing too pressing so don’t break your back on it. I can make a PR if that’s the route you want to go.