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

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

Examples - Refer

Supported Face Config Properties

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