Analog Clock Construction Kit

Developing an "analog clock" for the Bangle.js 2 may not be too complicated - but it still requires some knowledge of JavaScript in general and the Bangle.js environment in particular.

The "Analog Clock Construction Kit" tries to simplify development and customization of such clocks by splitting the implementation into commonly seen parts and providing a framework into which all these parts fit.

As a consequence, people may easily combine already existing (and tested) parts in order to get the desired clock and - if this approach is not already sufficient - to customize or implement only those parts which cannot yet be found elsewhere.

A minimal example for an analog clock based on the "analog Clock Construction Kit" looks as follows:

let Clockwork = require('https://raw.githubusercontent.c­om/rozek/banglejs-2-simple-clockwork/mai­n/Clockwork.js');
Clockwork.windUp();

A more interesting clock would probably look as follows

  let Clockwork = require('https://raw.githubusercontent.c­om/rozek/banglejs-2-simple-clockwork/mai­n/Clockwork.js');

  Clockwork.windUp({
    face: require('https://raw.githubusercontent.c­om/rozek/banglejs-2-rainbow-clock-face/m­ain/ClockFace.js'),
    hands:require('https://raw.githubusercon­tent.com/rozek/banglejs-2-hollow-clock-h­ands/main/ClockHands.js'),
    complications: {
      t:require('https://raw.githubusercontent­.com/rozek/banglejs-2-calendar-week-comp­lication/main/Complication.js'),
      l:require('https://raw.githubusercontent­.com/rozek/banglejs-2-weekday-complicati­on/main/Complication.js'),
      r:require('https://raw.githubusercontent­.com/rozek/banglejs-2-moon-phase-complic­ation/main/Complication.js'),
      b:require('https://raw.githubusercontent­.com/rozek/banglejs-2-date-complication/­main/Complication.js'),
    }
  },{
    Foreground:'#FFFFFF', Background:'#000000', Seconds:'#FFFF00',
    withDots:true
  });

and produce the clock shown in the screenshot.

As you can see, quite often no real programming is required - and if something should be missing (or not meet your expectations), only that part of the clock has actually to be developed by yourself.

Parts of an Analog Clock

In the context of this kit, an analog clock consists of the following parts:

• a clockwork (defines the overall behaviour of a clock)
  
• a clock size calculator (computes the space a clock may occupy without disturbing any widgets)
  
• a clock background (draws a background for the clock)
  
• a clock face (draws the clock's face)
  
• clock hands (actually display the current time by drawing any clock hands)
  
• optional complications (draw additional complications - e.g., to show the current date)
  
  

Right now, the following clock part implementations are available:

• clockwork:
  
  • simple clockwork with up to 6 complications
    
• clock size calculations:
  
  • simple clock size calculation
    
  • smart clock size calculation - should be combined with "Widgets on Background"
    
• clock backgrounds:
  
  • bitmap background - should be combined with "Widgets on Background"
    
• clock faces:
  
  • clock face with numbers 3, 6, 9 and 12 (opt. with roman numerals)
    
  • clock face with numbers 1...12
    
  • clock face with numbers 1...12 in "rainbow" colors
    
• clock hands:
  
  • simple clock hands
    
  • rounded clock hands
    
  • hollow clock hands, optionally filled
    
• complications:
  
  • complication placeholder (for testing purposes)
    
  • date complication
    
  • weekday complication
    
  • calendar week complication
    
  • moon phase complication
    
    

It's your turn now!

Feel free to use this kit to develop your own analog clocks - either from the given parts or by extending existing/developing new parts!

1 Attachment