/flipclock-card

A minimalistic and customizable flip clock card for Home Assistant Lovelace UI.

Primary LanguageTypeScript

Lovelace Flip Clock Card GitHub package.json version

A minimalistic and customizable flip clock card for Home Assistant Lovelace UI.

Preview

The flip clock itself is based on the project of Justin Kimbrell.

Install

1. HACS

This card is available in HACS (Home Assistant Community Store).

2. Manual install

  1. Download and copy flipclock-card-bundle.js from the latest release into your config/www directory.

  2. Add a reference to flipclock-card-bundle.js inside your ui-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

3. CLI install

  1. Move into your config/www directory.

  2. Grab flipclock-card-bundle.js:

$ wget https://github.com/schmallaria/flipclock-card/releases/download/v0.0.1/flipclock-card-bundle.js
  1. Add a reference to flipclock-card-bundle.js inside your ui-lovelace.yaml:
resources:
  - url: /local/flipclock-card-bundle.js?v=0.0.1
    type: module

Updating

  1. Find your flipclock-card-bundle.js file in config/www or wherever you ended up storing it.

  2. Replace the local file with the latest one attached in the latest release.

  3. 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.

Using the card

Options

Card options

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.

Time options

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.

Date options

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.

Timezone options

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.

Clock faces

TwentyFourHourClock - displays a 24 hour clock (default)
TwelveHourClock - displays a 12 hour clock

Minimal example

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'

Full example

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

Credits