Lovelace: Button card

glyn · May 4, 2019, 9:10am

Managed to do it by using label instead of name for ‘Living Room’.

Thanks for your help and a great card.

glyn · May 4, 2019, 10:25am

Me again. I am using the following code with the Button Card:-

              - operator: template
                value: >
                  return states['climate.living_room'].state === 'heat' && (states['input_boolean.living_room_heater_boost'].state === 'on')                                                            
                styles:
                  card:
                    - border: 2px solid red

Is there a way to get the border to blink when the condition is met?

RomRider · May 4, 2019, 11:08am

It’s a bit different for the icon as it’s not a direct grid element so justify-self will not work… CSS joy…
Something like this should do the trick:

styles:
  icon:
    - padding-right: 100%
    - padding-left: 10px

That’s exactly what I’d have offered as a solution

Not the border only, sorry, but you can apply the blink animation to any element in the card:

styles:
  XXXXX: # <---- The element you want to blink
    - animation: blink 2s ease infinite

RomRider · May 4, 2019, 11:21am

Version 1.6.0

New Features

You can return HTML in the label or label_template to achieve things like:

label_template: >
  return 'Connection: '
  + (states['switch.connection'].state === 'on'
      ? '<span style="color: #00FF00;">enabled</span>'
      : '<span style="color: #FF0000;">disabled</span>')
  + ' / '
  + (states['binary_sensor.status'].state === 'on' ? 'connected' : 'disconnected')

With lock: true You can now lock your button (inspired by the great @thomasloven). This will display a normal button with a lock symbol in the corner. Clicking the button will make the lock go away and enable the button to be manoeuvred for five seconds.
show_last_changed: If true will replace the label and display the last_changed attribute in a nice way. (cc: @rsachoc)

Fixes

Support for light temperature with color: auto. Fixes #141 (cc: @jarrah)
blank-card had a background if a height was defined (cc: @Rondom)

jimz011 · May 4, 2019, 11:36am

Massive update once again. Man are you working 24/7 on this? The amount of features added is crazy in this short period of time.

I am certainly going to play with the new features soon! Thanks

glyn · May 4, 2019, 11:42am

OK. Thanks for that.

ramonvanbiljouw · May 4, 2019, 12:15pm

My compliments for all the hard work… This custom card has become my most important card for my setup… Many thanks! Regards, Ramon

jerrychong25 · May 4, 2019, 12:33pm

Hi all,

I tried to download full js code from https://raw.githubusercontent.com/kuuji/button-card/master/button-card.js as mentioned in first instruction, however it returns 404: Not Found.

So, I head to GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant to download full source code, and installed in my HA.

Then, include card code in yaml file, as per below:

resources:

url: /local/button-card/button-card.ts?v=1.0.0 (I put all source code into button-card folder)
type: module

And following button code:

type: ‘custom:button-card’
entity: light.common_light_1
icon: ‘mdi:air-conditioner’
color: ‘rgb(28, 128, 199)’

But HA show error as per screenshot below:

Do I miss out anythings during the setup?

Thanks.

RomRider · May 4, 2019, 12:51pm

The first post is completely outdated, please use this documentation

RomRider · May 4, 2019, 12:56pm

Haha, not more than 1 or 2h a day

rsachoc · May 4, 2019, 1:59pm

Awesome, thanks!

jerrychong25 · May 4, 2019, 2:29pm

Thanks!

It is working now.

Prathik_Gopal · May 4, 2019, 5:50pm

Not able to solve this, tried all steps as per install docs, still getting Custom element doesnt exist error.

Uncaught DOMException: Failed to execute ‘define’ on ‘CustomElementRegistry’: this name has already been used with this registry
at http://local-ip:8123/customcards/github/custom-cards/button-card.js?track=true:3675:16

iantrich · May 4, 2019, 5:52pm

When you click the link in that error, what is the surrounding text? Namely, what is it defining?

RomRider · May 4, 2019, 5:53pm

Did you declare it as a module and not a js in your lovelace config?
Is there any reference to the old button-card url in your lovelace resources list?

Prathik_Gopal · May 4, 2019, 5:56pm

Takes it here , customElements.define(“long-press-button-card”, LongPress);

Prathik_Gopal · May 4, 2019, 5:57pm

No references to the old one, the resources contain

- url: /customcards/github/custom-cards/button-card.js?track=true
    type: module

jarrah · May 4, 2019, 6:00pm

Thank you RomRider for your earlier help, but I must admit I’m still struggling with layouts by trying to make icons and text align correctly. Taking the earlier Windows button example, I’ve since made it smaller which has resulted in the label and icon being off centre:

Is there any way to treat both the icon and label as one and centre them both within the button’s width please? (I’m using layout: icon_label)

Thanks.

Prathik_Gopal · May 4, 2019, 6:02pm

@iantrich @RomRider This gets weird now, i refreshed the page and it started to work, rebooted hassio and the same error again.

RomRider · May 4, 2019, 6:12pm

Can you share with us your full lovelace resources config list please?