This article was migrated from medium.com for archival purposes and may be heavily outdated. Please keep that in mind!
Introduction
A few days ago, I released watchUI to the public (you have to thank Apple for that lowercase „w"). In fact, it was the fastest release of any FESTIVAL project with less than a month after the announcement. I think. I don't remember when I announced it.
Recently I've been asked a few questions about watchUI apps. As you know, watchUI again features FESTIVAL's „Appception" system, because there are apps inside an app. You know, Inception 'n stuff. One question in particular (thanks to https://twitter.com/bot22nd/status/743803890617851905) was „How do I create a clock-based app?". So, this post will guide you through creating a clock app for watchUI.
The existing example
Before creating your own app, let's have a look at the example clock app bundled in the watchUI demo. The apps.json entry has a special key which changes the way the app is loaded:
isClockApp: trueFirst, the logic behind this key replaces the app icon with an actual clock icon, so the icon key is not needed for this kind of apps. Inside this dynamic app icon are SVG elements all three hands: Hours, Minutes and Seconds. These elements are groups containing their respective names:
<g data-name="hour_hand">[…]</g>This is what makes any analog clock work. watchUI's logic searches for ANY of these elements. It works for the app icon, it works for larger hands inside the actual app. Just anywhere. You're free to either use the existing hands, which have their transform origin in the center of a 312x312 container, or create your own entirely from scratch. Put it in the top left corner and display other content in the center. It's your decision.
This works even without having the isClockApp key set. It's truly global.
The isClockApp key also hides the Navigation bar clock. Because it's actually a global home button, it's only invisible, but not completely gone.
Adding the indicators
The example app has a total of 1+4 layers. The single layer being the clock hands (even though by default they're three groups, but we can count them as one), and the four layers being two layers of indicators (outer circle, small thin lines; inner circle, large fat lines) and their respective reveal layers.
In the example app, the indicator circles are SVG graphics inside IMG elements. Placed above them is the reveal layer which reveals the indicators in a circular animation. These reveal layers are simple paths created with a describeArc method, which is not yet available for use inside watchUI.
You can call this probably a „double-layered sandwich", because an IMG element is followed by an SVG element, followed by IMG followed by SVG.
It's important these SVG elements have an ID of outerIndicatorReveal and innerIndicatorReveal respectively. You can of course use those found inside the example app.
How about digital clocks?
Of course you can use digital clocks inside your apps. To do this, the isClockApp key is recommended, but not required (it hides the NavBar clock, two clocks at the same time look weird).
Please note that you cannot use individual elements for hours and minutes yet. Only one element for a full clock.
The same logic that updates analog clock hands also updates digital clocks. To use this, just insert the following code anywhere in your document:
<p class="time></p>watchUI automatically inserts the current time in this element. It's yours to style this the way you want.
Support for seconds and individual hours and minutes will be added in a later update.