migushthe2nd/simple-clock-card

Simple clock card for Home assistant lovelace

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

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

   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