Keynote for Monte Dev Meetup #4 http://wave-developers.github.io Simple example of Pebble smart watch development with Pebble JS

1. Pebble Watch
Wrist control of your smart home
Pavel Dmitriev, http://nimble.com

2. What’s inside
• Sharp 1,32" eInk display (144 × 168 pixels, 176 PPI)
• 3 x LCDs backlight
• Bluetooth 2.1 (default), 4.0 + EDR 4.0 + LE
• ARM Cortex-M3, up to 80 MHz with 512 KB
• 8 x 96 KB slots (in old Pebbles)
• 4 buttons, 3 axis accelerometer with gesture
detection, magnetometer, ambient light sensor, vibro

3. What's the deal?
• Time
• Notifications
• Activity tracker (Misfit, Runkeeper, Jawbone UP, etc.)
• Music remote
• Calendars, twitter, RSS
• Compass, timers, GoPro, etc., etc., etc.

4. Positive sides
• eInk — visible on bright sun of Montenegro
• Allways on
• Works up to 7 days (5 days avg.)
• Inexpensive (from $99)
• Water resistant (50m for basic, 30m for Time)

5. Negative sides
• Slow CPU and limited resources
• Not so good system integration
• No speakerphone (Time have microphone)
• Phone required for Internet access and GPS

6. Only real smart
WATCH

7. Two languages
VS
JavascriptC++

8. Development options
• Local SDK
No so easy to set up, but fast and reliable
• Cloud IDE
Easy to start, but some glitches present

9. Simple example
• Simple API, let’s pretend it’s smart controller API
• GET /api — get value {'val': x}
• POST /api — set value {'val': x}
• /ws — websocket API

10. Requirements
var ajax = require('ajax');
var UI = require('ui');
var Vector2 = require('vector2');
var Vibe = require('ui/vibe');
var val = 5;

11. Main window
var wind = new UI.Window({
fullscreen: true,
backgroundColor: 'white',
action: {
up: 'images/Icon Plus.png',
down: 'images/Icon Minus.png',
select: 'images/Icon Check.png'
}
});

12. Two text fields
var val_field = new UI.Text({
position: new Vector2(0, 65),
size: new Vector2(114, 30),
font: 'gothic-28-bold',
text: '???',
textAlign: 'center',
color: 'black',
});

13. Two text fields
var stat_field = new UI.Text({
position: new Vector2(0, 140),
size: new Vector2(114, 30),
font: 'gothic-14-bold',
text: 'Status',
textAlign: 'center',
color: 'white',
});
wind.add(val_field);
wind.add(stat_field);

14. Clicks handler
function on_click(e) {
if(e.button == 'up') {
if(val < 10) {
val += 1;
} else {
Vibe.vibrate('short');
}
} else {
if(val > 0) {
val -= 1;
} else {
Vibe.vibrate('short');
}
}
val_field.text('Value = ' + val);
console.log('Value = ' + val);
}

15. Helper and handlers setting
function show_status(stat_text) {
stat_field.text(stat_text);
stat_field.color('black');
setTimeout(function () {
stat_field.color('white');
}, 1000);
}
wind.on('click', 'up', on_click);
wind.on('click', 'down', on_click);

16. Über server interaction
wind.on('click', 'select', function(e) {
ajax({
'url': 'http://cleg.pagekite.me/api',
'method': 'post',
'type': 'json',
'data': {'val': val}
},
function(data, status, request) {
console.log('OK ' + JSON.stringify(data));
show_status('GUT !');
},
function(error, status, request) {
console.log('The ajax request failed: ' + error);
show_status('FAIL :(');
}
);
console.log('Tried to set value=' + val);
});

17. Ask value from server
(with respect)

18. Get initial value
ajax(
{
url: 'http://cleg.pagekite.me/api',
type: 'json'
},
function(data, status, request) {
val = data.val;
val_field.text('Value = ' + val);
},
function(error, status, request) {
console.log('The ajax request failed: ' + error);
}
);

19. Main magic
wind.show();

20. Now we see it!

21. Near future: Time
• 64 color screen (remember EGA? it's 4 times
better)
• Microphone for spoken notes and replies
• New 3.0 SDK and timelite view

22. Thank you!
• https://github.com/cleg/bulb
• https://github.com/cleg/DummyServ