Skip to content

fufar/simple-clock-card

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 Commits
 
 
 
 
 
 
 
 

Repository files navigation

hacs_badge

simple-clock-card

A text based simple clock for people who use Home Assistant on a panel

Based on https://github.com/arjhun/Homeassistant-Lovelace-Cards @arjhun

24h clock

military without seconds

Installation:

Follow only one of these installation methods.

Installation and tracking with HACS:
  1. You can install this custom component by adding this repository (https://github.com/fufar/simple-clock-card) to HACS in the settings menu of HACS first. You will find the custom component in the integration menu afterwards, look for 'Simple Clock Card'.

  2. Set the lovelace panel

Manual installation:
  1. Copy simple-clock-card.js into your 'www' folder in the hass config directory. The 'www' folder can be accesed via '/local/' in your configuration I've put my custom elements in the sub folder 'elements' and the js file of this card in the folder 'simple-clock-card' as an example.

  2. Enable advanced mode and in your lovelace dashboard settings

  3. Add a resource add a resource

    or if you use yaml to configure lovelace:

     resources:
     	- type: module
         	  url: /hacsfiles/elements/simple-clock-card/simple-clock-card.js
    
  4. Set the lovelace panel

Set lovelace panel

Add the following lines to a view in 'cards:' as a 'manual card' or use your yaml configuration and add:

	- type: 'custom:simple-clock-card'

Options

option default description
use_military true When true shows a 24h format clock instead of a 12h format clock with AM/ PM
hide_seconds false When true hides the seconds
bold_clock false When true makes the clock bold
font_size 4rem Size of the font in rem. Units of measurement is required
lead_zero false When true adds a leading 0 to hours e.g. 04:28
paddingLeft_size 0px Size of the lovelace field in px. Units of measurement is required
paddingRight_size 0px Size of the lovelace field in px. Units of measurement is required
paddingTop_size 60px Size of the lovelace field in px. Units of measurement is required
paddingBottom_size 60px Size of the lovelace field in px. Units of measurement is required

Example

  • show a 24h clock with seconds:

      - type: 'custom:simple-clock-card'
        use_military: true
        hide_seconds: false
        bold_clock: false
        font_size: 6rem
        paddingLeft_size: 32px
        paddingRight_size: 32px
        paddingTop_size: 32px
        paddingBottom_size: 32px
    

Original author: github.com/arjhun