Flipdown Timer Card

Card for timer entities in the Lovelace user interface of Home Assistant Default

Features

Set timer duration on the card
Display timer
Flip together if you have multiple cards

Installation

Install using HACS.
Or Download the 'flipdown-timer-card.js' from the latest release.

Configuration

Name	Type	Requirement	Description	Default
type	string	Required	`custom:flipdown-timer-card`
entity	string	Required	Timer, Input_datetime(with both date and time) entity
duration	string	Optional	Timer duration indicated when idle. Should be 'hh:mm:ss'
theme	string	Optional	Colorscheme `hass`, `dark`, `light`	`hass`
show_title	boolean	Optional	Show card title	`false`
show_header	boolean	Optional	Show rotor headings	`false`
show_hour	string	Optional	Show hour rotors `true`, `false`, `auto`	`false`
styles	object	Optional	Card style
localize	object	Optional	Card text localization

Duration

Home Assistant timer updates default duration whenever timer starts. if duration is set on this card, it will override default timer duration when idle.

Auto Hours

Set show_hour to auto to enable auto hours. It toggles between HH:MM and MM:SS mode depend on remaining time. HH:MM will be displayed when in idle state. To know what is being displayed, it is recommned to enable the headers.

Non-timer entity

Input_datetime entities with both time and date.
Alexa next alarm sensor from Alexa Media Player.

Styles Object

Object	key	Description	Default
rotor	width	single rotor width	50px
	height	single rotor height	80px
	fontsize	font size on rotors	4rem
button	width	button width	50px
	height	button height(only works when button position is below)	20px
	location	button location : right, bottom, hide	right
	fontsize	font size on buttons	1em

Localize Object

Localize(customize) strings on buttons and headings.

Key	Value
button	`start, stop, cancel, resume, reset` in your language(5 words)
header	`Hours, Minutes, Seconds` in your language(3 words)

Full Example

type: custom:flipdown-timer-card
entity: timer.timer
show_hour: false
show_title: false
show_header: false
theme: dark
duration: "00:00:00"
localize:
  button: 시작, 정지, 취소, 계속, 리셋
  header: 시, 분, 초
styles:
  rotor:
    width: 60px
    height: 80px
    fontsize: 4rem
  button:
    width: 60px
    height: 30px
    fontsize: 1.5em
    location: bottom

Notes

Timing error(<1s) may occur due to flipping effect.

Credits

This card is based on the work of @PButcher/flipdown
and @iantrich's boilerplate card

pmongloid / flipdown-timer-card

readme