Download JavaScript Code Examples, Tutorials, Reference

Documentation

Using CoolClock

Download coolclock.js, moreskins.js and excanvas.js and put them in the same folder as your html file.

In the head section of your html file add the following:

<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]--> <script type="text/javascript" src="coolclock.js"></script> <script type="text/javascript" src="moreskins.js"></script>

Somewhere in the body of your html file add the following:

<canvas id="clockid" class="CoolClock:Skin:Radius:noSeconds:GMTOffset"></canvas>

The colon delimited fields after CoolClock in the class control the appearance of the clock. The fields are as follows:

CoolClock	Required	Without that your canvas will be left alone
Skin	Optional. Default is "swissRail"	Specifies which skin to use. CoolClock currently includes seven skins, "swissRail", "chunkySwiss", "fancy", "machine", "classic", "modern" and "simple". (The last three were created by Bonstio for use with his Google Gadget). It's easy to create your own additional skins
Radius	Optional. Default is 85	Specifies the radius in pixels of the clock
noSeconds	Optional	If you include "noSeconds" as the last field then the clock will have no second hand. Use if your CPU usage is too high
GMTOffset	Optional	If you don't specify anything you get local time. If you specify a value here (in hours) it will be used as an offset from GMT (UTC). Eg, put -5 to indicate 5 hours behind GMT. You can specify fractions of hours, eg +2.5

You should be able to omit fields to indicate you want the default values, eg "CoolClock:::noSeconds" means default skin and default size with no second hand.

If you want to add a real css class to your clock canvases you can do so by adding a space then the class. For example:

<canvas id="clk1" class="CoolClock:fancy myClock"></canvas>

And of course you can add styles directly if you need to, eg:

<canvas id="clk2" style="display:block;" class="CoolClock:fancy"></canvas>

The id can be anything but it should be unique of course.

Creating Your Own Skin

You can design your own clock by creating a CoolClock "skin". Take a look at the CoolClock.config section the javascript file. Copy and paste an existing skin, for example copy these nine lines:

	swissRail: {
		outerBorder: { lineWidth: 1, radius:95, color: "black", alpha: 1 },
		smallIndicator: { lineWidth: 2, startAt: 89, endAt: 93, color: "black", alpha: 1 },
		largeIndicator: { lineWidth: 4, startAt: 80, endAt: 93, color: "black", alpha: 1 },
		hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: "black", alpha: 1 },
		minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: "black", alpha: 1 },
		secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: 1 },
		secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 1 }
	},
		

Name your skin, eg change "swissRail" to "mySkin". Your skin is now available for use. Change the settings in your skin to change the look of your clock. The numbers refer to a percentage of the radius, so startAt: 0, endAt: 50 means a line from the center to 50% of the way to the edge. Alpha means the transparency of the element where alpha: 1 means solid. For example alpha: 0.5 means 50% transparent. Use the other skins for examples.

At present you can only use certain predefined elements. In a possible future version of CoolClock skins may support any number of clock elements.

If you make a nice skin and would like to share it then send it to me at simon dot baird at gmail dot com.