How to Design a Device UI with Garmin Connect IQ


This is the first part of a three-part post about creating an app for the active lifestyle using the Garmin Connect IQ app system; part one focuses on UI design, while part two focuses on UI flow and recording the data, and part three focuses on recording metrics.

Garmin wearables are each designed for a specific use case, but that doesn’t mean they can only serve that use case. Connect IQ allows developers to create apps for entirely new use cases and metrics by combining the built-in sensors, ANT+® ecosystem and a little brain power.

To demonstrate this, we are going to develop a yoga app for Connect IQ. This app will combine heart rate, accelerometer and ANT to compute a new metric.

A yoga workout focuses on the ability to execute and hold sequences of poses. These poses can range in difficulty and can be adjusted to the level of the student. Much of the physical workout of yoga comes from holding the body in a complex position for a period of time.

Importing the Namaste Example

To try one of the Connect IQ sample apps, import it into your Eclipse workspace:

  1. Clone the connectiq-apps repository from GitHub [https://github.com/garmin/connectiq-apps]
  2. Click the File menu
  3. Select Import
  4. Choose Existing Projects into Workspace under the General section of the window, and click Next
  5. Click the Browse button, and select the connectiq-apps/apps/namaste sample
  6. If you prefer to work with a copy of the project, check Copy projects into workspace
  7. Click Finish to complete the import

Create the Run Configuration

To simulate the app, we first need to create a run configuration in Eclipse by following the directions in the Getting Started Guide. Choose the Forerunner 735 as the target device.

Now hit “run,” and you can see the result in the simulator:

On the Forerunner 735XT, the start button is the top right button. Click on that to start the recording.

Hey, look — that’s exciting! Well, actually, it looks kind of boring. Let’s make it look a little better.

A View to a Model

The UI for the app is fairly simple. The app starts with a message that instructs users to do the start action. When they start, they transition to a timer page. When they perform the stop action, they go to a menu with 3 actions: Resume, Save and Discard. If they select Resume, we go back to the timer; otherwise, we go to a progress bar before exiting the app.

The NamasteView provides the UI for the start and timer portion. It checks the controller to see if the timer is running and will display the timer if it is; otherwise, it will display the start prompt.

Layouts

Open up the resources/layouts/layouts.xml file. This file defines the layout for our main page.

<layout id="MainLayout">
    <label id="MainLabel" x="center" y="center" text="@Strings.prompt" color="Gfx.COLOR_WHITE" justification="Gfx.TEXT_JUSTIFY_CENTER" />
</layout>

We want to add a background image to our layout to give it a little visual flair. Thankfully, we already have one in the images directory. To add it to the layout, we add a bitmap tag.

<layout id="MainLayout">
    <bitmap id="YingYang" x="center" y="center" filename="../images/Yin_yang.png" />
    <label id="MainLabel" x="center" y="center" text="@Strings.prompt" color="Gfx.COLOR_WHITE" justification="Gfx.TEXT_JUSTIFY_CENTER" />
</layout>

Now let’s run the program in the simulator:

Much better (you should see Screen A).

One thing to note is the memory usage in the bottom of the simulator. Adding a bitmap image has consumed 27 KB of memory — yikes! On Forerunner 735, we are still way within limits, but let’s change the run configuration for vívoactive.

Oh, no (reference Screen B) — we’re almost out of memory!

Bitmaps

When importing images, Connect IQ will always default to the best available bit depth for the device. This means on 16-color devices, the images will be imported as dithered 4-bit images, while on RGB222 devices, the images will import as dithered 8-bit 64-color images.

Product Colors Bit Depth
fēnix® 3 16 (Palette) 4
fēnix 3 HR 16 (Palette) 4
quatix® 3 16 (Palette) 4
D2™ Bravo 16 (Palette) 4
D2 Bravo Titanium 16 (Palette) 4
Forerunner 230 16 (Palette) 4
Forerunner 235 16 (Palette) 4
Forerunner 630 16 (Palette) 4
Forerunner 735XT 16 (Palette) 4
Forerunner 920XT 16 (Palette) 4
vívoactive 64 (RGB222) 8
vívoactive HR 64 (RGB222) 8
epix™ 64 (RGB222) 8
Edge 520 65535 (RGB555) 16
Edge® 820 65535 (RGB555) 16
Edge® Explore 820 65535 (RGB555) 16
Edge® 1000 65535 (RGB555) 16
Edge® Explore 1000 65535 (RGB555) 16
Oregon® 700 series 65535 (RGB555) 16
Rino® 700 series 65535 (RGB555) 16

Connect IQ provides options that allow us to control our image import. In this case, we know our image is a two-color image that can be represented in 2 bits per pixel. Let’s inform the resource compiler of that fact.

    <bitmap id="YingYang" x="center" y="center" filename="../images/Yin_yang.png" dithering="none" >
       <palette disableTransparency="true">
           <color>000000</color>
           <color>555555</color>
       </palette>
    </bitmap>

There are many options in that block, so let's go through them one at a time.

By default, Connect IQ uses Floyd-Steinberg dithering when importing images. The dithering algorithm helps correct for the error when mapping a high-color image to a low-color space representation. This is preferable when importing a photograph, but when importing a graphic, it can introduce random pixels that aren’t wanted. To directly map colors, set the dithering attribute to "none."

If you have a low-color image, reducing the bit depth can save precious runtime memory. By setting the import palette, you can communicate the total number of colors the image should use. This block says the image should only use two colors — dark gray and black. The palette is bound to the colors available on a device. If you specify colors not available on a device, they will be mapped to the closest available colors.

When we run this in the simulator again, we will see our memory situation has improved (reference Screen C):

This imported the bitmap as a two-color bitmap with no transparency, which greatly reduced the memory required.

Overriding Layouts

Generally, you want your app to look great on all Garmin products, but it can be difficult making one layout that looks great on all screen shapes. Thankfully, Connect IQ provides tools to easily override resources for different product families. In our case, let’s say that on the rectangle products (vívoactive and Forerunner 920XT), we want the logo to be a bit smaller.

1.Create a new directory in the root of your project named resources-rectangle-205x148

2. Add a new subdirectory of the new directory called layouts

3. Copy the layouts.xml from resources/layouts to resources-rectangle-205x148/layouts/

4. Open up resources-rectangle-205x148/layouts/layouts.xml and change the content as follows:

<layout id="MainLayout">
    <bitmap id="YingYang" x="center" y="center" filename="../../resources/images/Yin_yang_sm.png" dithering="none" >
       <palette disableTransparency="true">
           <color>000000</color>
           <color>555555</color>
       </palette>
   </bitmap>
    <label id="MainLabel" x="center" y="center" text="@Strings.prompt" color="Gfx.COLOR_WHITE" justification="Gfx.TEXT_JUSTIFY_CENTER" />
</layout>

5. Build the app for the vívoactive simulator

Now, the app will look like Screen D.

This is known as resource overriding. The resource compiler will continue to draw resources from the base resources folder, but allows you to override resources based on device or device family. A device family is a grouping of devices based on the screen characteristics of shape and size. This allows you to have a base set of resources, but have different layouts based on the products and screen shapes you choose to support. Any resource folders containing device qualifiers will always take priority over folders containing family qualifiers.

The following table provides the available family qualifiers allowed with resource overrides:

Qualifier Type Qualifier Values Examples Description
Screen shape round, semiround, rectangle, etc. The shape of the screen; examples of round screens include fēnix 3 and D2 Bravo.
Screen size 218x218, 148x205, etc. The physical size of the screen in pixels
Language and region fre, fre_FRA and fre_CAN ISO 639–2 language code followed by an optional ISO 3166–1 3-letter country code. To include a region code, append it after the language code with an underscore (_) separating the 2. A region cannot be specified alone. These qualifiers are only applied to string resources.

To get started with Connect IQ and see where your innovation takes you, go to the developer site and download the free SDK.

About Connect IQ:
Connect IQ launched in early 2015 with the goal of making Garmin devices open to the developer ecosystem and subsequently to consumers for personalizing their devices. Since the launch of Connect IQ last year, Garmin has launched many more Connect IQ-enabled wearables in addition to the first compatible bike computer and handheld GPS unit. The new SDK just launched last month as well. Check it out here! For more information on Connect IQ, please see this overview page.

About Garmin:
For decades, Garmin has pioneered new GPS navigation and wireless devices and applications that are designed for people who live an active lifestyle.  Garmin serves 5 primary business units, including automotive, aviation, fitness, marine and outdoor recreation. For more information about Garmin, visit our virtual pressroom at garmin.com/newsroom, contact the Media Relations department at 913-397-8200, or follow us at facebook.com/garmin, twitter.com/garmin, or youtube.com/garmin.
 

Nicolas Kral

Comments