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.

All included LaTeX graphics are generated at LaTeX to png .

contemporary entries

comments

there are no comments on this post