Developer Blog

Connect IQ 2: Widgets and Apps on Edge®

07/14/16 @ 06:47 PM

Cycling Monkey
The Edge platform is introducing application and widget support as part of the Connect IQ 2.1 launch! A whole suite of features previously found only on watches, such as Communications, Input Handling, Menus, and Progress Bars, will now be available to Edge devices. These features enable developers to create all-new and exciting content focused on our cycling user’s lifestyles.

How to Access Apps / Widgets

Getting access to new content on the Edge® couldn’t be easier.  A new “IQ” button is present on the bottom right of the Edge 1000 home screen that allows access to your apps. Clicking that button will reveal a list of your apps from which you can select:

Home Screen Apps Menu

Widgets are accessible via the status bar by swiping down on the home screen. Swipe left or right once the status bar is visible to cycle through your installed widgets:

Widget Screen Train

Platform Differences

The Edge platform has a lot more horsepower than Connect IQ 1.x devices:

    Faster CPU’s
    Bluetooth 2.1+EDR connection speeds (much faster Communication)
    More memory (1MB of RAM for apps on the Edge 1000)
    16-bit graphics

What does this mean to you, the developer? The Edge platform has the capability to run whatever graphically rich, complex and innovative applications you can throw at it.

New Development Tools

The Connect IQ 2.1 SDK provides new tools for developing apps and widgets on the Edge platform. The Edge 520 has a full set of buttons (and no touch screen) which brings it more in line with many of our watches. The Edge 1000 is a little different in that it has a large touch screen and a lack of buttons. To address this Connect IQ provides a few tools:

    A “button bar” with a back / menu button is nearly-always present at the bottom of the display
    A Selectable / Button framework for easily creating and interacting with on-screen objects

Below is a example screenshot of the Connect IQ simulator emulating an Edge 1000 application:

Checkboxes

Monkey C provides an interface for the second tool known as a WatchUi.Selectable. A Selectable is a state driven object that supports four optional built-in states which are set based on touch interaction:

    Default (:stateDefault) - Initial state
    Highlighted (:stateHighlighted) - Selectable is currently being pressed
    Selected (:stateSelected) - Selectable was pressed and released (i.e. tapped)
    Disabled (:stateDisabled) - Selectable has been disabled

A WatchUi.Button is derived from Selectable and adds the ability to define a background and map interaction to an existing or new custom method (i.e. onMenu()) within WatchUi.BehaviorDelegate. See how easy it is to create a layout defining two on-screen buttons:

<layout id="ButtonLayout">
    <button x="40" y="center" width="50" height="50" background="Gfx.COLOR_BLACK" behavior="onBack">
        <state id="stateDefault" bitmap="@Drawables.DefaultBackButton" />
        <state id="stateHighlighted" bitmap="@Drawables.PressedBackButton" />
        <state id="stateSelected" bitmap="@Drawables.PressedBackButton" />
        <state id="stateDisabled" color="Gfx.COLOR_BLACK" />
    </button>
    <button x="115" y="center" width="50" height="50">
        <state id="stateDefault" bitmap="@Drawables.DefaultMenuButton" />
        <state id="stateHighlighted" bitmap="@Drawables.PressedMenuButton" />
        <state id="stateSelected" bitmap="@Drawables.PressedMenuButton" />
        <state id="stateDisabled" color="Gfx.COLOR_BLACK" />
        <param name="background">Gfx.COLOR_BLACK</param>
        <param name="behavior">onMenu</param>
    </button>
</layout>

See the Programmer’s Guide for additional details on UI Buttons.

Go Forth and Create!

The Connect IQ 2.1 SDK Beta supports app / widget development on the Edge 1000 / Explore and Edge 520 now. You can get Biker Monkey beta for your EDGE 1000 or EDGE 520.

Don’t get dropped by your pals and start creating new things for the Edge today!

Categories: Connect IQ SDK