Pebble Development

JaxNode 6/18/2015

Upcoming Events

  • August
  • Code Impact
  • Code on the Beach

Smart Watch

  • Why do I need one of these stupid things?
  • Allows you to keep your phone in your pocket
  • Receive notifications, calls and SMS messages
  • Answer phone from your Wrist
  • Monitor your workout performance

Smart Watch

  • Pebble
  • Apple Watch
  • Android Gear

Pebble History

  • Started as a Bicycle Accessory
  • First product worked with BlackBerry
  • Introduced watch with Kickstarter 2013
  • Sold 1 millionth watch last December
  • When Apple Watch announced, their sales doubled
  • Pebble Time announced in February
  • Pebble Time has color display and Timeline feature  

Pebble Features

  • It can tell the time
  • Download or create custom Watch Faces
  • Download or Create Apps
  • Now you can develop timeline pins
  • Uses Bluetooth LE for connectivity to Smart Phone
  • Works with iOS and Android, Windows phone does not have BLE stack
  • Sensors include Accelerometer, Compass and Mic

Pebble Time

Best Features

  • Battery lasts for a week
  • I said a week!!!!!
  • ePaper display (limited 64 colors)
  • Alerts and notifications pushed to your watch face
  • Write apps in JS
  • Works with both Android and iOS

Development options

  • C SDK
  • Hybrid C and PebbleKit.js
  • Pebble.js
  • iOS and Android SDKs

Pebble SDK

  • IDE of your choice
  • Brew install Pebble on Mac
  • Linux options and Precompile Ubuntu
  • Windows, your are SOL (but can use VM image)
  • Cloudpebble is an online option, (best option for Windows)

Watch Phone Communication

  • Uses AppMessage and AppSync 
  • Data passed over BLE between Phone and Watch
  • Can build your own in your phone app
  • Or use PebbleKit.js with Pebble phone app
  • Pebble phone app uses V8 to run JS
  • Messages use Dictionary of Tuples (Tuplet)
  • JS just handles objects

Platforms

  • Aplite (legacy b/w)
  • Basalt (Pebble Time)
  • You can run both as emulators
  • They even work in the cloud

How to install SDK

On a Mac, run the following command;

brew install pebble/pebble-sdk/pebble-sdk

 

On linux, follow the instructions on this page;

https://developer.getpebble.com/sdk/install/linux/

 

C SDK

  • Python script used as build system 
  • 2 types of apps: WatchFaces and WatchApps
  • C apps can run independently on Pebble 
  • Precise control of the UI
  • Because it is C, developer responsible for memory
#include <pebble.h>

Window *window;
TextLayer *text_layer;

void handle_init(void) {
	window = window_create();
	text_layer = text_layer_create(GRect(0, 0, 144, 154));
	
	text_layer_set_text(text_layer, "Hello World!");
	text_layer_set_font(text_layer, fonts_get_system_font(FONT_KEY_GOTHIC_28_BOLD));
	text_layer_set_text_alignment(text_layer, GTextAlignmentCenter);
	layer_add_child(window_get_root_layer(window), text_layer_get_layer(text_layer));
        window_stack_push(window, true);
	
	APP_LOG(APP_LOG_LEVEL_DEBUG, "Just pushed a window!");
}

void handle_deinit(void) {
	text_layer_destroy(text_layer);
	window_destroy(window);
}

int main(void) {
	handle_init();
	app_event_loop();
	handle_deinit();
}

PebbleKit.js

  • Used with your C apps for communication to Phone
  • Eliminates the need iOS and Android companion apps
  • Uses V8 engine in the Pebble App
  • Make external calls to internet
  • Access the Phones GPS
  • Define Configuration page for your apps
  • Also use for control of timeline
  • Pebble.addEventListener("ready", (e) => { });
function locationSuccess(pos) {
  var coordinates = pos.coords;
  fetchWeather(coordinates.latitude, coordinates.longitude);
}

function locationError(err) {
  console.warn('location error (' + err.code + '): ' + err.message);
  Pebble.sendAppMessage({
    "WEATHER_CITY_KEY":"Loc Unavailable",
    "WEATHER_TEMPERATURE_KEY":"N/A"
  });
}

var locationOptions = { "timeout": 15000, "maximumAge": 60000 }; 

Pebble.addEventListener("ready", function(e) {
  console.log("connect!" + e.ready);
  locationWatcher = window.navigator.geolocation.getCurrentPosition(
    locationSuccess, locationError, locationOptions);
  console.log(e.type);
});

Pebble.js

  • Used to be called Simple.js
  • It is the simplest way to write Pebble Apps 
  • It is dependant on a paired phone
  • Uses UI Cards to display info to Screen
  • UI Cards have a Title and Body property
  • Like PebbleKit.js you can call external services
    and access the GPS

Pebble.js API

Settings

UI.Card
UI.Menu

Window

Rect

Circle

Text

Image

Light

Vibe

Accel

Ajax

 

// Import the UI elements
var UI = require('ui');

// Create a simple Card
var card = new UI.Card({
  title: 'Hello World',
  body: 'This is your first Pebble app!'
});

var window = new UI.Window();
window.on('click', 'up', function() {
  // Up click detected!

});

// Display to the user
card.show();

Pebble.js AJAX call

var ajax = require('ajax');

var URL = 'http://api.openweathermap.org/data/2.5/weather?q=London,uk';

var splashCard = new UI.Card({
  title: "Please Wait",
  body: "Downloading..."
});
splashCard.show();

// Download data
ajax({url: URL, type: 'json'},
  function(json) {
    var temp = Math.round(json.main.temp - 273.15);

    var resultsCard = new UI.Card({
      title: 'London, UK',
      body: json.weather[0].main + '\nTemp: ' + temp
    });

    resultsCard.show();
    splashCard.hide();
  },
  function(error) {
    console.log('Ajax failed: ' + error);
  }
);

Timeline

  • Key new feature in Pebble 3.0
  • The timeline can be used to display user-specific data, events, notifications and reminders in both the past and the future.

Timeline architecture

  • Each timeline item is called a Pin
  • You publish Pins to Pebble Timeline service
  • Pins can be sent to individual users
  • Users can subscribe to a topic(s)
  • Pins can be sent to every user 

Timeline Service SDK

  • You can write your own
  • Node NPM module
  • Python (pip install pypebbleapi)
  • PHPebbleTimeline
  • .NET pebble-api-dotnet on GitHub
npm install pebble-api --save
var Timeline = require('pebble-api');

var USER_TOKEN = 'a70b23d3820e9ee640aeb590fdf03a56';

var timeline = new Timeline();

var pin = new Timeline.Pin({
  id: 'test-pin-5245',
  time: new Date(),
  duration: 10,
  layout: new Timeline.Pin.Layout({
    type: Timeline.Pin.LayoutType.GENERIC_PIN,
    tinyIcon: Timeline.Pin.Icon.PIN,
    title: 'Pin Title'
  })
});

timeline.sendUserPin(USER_TOKEN, pin, function (err) {
  if (err) {
    return console.error(err);
  }

  console.log('Pin sent successfully!');
});

Demo

Resources

  • http://developer.getpebble.com
  • Pluralsight course
  • https://github.com/davidfekke/watchbot

Questions?

Contact

  • Twitter @jaxnode
  • @davidfekke
  • Skype me davidfekke
  • email David Fekke at gmail dot com