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?