A talk given at Pebble's NYC Meetup on December 3, 2015. The talk discussed how to build apps for the Pebble Time Round and how to take advantage of the new Chalk SDK.

2. NYC
Talking Round
Credits:
Heiko, Kevin, Jon and #PDR15

3. What’s New?
• Pebble Time Round
• Aplite -> Basalt -> Chalk
• SDK 3.6

4. Hardware

5. Display Shape
• Round has 7%
more visible pixels
than rectangular
Rectangular
(144 x 168)
Round (visible)
Round (total)
(180 x 180)
(0, 0)

6. OS Compatibility
Aplite Basalt Chalk
2.x ✅
3.0 ❌ ✅
3.6 ❌ ✅
Pebble Time Round

7. This Year™
Aplite Basalt Chalk
2.x ✅
3.0 ❌ ✅
3.6 ❌ ✅
3.x ✅

9. SDK 3.6
• Uniform APIs
• Text Flow
• Round Drawing
• API Improvements

10. Uniform APIs
Graphics
Timeline
Action Menu

11. Text Flow

12. Text Flow

13. Text Flow

16. facilisis egestas. Proin
vitae arcu ac diam
viverra aliquet. Nunc
gravida libero nec massa
rutrum, vel ultriciesenim
tristique. Nam magna
enim, ullamcorper nec
tellus vel, accumsan.
(0,0)
(179,179)
facilisis egestas. Proin
vitae arcu ac diam
viverra aliquet. Nunc
gravida libero nec massa
rutrum, vel ultriciesenim
tristique. Nam magna
enim, ullamcorper nec
tellus vel, accumsan.
(0,0)
(179,179)
s_text_layer = text_layer_create(window_bounds);
layer_add_child(
window_layer, text_layer_get_layer(s_text_layer));
text_layer_set_text(s_text_layer, s_text);
text_layer_set_background_color(
s_text_layer, GColorBlueMoon);
Text Layer

17. facilisis egestas. Proin
vitae arcu ac diam
viverra aliquet. Nunc
gravida libero nec massa
rutrum, vel ultriciesenim
tristique. Nam magna
enim, ullamcorper nec
tellus vel, accumsan.
(0,0)
(179,179)
facilisis egestas. Proin
vitae arcu ac diam
viverra aliquet. Nunc
gravida libero nec massa
rutrum, vel ultriciesenim
tristique. Nam magna
enim, ullamcorper nec
tellus vel, accumsan.
(0,0)
(179,179)
s_text_layer = text_layer_create(window_bounds);
layer_add_child(
window_layer, text_layer_get_layer(s_text_layer));
text_layer_set_text(s_text_layer, s_text);
text_layer_set_background_color(
s_text_layer, GColorBlueMoon);
text_layer_set_text_alignment(
s_text_layer, GTextAlignmentCenter);
TextLayer

18. facilisis
egestas. Proin
vitae arcu ac diam
viverra aliquet. Nunc
gravida libero nec
massa rutrum, vel
ultriciesenim
(0,0)
(179,179)
facilisis
egestas. Proin
vitae arcu ac diam
viverra aliquet. Nunc
gravida libero nec
massa rutrum, vel
ultriciesenim
(0,0)
(179,179)
10px 10px
10px
10px
facilisis egestas. Proin
vitae arcu ac diam
viverra aliquet. Nunc
gravida libero nec massa
rutrum, vel ultriciesenim
tristique. Nam magna
enim, ullamcorper nec
tellus vel, accumsan.
(0,0)
(179,179)
facilisis egestas. Proin
vitae arcu ac diam
viverra aliquet. Nunc
gravida libero nec massa
rutrum, vel ultriciesenim
tristique. Nam magna
enim, ullamcorper nec
tellus vel, accumsan.
(0,0)
(179,179)
Text Flow

20. Drawing Round

21. center_a = GPoint(3, 3);
radius_a = 2;
graphics_fill_circle(ctx,
center_a,
radius_a
);
centera
radiusa

22. center_b = GPoint(4.5, 4.5);
radius_b = 3.5;
graphics_fill_circle(ctx,
center_b,
radius_b
);
center_a = GPoint(3, 3);
radius_a = 2;
graphics_fill_circle(ctx,
center_a,
radius_a
);
centera
radiusa
centera
radiusb

23. center_a = GPoint(3, 3);
radius_a = 2;
graphics_fill_circle(ctx,
center_a,
radius_a
);
centera
radiusa
centera
radiusb
center_b = GPoint(4.5, 4.5);
radius_b = 3.5;
graphics_fill_circle(ctx,
center_b,
radius_b
);

24. Rectangles to the Rescue
rect_a = GRect(1, 1, 5, 5);
somehow_fill_circle_inside(
ctx, rect_a
);
rect_b = GRect(1, 1, 8, 8);
somehow_fill_circle_inside(
ctx, rect_b
);

25. Drawing Round
void graphics_fill_radial(
GContext *ctx,
GRect rect,
GOvalScaleMode scale_mode,
uint16_t inset_thickness,
int32_t angle_start,
int32_t angle_end
);
void graphics_draw_arc(
GContext *ctx,
GRect rect,
GOvalScaleMode scale_mode,
int32_t angle_start,
int32_t angle_end
);

26. angle_end

27. inset

28. draw_arc & stroke_width

29. angle_start & angle_end

30. GOvalScaleModeFitCircle

31. GOvalScaleModeFillCircle

32. gpoint_from_polar

33. grect_centered_from_polar

34. API Improvements
• Status Bar
• Action Bar
• Menu Layer

35. Status Bar

36. Status Bar

37. Action Bar

38. Menu Layer

39. Feature Selection
Aplite Basalt Chalk
Resolution
144x168px
(Rectangular)
180x180
(Circular)
Color b/w 64 Colors
PBL_IF_RECT_ELSE("rect", "otherwise");
PBL_IF_ROUND_ELSE("round", "otherwise");
PBL_IF_COLOR_ELSE("color", "otherwise");
PBL_IF_BW_ELSE("bw", "otherwise");
file~rect.png
file~round.png
file~color.png
file~bw.png
#defines
#resources

40. Find Out More
• developer.pebble.com/round
• www.slideshare.net/pebbledev/clipboards/pdr15
• Slack! slack.pbldev.io

41. The Project

43. developer.pebble.com

44. github.com/kirbyk/simon-pebble
cloudpebble.com

45. The Wrap-up

46. Recap

47. pebble.com/jobs

48. Thanks!

49. Questions?