Conveniently, Pebble have a cloud-based development platform that makes use of virtual machines and also your own watch to develop apps. There’s some particularly nice features in there, such as being able to take a screenshot of your watch, which came in handy for showing what the watch face looks like!
Getting started using CloudPebble was straightforward. It was a case of creating a Rocky.js project and creating the
index.js file, and I was good to go. Starting off rather simply, Rocky.js, which is the library used for rendering and communication, needed to be loaded:
Because this is a watchface, the app needs to render the display, and that was a simple case of adding an event listener to the
The canvas context itself was easy to used, having previously used the canvas API. I started out by rendering the three background colours I used:
The API for the canvas has some interesting, yet understandable, quirks. For instance, defining a font style has to be one of the pre-defined list. Colours can be any hexcode, Pebble colour code or some (not all!) CSS colour codes. I needed to render the time with one of these fonts in the predefined list, and I opted for the largest available one:
42px bold numbers Leco-numbers.
Additional logic (
(time.getHours() > 12 ? time.getHours() % 12 : time.getHours())) had to be employed for the hours, since it was in 12-hour format.
time.getHours() % 12 would have meant that at 12:00, the watchface would’ve displayed 00:00.
time.getHours() % 13 would’ve made all the hours after noon an hour off (for example, 1:00 PM would have registered 0:00). A simple left-pad (
(time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes())) was employed on the minutes so that minutes within the first ten minutes of an hour (‘12:00’) wouldn’t render as single digits (‘12:0’).
The date render was largely trivial, with the only complication being that the month’s name had to be looked up in an array (
['January', 'February', ...]).
I didn’t do much in the way of rendering these using measured proportions, since I was largely looking at just making a watchface with a few bells and whistles. The API supports it, however. The numbers you see above (for example
bounds.height / 2 - 28) were just numbers arrived to by experimentation on my own watch.
Since the watchface was now rendering, it needed to render again every minute:
In order to make the watchface a little more complicated (and to make it different every time I looked at it), I rotated the background rectangles’ colours every minute.
Every time draw was called, the counter was incremented and so the background colours would alternate. I’d tried this animation for the first 10 seconds of every minute, via:
Though, ultimately I decided that the additional overhead of a new event listener for seconds changing wasn’t worth it, as the battery drain I experienced was noticeable over prolonged use. However, as with all matters battery related, your mileage may vary.
My complete watch code ended up as: