Lovelace: Button card

Share your Projects! Dashboards & Frontend
70

Great, I just tried it and this works now:

      - type: "custom:button-card"
        color_type: card
        color: rgb(223, 255, 97)
        icon: mdi:check
        action: service
        service:
          domain: script
          action: climate_selected
          data:
            value: app_input_boolean_4
      - type: "custom:button-card"
        color_type: card
        color: rgb(223, 255, 97)
        icon: mdi:check
        action: service
        service:
          domain: script
          action: climate_selected
          data:
            value: app_input_boolean_5

There is one other thing I can’t get to work, and that was done with style_template in Custom UI. I can make it change button style based on the state of the entity it is related to, but I can’t find a way to specify some other unrelated entity.

This is an example from Custom UI and how it worked there:

style_template: "if (entities['input_boolean.app_input_boolean_5'].state === 'on') return 'background-color: blue'; else return 'background-color: green';"

Hope I’m making sense here :slight_smile:

71

Is it possible to use a attribute as an entity? My ecobee will show as auto all the time whether its on or off but the operation attr will show idle,cool or heat.

72

Templates are not allowed in Lovelace and that is unlikely to change.

73

Thanks for all the hard work, this is working well for quickly building remotes for my home theater system. I have 2 suggestions that would make this perfect. I’m not sure of the limitations of the platform, so it’s possible that these are not possible, but it’s worth a shot.

  1. Allow the event to be fired on a mouse or finger down event instead of a click. I think this would make navigating menus feel a lot more responsive.

  2. Allow the service to be repeated after a short delay while held down in the same way holding a key on a remote would (For volume control, menu control, etc)

74

Long presses are not recognized by LL (yet).

75

After reading through all the documentation again I figured out where the error is:

Where the tutorial in the beginning of this thread indicates “Include the card code in your `ui-lovelace-card.yaml” it actually should write “Include the card code in your ui-lovelace.yaml”

A small and subtle difference, but by including the code in ui-lovelace.yaml I managed to get it to work :slight_smile:

1 Like
76

This looks great. I keep getting this
image

I’ve place the file buttom-card.js in directory \config\www\

My ui-lovelace.yaml looks like this

indent preformatted text by 4 spaces

title: Home
resources:

  • url: /local/button-card.js
    type: module
    views:
  • title: Example
    cards:
    • type: “custom:button-card”
      entity: light.gateway_light_7811dcb36dcd
      icon: mdi:sofa
      color: auto
      action: more_info

Any idea what’s wrong?
Torben

1 Like
77

I’ve got the same error as Torbenan, with same config…
I have this error in the log:
2018-09-17 20:16:31 ERROR (MainThread) [frontend.js.latest.201809030] https://home.merklen.fr/local/custom_ui/button-card.js:1:8 Uncaught SyntaxError: Unexpected token {

Are we alone with this ?

And what is this file “ui-lovelace-card.yaml” ?

1 Like
78
79

Thanks a million for this, it’s my main light switch board now :slight_smile:

button-card-hass

One question I have: how do I get it working when my internet is down? There was a storm here today, and my internet was out for the morning and the button-cards were the red blocks instead.

I guess it’s from the import:

import {
  LitElement, html,
} from 'https://unpkg.com/@polymer/lit-element@^0.5.2/lit-element.js?module';

What workaround could I use for this?

Many thanks again! I wouldn’t have my HA set-up without it :smile:

2 Likes
80

Thanks for sharing this @kuuji Happened to me as well, couldn’t get it to work, any solution to it ?
I’ve placed the custom card in its correct place and I’ve been using other lovelace custom cards with success

I managed to localize it to the imports

2018-09-21 14:11:48 ERROR (MainThread) [frontend.js.latest.201809030] http://10.x.x.x:8123/local/custom_ui/button-card.js:1:8 Uncaught SyntaxError: Unexpected identifier

The import line looks like this

'import {
LitElement, html
} from 'https://unpkg.com/@polymer/lit-element@^0.5.2/lit-element.js?module’;’

2 Likes
81

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.

82

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

83

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

1 Like
85

Were you able to solve it ?

86

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

Thanks

87

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

2 Likes
88

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

89

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? :pensive:

Thanks anyway

90

@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 ??