Analog Clock Construction Kit

Posted on Tue 11th, January 2022

• #1

Andreas_Rozek
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.com/rozek/banglejs-2-simple-clockwork/main/Clockwork.js');
Clockwork.windUp();
```
A more interesting clock would probably look as follows
```
  let Clockwork = require('https://raw.githubusercontent.com/rozek/banglejs-2-simple-clockwork/main/Clockwork.js');

  Clockwork.windUp({
    face: require('https://raw.githubusercontent.com/rozek/banglejs-2-rainbow-clock-face/main/ClockFace.js'),
    hands:require('https://raw.githubusercontent.com/rozek/banglejs-2-hollow-clock-hands/main/ClockHands.js'),
    complications: {
      t:require('https://raw.githubusercontent.com/rozek/banglejs-2-calendar-week-complication/main/Complication.js'),
      l:require('https://raw.githubusercontent.com/rozek/banglejs-2-weekday-complication/main/Complication.js'),
      r:require('https://raw.githubusercontent.com/rozek/banglejs-2-moon-phase-complication/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
• #2

Mr_Ploppy

Looking very promising.
is there an early version we can install and tryout?

Some ideas for you. fell free to ignore
Do you want to add a battery charge in there (in one corner)
Don't know if you can a Gadgetbridge link status in another
Sun rise and Sun set times in the bottom corners, since you've got moon phases.
• #3

Andreas_Rozek in reply to @Mr_Ploppy

You may use the kit right away, just visit the repository on GitHub and follow the instructions or modify an example.

There is no need for a battery complication, as there are widgets for that purpose - and widgets may still be shown. I guess, the same applies to Gadgetbridge.

I already thought of sunrise and sunset - but I don't have much time left since I have to concentrate on other things now (to earn my living).

However, anybody is free to develop her/his own parts which may then be plugged into a "clockwork" like those I've already implemented myself.
• #4

Mr_Ploppy

"You may use the kit right away, just visit the repository on GitHub and follow the instructions"

OK assume I'm an idiot, how do I install it ?
Only installed stuff with the Bangle.js App Loader.
Don't see install instructions, the readme tell you about the software.
or is it done through espruino?
• #5

Andreas_Rozek

No, you do not install anything.

Instead, you take the code shown as a basis for your own clock implementation - e.g., by copying it into the right-hand side of the Web IDE.

Then you choose the parts you like and copy their require statements as described in the part's documentation.

If everything is correct, you may just upload your code to your watch in order to test it. If your clock meets your expectations, you may save your code into a file, e.g. app.js (on your PC) and add any other files needed to complete a regular app (I may provide templates for these files as well). Then fork Gordon's BangleApps repo and add your clock to the list of apps.

Et voilà, you made your very own and personal clock! After a pull request, this clock is even available for others as well - clock implementation made simple!
• #6

rigrig

This looks pretty neat, have you considered making it into a customizable app?
• #7

Andreas_Rozek

yes, but I don't have the time right now - perhaps over the weekend...
• #8

Andreas_Rozek

Ok, I found some time and hacked AC-AC, which you may configure online and then install on your Bangle.js 2 - with absolutely no programming required!
• #9

Andreas_Rozek

I just renamed the "four-fold" and "twelve-fold" clock faces to "four-numbered" and "twelve-numbered" and created new GitHub repositories for them. The new names seem to be more accurate than the old ones.

The old repositories will remain for a while before they eventually will be deleted. All docs and examples have been adapted to the new names and repos. New users should not experience any difficulties, legacy users should change to the new faces/repos within the next few weeks.
• #10

HughB in reply to @Andreas_Rozek

I already thought of sunrise and sunset - but I don't have much time left since I have to >concentrate on other things now (to earn my living).

@Andreas_Rozek - please look at my Patel Clock where I have an example (mostly reuse) of showing sunrise / sunset.

code is here:
https://github.com/espruino/BangleApps/blob/master/apps/pastel/pastel.app.js
• #11

HughB in reply to @Andreas_Rozek

@Andreas_Rozek - for the sake of the Bangle community would it not be better for you to do a pull request of the kit into the main Bangle apps codebase. You can still get full acknowledgement of your work through the README file but then its there is one place for the long term and not external to the project.
• #12

Andreas_Rozek in reply to @HughB

Well, I don't know if @Gordon likes my code style (I'm not using any IDE but my own aspect-oriented code generation system (for multiple programming languages) backed by a database - completely different from what other people normally use). But the result is MIT-licensed anyway, thus, if he finds it useful, he may integrate it in whatever way he likes (including docs)

Please note: the ACCK is not an app! AC-AC however is - but that's already part of the Bangle apps.

I would feel honoured if I could bring Bangle.js development forward a little bit!
• #13

Andreas_Rozek in reply to @HughB

I'll try and look into it tomorrow morning - my problem is that other unfinished work is piling up...
• #14

Andreas_Rozek in reply to @HughB

"Pastel" seems to contain some obvious bugs: partSunIcon <> sunPartIcon, stormIcon is missing...

Post a reply
- Bold
- Italics
- Link
- Image
- List
- Quote
- code
- Preview
Formatting Help

Don't worry about formatting, just type in the text and we'll take care of making sense of it. We will auto-convert links, and if you put asterisks around words we will make them bold.

Tips:

Create headers by underlining text with ==== or ----

To *italicise* text put one asterisk each side of the word

To **bold** text put two asterisks each side of the word

Embed images by entering:
![](https://www.google.co.uk/images/srpr/logo4w.png)
That's the hard one: exclamation, square brackets and then the URL to the image in brackets.

* Create lists by starting lines with asterisks

1. Create numbered lists by starting lines with a number and a dot

> Quote text by starting lines with >

Mention another user by @username

For syntax highlighting, surround the code block with three backticks:

```
Your code goes here
```
Just like Github, a blank line must precede a code block.

If you upload more than 5 files we will display all attachments as thumbnails.

For a full reference visit the Markdown syntax.

Analog Clock Construction Kit

About

Analog Clock Construction Kit

Actions

Analog Clock Construction Kit

Formatting Help

About

Analog Clock Construction Kit

Actions

Espruino