ClockSelector.js

4 November 2014

There are a lot of instructions for making a real-time clock using HTML 5's <canvas> element. None were sufficient for my purposes.

The TEAM SHABKYLE site has always had a dynamic background image: depending on your current clock time, the site shows a particular wallpaper, determined by which photograph was taken closest (temporally) to the time where you are. This is neat — if pointless — but it's not particularly noticeable unless you load the page regularly and at random intervals over a few days.

I wanted a clock object that would:

Enter ClockSelector.js.


Adding this clock is as simple as including ClockSelector.js, then

new ClockSelector( 'clock0' ); // the id of the div above is `clock0`

It's that simple. You don't need a canvas element (although it will work with one); you don't need to write anything yourself. All you need is a div with width and height specified. For example:

Because why not drop three clocks in one page? The code for this (effectively) is:

<div id="clockN" style="width:NNpx;height:NNpx;"></div>
<script language="javascript">
new ClockSelector( 'clockN' );
</script>

That's all good and well. But what about customization?

Recoloring things is simple (see if you can figure out what highlight is affecting):

new ClockSelector( 'clock4', {
  background:   '#536895',
  color_border: 'white',
  color_hour:   '#ffb300',
  color_minute: '#229966'
  highlight:    '#8c1515'
} );

Like the original colors but want to make the clock daintier?

new ClockSelector( 'clock5', {
  stroke_border: 3,
  stroke_minute: 1,
  stroke_hour:   2,
  scale_minute:  0.75,
  scale_hour:    0.5
} );

Great. But what about real customization? (click it, I dare you)

new ClockSelector( 'clock6', {
  callback: function ( c ) {
    var t = c.clockTime();
    var m = t.getMinutes();
    m     = ( m < 10 ? '0' : '' ) + m;
    document.getElementById( 'clock6digital' ).innerHTML = t.getHours() + ':' + m;
  },
  draw_second: function ( x ) {
    x.arc( 0, 0, 80, 0, 2 * Math.PI );
    x.fillStyle = 'yellow';
    x.fill();
    x.beginPath();
    x.arc( 0, 0, 50, 1.2 * Math.PI, 1.8 * Math.PI );
    x.strokeStyle = 'black';
    x.lineWidth = 20;
    x.stroke();
    x.closePath();
    x.fillStyle = 'black';
    x.beginPath();
    x.arc( 35, 35, 15, 0, 2 * Math.PI );
    x.fill();
    x.closePath();
    x.beginPath();
    x.arc( -35, 35, 15, 0, 2 * Math.PI );
    x.fill();
    x.closePath();
  },
  auto_dt: 100
} );

The thing is pretty general; you get the idea.


The simplest use case is new ClockSelector( 'div-id' ). This will automatically insert a user-manipulable analog clock sized to fit the div you specify.

When called new ClockSelector( 'div-id', params ), the clock can be customized with params — an associative array — with the following features:

Reading through this, I see that it might be better to not mix measurement systems (fractions, per-100, per-200). As this is in the wild now, for the sake of backwards compatibility I will leave this as a future lesson.

Use as you will. Credit is desired but not necessary. Happy clocking.

Included \(\LaTeX\) graphics are generated at LaTeX to png or by MathJax.

contemporary entries

comments

there are no comments on this post