Lovelace: Button card

apop · June 4, 2019, 5:06am

I know one or two people asked on here, so here’s a link to my Home Assistant config thread, with my Lovelace configuration that makes heavy use of the button card (plus plenty of screenshots on my GitHub repo):

djtommye · June 4, 2019, 10:02pm

I like the orgainization of the yaml file - but I presume that the UI editor doesn’t support the includes? I’m not that well versed at writing yaml, but I’m getting better. Very well done, @apop!

djtommye · June 4, 2019, 10:09pm

So - I changed the entity from the cover to calling a script. That works fine now. My next question is - can I pull the state of the cover to set the color of the button?

Another question - can I define a button that jumps to another view?

RomRider · June 4, 2019, 10:12pm

Please read the documentation, all your requests are documented there

RomRider · June 4, 2019, 10:13pm

Version 1.11.0

NEW FEATURES

Adds the CSS variable --button-card-light-color-no-temperature equivalent to --button-card-light-color but without the color temperature applied.
New option: unlock_users: A list of usernames allowed to unlock the button when lock: true. If undefined, everyone is allowed. (Fixes #167)
```
- type: custom:button-card
  entity: switch.super_secure_switch
  lock: true
  unlock_users:
    - user1
    - user2
```
Support for timer entities. In the state, it will now display the time remaining while running or paused and idle while being idle. (Fixes #156)

FIXES

Fix ripple effect when lock is true
Fixes #177: name_template and entity_picture_template where not updating the button on state change

klogg · June 4, 2019, 10:19pm

This is interesting. there are plenty of discussions about timers and accessing the time remaining (e.g. Display remaining seconds of timer in frontend - #15 by klogg - but only if you’re interested…)

Can I ask a very specific question? Does this display the time remaining for a timer even if the timer is started while it is still running i.e. it resets back to the initial duration and then starts counting down again?

RomRider · June 4, 2019, 10:27pm

I don’t really understand that question, specifically this part “time remaining for a timer even if the timer is started while it is still running”
However, timers are kind of special entities, the time remaining is only processed in the frontend, not on the backend. The time remaining is based on the difference between now and the last time the entity was updated. The frontend is updated every second if the timer is running.

I’m not sure this answers your question, but if you clarify your question, I might be able give you a better answer

djtommye · June 4, 2019, 10:35pm

@RomRider - thank you. I’m not sure how I missed that. I just need to figure out how I can get my Fire Tablet 5gen to show the component so I can dress things up a bit

klogg · June 4, 2019, 10:35pm

HA! Yes, so some of us are just discovering that! And your following description is something that would have been useful to ‘us’ if the HA docs had included that information! But…

What I mean is if a timer is running and then it is started again while already running, the timer resets it’s duration to the original duration and begins timing again from ‘now’.

For example…

Start timer for 00:04:10
Timer runs for 00:01:30
Timer is started
Timer resets to 00:04:00
Timer runs for 4 minutes

In this case the frontend will not display the counting down time after the second start but will just show ‘active’.

Really, this isn’t too important, I could test it myself to find out. It is just that it is uncannily relevant to another discussion.

RomRider · June 4, 2019, 10:42pm

It will behave in the same way I’m afraid. It looks like the last_changed attribute is not updated when you start a timer that is already running. That’s more a HA core component bug… I’ll have a look if I can PR something there.

EDIT: In the meantime, you could timer.cancel and then timer.start again. Use a script to do that and instead of calling timer.start call that script from your automation or your frontend.

jimz011 · June 4, 2019, 11:05pm

Hihi, I actually wanted to report a bug, but it seems it is an iOS 13 problem

Everytime I press a button on the iphone it will do it again (so it cancels the previous action). When I turn a light on it will immediately turn off again. Only when doing it in fast succession it will work. Anyways nothing to do about it for now. Safari does the same thing. Though I thought lets try it on my desktop and older ios devices and it works fine there

klogg · June 4, 2019, 11:09pm

That would be more than brilliant if you managed that.
If you remember, please let me know if you do PR so that I can follow it.

daphatty · June 4, 2019, 11:11pm

LOL! No iOS13 bugs in here!

RomRider · June 4, 2019, 11:11pm

That’s why it’s still called a beta

jimz011 · June 4, 2019, 11:22pm

Lol I know, that is why I said, “wanted to”. But no worries, I can live with a workaround so np, the darkmode is just too awesome (and all other stuff seems to work fine).

Btw, just a question. I’m a bit confused about the operator stuff, is it used for changing an icon depending on state value? Or is it just for changing color? And if not, how can I change the icon, say I want a power icon when it is on and another icon when it is off.

RomRider · June 4, 2019, 11:23pm

Sure you can, the state objects can contain many things: button-card/README.md at master · custom-cards/button-card · GitHub

state:
  - value: 'on'
    icon: mdi:icon_on
  - value: 'off'
    icon: mdi:icon_off

That’s a complete example for a battery button:

- type: "custom:button-card"
  icon: mdi:battery
  # name: Battery
  color_type: card
  entity: sensor.battery
  show_name: false
  show_state: true
  tap_action:
    action: more-info
  state:
  - value: 10
    operator: '<='
    color: "#FF0000" #red
    icon: "mdi:battery-10"
    styles:
      grid:
      - animation: blink 2s linear infinite

  - value: 20
    operator: '<='
    color: "#ff6600" #red orange
    icon: "mdi:battery-20"

  - value: 30
    operator: '<='
    color: "#ff9933" #dark orange
    icon: "mdi:battery-30"

  - value: 40
    operator: '<='
    color: "#ffcc00" #light orange
    icon: "mdi:battery-40"

  - value: 50
    operator: '<='
    color: "#FFFF00" #yellow
    icon: "mdi:battery-50"

  - value: 60
    operator: '<='
    color: "#FFFF00" #yellow
    icon: "mdi:battery-60"

  - value: 70
    operator: '<='
    color: "#FFFF00" #yellow
    icon: "mdi:battery-70"

  - value: 80
    operator: '<='
    color: "#CCFF33" #yellow green
    icon: "mdi:battery-80"

  - value: 90
    operator: '<='
    color: "#66FF33" #light green
    icon: "mdi:battery-90"

  - value: 100
    operator: '<='
    color: "#279b37" #dark green
    icon: "mdi:battery"

daphatty · June 4, 2019, 11:37pm

This is fantastic! Battery monitoring was on my to-do list.

jimz011 · June 5, 2019, 12:39am

Oh was it that simple didn’t know you could assign an icon like that. That is just great.

I understand the operator function a lot better now, thanks a lot @RomRider

apop · June 5, 2019, 3:11am

That’s correct, if you were going to use my config “as-is” you’d need to use YAML mode. However, you could still take bits and pieces of it to use with the UI editor.

Mariusthvdb · June 5, 2019, 5:43am

this would be a great opportunity to ask you to have a look at my earlier feature request for icon_template, (might have been snowed under here: Lovelace: Button card)

though in this case the battery icon might be better served with device_class battery which automatically changes all these icons… the icon template could color like:

    icon_color: >
      if (state > 75) return 'green';
      if (state > 50) return 'yellow';
      if (state > 25) return 'orange';
      if (state > 10) return 'brown';
      return 'red';