Lovelace: Check Button Card

check-button-card

Description

Check Button Card is a button that tracks when it is last pressed, for the Home Assistant Lovelace front-end using MQTT auto discovery.

Features

  • Shows how long ago you’ve pressed the button.
  • Automatic sensor configuration using Home Assistant MQTT discovery.
  • Hold button to set custom time.
  • Undo unwanted changes.
  • Publishes visibility attribute for use with conditional cards.
  • Possible to change button state by publishing to the topic with automations (Node-Red, etc).

Installation

Requires a working MQTT setup with discovery enabled in Home Assistant. For more information check out the Home Assistant documentation.

The card will start in configuration mode and prompt you to create the MQTT config required for auto discovery. If the entity doesn’t exist it will be created with the entity provided in the card config. After the button is configured the sensor will show up in your Home Assistant entity list and is used by the card to track the last button press.

The visibility timeout can be used in combination with a conditional card to show and hide items on the front-end. This requires custom automation to achieve (I personally use Node-Red for this).

MQTT

It is possible to publish to the MQTT topic using automations to update the button state using physical buttons for example (instead of using the UI button).

The payload should be published to the relevant sensor. If you sensor is named sensor.test_button the topic should be homeassistant/sensor/test_button/state. For more information check out the Home Assistant documentation.

Payload Example

{"timestamp":"**timestamp here**","visibility_timeout":"2 hours","visible":true,"unit_of_measurement":"timestamp"}

Options

Name Type Default Description
type string Required custom:check-button-card
entity string Required Sensor entity used to create and publish to.
title string none Title displayed next to the button.
title_position string left Sets the position of the title left,inside.
visibility_timeout string none Attribute added to entity for use in automation.
undo_timeout number 15 Time until undo button times out in seconds.
hue number 220 Changed the color hue of the bar 0-360.
saturation string 50% Scales saturation of the button.
height string 40px Scales the height of the button.
width string 70% Scales the width of the button.
severity object none A list of severity values. Can use * minutes,* hours,* days, * months,* years
card_style object none A list of CSS styles applied to the card background.
button_style object none A list of CSS styles applied to the button.
title_style object none A list of CCS styles applied to the title.
remove boolean false Set to true for removal config mode. Used to remove entity from MQTT discovery.
discovery_prefix string homeassistant Define custom MQTT discovery prefix.

Default

- type: custom:check-button-card
  title: Default
  entity: sensor.test_button

Severity

- type: custom:check-button-card
  title: Severity
  entity: sensor.test_button
  severity:
  - value: 5 minutes
    hue: '120'
  - value: 10 minutes
    hue: '40'
  - value: 20 minutes
    hue: '0'
13 Likes

Updated to version 0.0.2.

  • setting custom input moved to holding button instead of pressing title
  • added extra entity check for configuration mode to avoid overwriting existing MQTT configs
  • added inside option for title position

Woww, nice work! I can use it for a lot of things…
Is there a way to define different states (for color maybe), and use this info to trigger automations? (ex: when is red, send a notification to cellphone).

Comparing timestamps affect system performance…

When you say button, are you talking about a physical button. As I would love to put a button by our door that we press when we let the dog out. Then it would display the last time the dog was taken out!

Any automations regarding this UI button you will have to set up yourself. But yes, it is possible to make an automation that will publish the timestamp to MQTT and have it update the state of the UI button. I will add some more info to the documentation about how to publish to an MQTT discovery sensor.

I have some function nodes in Node-Red for example that update the visbility state of a button so I can hide and show them when they’re relevant using a conditional card.

I’m not sure how easy this is to set this up with HA automations (I’m sure it’s doable with Node-Red), but if you can inject the timestamp with maybe Jinja you can publish this payload to the relevant topic:

{"timestamp":"**timestamp here**","visibility_timeout":"2 hours","visible":true,"unit_of_measurement":"timestamp"}

The UI by itself can’t really send any information unless it’s opened so it’s not really possible to use it directly to start automations based on its state. However you can set up an automation using the visbility_timeout set in the config to compare to the timestamp like you said and start an automation from there.

I have a Node-Red flow that compares (every 10 seconds) the visibility_timeout attribute that gets set on the sensor to the timestamp to show or hide the relevant buttons. But you can also use this to trigger an automation. In this regard I should have probably named the variable differently, but it still works.

Here’s a simple example for a function node in Node-Red that allows you to use a physical button to change the button state. This returns the payload which you can publish to the relevant topic using the MQTT node.

// Define entity_id
const entityId = "sensor.test_button";

// Get global object
const haObject = global.get("homeassistant");

// Get attributes object from entity
let payloadObject = haObject.homeAssistant.states[entityId].attributes;

// Get current timestamp in seconds
const currentTime = Math.trunc(Date.now()/1000);

// Modify timestamp in payloadObject.
payloadObject.timestamp = currentTime;

// Create string from object
msg.payload = JSON.stringify(payloadObject);

return msg;
2 Likes

Updated to version 0.1.1.

This update will fix the config topic to use ‘json_attributes_topic’ instead of ‘json_attributes’ as this is the new format for MQTT auto discovery since 0.87 I believe.

Updating to the latest version will prompt you to update your buttons, this is only required if you’re already running an older version of this card.

This is exactly what I’ve been working on, but yours is way more advanced. I’ve been struggling to figure out how to keep track of events that have completed. Thanks!

1 Like

Using this component, I have added a “Responsibilities” tab which includes the dog’s medicine, and now include my son’s Family Contributions (aka Chores). I put the app on their iPads, and gave them access to that tab. I think this gives them a better sense of fairness, since they can see at a quick glance who has done chores more recently. I have given them ownership of clicking the buttons when they have completed their task.

Next, I plan to convert the dog’s medicine physical button to log to this new sensor, instead of the old one I made up.

3 Likes

I use it for my trash

image

1 Like

I am having problems getting mqtt.publish to correctly update the state.

- service: mqtt.publish
  data_template:
    topic: homeassistant/sensor/medicine_buddy_taken/state
    payload: >-
      {
        "timestamp": as_timestamp(now())|int),
        "visible":true,
        "unit_of_measurement":"timestamp"
      }
    retain: true

I’ve mostly tried publishing this via the dev-mqtt page. Even though this looks right (according the MQTT Explorer), I get an ‘Entity Config Outdated. Update?’ message. When I click the checkmark I get ‘Already exists. Incorrect entity type.’

{"timestamp": as_timestamp(now())|int),"visibility_timeout": "none","visible": true,"unit_of_measurement": "timestamp","version": "0.1.0"}

The button is expecting the version which your automation doesn’t seem to include. I had built this in so people didn’t have to re-create all their buttons when upgrading to v0.1.0, but that means you’ll also have to include it in the MQTT payload.

1 Like

Oh geez. I figured out why dev-mqtt didn’t work now. I needed to wrap the timestamp template in curly braces. I was getting that error because I was inserting a non numeric value into the timestamp property.

So, it is working when I post the following to the homeassistant/sensor/medicine_buddy_taken/state topic! Thank you.

{
  "timestamp": {{as_timestamp(now())|int}},
  "visibility_timeout": "none",
  "visible": true,
  "unit_of_measurement": "timestamp",
  "version": "0.1.0"
}
1 Like

Thanks for your work!
I realy like this card to monitor some tasks at home.

I just wanted to ask if anyone knows a way to save the last status of a button press even after a Homassistant restart?
Because every time I restart Homassistant I have to reconfigure the buttons and the information about the last button press is lost.

Thanks in advance!

This probably means your MQTT messages aren’t being retained, since that’s where it saves the last timestamp.
If this is the case, I’m not sure what could be causing this though.
Having discovery enabled on your MQTT component in HA should pick up any retained messages from this card.

Thank you very much for the feedback. But I don’t really know what to do. This is my MQTT configuration in configuration.yaml:

mqtt:
  password: !secret mqtt_pw
  discovery: true
  discovery_prefix: homeassistant

and this is the configuration of the card in the ui-lovelace.yaml:

                          - type: conditional
                            conditions:
                              - entity: sensor.vacuum_visible
                                state_not: 'False'
                            card:
                              type: 'custom:check-button-card'
                              title: Vacuum cleaning
                              entity: sensor.vacuum cleaner
                              <<: *checkbuttonstyle
                              severity:
                                - value: 1 day
                                  hue: '140'
                                - value: 3 days
                                  hue: '55'
                                - value: 5 days
                                  hue: '345'

But I have seen that the embedded broker is deprecated? Maybe there is a general problem with that and I should switch to another broker?

Could very well be your broker, that was my initial thought as well.
I’d recommend using MQTT Explorer to see what’s happening with your topics. You should see a topic for each button in homeassistant/sensors/#.

I have the same problem as well. After some restarts it seems that the messages are not retained and I get the message ‘Entity doesn’t exist. Create?’. Still don’t know in which situation this happens because some times they are kept after a restart of home assistant. I’ll do some troubleshooting and let you know if I find the answer.

Edit: it seems the messages don’t get retained. So as long as I don’t restart mosquitto in docker home assistant will have the last state but if mosquitto restarts the state is lost. Anyone know how to send the message with a retained flag? Discovery is on.

The cause of my problem with the values resetting after restarting Homeassistant was definitely the use of the embedded broker. I am now using eclipse-mosquitto as a Docker Container and the values are preserved even after a Homeassistant restart. :slight_smile:

It seems that your problem is another one, and the values get lost after a restart of the broker? I have not yet tested whether this is the case for me with the eclipse-mosquitto broker as well.