Analog Clock Construction Kit (the beginnings)

Since the time I may spend on working with the Bangle.js 2 is running out and there were many good comments on my "configurable analog clock" (see elsewhere in this forum), I've started working on an "Analog Clock Construction Kit".

Basic idea behind this kit is to use a relatively simple code as basis and load the desired clock face, hands and complications from modules stored on GitHub.

Starting simple, I've currently implemented only the most basic variants - but more will follow until this evening. To give you an impression of how to use the kit:

  let Clockwork = require('https://raw.githubusercontent.com/rozek/banglejs-2-simple-clockwork/main/Clockwork.js');

  let ComplicationPlaceholder = require('https://raw.githubusercontent.com/rozek/banglejs-2-complication-placeholder/main/Complication.js');

  Clockwork.windUp({
    size:      require('https://raw.githubusercontent.com/rozek/banglejs-2-simple-clock-size/main/ClockSize.js'),
    background:null,
    face:      require('https://raw.githubusercontent.com/rozek/banglejs-2-four-fold-clock-face/main/ClockFace.js'),
    hands:     require('https://raw.githubusercontent.com/rozek/banglejs-2-simple-clock-hands/main/ClockHands.js'),
    complications:{
      tl:null, t:ComplicationPlaceholder, tr:null,
      l:ComplicationPlaceholder, r:ComplicationPlaceholder,
      bl:ComplicationPlaceholder, b:null, br:ComplicationPlaceholder
    }
  },{
    Foreground:'#FFFFFF', Background:'#000000', Seconds:'#FFFF00'
  });

As you can see, "implementing" an analog clock is essentially reduced to loading the desired clockwork, background, face, hands and complications (the latter have to be loaded into their placement "slots") and, perhaps, providing some configuration details.

See GitHub for a very first (and still rough) documentation of this little kit.

I can already offer the following basic modules:

• 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
    
  • clock face with numbers 1...12
    
  • clock face with numbers 1...12 in "rainbow" colors
    
• clock hands:
  
  • simple clock hands
    
  • rounded clock hands
    
  • hollow hands, optionally filled
    
• complications:
  
  • complication placeholder for testing purposes
    
  • date complication
    
  • weekday complication
    
  • calendar week complication
    
  • moon phase complication
    
    

(Most of these modules are already known from my "configurable analog clock")

wow, great ! thank you very much, it is a great step for a « noob » like me

It's now even simpler! Look above!

Brilliant - I love the level of abstraction that is going on here.
What is mean't by complications ?

Complications mimic the "complications" found in many analog wrist watches (for date, moon phase or other functions). They usually have only very tiny displays and are, thus, quite limited in what they can show (a bit like "widgets")

Ok, all planned parts of the kit have been implemented now.

As it turns out, today, I'll have less time than expected for documenting everything - as a consequence, I may still have to write some lines tomorrow...

See GitHub for a very first (and still rough) documentation of this little kit.

I have to stop here for today and hope to fix bugs and brush up the docs tomorrow morning...

I'm curious about the modules and how you reference them through require (<GitHub URL>).

My assumption when first seeing them was that you expected that whomever wanted to use them would download those and reference them locally. But, I'm not seeing anything like that mentioned in your docs (maybe I'm blind), so that got me thinking and now I need to ask how things are supposed to work in regards to this (I might be missing something obvious somewhere).

if you're interested in one of the offered modules, just click on the link and read the module-specific documentation. There, you'll find an example with the complete require statement to copy and insert.

Explicit downloads are not necessary and could make updates more complicated.

Yes, I've seen those examples. But, when is the download supposed to take place? Does that happen when the app is uploaded to the watch?

@johan_m_o - for external modules like this referenced by URLS the App loader pulls in the code when you install the app. During development you will have to have the code loaded into the RHS window of the IDE and upload to Storage by setting the appropriate filename.

Personally I prefer actual modules in the app loader / Bangle Codebase. I would always worry that the code would dissapper from the remote URL.

See my Pastel Clock for an example of how I use an external refernce for sunrise/sunset calculation and local modules for fonts. I just wanted to keep the amount of code low in my main app.

Awesome... Learned something new today. Cheers.

Thanks for your explanation!

Since my modules are hosted by GitHub, I would have to delete them explicitly in order for the modules to disappear.

Nevertheless, if you want to be on the safe side, you still have the option to just fork my repositories...

For those who already experimented with my little kit: please note, that I renamed "Clock mechanics" to "Clockwork"! Earlier posts have been updated accordingly.

Everything else remains as it was and should be stable now.

Sorry for any inconveniences this may cause!