Flipdown Timer Card

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

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