Post on 13-Apr-2017
NYCTalking Round
Credits: Heiko, Kevin, Jon and #PDR15
What’s New?
• Pebble Time Round
• Aplite -> Basalt -> Chalk
• SDK 3.6
Hardware
Display Shape
• Round has 7% more visible pixels than rectangular
Rectangular(144 x 168)
Round (visible)
Round (total)(180 x 180)
(0, 0)
OS Compatibility
Aplite Basalt Chalk
2.x ✅
3.0 ❌ ✅
3.6 ❌ ✅
Pebble Time Round
This Year™
Aplite Basalt Chalk
2.x ✅
3.0 ❌ ✅
3.6 ❌ ✅
3.x ✅
SDK 3.6
• Uniform APIs
• Text Flow
• Round Drawing
• API Improvements
Uniform APIsGraphics
Timeline
Action Menu
Text Flow
Text Flow
Text Flow
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
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
facilisisegestas. Proin
vitae arcu ac diam viverra aliquet. Nunc
gravida libero necmassa rutrum, vel
ultriciesenim
(0,0)
(179,179)
facilisisegestas. Proin
vitae arcu ac diam viverra aliquet. Nunc
gravida libero necmassa 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
Drawing Round
center_a = GPoint(3, 3);radius_a = 2; graphics_fill_circle(ctx, center_a, radius_a);
centera
radiusa
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
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);
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);
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 );
angle_end
inset
draw_arc & stroke_width
angle_start & angle_end
GOvalScaleModeFitCircle
GOvalScaleModeFillCircle
gpoint_from_polar
grect_centered_from_polar
API Improvements
• Status Bar
• Action Bar
• Menu Layer
Status Bar
Status Bar
Action Bar
Menu Layer
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.pngfile~round.pngfile~color.pngfile~bw.png
#defines
#resources
Find Out More
• developer.pebble.com/round
• www.slideshare.net/pebbledev/clipboards/pdr15
• Slack! slack.pbldev.io
The Project
developer.pebble.com
github.com/kirbyk/simon-pebble
cloudpebble.com
The Wrap-up
Recap
pebble.com/jobs
Thanks!
Questions?