Skip to content

Latest commit

 

History

History
234 lines (221 loc) · 6.67 KB

readme.md

File metadata and controls

234 lines (221 loc) · 6.67 KB
Raw

Analog Clock Widget

An Analog Clock Plugin Widget
Alt Text

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";
  1. Make a div in html
<div id="myClock"></div>
  1. 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