Demo about animated real-time bitcoin price on Pebble Watch


As presented in a previous post, Pebble Watches allow developers to create JavaScript applications. The team has released a sample application which provides the real-time bitcoin price index using the push strategy of

As a consequence of the positive feedback and the number of application installations on watches, we decided to go further in the coding explanation of a PebbleJS app using SDK.

First of all, I will give you keys to create a sample application with the Pebble JavaScript SDK.

PebbleJS SDK download and install

You can download the Pebble Javascript SDK as an archive file for free on PebbleJS official website. I will summarize how to install it on a Linux platform in a few minutes.

The SDK installation requires to follow four steps.

  • Install PebbleJS
  • Install the Pebble ARM toolchain
  • Install Python dependencies
  • Install Pebble emulator dependencies

Install the Pebble ARM toolchain

PebbleJS depends on Python libraries to convert fonts and images from your computer into Pebble resources.

You need to install pip and virtualenv.

sudo apt-get install python-pip python2.7-dev
sudo pip install virtualenv

Install Python dependencies

Then install the Python library dependencies this way

virtualenv --no-site-packages .env
source .env/bin/activate
pip install -r requirements.txt

Install Pebble emulator dependencies

sudo apt-get install libsdl1.2debian libfdt1 libpixman-1-0

Now that the Pebble SDK is downloaded and installed, it is time to write an app.

Create a sample Pebble Application

To create a sample application, clone the following GitHub repository

mkdir -p ~/MyPebbleApp
git clone ~/MyPebbleApp

Sample application structure

The app structure is like:

  • src/
    • js
      • many folders/
      • app.js/
      • loader.js
      • main.js
    • simply/
      • many C files
    • util/
      • C headers files
  • main.c
  • resources/
    • fonts/
      • ….
    • images/
      • ….
  • appinfo.json
  • ….

The two files that we will focus on are appinfo.json and src/js/app.js
The first one is a JSON structured document that assembles all app information, such as its name, uid, version… as well as a list of resources the app needs to work.
The rest of the app code is in src/js/app.js.

Pebble UI components

Once you have added your external dependencies to your app.js file, let’s write the real application core. To do this, you must include PebbleJS interface components.

app.js excerpt

// Import UI componants
var UI require('ui');
var Vector2 = require('vector2');

For more information about PebbleJS UI, you can read the documentation.

In line with UI components, you can import other Pebble Watch specific elements such as the clock, the accelerometer, the vibrator, etc.

Examples of Pebble SDK imports

var Clock = require('clock');
var Settings = require('settings');
var Vibe = require('ui/vibe');
var ajax = require('ajax');

Create graphical interfaces

Now that you have included all the native Pebble objects you need, you can design your views.
Three ways are offered to you in order to create a sample view. Either you want to display an easy structured page with one or many elements like (title, subtitle, body, icon) so you create a UI.Card or you may want to display a menu in which the user will select an item (UI.Menu) or you may even want to create your own kind of views (almost pixel per pixel) and then you should create a UI.Window.

Here are examples of each of the three above types of interfaces.


In order to show how easy it is to create a UI.Card, we will take a look at the “API Streaming” UI.Card :

var myCard = new UI.Card();
myCard.subtitle('API Streaming');
myCard.body('We cache and push data from APIs\nVisit');

Then, you can display your interface by calling

Handle users interactions

Pebble Watch control buttons
    Pebble Watch control buttons


Users have many ways to interact with their Pebble Watch, it might be via the accelerometer or the microphone, but definitely the most common user interactions are the four control buttons.

Most of the time, a button action provokes a change of the current interface. You can handle those clicks easily thanks to PebbleJS.


Here is an example of how to handle a click on the select button while the “view1” is shown, which will launch the “view2.”

Full click handler example

var UI = require('ui');

// Creating a UI.Card
var view1 = new UI.Card();
view1.title("My Title");
view1.body("My first view");;

// Creating a UI.Menu
var view2 = new UI.Menu({
sections: [{
items: [
{title: 'Item1'}, {title: 'Item2'}, {title: 'Item3'}

// Handle click on select button
view1.on('click', 'select', function(e){;

Compile and run your app

If you do not own a Pebble Watch, you can use an emulator, you have installed with PebbleJS SDK.

Run your application on an emulator.

pebble build && pebble install --emulator aplite

Whether you have a Pebble Watch, you need to download the Android/iOS Pebble application on Apple AppStore or Google PlayStore, pair with the watch,and activate the “Developer mode.”

Run your app on your watch.

pebble build && pebble install --phone 

Please note that your smartphone must be connected to your local network (via wifi), then it will have a local IP address.

Pebble Watch views transition system
    Result of the sample code

This way, you can handle many clicks (select, back, up, down) for each view, so you can define your own app transition system.

Include JS SDK to a Pebble App

One goal of this post is to explain how to use JavaScript SDK. This “proxy as a service” allows you to receive push from any JSON API. More information on website.

We created a demo application to provide developers with an example of Pebble application using JS SDK.
Sources of the Bitcoin application release are available here.

Library dependencies inclusion

This file src/js/app.js contains external scripts inclusion, the definition of interfaces as well as the data processing through proxy.

At the time that I am writing this post, the only way to include external JavaScript dependencies in a PebbleJS app by copy-paste its minify code at the beginning of the app.js file.

Bitcoin Price Index requires including three dependencies files in its first 60 lines.

  • JSONPatch, used to parse JSON patches and apply them to an initial JSON snapshot.
  • JS SDK used to handle pushes, sent by Proxy.
  • Auth, used for the authentication by Proxy. proxy authentication requires registering on its web portal. Once registered and connected to portal, you can create an application, and define the security level you want. Either you just use a token to stream your APIs, or if you want to make authorized calls, then you have to use a private key.

Further information about Streamdata security on JS SDK documentation

For our Bitcoin Price Index application, we made the choice to use authorized calls, and the API we will listen to, is provided by the web service

/* Copied-paste streamdata.min.js & above */
/* Setup headers */var headers = [];
var URL = "";

/* Setup signatureStrategy */var signatureStrategy = AuthStrategy.newSignatureStrategy("TOKEN_HERE", "PRIVATE_KEY_HERE");

/* Listening for pushs */;

If you do not want to use authorized calls, you can call createEventSource() with the first three parameters only, then you need not include anymore, and you can remove the signatureStrategy variable. SDK messages handlers

Now that you started listening for incoming messages, you shall handle them using SDK.

On connection opening, the proxy will. First of all, send you an initial snapshot (onData event) of your target API data, then you will receive incremental patches (onPatch event) meeting the standards of JSONPatch.

You might also want to add some custom behavior when the stream is opened, so you can implement the onOpen event.

Last but not least, you can do whatever you need in case of an error with the onError event.

var globalData;

/* stream starting */streamdata.onOpen(function() {
// Procedure you would do on connection enabling

/* Initial snapshot receiving */streamdata.onData(function(data) {
globalData = data;
// Procedure during snapshot receiving (UI, calculation...)

/* Patch event receiving */streamdata.onPatch(function(data) {
jsonpatch.apply(globalData, data);
// Procedure during patch receiving (UI, calculation...)

/* Error event receiving */streamdata.onError(function(data) {

Note: Those EventSource handlers are compatible with Android phones only.

Find Bitcoin Price Index app on Pebble AppStore


References and useful links

**Original source: blog
Previous articleAmazon API Gateway
Next articleAppcelerator Arrow – Server-Side Field Validation
Director, Engineering Mgmt - Allan Denis is the CTO of and since the Axway acquisition has been leading the AMPLIFY Streams R&D team. Allan has a demonstrated history of working in the information technology and services industry. He is skilled in Event-driven architectures, Real-time Cloud Applications, and IaaS and loves working with small agile teams in an international and multicultural context.


Please enter your comment!
Please enter your name here