Card for timer entities in the Lovelace user interface of Home Assistant
- Set timer duration on the card
- Display timer
- Flip together if you have multiple cards
- Install using HACS.
- Or Download the 'flipdown-timer-card.js' from the latest release.
| 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 |
Home Assistant timer updates default duration whenever timer starts. if duration is set on this card, it will override default timer duration when idle.
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.
- Input_datetime entities with both time and date.
- Alexa next alarm sensor from Alexa Media Player.
| 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(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) |
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- Timing error(<1s) may occur due to flipping effect.
- This card is based on the work of @PButcher/flipdown
- and @iantrich's boilerplate card