Lovelace: Button card

Mariusthvdb · June 3, 2019, 6:13am

Having been trying to do operations like that myself I was wondering the same…
Would seem the way forward for the button card, to be independent of all these other cards, and introduce a true style_template option. Please consider doing so?

Something like coloring the volume like this would be awesome:

    icon_color: >
      if (state === '0.0') return 'rgb(145,227,237)';
      if (state <= '0.1') return 'rgb(105,212,231)';
      if (state <= '0.2') return 'rgb(46,147,238)';
      if (state <= '0.3') return 'rgb(0,220,16)';
      if (state <= '0.4') return 'rgb(0,195,13)';
      if (state <= '0.5') return 'rgb(250,255,0)';
      if (state <= '0.6') return 'rgb(252,150,0)';
      if (state <= '0.7') return 'rgb(218,53,0)';
      if (state <= '0.8') return 'rgb(255,0,0)';
      if (state <= '0.9') return 'rgb(154,0,0)';
      if (state <= '1.0') return 'rgb(81,0,0)';

I know we could work around this using the operator: template, but it would require a line per state. Using a template like the above would shorten that enormously.

Especially if we could combine things in a style_template even further, like:

      style_template: >
        if (state > 0) return 'background-color: #f0c209;--tiles-icon-color:#555B65;--tiles-label-sec-color: #555B65;color: #555B65';
        return 'background-color: #555B65;--tiles-icon-color:#f0c209;--tiles-label-sec-color: #f0c209;color: #f0c209;text-decoration: line-through';

maybe the latter already is possible, havent tried that tbh, but since I couldn’t find that in the documentation I suppose this shorthand notation isn’t available (yet…)?

RomRider · June 3, 2019, 6:29am

Already complaining about speed and you want more templates?

Both your use case are covered by the state object and operators. I don’t think I’ll add this just to reduce the number of YAML lines and make it even more unreadable.

Mariusthvdb · June 3, 2019, 6:36am

hmm, if possible yes…

the last example I gave, wouldn’t introduce more calculation than we already do now, it only shortens the code Thats why I wondered if this would already be possible.

the first would read the state of an existing backend entity, and that wouldn’t hurt either.

Mariusthvdb · June 3, 2019, 6:51am

Appreciated, and I understand your fear for readability. Otoh, consider a script entity, which is more difficult to ‘template’, and for which style templates like this are very nice to have:

        entities:
          - entity: script.lighting_opstaan
            style_template: >
              if (entities['input_select.activity_lighting'].state === 'Opstaan') return 'background-size: contain;background-color: #F0C209';
              return 'background-size: contain; background-color: #555B65;filter:grayscale(75%)';
            image: /local/activities/opstaan.png

when using CSS, things get a bit more complex than the average yaml file, but when getting used to that, it might not be as unreadable after all.
The verbose way of writing, like used now in the button options, is really very clear. It is a bit inflexible also. Using the style_template would combine both positive aspects, imho.

Very appreciative for all the goodies you gave us already. So not complaining at all…

update

btw, and not 100% sure about this yet, but it seems the systems are suddenly much more responsive. Only thing I could notice was an updated Hassio Supervisor. Could this be the case? It’s now on 165, but not really sure for how long that has been the case.

hoping that next to entity_picture_template, an icon_template would be possible?

      icon: >
        if (state === '0') return 'mdi:account-off';
        if (state === '1') return 'mdi:account';
        if (state === '2') return 'mdi:account-multiple';
        if (state === '3') return 'mdi:account-multiple-check';
        return 'mdi:account-group';

djtommye · June 4, 2019, 1:27am

On my tablet, I get an error “Custom element doesn’t exist: Button-card”. I’ve cleared the cache and reloaded the page. What am I missing? The buttons show up on my PC, though they are not actionable.

type: horizontal-stack
cards:
  - type: 'custom:button-card'
    color_type: blank-card
  - type: 'custom:button-card'
    color_type: blank-card
  - type: 'custom:button-card'
    color_type: card
    color: 'rgb(255, 50, 0)'
    icon: 'mdi:garage-open'
    action: service
    show_state: true
    service:
      domain: cover
      action: open_cover
      data:
        entity_id: cover.garage_cover
  - type: 'custom:button-card'
    color_type: card
    color: 'rgb(0, 255, 0)'
    icon: 'mdi:garage'
    action: service
    service:
      domain: cover
      action: close_cover
      data:
        entity_id: cover.garage_cover
  - type: 'custom:button-card'
    color_type: blank-card
  - type: 'custom:button-card'
    color_type: blank-card

daphatty · June 4, 2019, 2:04am

Verify the path in your resources: entry to ensure it is accurate?

djtommye · June 4, 2019, 4:08am

It loads on my PC, though the buttons don’t do anything actionable.

DavidFW1960 · June 4, 2019, 4:16am

I think the action is call-service not service
My actions all work

daphatty · June 4, 2019, 4:17am

Well, the one thing that stands out to me is that there is no tap_action defined in your button. As per the github page

- type: "custom:button-card"
  color_type: card
  color: rgb(223, 255, 97)
  icon: mdi:volume-plus
  tap_action:
    action: call-service
    service: media_player.volume_up
    service_data:
      entity_id: media_player.livimg_room_speaker

DavidFW1960 · June 4, 2019, 4:18am

yeah that too lol.

djtommye · June 4, 2019, 4:49am

Awesome - thank you two. They show up as actionable tiles now, but the service call isn’t working. I’ll work on that now. However, it still doesn’t load right on my Fire Tablet. Apparently, it’s not using the Chrome engine for Fully Kiosk, and the built-in web renderer doesn’t support custom components. I’ll have to keep digging for a solution.

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.