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 180×180 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’s Beta 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:

Layer *window_layer = window_get_root_layer(s_window);
GRect bounds = layer_get_bounds(window_layer);

Avoid this:

Layer *layer = layer_create(GRect(0, 0, 144, 168));

Instead, do this:

GRect bounds = layer_get_bounds(parent_layer);
Layer *layer = layer_create(bounds);

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:

graphics_draw_arc(ctx, inset_bounds, GOvalScaleModeFillCircle, start_angle, end_angle);

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:

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

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:

for (int i = 0; i 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:

Image courtesy of Pebble

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:

Image courtesy of Katharine from Pebble

Don't Detect Platform Specifically
The following ways to detect the platform your app is running on are bad:


  PBL_PLATFORM_APLITE
  PBL_PLATFORM_BASALT
  PBL_PLATFORM_CHALK


Instead, use:


  PBL_COLOR
  PBL_BW
  PBL_ROUND
  PBL_RECT



          
        New Macros Are Available
Want to detect if the system is round or rectangular? You can do PBL_IF_ROUND_ELSE and PBL_IF_RECT_ELSE.

How about detecting if we've got a color platform or a black and white one? You can use PBL_IF_COLOR_ELSE and PBL_IF_BW_ELSE.

Setting Platform Specific Resources
It is possible to set up platform specific resources for the different capabilities of each device by tagging them. The tag options include:


  rect - rectangular devices
  round - round devices
  bw - black and white devices
  color - color devices
  aplite - targets the aplite platform (avoid when possible just like PBL_PLATFORM_APLITE)
  basalt - targets the basalt platform (avoid too)
  chalk - targets the chalk platform (avoid too)


You can use them within their filenames and include multiple tags, for example grumpy-cat~bw.png, grumpy-cat~color.png, grumpy-cat~color~rect.png and grumpy-cat~color~round.png.

These tags do not need to be mentioned in your appinfo.json file, you can just define one single image like so:

[code language="js"]
"resources": {
  "media": [
    {
      "type": "png",
      "name": "GRUMPY_CAT",
      "file": "images/grumpy-cat.png"
    }
  ]
}

If you wanted to define an image solely for one platform, you can do that within appinfo.json too without tags:

"resources": {
  "media": [
    {
      "type": "png",
      "name": "GRUMPY_CAT",
      "file": "images/grumpy-cat.png",
      "targetPlatforms": [
        "chalk"
      ]
    }
  ]
}

Minimize Borders

The Pebble Time Round has already got a substantial bezel area around it. Even more border layers isn’t necessary. Keep software based bezels and borders around the app to a minimum. If your border means something, try to make it visually different to a flat, solid border. Use patterns and colors to represent information visually in the area. Avoid really thick and solid borders!

The Two Pixel Margin

The very edge of the Pebble Time Round screen has a two pixel margin that will be slightly overlapped by the watch’s bezel:

• Avoid having any text or visual cues within this space.
• Ensure background colors go all the way to the edge of your apps.
• Try not to use very thin bezel borders around the display as Pebble points out “manufacturing variations may cause them to be visibly off-center”.

Menus

Menus that use the MenuLayer component will work differently on the Pebble Time Round. Due to the fact we’ve got less space on the top and bottom of our display, menus will automatically center vertically on the currently selected option.

Pebble points out that you can show additional information about a menu element while it is highlighted in this center area, but then hide that information when the item is not the focused option.

If you are one of those imaginative developers who have put their own menu system together, you’ll need to keep this in mind. The functions menu_layer_set_center_focused() and menu_layer_is_index_selected() will be handy!

Scrolling Text Is Bad

Attempting to scroll text and reflow it around a circular space looks messy. Pebble recommends paginating this information instead so that you click an “indicator” to view more text that is not yet visible on screen.

Pebble’s SDK has a ContentIndicator component which you can read more about in the section of their docs about Displaying More Content in Round Apps.

3D Drawings Yet To Be Released

The 3D drawings of the Pebble Time Round are yet to be released but they’ve been requested and surely should appear soon enough. The drawings for the others are all here on their Github for 3D drawings.

Need Inspiration?

I’ve spotted a few apps in development for the Pebble Time Round. The Caltrain one I showed earlier is my favorite so far! Another I’ve seen from a fellow Pebble developer named robisodd is a pretty neat looking dartboard watchface:

This zoomed in watchface from Grégoire Sage is brilliant on the Pebble Time Round:

Another fantastic watchface is Le Fauve’s “Phase of Moon” watchface which tilts depending on your location:

One of the sample Pebble apps called “Concentricity” also looks quite neat:

Conclusion

The new device has opened up some interesting new design challenges and opportunities. Hopefully this article helps you to success in your first Pebble Time Round app! Get out there and give the new features a go in the CloudPebble emulator!

If you build any cool Pebble Time Round apps, please share them in the comments or get in touch with me on Twitter (@thatpatrickguy). I’m keen to see where developers take the new form factor.

I’ve got a set of curated links on Pebble development (including Pebble Time Round specific links) for those looking for a quick reference. Head over to Dev Diner and check out my Dev Diner Pebble Developer Guide, full of reference links used in this article, other great SitePoint articles and more. If you’ve got other great resources I don’t have listed – please let me know too!