the other watchkit
DESCRIPTION
A WatchKit you can use right now!TRANSCRIPT
![Page 1: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/1.jpg)
The Other WatchKitAlexsander Akers · @a2NSLondon · 25/09/14
![Page 2: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/2.jpg)
Availableearly 2015
![Page 3: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/3.jpg)
Availableearly 2015
![Page 4: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/4.jpg)
![Page 5: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/5.jpg)
Apple madewatches cool.
![Page 6: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/6.jpg)
Remember this?
xkcd 1420 "Watches" by Randall Munroe.
![Page 7: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/7.jpg)
Let’s get ticking!
![Page 8: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/8.jpg)
I can haz SDK?Local
$ brew install pebble-sdk
http://developer.getpebble.com/sdk/
Online
CloudPebble http://cloudpebble.net
![Page 9: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/9.jpg)
Project Creation$ pebble new-project --javascript NSLondon$ tree NSLondon.├── appinfo.json├── resources├── src│ ├── NSLondon.c│ └── js│ └── pebble-js-app.js└── wscript
![Page 10: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/10.jpg)
Project AnatomyNSLondon.c
#include <pebble.h>
static Window *window;
![Page 11: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/11.jpg)
Project AnatomyNSLondon.c
static void init(void) { window = window_create(); window_stack_push(window, true);}
static void deinit(void) { window_destroy(window);}
![Page 12: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/12.jpg)
Project AnatomyNSLondon.c
int main(void) { init(); app_event_loop(); deinit();}
![Page 13: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/13.jpg)
Components• Window ≈ UIViewController
• WindowStack ≈ UINavigationController
• Layer ≈ UIView
![Page 14: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/14.jpg)
ComponentsWindow
As we saw before, window_create() and window_destroy() are used for window creation and destruction.
You get access to the root layer with window_get_root_layer().
![Page 15: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/15.jpg)
ComponentsWindowStack
Push with window_stack_push().Pop with window_stack_pop().
![Page 16: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/16.jpg)
ComponentsActionBarLayer
![Page 17: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/17.jpg)
Components(Rot)BitmapLayer
![Page 18: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/18.jpg)
GCompOp
![Page 19: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/19.jpg)
ComponentsScrollLayer
![Page 20: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/20.jpg)
ComponentsSimpleMenuLayer
![Page 21: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/21.jpg)
ComponentsMenuLayer
![Page 22: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/22.jpg)
ComponentsTextLayer
![Page 23: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/23.jpg)
ComponentsInverterLayer
![Page 24: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/24.jpg)
Other UI features• Vibration
• Backlight
• Click handling
• Animations
![Page 25: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/25.jpg)
Graphics• Circles
• Rects
• Rounded rects
• Paths
• Fills & strokes
• Text drawing/sizing
![Page 26: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/26.jpg)
AppMessageTalk with JS / SDK
![Page 27: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/27.jpg)
TimersCall function after delay
![Page 28: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/28.jpg)
StorageThe poor man's NSUserDefaults
![Page 29: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/29.jpg)
Event ServicesAccelerometer
![Page 30: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/30.jpg)
Event ServicesApp Focus
![Page 31: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/31.jpg)
Event ServicesBattery
![Page 32: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/32.jpg)
Event ServicesBluetooth Connection
![Page 33: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/33.jpg)
Event ServicesCompass / Magnetometer
![Page 34: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/34.jpg)
Event ServicesTick Timer
![Page 35: The Other WatchKit](https://reader033.vdocuments.us/reader033/viewer/2022052907/55941e191a28ab61768b45da/html5/thumbnails/35.jpg)
The Other WatchKitAlexsander Akers · @a2NSLondon · 25/09/14