Lovelace: Button card

emilp333 · September 21, 2018, 1:29pm

I also wanted this so I just added ${state.attributes.unit_of_measurement} in the <div> after ${state.state}. Would be nice to have it as a config value in the main card.

emilp333 · September 21, 2018, 2:30pm

Another thought. Would it be possible to have different icons based on state?

Rasser · September 21, 2018, 4:29pm

Is there a way to have the button set variables for a script? I can only get it to toggle a script but how to set it up to include variables in the homeassistant.toggle?

Also how do I create custom icons or entity-pictures for my buttons? I saw a screenshot earlier where someone had the Netflix logo etc. inside their buttons?

BR, Rasmus

ohadbenita · September 22, 2018, 6:11am

Were you able to solve it ?

ohadbenita · September 22, 2018, 6:12am

Can you please share how did you manage to solve the error ?

Thanks

matisaul · September 24, 2018, 3:07pm

Hi all, is there any chance to group buttons in a single card with title?

jaburges · September 25, 2018, 10:59pm

yeah nested in side a horizontal-stack or vertical-stack

matisaul · September 25, 2018, 11:40pm

Sadly, you can’t put a title into horizontal or vertical stack, and there aren’t a background on this stacks.
Do you understand what I need?

Thanks anyway

Klagio · September 26, 2018, 10:11am

@kuuji
Trying to do this as well, for the moment I am fine with just a button to open and another button to close. How can I achieve that?

action: open_cover ??
action: close_cover ??

Klagio · September 26, 2018, 10:56am

found the solution

  - type: "custom:button-card"
    action: service
    service:
      domain: cover
      action: close_cover
      data:
        entity_id: cover.xxxx

ohadbenita · September 28, 2018, 2:59pm

Well, this was just me not reading through the whole documentation.
For the sake of others that did the same, in the ui-lovelace import section, the type should be module, not JS :

resources:
  - url: /local/custom_ui/button-card.js?v=1
    type: module

typeonegative · September 28, 2018, 7:19pm

im getting all the time error:

https://my.ip.address/local/button-card.js:169:11 TypeError: state is undefined

any help? @kuuji

stogs · September 28, 2018, 8:55pm

same error here started with upgrade to 79.0 hassbian:

button-card.js?v=0.0.2:109:50 Uncaught TypeError: Cannot read property ‘state’ of undefined

jaburges · September 28, 2018, 10:41pm

have a look at this:

rabbit52068 · September 29, 2018, 10:22am

Hi @kuuji
Thanks for the great work, this is super useful!

Just wondering, is it possible to add a feature to remove the border for the button/card?

Argo · September 29, 2018, 3:30pm

Hey there! Thank you a lot, this is nice. Could you say, how can I make buttons smaller?

Here is what I have:

  - type: custom:button-card
    entity: switch.wall_switch_left_158d000245c5ca
    icon: mdi:lightbulb-on-outline
    name: 'Коридор'
    color: '#00abfb'
    size: 20%

mcfrojd · October 1, 2018, 3:34pm

Is it possible to have a button where the background color is red if the sensor im using have the state “Occupied” and green background if the state is “Vacant”.
Do i have to write some kind of template for that?

_BaQs · October 1, 2018, 8:54pm

you’ll have to modify the .js for that

check the class: “buildCssColorAttribute”

I’d also like to color a button which represents a thermostat, so the state is “heat”, and not “on”.

sti0 · October 1, 2018, 10:29pm

This is a great custom card. I love it and used it in a lot of my lovelace views. Thank you!

There is one great enhancement which would make the button card more powerful. Could you implement a long press option like @thomasloven did for picture elements? (My Lovelace Plugins) This would be great!

emilp333 · October 2, 2018, 8:52am

@kuuji would it be possible to implement templating support for the icon. If not could you add state icons for on and off?