Pebble NYC Meetup Pebble Time Round and the Chalk SDK

49

Transcript of Pebble NYC Meetup Pebble Time Round and the Chalk SDK

Page 1: Pebble NYC Meetup Pebble Time Round and the Chalk SDK
Page 2: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

NYCTalking Round

Credits: Heiko, Kevin, Jon and #PDR15

Page 3: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

What’s New?

• Pebble Time Round

• Aplite -> Basalt -> Chalk

• SDK 3.6

Page 4: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

Hardware

Page 5: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

Display Shape

• Round has 7% more visible pixels than rectangular

Rectangular(144 x 168)

Round (visible)

Round (total)(180 x 180)

(0, 0)

Page 6: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

OS Compatibility

Aplite Basalt Chalk

2.x ✅

3.0 ❌ ✅

3.6 ❌ ✅

Pebble Time Round

Page 7: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

This Year™

Aplite Basalt Chalk

2.x ✅

3.0 ❌ ✅

3.6 ❌ ✅

3.x ✅

Page 8: Pebble NYC Meetup Pebble Time Round and the Chalk SDK
Page 9: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

SDK 3.6

• Uniform APIs

• Text Flow

• Round Drawing

• API Improvements

Page 10: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

Uniform APIsGraphics

Timeline

Action Menu

Page 11: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

Text Flow

Page 12: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

Text Flow

Page 13: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

Text Flow

Page 14: Pebble NYC Meetup Pebble Time Round and the Chalk SDK
Page 15: Pebble NYC Meetup Pebble Time Round and the Chalk SDK
Page 16: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

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

Page 17: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

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

Page 18: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

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

Page 19: Pebble NYC Meetup Pebble Time Round and the Chalk SDK
Page 20: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

Drawing Round

Page 21: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

center_a = GPoint(3, 3);radius_a = 2; graphics_fill_circle(ctx, center_a, radius_a);

centera

radiusa

Page 22: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

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

Page 23: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

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);

Page 24: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

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);

Page 25: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

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 );

Page 26: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

angle_end

Page 27: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

inset

Page 28: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

draw_arc & stroke_width

Page 29: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

angle_start & angle_end

Page 30: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

GOvalScaleModeFitCircle

Page 31: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

GOvalScaleModeFillCircle

Page 32: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

gpoint_from_polar

Page 33: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

grect_centered_from_polar

Page 34: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

API Improvements

• Status Bar

• Action Bar

• Menu Layer

Page 35: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

Status Bar

Page 36: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

Status Bar

Page 37: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

Action Bar

Page 38: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

Menu Layer

Page 39: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

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

Page 40: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

Find Out More

• developer.pebble.com/round

• www.slideshare.net/pebbledev/clipboards/pdr15

• Slack! slack.pbldev.io

Page 41: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

The Project

Page 42: Pebble NYC Meetup Pebble Time Round and the Chalk SDK
Page 43: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

developer.pebble.com

Page 44: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

github.com/kirbyk/simon-pebble

cloudpebble.com

Page 45: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

The Wrap-up

Page 46: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

Recap

Page 47: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

pebble.com/jobs

Page 48: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

Thanks!

Page 49: Pebble NYC Meetup Pebble Time Round and the Chalk SDK

Questions?