Flipdown Timer Card

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

This repository rebuilt from source contained in the original Flipdown Timer Card by pmongloid.

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	object	Optional	Timer duration indicated when idle. Object with attributes hours, minutes, seconds
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:
  - hours: 0
  - minutes: 0
  - seconds: 0
localize:
  button: 시작, 정지, 취소, 계속, 리셋
  header: 시, 분, 초
styles:
  rotor:
    width: 60px
    height: 80px
    fontsize: 4rem
  button:
    width: 60px
    height: 30px
    fontsize: 1.5em
    location: bottom

Flipdown CSS variables

The following CSS variables are available to use in Home Assistant themes or to apply to ha-card via card-mod. These will override any Rotor style, Button style or Theme set in Flipdown Timer Card config.

Variable	Applies to	Valid value	Overrides
--flipdown-primary-color	Text color for rotor top segments, buttons, header	CSS color	Theme config
--flipdown-primary-background-color	Background color for rotor top segments, buttons, delimiters, hinge	CSS color	Theme config
--flipdown-secondary-color	Text color for rotor bottom segments	CSS color	Theme config
--flipdown-secondary-background-color	Background color for rotor bottom segments	CSS color	Theme config
--flipdown-header-text-shadow	Text shadow used for header to allow for header to be visible in most scenarios.	Valid CSS text shadow. Defaults to 1px 1px 0px var(--flipdown-primary-background-color, <theme color>)	Theme config
--flipdown-rotor-space	Space between rotors	CSS size	Rotor space config
--flipdown-rotor-height	Height of rotor	CSS size	Rotor height config
--flipdown-rotor-width	Width of rotor	CSS size	Rotor width config
--flipdown-rotor-fontsize	Rotor font size	CSS font size	Rotor fontsize config
--flipdown-button-width	Button width	CSS size	Button width config
--flipdown-button-height	Button height. Only for when buttons are at bottom location. Otherwise button height is relative to rotor height	CSS size	Button height config
--flipdown-button-fontsize	Button font size	CSS font size	Button fontsize config

Notes

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

Credits

• Original Flipdown Timer Card by pmongloid
• This card is based on the work of @PButcher/flipdown and @iantrich's boilerplate card
• This repository uses Build, CI and Release configuration based on button-card by @RomRider