Lovelace: Check Button Card

Thank you! Especially the dates feature would be so incredibly handy to have in real-life. This card can be used for real-life reminders in a great way and that would make it even better.

I have tried updatng the status using mqtt.publish however I can see the due date not updating in the card though I can see the status being updates in the ‘States’ under Developer Options

topic: homeassistant/sensor/test_due_date2/state
payload_template: '{ "timestamp":{{ states("sensor.test_due_date") }},"timeout":"{{ ((strptime(states.calendar.electricity_bill.attributes.start_time, "%Y-%m-%d %H:%M:%S").strftime("%j") | int - (now().strftime("%j") | int) }} days","timeout_timestamp":1586328448,"unit_of_measurement":"timestamp", "visible":true }'
retain: true

After publishing this, I can see the status updates in States

timestamp: 1583652365
timeout: 27 days
timeout_timestamp: 1586328448
unit_of_measurement: timestamp
visible: true
friendly_name: test_due_date2

But the lovelace UI still show
chrome_P59hAHdQJQ

lovelace code

- type: custom:check-button-card
    title: Test due date 2
    entity: sensor.test_due_date2
    width: 50%
    due: true
    timeout: 3 days
    color: Green

The intention is after I have clicked on the check button, the “chore” is marked completed and then the “timeout” needs to be adjusted to the next due date, which is calculated above (in this case 27 days)

How can I make a template sensor with the timestamp to show days? Im just looking for a sensor that will show how many days since x.

Trying to get this to work.
I do have a broker running and working
However, as i read the card will start in configuration mode…
Where do i see that?
It only says “not loaded”

Anyone? Really want to use this card

Screenshot of error?
Have you loaded it on your resources?

I need to add it to resources too? Cause the github page didnt mention this

Yes you will need to add it to your resources

/hacsfiles/check-button-card/check-button-card.js
Type: Module

Silly of me, indeed
Now its working, i do know now what is meant with config mode.
I entered some check buttons, and it asked if i wanted it to create…
Good working.
However still some questions…

1)How do i use the dutch translations of months/days… etc etc
i entered & value in dutch but its showing in english
Should i add “text” in the code?
2) can someone explain how to use severity… i see value, hue, color… i understand value, but how do i see how it counts?

  1. should i use mqtt discovery prefix? cause i use mqtt for other stuff too

  2. having some desing issue too
    When using vertical-stack, i dont have the white background, which i dont like

When using custom:stack-in-card, i do have the white background, but i lose space between the check buttons.
How do i get both in one?

yes

text:
  days: dayz
  month: m0nth
  months: monthz

from the example

  • check button will start green, after 1 day it will change to blue, after 3 days it will change to red, after 5 days it will change to purple and after 10 days it will change to yellow.
color: Green
severity:
  - value: 5 days
    color: Purple
  - value: 3 days
    color: Red
  - value: 10 days
    color: Yellow
  - value: 1 day
    color: Blue

in “due mode”

  • will start green and display due in 5 days in green, at the 0 day mark it will change yellow, and 1 day after it was due it will be red
due: true
timeout: 5 days
color: Green
severity:
  - value: '-1 day'
    color: Red
  - value: 0 days
    color: Yellow

chances are you dont need to change this, if you for example use smart things, then your broker prefix will be set to something different and you will need to specify for each instance

use card-mod to manipulate and achieve what you want, i use the following inside an entities card

style: |
  ha-card {
    padding: 2px;
    --ha-card-box-shadow: 'none';
    --paper-card-background-color: rgba(0, 0, 0, 0);
  }
1 Like

Hi,

Ok layout and text is fixed.
Severity and due mode is clear too

Thx for the support !

Guys a small question, do i need to discovery MQTT stay all the time on enabled to work this custom intergration? Or is that only by need when installing or adding the config?

Can someone please help me?? I have installed Check Button card via HACS and it is added to the lovelace dashboard automatically. But what is next? Do i need to somehting in Configuration.yaml file?

Where do i need to put this?

{"timestamp":"**timestamp here**","timeout":"2 hours","unit_of_measurement":"timestamp"}

This has been working well for me for a long time but now on version 1.2.0 and i get Lovelace Error. Tried to re-install from HACS and it says it does not exist. Has this been removed from HACS or changed name to another project?

Yes. It got removed from HACS as it was no longer being maintained.

very sad. was really useful… any alternatives out there?

How is it no longer maintained when the most recent release was just six weeks ago?

1 Like

Because 6 weeks is a lot of time in the world of Home Assistant. The card doesn’t work anymore with the newest releases and the developer didn’t adjust his card accordingly. If he decides to adjust his card and make it work with the newest releases, it’ll probably come back to HACS.

I just installed this card from HACS a couple of days ago and set up a bunch of buttons last night. All are working as expected. I am running 0.115.6 of Home Assistant (Supervised) and 1.2.0 of Check Button Card. Is the problem with 0.116 of HASS?

1 Like

And now I know. The problem IS with 0.116 apparently. I had not heard how 0.116 was going to be breaking a number of custom cards unless they made some changes. While this particular card wouldn’t be a deal breaker for me, Custom Header certainly was, so I suppose I will be sticking with 0.115.6 for a while.