Analog Clock Widget

An Analog Clock Plugin Widget

Getting Started

1. Download the file - https://github.com/harshit-sinha-developer/jq-clock/blob/master/dist/bundle.min.js
2. Include it in your scripts

<script src="dist/bundle.min.js"></script>

Using ES2015 modules along with webpack

npm install js-easy-clock --save

Import

import * as ClockWidget from "js-easy-clock";

3. Make a div in html

<div id="myClock"></div>

4. Pass the div to ClockWidget initialisation

const config = { 
    width: 500, 
    height: 500, 
    radius: 200, 
    watchFace: 'FACE_3' 
}
let clock = new ClockWidget.ClockApp(document.getElementById('myClock'), config);

Usage

Configuration

Pass configurations to the widget while initialization

const config = { width:  500, height:  500, radius:  200, watchFace:  'FACE_3' };
let clock = new ClockWidget.ClockApp(document.getElementById('myClock'), config);

Alternatively configuration can also be done using configure function

const config = { width:  500, height:  500, radius:  200, watchFace:  'FACE_3' };
let clock = new ClockWidget.ClockApp(document.getElementById('myClock'));
clock.configure(config);

Suported Properties

Property Name	Description	Default	Supported Values
width	Width of the clock canvas in pixel	300	Number
height	Height of the clock canvas in pixel	300	Number
radius	Clock Radius	Math.min(this._canvasWidth, this._canvasHeight) / 2 - 10	Number
watchFace	Watch Face selected from a list of predefined watchFaces	FACE_1	Mentioned below
faceConfig	Custom Watch faceconfig	Empty	Mentioned below
displayTime	Time to display on the clock initially	Current time	Date Object
displayConstantTime	When set to true displays a constant time on the watch (displayTime)	false	boolean

Watch Faces

The watch can be configured using the config property - faceConfg Sample Face Config -

const faceConfig = {
    "isFrameGradient": true,
    "frameGradientColorList": ['#333', '#FFFFFF', '#333'],
    "hingeColor": '#333',
    "handColor": "#333"
}
let clock = new ClockWidget.ClockApp(document.getElementById('myClock'), { width:  500, height:  500, radius:  200, faceConfig: faceConfig });

Additionally there are some predefined watch faces as which can be used using property - watchFace

const config = {
    width: 500,
    height: 500,
    radius: 200,
    watchFace: 'FACE_3' // supported values ['FACE_0', 'FACE_1', 'FACE_2', 'FACE_3', 'FACE_4']
}
let clock = new ClockWidget.ClockApp(document.getElementById('myClock'), config);

Supported Predefined faces

1. FACE_0

2. FACE_1

3. FACE_2

4. FACE_3

5. FACE_4

Examples - Refer

Supported Face Config Properties

Property Name	Description	Default	Supported Values
fillColor	Clock Background color	#FFFFFF	color hexcode
isFrameGradient	Specifies if clock's frame should have a color gradient pattern	false	boolean
frameGradientColorList	Specifies gradient color points list, this list is used to generate gradient	['#333', '#FFFFFF', '#333']	list of color hexcodes
hingeColor	color of central hinge of the clock	#333	color hexcode
handColor	color of hands of the clock	#333	color hexcode
frameColor	color of frame of the clock	#333	color hexcode
isBorderFilled	specifies if the frame of the clock is filled with frame color or empty	true	boolean
numberColors	a map where key is the number displayed on the clock and value is color of the that number	empty - all colors set to #333	map

Contributing

Prerequisites

1. Node.js is a prerequisite refer
2. Make sure webpack is installed

npm install webpack -g

Built With

• npm - The package manager user

• Local Build -

npm start

• Production Build

npm run build

• Run Local Server

npm run start:server

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Harshit Sinha - Initial work - Github

License

This project is licensed under the MIT License