Pebble Watch development using Streamdata.io

Pebble Watch multicolor

Overall presentation

Pebble was founded in 2011 and broke the kickstarter record in 2012 surpassing $10 million. 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.

Main Features

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

SDK

Pebble provides a set of tools for developers, helping them to write new watchapps & watchfaces. While classical apps are implemented in C, Pebble also provides PebbleJS, a JavaScript SDK allowing to develop an application without writing any C instruction. For my part, I only experienced the creation of an app with PebbleJS.

IDE

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.

PebbleJS – Javascript SDK

One of the main goals of the JavaScript SDK is for sure that developers can create watchapps that fetch data from web services, and it is exactly my objective as I wanted to make an app that displays the real-time Bitcoin price index using Streamdata.io JS SDK.

PebbleJS documentation

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.

As JavaScript is an interpreted language, it is normal that they are no compiling debug, but during the execution, exceptions are thrown from another JavaScript aggregate file making the bug tracking not that simple.

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.

myWindow.on(‘click’, ‘select’, function() {
myOtherWindow.show();
});

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

Classical navigation form

Bitcoin app navigation example

Bitcoin navigation example

Images inclusion

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:

“ressources” : {
“media” : [{“type” : “png”,
“name” : “MY_IMAGE_NAME”,
“file” : “images/myImage.png”
}]
});

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).

var card = new UI.Card({
“title”: ‘Hello People!’
});
card.icon(‘MY_IMAGE_NAME’);
// this form has the exact same result
card.icon(‘images/myImage.png’);

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.

There is a noticeable limit in PebbleJS concerning external JavaScript libraries including. The documentation describes how to add a dependency using a require method. This way you can include some native dependencies especially implemented for PebbleJS apps. For instance, you can find an Ajax module, instructions to use the vibrator, the backlight, the accelerometer etc…  However, if you want to an external library (jQuery, Angular…) or your own module, it seems that the only solution is to copy-paste the minimized code at the beginning of your app.js file! There is no need to describe how clear your code becomes with this kind of practices.

Differences observed between Android and iOS environment JavaScript interpreting

A substantial problem I observed is that whether you run your app on your watch using an iOS or Android device, the JavaScript interpretation may not have the same behavior. PebbleJS documentation warns about this eventuality if you make a direct usage of the JavaScript window object provided in a normal web browser. The same applies for the <canvas> element which is not available on iOS (implied it is available only for Android).

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:

var parser = document.createElement(‘a’);
parser.href = ‘http://myDomain.com/myPath/’;
console.log(parser.href) ;
console.log(parser.protocol) ;
console.log(parser.hostname) ;
console.log(parser.pathname) ;

Example of JavaScript code

> http://myDomain.com/myPath/
> http:
> myDomain.com
> /myPath/

Android device (console)

> http://myDomain.com/myPath/
> undefined
> undefined
> undefined

iOS device (console)

Another incompatibility I noticed is about Server-Sent Events (SSE). One more time, it works on Android only. Effectively, in the same way as Microsoft Internet Explorer, the JavaScript interpreter cannot instantiate an EventSource object and I have not been able to get around the problem with a polyfill script just like it is possible in the case of IE.

Those two observations show that JavaScript interpreter does not work the same way on both Android & iOS platforms, that could hide some more problems for apps compatibility.

Conclusion

To sum-up, both for users and developers, Pebble Watch is a promising product. Even if the finishing touches are not amazing, its ease of use and flowing UI are attractive. From a developer point of view, it is possible to create a sample app directly from a browser without installing anything. At the moment, however, CloudPebble is a bit limited and does not provide any debug feature what may slow your development progression. Developers have the choice between C and JavaScript thanks to the PebbleJS SDK.

Feel free to download Bitcoin Price Index app

Share it :
1101

Give it a try!

Try streaming any JSON REST API within 30 sec
curl -v "https://proxy.streamdata.io/http://mysite.com/myJsonRestService?param1=[]&param2=[]"

Leave a Reply

Your email address will not be published. Required fields are marked *