What Developers Need to Know about the Pebble Time Round

Back in March, Pebble released news of the Pebble Time and I put together a summary of what that meant for Pebble developers. Last week, they released their latest big news - the Pebble Time Round. Here's what Pebble developers and tinkerers need to know about the new device.

The Form Factor

The new Pebble Time Round is not only round but super thin and light too. It has the same CPU, maximum resource size, number of colors supported, sensors, microphone and smart accessory port as the Pebble Time. The only difference is that the screen resolution is now 180x180 pixels and is (of course) round.

The circular shape actually allows for a slightly larger watchface:

One downside of the reduced size is a reduction in battery life. The Pebble Time Round has a two day battery life and instead focuses on super fast charging - 15 minutes of charging brings a day of battery life.

Sadly, it is also not quite as water resistant either. It can withstand rain and showers but swimming with a Pebble Time Round won't end well.

The Round Platform Is Called "Chalk"

The previous two platforms were "Aplite" and "Basalt". "Aplite" is the original Pebble platform and "Basalt" is one for the Pebble Time. Developing for the round format requires a third platform type called "Chalk".

An Emulator is Available

CloudPebble already has an emulator ready and waiting for you to experiment with the "Chalk" platform. You can head over right now and try out any of your existing apps to see how they'll look.

You Need To Calculate Coordinates At Runtime

This is the most important tip I found whilst researching on the new changes. Avoid setting and using constant values like SCREEN_WIDTH and SCREEN_HEIGHT - these will be different for different versions of the device! You can inspect the size of your app's window root layer at runtime:

[code language="c"]
Layer *window_layer = window_get_root_layer(s_window);
GRect bounds = layer_get_bounds(window_layer);
[/code]

Avoid this:

[code language="c"]
Layer *layer = layer_create(GRect(0, 0, 144, 168));
[/code]

Instead, do this:

[code language="c"]
GRect bounds = layer_get_bounds(parent_layer);
Layer *layer = layer_create(bounds);
[/code]

One of the main things that prevents existing apps from working on the new device is hardcoded values like this, so if you are porting across an existing app - check for hardcoded screen sizes first and take those away.

Drawing Circles Is Easy

Turns out, when you've got a round watchface, you end up drawing a lot more circular shapes. The Pebble SDK now has some new functions to help with managing a circular interface.

Drawing a Circular Line

graphics_draw_arc() - Draws a line clockwise in an arc shape between two angles in a specific GRect area. This function is better suited to centering circles correctly in the app than the older graphics_draw_circle(). That function makes it hard to center your circle between half-pixels. The new function makes this much easier.

Here is an example of what this would look like in code:

[code language="c"]
graphics_draw_arc(ctx, inset_bounds, GOvalScaleModeFillCircle, start_angle, end_angle);
[/code]

Drawing a Filled Circle

graphics_fill_radial() - Fills a circle clockwise between two angles. You can adjust its inner inset radius to create donut shapes too. This is favorable to the older graphics_fill_circle() for similar reasons to the arc function above but also because of the ability to draw donut style shapes.

Here is an example of this in action from Pebble's Time Dots" example:

[code language="c"]
int minute_angle = get_angle_for_minute(s_minutes);
GRect frame = grect_inset(bounds, GEdgeInsets(10));
graphics_context_set_fill_color(ctx, MINUTES_COLOR);
graphics_fill_radial(ctx, frame, GOvalScaleModeFitCircle, 20, 0, DEG_TO_TRIGANGLE(minute_angle));
[/code]

You can see this in action in the app here:

Placing Elements Around a Circle

gpoint_from_polar() - Returns a GPoint within a specified angle inside a GRect. Basically, provides a single point on a circle rather than a full circle. Great for placing elements an equal distance around a center point. For example, this is how the series of dots representing 12 hours are included in the "Time Dots" example above:

[code language="c"]
for (int i = 0; i < 12; i++) {
int hour_angle = get_angle_for_hour(i);
GPoint pos = gpoint_from_polar(frame, GOvalScaleModeFitCircle, DEG_TO_TRIGANGLE(hour_angle));

graphics_context_set_fill_color(ctx, i <= s_hours ? HOURS_COLOR : HOURS_COLOR_INACTIVE);
graphics_fill_circle(ctx, pos, HOURS_RADIUS);
}
[/code]

Pretty handy!

Enhance Your UI For Each Platform

Just because there's a round design does not mean all of your Pebble app designs should be circular from this point on. It may actually be more beneficial to adapt and adjust your design for the different form factors. Porting your existing apps from the rectangular platforms might really benefit from a shuffle of elements. A great example is Katharine Berry's CalTrain app which adjusts its interface for the round screen in a really nice way:

[caption id="attachment_115746" align="aligncenter" width="1000"] Image courtesy of Pebble[/caption]

The app features a lot of curves which looks quite good in action as you can see from Katharine's wrist on her way to work:

[caption id="attachment_115747" align="aligncenter" width="768"] Image courtesy of Katharine from Pebble[/caption]

Continue reading %What Developers Need to Know about the Pebble Time Round%

by Patrick Catanzariti via SitePoint