A minimalistic and customizable flip clock card for Home Assistant Lovelace UI.
The flip clock itself is based on the project of Justin Kimbrell.
This card is available in HACS (Home Assistant Community Store).
-
Download and copy
flipclock-card-bundle.js
from the latest release into yourconfig/www
directory. -
Add a reference to
flipclock-card-bundle.js
inside yourui-lovelace.yaml
or at the top of the raw config editor UI:
resources:
- url: /local/flipclock-card-bundle.js?v=0.0.1
type: module
-
Move into your
config/www
directory. -
Grab
flipclock-card-bundle.js
:
$ wget https://github.com/schmallaria/flipclock-card/releases/download/v0.0.1/flipclock-card-bundle.js
- Add a reference to
flipclock-card-bundle.js
inside yourui-lovelace.yaml
:
resources:
- url: /local/flipclock-card-bundle.js?v=0.0.1
type: module
-
Find your
flipclock-card-bundle.js
file inconfig/www
or wherever you ended up storing it. -
Replace the local file with the latest one attached in the latest release.
-
Add the new version number to the end of the cards reference url in your
ui-lovelace.yaml
like below:
resources:
- url: /local/flipclock-card-bundle.js?v=0.0.1
type: module
You may need to empty the browsers cache if you have problems loading the updated card.
Name | Type | Default | Since | Description |
---|---|---|---|---|
type (required) | string | v0.0.1 | custom:flipclock-card . |
|
date | DateOptions | v0.0.1 | Adds the date to the card, see date options. | |
time | TimeOptions | v0.0.1 | Configures the time, see time options. | |
timezones | List | v0.0.1 | A list of additional timezone id's or a list of timezone objects, see timezone options. | |
title | string | v0.0.1 | Adds title header to the card. |
Name | Type | Default | Since | Description |
---|---|---|---|---|
face | string | TwentyFourHourClock | v0.0.1 | The clock face. Default 24 hour clock. See clock faces for available values. |
showSeconds | boolean | false | v0.0.1 | True to show the seconds, otherwise false. |
Name | Type | Default | Since | Description |
---|---|---|---|---|
format | string | TwentyFourHourClock | v0.0.1 | Date format options. See here for available options. |
hidden | boolean | false | v0.0.1 | False to show the date, otherwise true. |
locale | string | HASS system language | v0.0.1 | The date language. See here for available value. |
Name | Type | Default | Since | Description |
---|---|---|---|---|
id | string | v0.0.1 | The timezone id. E.g. America/New_York, Europe/Berlin. | |
title | string | v0.0.1 | An optional string which will be displayed instead of the timezone id. |
TwentyFourHourClock - displays a 24 hour clock (default)
TwelveHourClock - displays a 12 hour clock
Shows the time (24 hour clock) without seconds and the date. The default locale for the date is set to your HASS system language.
type: 'custom:flipclock-card'
A full example which shows all features.
type: 'custom:flipclock-card'
time:
face: TwentyFourHourClock
showSeconds: true
timezones:
- id: America/New_York
title: New York
- id: Australia/Sydney
title: Sydney
- Europe/London
title: Lovelace Flip Clock Card
date:
hidden: false
locale: de
format:
weekday: long
day: numeric
month: long
year: numeric
- Justin Kimbrell for his awesome FlipClock project.