Documentation - Version 1 - dyClockJS - dyclassroom

This documentation is for v1.x of dyClockJS project.

Digital Clock

Analog Clock

dyClockJS is a small plugin to create digital and analog clock for your blog and website.

Download

Click here to download the latest release of this project.

Prerequisite

dyClockJS needs jQuery v1.8 or above. Download jQuery from their website.

Getting started

Download the latest release version of dyClockJS from its GitHub repository. Unzip the project folder and you will see the following structure.

The css folder contains some stylesheet files. We will be using the dyclock.min.css file.

The font folder contains some font files from Google Fonts. They are for styling the clock time.

The image folder contains some clock face image.

The js folder contains some javascript files and we will be using the dyclock.min.js file.

Project structure

Alright, its time to start using the dyClockJS in our project. Let us assume that we have a project named awesome-project.

awesome-project/
│
├── css/
│   │
│   └─ default.css
│
├── image/
│
├── js/
│   │
│   ├─ default.js
│   └─ jquery.min.js
│
├── plugins/
│
└── index.html

Now we will place the dyClockJS folder inside the plugins folder.

awesome-project/
│
├── css/
│   │
│   └─ default.css
│
├── image/
│
├── js/
│   │
│   ├─ default.js
│   └─ jquery.min.js
│
├── plugins/
│   │
│   └─ dyClockJS/
│      │
│      ├─ css/
│      │  │
│      │  └─ dyclock.min.css
│      │
│      ├─ font/
│      │
│      ├─ image/
│      │
│      └─ js/
│      	  │
│      	  └─ dyclock.min.js
│
└── index.html

Now let us go ahead and create some clocks inside the index.html file.

HTML

First include the dyclock.min.css file inside the head tag.

<link rel="stylesheet" href="/path/to/dyclock.min.css" />

Now include jQuery and dyClockJS JavaScript files in the body tag generally at the end of the page.

<!-- first jQuery -->
<script type="text/javascript" src="/path/to/jquery.min.js">

<!-- next dyClockJS -->
<script type="text/javascript" src="/path/to/dyclock.min.js">

The .dyclock-container class

To create a clock we will have to create a div element and give it a class dyclock-container. This is a container for the clock.

In the following example we have created two divs and set their id to id = "digital-clock" and id = "analog-clock" respectively.

<div class="some-class">
	<div id="digital-clock" class="dyclock-container"></div>
</div>

<div class="some-class">
	<div id="analog-clock" class="dyclock-container"></div>
</div>

Example to get started

<!DOCTYPE html>
<html>
	<head>
		<title>Index Page</title>
		<link type="text/css" rel="stylesheet" href="css/default.css">

		<!-- dyClockJS style -->
		<link type="text/css" rel="stylesheet" href="plugins/dyClockJS/css/dyclock.min.css">

	</head>
	<body>

		<!-- put your content here -->

		<div class="some-class">
			<div id="digital-clock" class="dyclock-container"></div>
		</div>

		<div class="some-class">
			<div id="analog-clock" class="dyclock-container"></div>
		</div>

		<!-- javascript -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="plugins/dyClockJS/js/dyclock.min.js"></script>

	</body>
</html>

Now its time to write some JavaScript code.

The dyClock object

In order to create a digital or analog clock using dyClockJS we first have to create its object.

var clockObj = new dyClock(target, options);

Where target is the clock container id/class and options is an object containing some configurations for the clock.

So, for example in the above HTML example we have a div having id digital-clock and if we want to create a digital clock then we will set the following as target.

var clockObj = new dyClock( $("#digital-clock"), options );

How to start the clock?

To start the clock we call the start() method.

clockObj.start();

How to stop the clock?

To stop the clock we call the stop() method.

clockObj.stop();

Now, let us talk about the configuration options for the digital and analog clocks.

Configuration options for digital clock

Name	Type	Default	Description
clock (required)	String	"digital"	This tells us about the type of the clock. Possible Values: "digital" "analog"
format (optional)	String	"HH:mm:ss"	This tells us about the digital time format. HH = 00-23 (24 hour format) (required) hh = 01-12 (12 hour format) (required) mm = 00-59 (minutes) (required) ss = 00-59 (seconds) (optional) a = am\|pm (optional) A = AM\|PM (optional) Possible Values: "HH:mm:ss" "hh:mm:ss A" "hh:mm a"
digitalStyle (optional)	Object		Used to style the digital clock time.

digitalStyle Object

Name	Type	Default	Description
backgroundColor (optional)	String	"#fff"	Hex/Name of the color.
border (optional)	String	"none"	Border style. Example: "1px solid #333"
fontColor (optional)	String	"#000"	Color for the font in Hex/Name. Example: "#333" "blue"
fontFamily (optional)	String	"Arial"	Name of the font family.
fontSize (optional)	Integer String	16	Font size of the digital clock time. Example: 24 "120%"

List of custom font family names

"Faster One"
"Frijole"
"Londrina Outline"
"Monofett"
"Orbitron"
"Vast Shadow"

Sample code to create a digital clock

var clockObj = new dyClock( $("#digital-clock"), {
    clock : "digital",
    format : "HH:mm:ss A",
    digitalStyle : {
        border : '1px solid #999',
        backgroundColor : "lightgrey",
        fontColor : "black",
        fontSize : 48,
        fontFamily : 'Faster One'
    }
});
clockObj.start();

Now we will cover the analog clock options.

Configuration options for analog clock

Name	Type	Default	Description
clock (required)	String	"digital"	This tells us about the type of the clock. Possible Values: "digital" "analog"
hand (optional)	String	"hms"	This tells us about the hands of the analog clock. h = hour hand m = minute hand s = second hand (optional) Possible Values: "hms" "hm"
image (optional)	String Boolean	false	Path of the analog clock face image.
radius (optional)	Integer	150	This is for the radius of the analog clock face. Min value : 40 Max value : 150
showdigital (optional)	Boolean	false	If this is set to true then the digital clock will be shown below the analog clock. You have to then set the `format` and `digitalStyle` to configure the digital clock.
analogStyle (optional)	Object		This is used to style the analog clock.

analogStyle Object

Name	Type	Default	Description
backgroundColor (optional)	String	"#fff"	Hex/Name of the color.
border (optional)	String	"none"	Border style. Example: "1px solid #333"
handsColor (optional)	Object		Color of the hands.
handsWidth (optional)	Object		Width/thickness of the hands.
roundHands (optional)	Boolean	false	If set to true then the clock hands will have round corners instead of sharp edges.
shape (optional)	String	"circle"	Shape of the analog clock. Possible value: "circle" "other"

handColor Object

Name	Type	Default	Description
h (optional)	String	"#000"	Color of the hour hand.
m (optional)	String	"#000"	Color of the minute hand.
s (optional)	String	"#000"	Color of the second hand.

handWidth Object

Name	Type	Default	Description
h (optional)	Integer	3	Thickness of the hour hand.
m (optional)	Integer	2	Thickness of the minute hand.
s (optional)	Integer	1	Thickness of the second hand.

Sample code to create an analog clock

var clockObj = new dyClock( $("#analog-clock"), {
    clock : "analog",

    //for digital
    format : "hh:mm:ss A",
    digitalStyle : {
        fontColor : "black",
        fontFamily : 'Monofett',
        fontSize : 32,
    },

    //for analog
    hand : "hms",
    image : "plugins/dyClockJS/image/c01.png",
    showdigital : true,
    radius : 120,
    analogStyle : {
        backgroundColor : "#e9e9e9",
        border : '1px solid #999',
        handsColor : {
            h : "red",
            m : "orange",
            s : "green"
        },
        handsWidth : {
            h : 9,
            m : 5,
            s : 2
        },
        roundHands : true,
        shape : "circle"
    }
});
clockObj.start();