Analog Clock Construction Kit

Posted on
  • 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');

    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');
        face: require('https://raw.githubusercontent.c­om/rozek/banglejs-2-rainbow-clock-face/m­ain/ClockFace.js'),
        complications: {
        Foreground:'#FFFFFF', Background:'#000000', Seconds:'#FFFF00',

    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:

    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

    • Example.png
  • 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.

  • 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.

  • "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?

  • 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!

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

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

  • 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!

  • 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.

  • 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:­lob/master/apps/pastel/

  • @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.

  • 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!

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

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

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview

Analog Clock Construction Kit

Posted by Avatar for Andreas_Rozek @Andreas_Rozek