If you would like a version of the clock for your own website, you're welcome to it. Simply cut and paste the code below into your HTML.
In the "body" tag, add the following attribute:
<body onload ="fClock(); setInterval('fClock()', 500 )" >
And then, in the content of your page ...
<canvas id="cl" width="300" height="400"></canvas>
<script>
// (red| grn|blue|alph)
kt_oframe = "rgba( 0, 0, 0, 1.0)" // outside frame
kt_cframe = "rgba(192, 192, 192, 0.5)" // frame
kt_iframe = "rgba( 0, 0, 0, 1.0)" // inside edge of frame
kt_cface = "rgba( 60, 60, 60, 1.0)" // clock face
kt_ohourring = "rgba(192, 255, 0, 1.0)" // outside edge of hour lights
kt_ihourring = "rgba(192, 255, 0, 1.0)" // inside of hour lights
kt_ominutering = "rgba( 0, 50, 205, 1.0)" // outside edge of minute lights
kt_iminutering = "rgba(100, 0, 255, 1.0)" // inside of minute lights
kt_osecondring = "rgba(205, 50, 0, 1.0)" // outside edge of second lights
kt_isecondring = "rgba(255, 0, 0, 1.0)" // inside of minute lights
kt_o1hourmarks = "rgba(255, 255, 255, 1.0)" // these are the lights that mark
kt_i1hourmarks = "rgba(255, 0, 255, 1.0)" // ... the hours (every 5th light)
kt_o10minutemarks = "rgba(205, 0, 205, 1.0)" // ... and divide the minute oval
kt_i10minutemarks = "rgba(255, 0, 255, 1.0)" // ... by tens
kt_o15secondmarks = "rgba(205, 0, 205, 1.0)" // ... and the seconds by fifteens
kt_i15secondmarks = "rgba(255, 0, 255, 1.0)" // ... to make the clock easier to
// ... read at a glance
kt_alink = true // or false, link to krotek.com?
kt_version = "1.0.2" // Software version. (Do not edit)
</script>
<script src="http://www.krotek.com/js/cl.js">
</script>
Setup Information
Starting with the canvas, the width and height can be anything you want. Whatever is unused simply defaults to transparent and the clock will fit itself into the centre of drawing area. The upshot of this is there is no longer a need to set a background colour and the clock can be placed on patterned backgrounds.
Continuing to work from the outside and moving toward the middle, the "oframe" is a line around the very outside of the clock. Next would come the "cframe", which is the solid colour of the frame itself. The "iframe" is another line around the inside of the frame (or the outside of the face). The "cface" is the region the lights show up against.
Colours can be set with any valid CSS colour method, as per this page. The format shown here is gives red, green, and blue components, then a value for "alpha", or transparancy. In this format, the colour components are each specified by a number in the range 0 to 255. The value 0 indicates no contribution from this colour, and the value 255 indicates the maximum amount.
Alpha is in the range 0.0 to 1.0, with 0 being fully transparent, and 1 representing full opacity, permitting a way to remove unwanted components. For example, if you want to draw the clock without the frame, simply set all of the frame component alpha values to 0. The spaces shown here are just for formatting and are optional, the commas are not.
The lights themselves are made up of two parts: an outline - prefixed 'o'; the light itself - prefixed 'i'. Setting them to the same colour gives a large light.
The "alink" parameter will send anyone who clicks on the the clock to the KroTek website. This is not mandatory, and very much appreciated.
You can just link to the program by leaving the "src" attribute as is, or you can download the program here, and store it in your own file system.
