• Stars
    star
    103
  • Rank 333,046 (Top 7 %)
  • Language
    TypeScript
  • Created almost 6 years ago
  • Updated almost 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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.
  • Due mode to display the due time instead of last press time.

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 as a Home Assistant entity and is used by the card to track the last button press.

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**","timeout":"2 hours","unit_of_measurement":"timestamp"}

Node Red Example

// 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;

// Modify timeout_timestamp in payloadObject if defined
if (payloadObject.timeout_seconds !== undefined) {
    const timeoutTime = currentTime + payloadObject.timeout_seconds
    payloadObject.timeout_timestamp = timeoutTime;
}

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

return msg;

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.
color string var(--primary-color) Change the base color of the button. Also definable in themes as checkbutton-card-color.
height string 40px Scales the height of the button.
width string 70% Scales the width of the button.
severity array none A list of severity options. * minutes, * hours, * days, * months, * years.
display_limit string none Limits the display of time to a certain value minutes, hours, days, weeks, months, years.
timeout string none Attribute required for due config option. minutes, days, weeks, months, years.
text object none A list defining the text displayed. minute(s), day(s), week(s), month(s), year(s), ago, less_than, more_than, due_by, over_by.
due boolean false Sets the card to display the due time based on timeout value set in the config.
locale string 'en-us' Sets the friendly timestamp locale.
unit_of_measurement string none Define the unit of measurement of the sensor.
icon string mdi:checkbox-marked Define a custom icon for this sensor.
undo_timeout number 15 Time until undo button times out in seconds.
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.
automation object none Allows publishing of custom variables to the sensor attributes.

Default

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

severity

color: Green
severity:
  - value: 5 days
    color: Purple
  - value: 3 days
    color: Red
  - value: 10 days
    color: Yellow
  - value: 1 day
    color: Blue

Color can also be specified in hex format color: '#bfb540'.

due

Sets the card to display the due time based on timeout value set in the config.

In this mode, the severity values work in reverse with 0 equalling timeout (and negative past this value).

due: true
timeout: 5 days
color: Green
severity:
  - value: '-1 day'
    color: Red
  - value: 0 days
    color: Yellow

text

text:
  year: jaar
  years: jaar
  month: maand
  months: maanden
  week: week
  weeks: weken
  day: dag
  days: dagen
  hour: uur
  hours: uur
  minute: minuut
  minutes: minuten
  less_than: minder dan
  more_than: meer dan
  ago: geleden
  due_in: over
  over_by: over met

automation

automation:
  example_value_1: as many values
  example_value_2: as you want

Home Assistant Community Topic

More Repositories

1

button-card

โ‡๏ธ Lovelace button-card for home assistant
JavaScript
1,890
star
2

spotify-card

Spotify playlist card for Home Assistant card
TypeScript
379
star
3

decluttering-card

๐Ÿงน Declutter your lovelace configuration with the help of this card
TypeScript
360
star
4

bar-card

Customizable Animated Bar card for Home Assistant Lovelace
TypeScript
333
star
5

stack-in-card

๐Ÿ›  group multiple cards into one card without the borders
TypeScript
267
star
6

upcoming-media-card

๐Ÿ“บ A card to display upcoming episodes and movies from services like: Plex, Kodi, Radarr, Sonarr, and Trakt.
JavaScript
260
star
7

surveillance-card

A custom component for displaying camera feeds in the style of a surveillance system.
JavaScript
244
star
8

boilerplate-card

A community driven blueprint for best practices
TypeScript
225
star
9

dual-gauge-card

Dual gauge custom card for Lovelace in Home Assistant
JavaScript
187
star
10

flex-table-card

Highly Flexible Lovelace Card - arbitrary contents/columns/rows, regex matched, perfect to show appdaemon created content and anything breaking out of the entity_id + attributes concept
JavaScript
184
star
11

secondaryinfo-entity-row

Custom entity row for HomeAssistant, providing additional types of data to be displayed in the secondary info area of the Lovelace Entities card
JavaScript
169
star
12

circle-sensor-card

A custom component for displaying sensor values as cards or elements
JavaScript
166
star
13

canvas-gauge-card

The card makes it possible to use gauges from https://canvas-gauges.com/
TypeScript
158
star
14

tracker-card

A card to track custom cards and custom component updates.
JavaScript
110
star
15

bignumber-card

JavaScript
110
star
16

button-entity-row

Adds buttons to call services to entity cards
JavaScript
103
star
17

information

88
star
18

entity-attributes-card

Entity Attributes
JavaScript
64
star
19

group-element

A group element for picture-elements with dynamic toggle capability
JavaScript
60
star
20

light-entity-row

Entity row for lights with sliders for adjusting different values based on features
JavaScript
55
star
21

custom-card-helpers

Custom Card Helper Functions/Types for Developers
TypeScript
48
star
22

gauge-card

JavaScript
44
star
23

monster-card

โš ๏ธ DEPRECATED - MOVE TO AUTO-ENTITIES
JavaScript
35
star
24

unused-card

All your unused entities in a list
TypeScript
32
star
25

plan-coordinates

JavaScript
28
star
26

rmv-card

Custom card for the RMV component.
JavaScript
27
star
27

group-card

JavaScript
23
star
28

state-attribute-element

Give you the specified attribute of an entity
JavaScript
22
star
29

favicon-counter

Show a notification count badge.
JavaScript
19
star
30

text-element

An element that can be used to show static text on the `picture-elements` card
JavaScript
19
star
31

cover-element

JavaScript
17
star
32

camera-card

๐Ÿ“บ Camera Card for Lovelace
JavaScript
17
star
33

ext-weblink

Adds ext weblink with icon to picture-elements or entity cards
JavaScript
16
star
34

state-element

Give you the option to prefix the state-label with a formated string.
JavaScript
16
star
35

nintendo-wishlist-card

Displays a card showing Nintendo Switch games that are on sale from your wish list.
JavaScript
15
star
36

timer-card

โฒ Lovelace Timer Card
TypeScript
11
star
37

home-setter

JavaScript
10
star
38

pc-card

๐Ÿ’ต Personal Capital Card
JavaScript
8
star
39

text-action-element

JavaScript
7
star
40

username-element

Show the current logged in user.
JavaScript
7
star
41

beer-card

This card give you a list of your wishlist items.
JavaScript
3
star