NNM Clock

The NNM Clock is an analog clock, which should be easy to include in your own page. Plain HTML, CSS and JavaScript (supported by the JavaScript date and time library from Luxon).

The NNM Clock came up as a spare time project, from the interesting discoveries found when compiling pros and cons for time zones (Time zones - to be or not to be?).

Introduction

Below is an example of how you can create a clock with minimal configuration.

The following HTML is all that is used for the clock above:

<canvas
    id="myClock"
    class="nnmClock"
    width="300"
    height="300"></canvas>

Configuration

You define canvas elements that will contain your clocks.

Mandatory attributes

The only mandatory attributes for your canvas element are:

Optional attributes

There are also some additional optional attributes for the canvas element:

Functionality

When hovering over a clock, the current digital time (24-hour clock), weekday, month, day of month and week are displayed together with the second hand. When hovering, only the two relevant numbers according to the current hour are shown.

Additional examples

Below are some other examples. First a ticking clock using UTC (a.k.a. Zulu time). Second a clock representing the "leader" of the local times in the world. Third and fourth are clocks using appropriate indicators (in light mode and dark mode respectively).

The following HTML is all that is needed for the four clocks above:

<canvas
    id="myUtcClock"
    class="nnmClock"
    data-mode="dark"
    data-face="marks"
    data-tick-seconds="true"
    data-time-zone-identifier="UTC"
    width="200"
    height="200"></canvas>

<canvas
    id="myKiritmatiClock"
    class="nnmClock"
    data-time-zone-identifier="Pacific/Kiritimati"
    width="200"
    height="200"></canvas>

<canvas
    id="myChicagoClock"
    class="nnmClock"
    data-time-zone-identifier="America/Chicago"
    data-appropriate-indicator="true"
    width="200"
    height="200"></canvas>

<canvas
    id="myKolkataClock"
    class="nnmClock"
    data-mode="dark"
    data-time-zone-identifier="Asia/Kolkata"
    data-appropriate-indicator="true"
    width="200"
    height="200"></canvas>

A great example of NNM Clock usage is the Wall of time page. The only HTML needed is <div id="dashboard" class="dashboard"></div> and you will get a list of about 40 clocks.

There is also a page showing several examples of how you can configure the NNM Clock.

A few other examples with a minimalistic browser window.

JavaScript files

Three different JavaScript files are needed.

As an example, the specific JavaScript file included for the current page contains (the important part is ClockStarter.startClockInEveryCanvas()):

// Start it all.
window.onload = () => {

    Log.info('NNM Clock');
    Log.info('Everything is loaded, start your engines ladies and gentlemen');

    ClockStarter.startClockInEveryCanvas();

    Log.info('Everything up and running');
};

Changelog

Time zones - to be or not to be? My conclusion is that time zones must be destroyed.

The first version of NNM Clock was implemented by Anders Gustafson in December 2019 and released 2020-01-11.