Creating a Pebble watch face – Planetarium

After a year long wait my Pebble smart watch finally arrived. A lot of good reviews have been written about it by other people, and I don’t really want to repeat that. I like that I can change watch faces and I really like some of the watch faces that are bundled with the app.

However, as a software developer, I really had to create one myself. So I did and the result is ‘Planetarium’. The source files are available at Github.

The Planetarium watch face.

An impression of the Planetarium watch face.

So what does Planetarium do? The time is displayed in the form of three planets that rotate around a central sun. The closest planet to the sun shows the seconds, the outer planet shows the hour and the planet in between shows the minutes. In real planetary systems the inner planets have shorter periods than outer planets.

If you want to try the watch face yourself, you can download it for your Pebble at mypebblefaces.com.

After installing the SDK tools from the instruction at http://developer.getpebble.com, developing a watch face is actually pretty easy. There are several examples and demo projects available to help you with your watch face.

So let’s look at the code of Planetarium. The watch face is coded in one C source file, called planets.c. First we need to identify the app, with an identifier, a name, creator and version.

Then we have the init method, where the watch face application is started.

In this method, the app registers itself for the initialisation, destroy and timing events (every second in this case).

Let’s look at the  handle_init method . Here we initialise all parts, that are needed for the watch face.

Here we setup the window and all layers needed to draw the watch face. The planets are drawn with rotating bmp containers, so that we can rotate the planet images when they circle around the sun. The central sun is part of the background image and does not need to be drawn separately. At the end, we update the clock hand positions, to position the planets correctly with respect to the sun.

All these resources (images) are compiled by the sdk and bundled in the .pbw file. The information needed by the app to load the images is listed in a JSON file called resource_map.json.

The destroy code is simple, we unload all the loaded resources.

When the app is notified at a second time event, the positions of the planets need to be updated:

In the update_hand_positions  method, we calculate the angles with which the planets are rotated with respect to twelve o’ clock.

We only update the minute and hour occasionally. This is done to minimize the part of the window that needs to be redrawn. This in turn should improve battery life.

There are two utility methods to place the image on the screen and to calculate the positions based on the angle with respect to twelve o’ clock.

The Pebble coordinate system starts with (0,0) in the upper left corner, with the y-axis pointing downward. But when doing the trigonometry, it is easier to have (0,0) in the center of the screen. That is why coordinates are transformed in the set_init_coords  method.

This was basically all the code needed to run the watch face.

Update:

A bug in the source code example has been corrected with the seconds planet.