My first Pebble Watch Face!

I’ve been wanting to get my very own smartwatch for a while now. After doing extensive research I settled on Pebble because of its focus on notifications, sleek design, and long battery life. In order to begin dabbling with Pebble application development I began by creating a simple watch face in CloudPebble’s UI Editor.

CloudPebble and UI Editor

There are a few ways to develop for Pebble watches . You can program for Pebble on your computer natively or use CloudPebble, which is a web-based IDE. I developed my application on CloudPebble as it was quickest to get started. Watch faces can be created programmatically, using the UI Editor, or a combination of the two methods on this IDE. I used only the UI Editor for my application. Here are tutorials for programmatically creating a watch face or using the UI Editor in CloudPebble.

Pebble Developer Connection

In order to install applications on your Pebble watch the developer connection must be enabled on your phone. This tutorial demonstrates how to do this on Android and the iPhone. You also need to ensure that within your CloudPebble project you set the compilation setting to install your watch face on your phone and not the emulator. You can do this in your CloudPebble project by clicking Compilation > Phone > Install and Run.

Watch Face Design

My watch face consists of a BitmapLayer and a TextLayer, essentially an image with some text. I reduced the size of my desired image to what would fit inside the Pebble watch face and modified its color to grayscale in Photoshop before I placed it in the BitmapLayer.  For specific details regarding using CloudPebble’s UI Editor see this tutorial. Below are some images of my process.