A Pebble watchface based on Priyesh Patel's superb watchface Dial (source, Pebble appstore).
Dial Plus shows the time without fanfare. The watchface is unobstructive and simple. When you flick your wrist, battery information and the date appear.
Here are the five logical layers expanded. From top to bottom: battery percent, battery bar, date, needle, dial, background.
The original Dial is my favorite watchface. I only found a few small things to improve upon.
After 6:00pm, the needle doesn't line up correctly with the ticks on the dial.
In the screenshots below, the entire watchface is shown on the left and a zoomed-in region around the needle is shown on the right. At 6:00, the red line is perfectly aligned with the gray tick. But on hours after 6:00, the red line is one pixel out of alignment. The digital clocks are the watchface itself drawing what time it thinks it is; I did not add them after taking the screenshots.
The original Dial has a single background image with numbers from 1 to 12, which is positioned so the needle points to the correct time.
There are 10 minutes between any two adjacent ticks. The red needle and the gray ticks are all 2 pixels wide, so there should be 20 pixels between ticks.
But the ticks are one pixel too close to each other. In the picture below, I zoom on two adjacent ticks, show the pixel grid, and illustrate where the needle should be at 1:00 through 1:10. As you can see, there's not enough room.
I believe a secondary problem involves integer division. Here's Priyesh's code to compute the offset of the background image:
static void draw_clock(struct tm *tick_time) {
...
const int64_t background_x_offset = mins_since_midnight * BACKGROUND_WIDTH * 2 / mins_in_day;
...The background image goes from 0 to 12 hours, so twice the background width is 24 hours. Consequently, the term BACKGROUND_WIDTH * 2 / mins_in_day equals the number of pixels per minute.
Both the ticks and the needle are 2 pixels wide, so the number of pixels per minute should be exactly 2. BACKGROUND_WIDTH is 1366 pixels, so
BACKGROUND_WIDTH * 2 / mins_in_day
= 1366 * 2 / 1440
= 1.897222
which is not 2. (The Pebble's hardware cannot do floating point numbers.)
The original font, Medium.ttf, is Helvetica Neue, which is not free. The file even has multiple fields of copyright metadata intact:
The embedded copyright text is so amazingly long I have included it below.
Part of the digitally encoded machine readable outline data for producing the Typefaces provided is copyrighted © 2003 - 2006 Linotype GmbH, www.linotype.com. All rights reserved. This software is the property of Linotype GmbH, and may not be reproduced, modified, disclosed or transferred without the express written approval of Linotype GmbH. Copyright © 1988, 1990, 1993 Adobe Systems Incorporated. All Rights Reserved. Helvetica is a trademark of Heidelberger Druckmaschinen AG, exclusively licensed through Linotype GmbH, and may be registered in certain jurisdictions. This typeface is original artwork of Linotype Design Studio. The design may be protected in certain jurisdictions.
(It was very hard to get Windows to let me copy the copyright string. I had to use the Get-FileMetaData PowerShell script script by IamMred from the Microsoft Script Center Repository.)
I replaced Helvetica Neue with Raster Gothic from the Pebble SDK.
Below, Helvetica Neue is on the left and Raster Gothic is on the right.
When you shake your wrist, Dial Plus displays the battery percentage and a colored bar.
Strangely, the API only exposes battery percentage in 10% increments.
I want to show upcoming Google Calendar events on the dial. Here are some style ideas, showing a calendar event from 3:25 to 3:40:
I know this is possible to interact with Google Calendar without needing a companion phone app because My Calendar by Stanfy and Calendar Cards by Ester Sanchez both do it.
It turns out it's a real pain in the ass. I would need to write the interaction with Google's calendar API from scratch. There are at least two frameworks for doing watchface configuration, both poorly documented and neither supported by CloudPebble (the online SDK). There are not enough other libraries to make it worthwhile.
It also turns out a similar feature was added to the Pebble firmware in version 4.0. Timeline Quick View can show an upcoming event on the bottom of the watchface. Here's what it looks like if have an event called Pokemon Go starting in eleven minutes:
I use this feature a lot and am glad it was added.
All the code was originally in a single 149-line file, Dial.c, which was a bit hard to read.
Since I added a lot of functionality, I split it up into files for main, drawing, animation, and handlers.
The top picture of the Pebble Time Steel in Silver from the Pebble store.