Pebble was founded in 2011 and broke the kickstarter record in 2012 surpassing $10 million with its Pebble Watch. Today Pebble offers a range of two watches (Pebble Watch $99 / Pebble Steel Watch $149) in multiple colors. In the manner of Apple, products are design in California and assembled in China. This may be the only aspect we could link between those two providers. In fact, Pebble made the choice of simple products, four times cheaper than the cheapest Apple Watch, not touch sensitive, a black and white screen (the next generation called Pebble Time is equipped of a color 1.25” screen). Pebble watch is 50 meters water resistant.
Pebble Watch needs to be paired to your smartphone using Bluetooth 4.0, and requires to install the Pebble Android/iOS app which is available on App Store & Play Store. You can easily remote some of the phone functionalities including swapping songs and volume, pick up or hang up calls, receive messages and even respond preloaded answers & smileys. Pebble watch has sensors such as 3D accelerometer, compass or light sensor. Pebble Time also provides a microphone. The collection of watchapps & watchfaces that can be added via the Pebble phone app is probably the most interesting aspect of this product. You can find a large range of application, from the weather report to the counter for table tennis or even Tetris and a remote control for the phone camera. Most of those applications are free.
In total, Pebble watch has 4 control buttons (up, down, select, back), making navigation and interactions fairly easy and intuitive. The watch OS can also handle long clicks.
Pebble developers tools
Developers are offered two ways to build apps : CloudPebble, or using the build tools locally on their computer.
CloudPebble is an online IDE that allows to create, edit and build projects. You can also use It also to run the app on an emulator or on your watch (which needs to be paired with a phone that is reachable via your local network). All the features of CloudPebble are also available in command line on Linux or Mac OS. The only way to develop on a Windows platform seems to be with a Ubuntu VM, according to the SDK installation manual. Pebble team made sure to maintain the interoperability of these two ways, actually you can create a new project using CloudPebble, add a feature, download it and continue the development on your computer, then re-import it on CloudPebble, and so on. In the same way you can build and run your app with a command line and follow the logs on CloudPebble.
Another benefit that Pebble claims for its online IDE is the fact that if you use it, you will have no JSON to edit. Indeed, every app requires a JSON configuration file and CloudPebble generates it by itself. In my point of view, this is not an aspect of the IDE that will make you save time or prevent errors, except concerning the app UUID, useful for publishing updates of your app.
Debugging and tracking tools
CloudPebble is indisputably an interesting and modern tool, but it is very limited. There are no debug features, no breakpoints, it’s just a code editor with syntax highlighting and C compilation logger.
Event handlers & navigation
The fact that there are not a lot of different user interactions presents the advantage of making the developer’s job easier, as well as the small-low-resolution-not-touch-sensitive screen which can show only one window at the same time. In this way, a view can only have two states (shown, hidden) in which you can handle change events.
By default, clicks on up/down button cause the window scrolling likewise the back button hides the current window and makes the last shown window reappear. All of these event handlers can be overwritten by the developer depending on his needs. The scrollable aspect of a window can also be redefined.
Example of event handler (click on the selection button)
Taking a look to the present apps, they seem to adopt most of the time the same navigation behavior. It is kind of linear. The user gets to the next view using the select button after choosing an item in a menu, then he can go back pressing the left button. This navigation is very easy to set up, however if you want to do a more complex architecture, I did not find a better way than implementing my own state transition system. If there were a getter method to test the state of a window, it should not be necessary but there is no such thing in the PebbleJS documentation.
Classical navigation form
Bitcoin navigation example
Including an image to your PebbleJS app can be touchy because it requires multiple operations that the documentation does not aggregate in a single part. First of all, you need to declare images in the appinfo.json file this way:
Code to declare an image in appinfo.json
Thus, you can instantiate an UI.Image object and add it to a Window or define the icon of a Card with the name, or the path of the image (see the example below).
Adding an icon to a Card
Even so, the two previous operations will not work properly unless you convert your PNG file to 1 bit color encoding (black or white), what can seem to be easy but the editor proposed in the PebbleJS documentation is available for Mac OS only and I did not manage to do it using Gimp. I finally succeeded by using Photoshop but it is clearly not as easy as it seems.
Similarly, it is hard to believe that there is no way to choose the displaying resolution of images on the watch screen. Images have to be sized at their creation, with a maximum of 144px wide by 168px high for a total size smaller than 100kB. PNG is the only supported format.
PebbleJS limits and incompatibilities
During the development of my application, I faced some troubles due to present PebbleJS release limits (it should be noted that at the time I’m writing this post, PebbleJS is still in beta).
Including external Libraries.
In my case, I had trouble with the <a> element and the way it should parse URLs according to W3 standards. Here is an example:
Android device (console)
iOS device (console)