Lovelace: Button card

dmatik · June 7, 2019, 4:11pm

I have one more question.
Is there an option to reflect a press on a button? I mean in case when a button is executing a script and does not have on and off states, just to change for a second a then go back, to be sure that ui got my tap.
It is really missing for example on a wall tablet when something supposed to happen in another room.
Would be nice.

Thanks in advance.

RomRider · June 7, 2019, 4:30pm

I know @petro implemented something for this. Maybe you could just try to add a delay of 1 or 2 sec at the end of the script, it will stay on for that long in this case and you’ll have feedback.

However, by default on the button itself, when you hit it, there’s a ripple effect displayed.

petro · June 7, 2019, 5:09pm

I added a delay of 500 ms into a script and used service call to call the script.

dmatik · June 7, 2019, 7:48pm

Any chance, you can show some example of the delay you have added.

Thanks in advance.

Edit:
No need. That does the trick! Thanks a lot!
You guys rock!!!

Mariusthvdb · June 7, 2019, 10:17pm

how could I set a template for the styles: icon: - color, based on the state of another entity, or like below not the state but an attribute of the entity?

example using my motion sensors:

button_motion:
  template: button_body
  show_last_changed: true
  tap_action:
    action: more-info
    haptic: light
  hold_action:
    action: more-info
    haptic: success
  styles:
    card:
      - box-shadow: 0px 0px 2px 1px
  state:
    - value: 'on'
      styles:
        card:
          - color: red
        name:
          - color: black
        icon:
          - color: red
#      id: on-icon

    - value: 'off'
      styles:
        card:
          - color: '#555B65'
          - opacity: 0.8
        icon:
          - color: '#555B65'

with this, my current setup, they turn red when motion sensor state is ‘on’ and grey when not. I’d like them to show green, when in fact turned on (as in being switched on) and this would be the attribute on of that entity.

Should I simply add this as 2nd template under the state section…? First check to turn red on motion, second check green on entity.attributes.on being ‘true’ , third check grey when entity.attribute.on (default) being ‘off’?

like:

  state:
    - value: 'on'
      styles:
        card:
          - color: red
        name:
          - color: black
        icon:
          - color: red
#      id: on-icon
    - operator: template
      value: >
        return entity.attributes.on === 'true'
      styles:
        icon:
          - color: 'green'
    - value: 'off'. # or operator default
      styles:
        card:
          - color: '#555B65'
          - opacity: 0.8
        icon:
          - color: '#555B65'

–update–

there’s no way I can get the entity.state, or entity.attributes.xxx to work i the operator section of state, see above…

@RomRider is this a bug? or should I do it differently …

RomRider · June 8, 2019, 2:42pm

Version 1.11.1

NEW FEATURES

Support for HTML in name or name_template
Support for hacs

NOTE

As soon as HACS is more stable (still some bugs there), I’ll drop the support for custom_updater

RomRider · June 8, 2019, 4:05pm

There’s only one state matching at a time, you can’t combine them.
So you’ll have to have a state:

for current entity is on and other entity is on
for current entity is on and other entity is not on
for current entity is off

Mariusthvdb · June 8, 2019, 5:13pm

Not completely grasp this yet, but please check my second state, the one with the operator for the entity.attributes.on

Even if I use only that, and have no other states defined, it simply won’t check its value to return color green either. Can’t we use entity.attributes.on like that?

fyi, this is the binary_sensor:

state === Off (clear), entity.attributes.on === ‘true’.

RomRider · June 8, 2019, 5:23pm

That’s probably a boolean and not a string.
entity.attributes.on === true (no quote around true)

Mariusthvdb · June 8, 2019, 5:26pm

yess! that was it. Staring in my face all along…
great and working immediately.

thank you very much! this is the template:

button_motion:
  template: button_body
  show_last_changed: true
  tap_action:
    action: more-info
    haptic: light
  hold_action:
    action: more-info
    haptic: success
  styles:
    card:
      - box-shadow: 0px 0px 2px 1px
  state:
    - value: 'on'
      styles:
        card:
          - color: red
        name:
          - color: black
        icon:
          - color: red
    - operator: template
      value: >
        var on = entity.attributes.on;
        return on === true
      styles:
        icon:
          - color: 'green'
    - operator: default
      styles:
        card:
          - color: '#555B65'
          - opacity: 0.8
        icon:
          - color: '#555B65'
      id: off-icon

working perfectly now.

RomRider · June 8, 2019, 6:43pm

To fix your issue with the misalignment when the text is too long:
Before:

    grid:
      - grid-template-areas: '"i" "n" "s" "l"'
      - grid-template-columns: 1fr
      - grid-template-rows: 1fr min-content min-content

After:

    grid:
      - grid-template-areas: '"i" "n" "s" "l"'
      - grid-template-columns: 1fr
      - grid-template-rows: 1fr min-content min-content min-content

You define 4 lines in you grid-template-areas, but you where only defining a row height for 3 of them… It fixes the misalignment

EDIT: actually it’s not , but still you shouldn’t omit a row

EDIT2:
You should add:
- text-align: start to all the fields and it will fix alignment issues.

Looks like when ellipsis is used, it doesn’t take into account the justify-self. But you still need to keep justify-self, because when it’s actually not “ellipsed”, it will use justify-self! CSS nightmare

sbmlat · June 8, 2019, 8:38pm

@RomRider you are seriously missing most important feature. Buymeacoffee!!

By far, your effort to this card is THE best custom component or plug-in for HA. This card has best documentation explaining every feature. It’s amazes me how calmly and tirelessly reply to all the questions in this thread. Man, you are a genius.

Thank you

Mariusthvdb · June 8, 2019, 9:11pm

yes!
you’re right on both accounts for justify-self and text-align. Added them and voila, nicely aligned in all situations!

thanks for your dedicated support, seriously appreciated.

PodPerson · June 9, 2019, 2:16am

Help please.
I keep getting this error showing. It only happens with button-card, happens randomly and usually (but not always) goes away if I refresh the page. It happens in Safari, Firefox, ios safari and the ios app. It first happened after I did a full cookies/history clear on Safari a few weeks ago, but it just keeps happening and is getting worse. Installed Firefox yesterday, and while the page worked once, it now shows the error every time.
Since then, I’ve tried deleting cookies again, deleting and reinstalling all custom cards, updating/downgrading cards. I’ve tried searching for a solution but seem to be missing something because most solutions just talk about clearing cache. Is there a way other than deleting cookies/website data?

daphatty · June 9, 2019, 2:27am

Are you in Storage mode or Yaml? If the latter, could you post the code of one of your buttons and the resource declaration?

PodPerson · June 9, 2019, 2:38am

I edit Lovelace using the Configure UI button.
All buttons on all views are showing like this.
Resource declarations:

resources:
  - type: module
    url: /local/button-card.js?v=1.11.1
  - type: js
    url: /local/light-entity-card.js
  - type: js
    url: /local/vertical-stack-in-cards.js
  - type: js
    url: /local/slider-entity-row.js
  - type: js
    url: /local/card-tools.js
  - type: js
    url: /local/plugins/card-modder.js
  - type: module
    url: /local/radial-menu.js
  - type: module
    url: /local/mini-media-player-bundle.js
  - type: module
    url: /local/swipe-card/swipe-card.js
  - type: module
    url: /local/mini-graph-card-bundle.js

Code for one of the buttons is:

color: auto
entity: sensor.vacuum_status
icon: 'mdi:battery'
name: Status
show_state: true
state:
  - color: 'rgb(91, 237, 54)'
    icon: 'mdi:battery-charging'
    value: Charging
  - color: 'rgb(221, 232, 6)'
    icon: 'mdi:move-resize'
    value: Cleaning
  - color: 'rgb(221, 232, 6)'
    icon: 'mdi:keyboard-return'
    value: Returning Home
  - color: 'rgb(91, 237, 54)'
    icon: 'mdi:dots-horizontal'
    value: Idle
  - color: 'rgb(91, 237, 54)'
    icon: 'mdi:pause-circle'
    value: Paused
styles:
  label:
    - font-size: 10px
tap_action:
  action: more-info
type: 'custom:button-card'

daphatty · June 9, 2019, 3:42am

Try changing your resource type declaration from js to module.

resources:
  - url: /local/button-card.js
    type: module

DavidFW1960 · June 9, 2019, 3:51am

He has it set as module… you’re misreading his resources.

daphatty · June 9, 2019, 3:51am

Son of a… Why the hell is everything backwards?!

DavidFW1960 · June 9, 2019, 3:53am

Welcome to the GUI editor lol… it and the raw editor mangle everything.