The Chrono Lisa Clock Running in JavaScript

KroTek Banner Krow KroTek Banner Text

The Chrono Lisa Clock Running in JavaScript

This is the Chrono Lisa showing the time that is on your computer's clock.

Java Code Image

If you can't see the clock, it is most likely because you are running an older version of your browser. As per this page.

A version for your own site

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>

                              //  (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
         kt_version        = "1.0.2"                     // Software version. (Do not edit) 
    <script src="">


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.