My Experiences Making Pebble Apps

Ben Combee (@unwiredben)

29 July 2015

Austin Smartwatch Meetup

Common Pebble Specs

  • 144x168 screen
  • accelerometer
  • compass
  • 4 side buttons
  • Bluetooth data

Pebble

(Aplite platform)

  • 64MHz ARM Cortex M3
  • Black & White screen
  • 24K max app size
  • 96K resource limit

Pebble Time

(Basalt platform)

  • Basalt
  • 100 MHz ARM Cortex M4
  • 64-color screen
  • 64K max app size
  • 256K resource limit
  • microphone
  • smart accessory port

Development Tools

  • CloudPebble
  • Native SDK
    • Mac OS X or x86 Linux
    • Python-based build system
    • ARM-targeting GCC 4.7.2
    • More flexibility for builds

What Runs on the Watch

  • Compiled code execution environment
  • Pebble supplies an ARM GCC in their SDK
  • App structured around an event loop with callbacks
  • One app can have background worker task
  • (this is targeted at activity trackers)
  • 4K of non-volatile storage on watch
  • No debugger, just logging

 

 

Two Kinds of Apps

  • Watch Faces
    • Passive
    • No button interaction
    • Live at bottom of app stack
    • One active at a time
  • Watch Apps
    • Can be fully interactive
    • Selected from app list
    • Launched from watchface using shortcuts

What Runs on the Phone

  • Main Pebble/Pebble Time application
  • PebbleKit JS JavaScript runtime
    • PyV8 for emulator
    • "no-window" WebKit on Android
    • Ejecta engine on iOS
  • Companion apps using PebbleKit iOS or Android

PebbleKit JS

  • ECMAScript 5 environment
  • No DOM support
  • WebSockets
  • LocalStorage
  • Geolocation
  • XMLHttpRequest
  • Timeline subscriptions
  • App Configuration using WebView

Slate

  • Web framework for config pages
  • Provides UI widgets that match system look
  • Still in early development
  • https://github.com/pebble/slate

Resistor Time

  • On Github at unwiredben/resistor-time
  • Simple non-animated watchface
  • Every minute, repaints a resistor bitmap, then draws colored rectangles over the stripes to match the time
  • PebbleKit JS-based config to pick color scheme

Phantom Camera

  • On Github at unwiredben/phantom-camera
  • Interactive photo viewer using Instagram API
  • Lets you show most recent photo from
    • Nearby users (using geolocation)
    • People you follow
    • Popular pictures from all of Instagram

Phantom Camera

  • Config page handles getting OAuth token
  • JavaScript application handles
    • Geolocation
    • Access Instagram APIs
    • Download and process image
    • JavaScript-based JPEG decoder from PDF.js
    • Floyd-Steinberg dithering to convert to 64 colors
    • 8-bit to 6-bit image compression
  • Watch app handles
    • Bluetooth communication
    • User state management
    • Bitmap display

Q & A

Made with Slides.com