Awesome
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.
Input_datetime(Or non-timer) entity
If the input_datetime entities have both time and date, the timer will work toward it.
Styles Object
<table> <thead> <tr> <th>Object</th> <th>key</th> <th>Description</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td rowspan=3>rotor</td> <td>width</td> <td>single rotor width</td> <td>50px</td> </tr> <tr> <td>height</td> <td>single rotor height</td> <td>80px</td> </tr> <tr> <td>fontsize</td> <td>font size on rotors</td> <td>4rem</td> </tr> <tr> <td rowspan=4>button</td> <td>width</td> <td>button width</td> <td>50px</td> </tr> <tr> <td>height</td> <td>button height(only works when button position is below)</td> <td>20px</td> </tr> <tr> <td>location</td> <td>button location : right, bottom, hide</td> <td>right</td> </tr> <tr> <td>fontsize</td> <td>font size on buttons</td> <td>1em</td> </tr> </tbody> </table>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