Demo about animated real-time bitcoin price on Pebble Watch

Demo – animated real-time bitcoin price on Pebble Watch

pebble-logo

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

As a consequence of the positive feedback and the amount of application installations on watches, we decided to go further in the coding explanation of a PebbleJS app using Streamdata.io 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 4 steps.

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

Download PebbleJS SDK

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
deactivate

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 https://github.com/pebble/pebblejs ~/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
  • ressources/
    • 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 assemble 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 object 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-mentioned types of interfaces.

CommercialViewscreenshot3img1
UI.CardUI.MenuUI.Window

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.banner('ICON_STREAMDATA');
myCard.subtitle('API Streaming');
myCard.body('We cache and push data from APIs\nVisit streamdata.io');

Then, you can display your interface by calling myCard.show()

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 provoke 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");
view1.show();

// 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){
	view2.show();
});

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 do 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 all kind of clicks (select, back, up, down) for each view, so that you can define your own app transition system.

Include Streamdata.io JS SDK to a Pebble App

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

We created a demo application to provide developers with an example of Pebble application using Streamdata.io JS SDK.
Sources of the Bitcoin application release are available here https://github.com/streamdataio/pebbleBitcoin

Library dependencies inclusion

This file src/js/app.js contains external scripts inclusion, the definition of interfaces as well as the data processing through Streamdata.io 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 to include three dependencies files in its first 60 lines.

  • JSONPatch, used to parse Json patches and apply them to an initial JSON snapshot.
  • Streamdata.io JS SDK, used to handle pushs, sent by Streamdata.io Proxy.
  • Streamdata.io Auth, used for the authentication by Streamdata.io Proxy.

Streamdata.io proxy authentication

Streamdata.io requires to register on its web portal. Once registered and connected to Streamdata.io 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 informations about Streamdata security on Streamdata.io 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 webservice bitcoinaverage.com

/* Copied-paste streamdata.min.js & streamdata.io-auth.js above */

/* Setup headers */
var headers = [];
var URL = "https://api.bitcoinaverage.com/ticker/all";

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


/* Listening for pushs */
streamdata.open();

If you do not want to use authorized calls, you can call createEventSource() with the first three parameters only, then you don’t need to include streamdata.io-auth.js anymore, and you can remove the signatureStrategy variable.

Streamdata.io SDK messages handlers

Now that you started listening for incoming messages, you shall handle them using Streamdata.io 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 error with the onError event.

var globalData;

/* Streamdata.io 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) {
	console.log(error.getMessage());
});

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

Find Bitcoin Price Index app on Pebble AppStore

PebbleAppStore
gif5

References and useful links

Share it :
0000

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 *