Quantcast
Channel: Garmin Developer Blog
Viewing all 93 articles
Browse latest View live

A Connect IQ Halloween

$
0
0

My Buddy and Me

Hope you all had a happy Halloween. Here at CIQ HQ we had the annual department Halloween donuts/costume competition. One of the winning entries was the Face-It™ Machine, an anthropomorphized version of the Face-It app. The Face-It Machine came complete with pre-made watch faces of various team members.

En-Faced

From the Garmin Cochrane office came this adorable costume: a Portal Sentry Turret!


Connect IQ 2.2.1 Now Available!

$
0
0

Looking for a break from non-stop election news? Connect IQ is here for you!

Connect IQ 2.2

Connect IQ 2.2.1 is now available. This update is targeted for Connect IQ compatible Edge®, Rino®, and Oregon® devices.  Devices now get support for Connect IQ Intents, PersistedContent, and the new AntPlus. The big news for the Oregon and Rino is that they now support Connect IQ 2.x including widgets and apps! Get the SDK today and get started!

Wearable Programming for the Active Lifestyle


The Connect IQ book, Wearable Programming for the Active Lifestyle, is now available… for free! This e-book covers topics like wearable programming, web services, ANT, activity recording, and the wearable future. And did we mention that it’s free? Get the book today!

Connect IQ Summit : Apply Today

$
0
0

SummitLogo

We are now taking applications for the first ever Connect IQ summit! Held at Garmin HQ on April 18 - 20th, 2017, this summit will feature workshops by the Connect IQ team, talks from Garmin and industry leaders, and one of a kind networking events. Participants also get a free Connect IQ device!

Space is limited, so apply today. Hope to see you there!

Connect IQ 2.2.2 Now Available!

$
0
0

Devices

Connect IQ 2.2.2 is here! This release adds a new feature we are very excited about: remote app launch. Users of the Mobile SDK can now request their Connect IQ app be launched from an Android or iOS app. If the device is able to handle the request (has the app, isn’t currently running an activity or app), the user will be presented with a notification asking if they want to launch the app in question.

Remote launch

This SDK addresses a number of reported issues in the Mac and PC SDK. There are corresponding updates to the Android and iOS mobile SDKs as well. Download the SDK today!

Connect IQ 2.2.3 Now Available!

$
0
0

Fenix 5

Connect IQ 2.2.3 is here! This version adds support for the new fēnix 5 family, the latest Connect IQ compatible multisport wearables announced at CES. The fēnix 5S is lighter, sleeker and smaller than previous models – perfect for small wrists without sacrificing multisport functionality. The fēnix 5X boasts preloaded wrist-based mapping; and the compact fēnix 5, like other fēnix watches, is feature-packed and ready to take on any adventure with an all-new industrial design. All of the fēnix 5 models are 24/7 wearable with extended battery life, daily activity tracking, Garmin Elevate™ wrist heart rate technology, and a host of connected features. And users can easily switch between stylish leather and metal accessory bands to sporty silicone in seconds and without tools, thanks to the new QuickFit™ bands.

You can see the new capabilities of the devices in the table below:

Device Resolution (px) Icon Resolution Colors Available Button Functions Screen Type Touch Screen
fēnix™ 5S 218 x 218 40 x 40 64 up, down, enter, back, menu round No
fēnix™ 5, fēnix™ 5X 240 x 240 40 x 40 64 up, down, enter, back, menu round No

Note - we will not be auto-migrating apps to the Fenix 5 family. Get the SDK today to develop for the Fenix 5!

UBER ETA

Also exciting is the new UBER ETA app by Garmin. Uber ETA lets you check your driver’s pickup ETA, driver details, and the ETA to your destination on Garmin wearables that the same way you check the time: with a flick of the wrist.
UBER ETA by Garmin

The first time you run the application, you will need to log into your Uber account through the Garmin Connect Mobile application. Once you’ve completed the login, any time you request an Uber, the ETA app will show you the time until your ride arrives, guide you to your pickup location, and keep you updated on your ETA during your ride.

UBER ETA by Garmin is available today on the Connect IQ store.

From One Platform to Another : Tales of a Pebble Refugee

$
0
0

Happy
Today’s post was written by Franco Trimboli, an Australian developer who has published a number of apps for the Pebble platform. He’s recently begun developing apps for Connect IQ and has written this guest post about his experiences.

For many, the Pebble was the first smartwatch they would own. With all the fanfare of a record-breaking Kickstarter campaign, the original Pebble opened up a world of notifications - right there on your wrist. And of course, custom apps. Most developers, including me, jumped at the opportunity to be part of this new community of user friendly, wearable computing.

Fast forward to the present, and sadly Pebble is no more. The health features and long battery life had me keen on replacing my Pebble with something similar.

Being a wearable tech nut, I purchased a Garmin fēnix® 3 right around the same time as my Pebble Time. Like it’s namesake, the fēnix emerged from the dark corner of my drawer and became my daily watch. Now while I love my fēnix 3, other hardware in Garmin’s wheelhouse delivers a more Pebble-esque experience; I recently played around with a vívoactive® HR and it’s like the love child of a Pebble Time and Pebble 2 with an always on color touch screen.

Previously, my reluctance to wear the Garmin rather than the Pebble came from my initial experience with Garmin’s back then embryonic ecosystem. Well, I’m happy to say much has changed since. I was immediately surprised with how far Garmin’s ecosystem has evolved. In particular, Garmin’s SDK — Connect IQ (CIQ) — has come a long way. The discovery of Garmin’s Forum, which delivered helpful insights by seasoned CIQ developers, was a turning point for me. It clearly made me understand how rich the Garmin ecosystem is — widgets, data fields, wireless sensors, apps, and of course, watch faces.

The CIQ learning curve isn’t too hard. If you’ve ever built a Pebble watch face — either in C, or Rocky.js — you’ll find the transition relatively straightforward. Monkey C is an OO language, and unlike C on the Pebble, Monkey C runs in it’s own VM and performs it’s own memory management through reference counting. The CIQ dev environment is integrated with Eclipse. However, I’m not a fan — so I tend to code in a shell, just like the Pebble cmdline and QEMU.

If you’re curious, here are some of the watch faces that I’ve built over the past few weeks.

More Similar Than Different

NyanCat
If you’ve developed apps on Pebble’s SDK — or even if you’ve just messed around with a few watch faces — building on Garmin’s CIQ should be a cinch. In this post, I’ve tried to outline a few helpful hints on the similarities and differences of both platforms:

Package.json is now Manifest.xml

Analogous to Pebble’s package.json, the manifest.xml in CIQ provides essential information about your app. At a high-level, it allows you to define the devices, the access privileges, as well as the device capabilities to be supported — it also instructs the run time on the entry point of your your app (think main() on the Pebble).

Battery Life

Garmin’s background is in making wearables for athletes, where long battery life is essential. CIQ devices run in a low power mode most of the time, and return to high power mode when the user wakes up the device with a button tap or gesture. As such, watch faces only (usually) update on minute increments. 

On a Pebble, you have the flexibility of managing the update interval with tick_timer_service_subscribe with the granularity of a second. In CIQ, watch faces implement the onUpdate method to handle display update events from the system. While this seems like a limitation, it makes sense when your objective is to save battery. The good news is that CIQ provides the onExitSleep and onEnterSleep events so that developers can trigger something useful on the screen like a field update or animation. It’s analogous to the accel_tap_service_subscribe event on a Pebble.

Network

Continuing with the theme of battery life, watch faces are limited to certain API features so they can’t do things like retrieve weather or stock data. While this may seem limiting, Garmin’s approach is to use purpose built widgets to deliver weather and news. Widgets in CIQ take us back to Pebble OS 1.0 — where you could flick through different “apps” by scrolling up and down. Widgets are a great way of accessing data without having to bake it all into a watch face or launch an app.

However, CIQ does have some tricks up its sleeve. Widgets or apps can do things like make web requests in ways you’re familiar with — but with less setup and coding. Normally, on the Pebble you would offload this via XMLHttpRequest through pebble-js and then handle the event with events_app_message_register_inbox_received. With CIQ, this is managed neatly in one place with makeWebRequest with an async callback, allowing you to do some interesting things like manage the request payload from within the logic of your app without having to manage code in two different codebases/languages. 

CIQ can also grab, downsample and render an image from the network using makeImageRequest. So you can build cool things, such as grabbing the latest frame from a network security camera, without having to do all the heavy lifting.

Memory

As Pebble apps are built in C, they require careful management of memory. Pebble’s SDK uses functions suffixed with _destroy to do this, ie; to remove a typical screen from memory, you’ll be running bitmap_layer_destroy, gbitmap_destroy, and text_layer_destroy — as a minimum.

As CIQs runtime is reference counted, the Monkey C VM manages most of this for you. Clearing objects usually only requires that you set them to “null”. Also, as an object-oriented language, you gain the advantage of objects, class inheritance, etc. That being said, CIQ has helper methods to keep an eye on the memory ceiling.

While, both Pebble and CIQ support 64kb per watchface, more recent Garmin devices offer up to 128kb of memory for apps.

Resources

Just like on a Pebble, you can define and access custom image bitmaps and fonts. On the Pebble platform, you’d define resources - and their corresponding IDs - within the resources item in package.json. You would then access those resources via their names or handle IDs within your code.

Similarly, CIQ defines resources this way, but within an XML file known as resources.xml. CIQ also allows you to define platform specific resources using separate resource directories - for example, using resources-round-218x218 to support all round watches with a resolution of 218 x 218.

Images

Likewise with Pebble, images are converted and stored internally as 1, 4, or 8-bit formats. This allows you to support many devices and bit depths from 2 colors to 64 colors.

On the Pebble, you’d manage the bit-depth of images via memoryFormat in package.json. Within CIQ, it’s a little easier. All you need to do is define the colors you want to display (as hex values) within a <palette> node from within your resources.xml file. The nice thing about CIQs approach is that the resource compiler handles the rest, including the re-sampling and dithering. This saves you generating many different image types and bit depths.

In your code, loading bitmaps uses the unified resource method; loadResource(Rez.Drawables.RESOURCE_ID) which corresponds to Pebble’s more specific gbitmap_create_with_resource(RESOURCE_ID) method.

Fonts

Pebble made it easy to include TrueType fonts within your app. You’d define unique resource identifiers - ie; FONT_VERDANA_BOLD_42 - and the compiler would go away and create a 1-bit bitmapped version of the font. Multiple resource identifiers (BOLD_16, BOLD_42) were needed for each glyph size which increased memory usage.

It’s a little more involved with Garmin. CIQ requires that you first convert the TTF to a bitmap font in the FNT format. This generates an image bitmap, with the font glyphs, and a descriptor file. Luckily, the Garmin folks reference a conversion tool, and there’s a number of open source FNT converters out there. Personally, I prefer the Garmin way, as you can edit the bitmap, and add custom glyphs and icons. In fact, my Segment watch face is built pixel-perfect from a bitmap font I hand-crafted.

On a Pebble you access your fonts through fonts_load_custom_font(resource_get_handle(RESOURCE_ID)). On CIQ, you use the unified resource method, as before, to load your fonts; loadResource(Rez.Fonts.RESOURCE_ID).

Frame Buffer

Unlike Pebble devices, you don’t have direct access to the frame buffer / canvas. You can only write to the screen using text, bitmaps, and dot / line / polygon primitives. While this seems limiting, the reality is that you seldom need to do any hardware level byte-blitting on the screen.

Layout engine

One of the advantages of Garmin’s platform, is the built-in layout engine. Unlike the Pebble ecosystem, Garmin has many different devices with a multitude of screen sizes and resolutions. The layout engine makes it easy to define one or more responsive views, including text fields, data fields, and images.

Properties and Settings

CIQ allows watchfaces and apps to define and store their own properties. This is handy to store and edit user settings. Pebble has a 4kb limit, while CIQ allows up to 8kb per app.

With Pebble, there’s a few ways to do this - through the Persistent Storage API, or via Clay. Using Clay you’d define your apps properties using messageKeys within package.json - and then define how they’re configured through a Clay config.json file. Then within your app, you’d define the values within a struct, and register app_message_register_inbox_received to read tuples from a dictionary. To persist settings, you’d then call persist_write_data to store your properties.

On CIQ, it’s a magnitude easier. Properties have unique keys and types (Number, String, etc) which are defined within a properties.xml file. The corresponding settings are defined within a settings.xml file, referencing the property keys you wish to expose to your users. Accessing properties and settings is as simple as calling a getProperty method in your app. Whenever a user changes a setting, the onSettingsChanged method is called, allowing you to register any callbacks to update your app.

Starting with examples

There’s nothing like traversing through other people’s code when you’re learning the ropes of a new platform. Garmin recently published a three part series (part 1/part 2/part 3) that overviews creating an app from recording metrics to UI development, as well as a sample on using the OAUTH system. You can also download a free e-Book that gives an overview of the Connect IQ system.

I’ve made my Nyan Cat watch face open source — feel free to grab it on GitHub and play around with it.

Conclusion

While it’s too soon to tell, the team at Garmin seems responsive and willing to listen to issues and feature requests from both users and developers alike. The CIQ team are great listeners, and are willing to consider features that developers want no matter who proposes them. In many ways, this feels similar to the early days at Pebble. While there’s a smaller dev community, in general folks seem more willing to help out, and share their code & knowledge at the drop of a hat.

This year, Garmin seems poised to give their developer community a new opportunity to flourish. Only recently, they announced a 3-day dev summit at their HQ, and they’re (amazingly) giving away devices like the fēnix 5 to developers! It’s a good opportunity to rub shoulders with like-minded developers, and learn the ropes about building apps in the wearable space.

So, if you’re a Pebble refugee and you’ve got the itch to build something useful — or just plain fun — give the SDK a whirl, and join the emerging group of developers building on this platform.

Connect IQ 2.2.4 Now Available!

$
0
0

Connect IQ 2.2.4 is now available! The big changed items are:

  • Fixed a compiler bug where launcher-icon resources could not be properly overridden using device families.
  • Added support for APAC Fenix5 devices
  • Updated minimum firmware versions for the vivoactive HR

Download the SDK today!

Connect IQ Top Apps: Jan 2017

$
0
0

We are trying out a new thing where we publish the most popular apps of the month. Note that this list is meant to promote your hard work, and removes Garmin apps, pre-loaded apps, and featured apps from the list. The “Buzzed” column includes apps that people found via social media.

           
Place Watch Face Data Field Widget App Buzzed
First

ActiFace

Single Run Field

Battery Meter

dwMap

Fenix

Second

GearMin

Heart Rate Zones Chart

Compass G2

Maps r.485

Maps r.485

Third

No Frills

Race Screen

Position

Cycling App Professional

7-Minute Workout


Connect IQ - BLE Direct Messaging Updates

$
0
0


The BLE Direct Messaging link feature of the Connect IQ SDK has received an overhaul with a focus on:

  • Reduced data transfer latency
  • Ability to remotely launch an application on the watch

All wearable devices (except for Epix) support these features as of the Connect IQ 2.2.3 SDK and Android / iOS Mobile 1.3 SDK releases.

Faster Data Transfer

A new lower latency API for direct messaging is now available for watch apps that communicate directly with a phone app via the Connect IQ Mobile SDK. These apps will receive a speed boost once they implement the new registerforPhoneAppMessages API, which is used to receive messages from a phone app. The behavior of this new API should be familiar with users of registerForOAuthMessages, since it shares the same base Message type. If messages are received when no callback is registered with this API, they are saved on the device until the storage limit for messages is reached. Any messages that are saved on the device will be sent to the specified callback after it is specified in registerforPhoneAppMessages. The transmit API is used to send messages directly to a phone app. A connection listener is registered with each transmit to receive the status of the attempted transmission:

//! Register a callback for receiving Phone App messages. The callback will be called
//! once for each message received. If there are messages waiting for the app when this
//! function is called, the callback will immediately be called once for each
//! waiting message.
//! @param method [Method] The callback with the signature callback(data). Data will be of
//!                        type PhoneAppMessage
//! @since 1.4.0
native function registerForPhoneAppMessages(method);

//! Send data across the the BLE link.
//! @param [Object] The object to be sent
//! @param [Dictionary] options Additional transmit options (TBD)
//! @param [ConnectionListener] listener An extension of the
//!       ConnectionListener class.
function transmit( content, options, listener );

//! Listener class for transmit
class ConnectionListener
{
    //! Callback when a communications operation error occurs.
    function onError();

    //! Callback when a communications operation completes.
    function onComplete();
}

The existing mailbox API has been deprecated in ConnectIQ 2.2 and registerforPhoneAppMessages should be used instead for the aforementioned performance gains. An example of using both together in practice:

using Toybox.Communications;

class Example {
    function initialize() {
        var mailMethod = method(:onMail);
        var phoneMethod = method(:onPhone);
        if(Communications has :registerForPhoneAppMessages) {
            Communications.registerForPhoneAppMessages(phoneMethod);
        } else {
            Communications.setMailboxListener(mailMethod);
        }
    }

    ...

    // @param [MailboxIterator] mailIter
    function onMail(mailIter) {
        var mail = mailIter.next();

        while(mail != null) {
            // Do something with mail
            mail = mailIter.next();
        }

        Communications.emptyMailbox();
    }

    // @param [PhoneAppMessage] msg
    function onPhone(msg) {
        // Do something with msg.data
    }
}

The setMailboxListener and registerForPhoneAppMessages APIs are mutually exclusive and cannot be used at the same time in an app. If both listeners are registered, the deprecated mailbox listener will not receive any callbacks; messages will only be sent to the registerForPhoneAppMessages listener.

Opening an App on a Watch

The 1.3 updates for both the iOS and Android Mobile SDK’s allow you to prompt the user to open a Connect IQ application on their device. If the user chooses to open the app then it will be immediately opened. Only watch-apps may be launched remotely; launching widgets, data-fields and watch-faces is not supported.

Android

For Android you can use the openApplication API to request the remote launch. A response from the device will be returned to your IQOpenApplicationListener:

connectIQ.openApplication(device, app, new IQOpenApplicationListener() {

    @Override
    public void onOpenApplicationResponse(IQDevice device, IQApp app, IQOpenApplicationStatus status) {
        // Handle the response here
    }

});

See the Comm sample application included with the Android Mobile SDK for an example implementation.

iOS

For iOS you can use the the openAppRequest: method to request the remote launch:

[[ConnectIQ sharedInstance] openAppRequest:app
                                completion:^(IQSendMessageResult result) {
    switch(result) {
        case IQSendMessageResult_Success: NSLog(@”Popup was displayed”); break;
        case IQSendMessageResult_Failure_PromptNotDisplayed: NSLog(@”Popup was
                displayed”); break;
        case IQSendMessageResult_Failure_AppAlreadyRunning: NSLog(@”Popup was
                displayed”); break;
    }
}];

See the ExampleApp sample application included with the iOS Mobile SDK for an example implementation.

What’s Next?

Both of the samples included with the Android / iOS Mobile SDK’s have been updated to support remotely launching Comm sample from the Connect IQ SDK, which also now supports new registerForPhoneAppMessages API for faster communication. Get the SDK’s today to start playing with the new features!

Connect IQ Pro Tip: Custom Fonts Tricks

$
0
0

This guest post was written by Hermo Terblanche, a Connect IQ developer in South Africa.

Have you ever seen an app in the Connect IQ app store that made you wonder, “That is so cool! How did the developer do that?” In order to draw attention to your app you need to stand out from the rest, by for example applying some really cool font tricks. In this blog post I am going to let you in on some of my secrets from my own Connect IQ creations. Hopefully this will inspire you to create your very own jaw-dropping apps for Garmin Connect IQ devices.

Let’s jump straight into the magic! You’ll need the following tools:

  • BMFont - For exporting fonts to the required format for Connect IQ. You can read more about this in the Programmer’s Guide as well as the UX Guide
  • Graphics editor / Tool - For editing font png files. I prefer to use Photoshop to achieve the desired effects, but they can also be achieved using GIMP

Font Reflection

This technique is really simple and could easily be achieved in one of two ways:

Approach A

For the watch face Summer Sunset, I used a free font called Sunset that I downloaded and exported to a PNG using BMFont.

This font combines each number and its corresponding reflection into a single glyph. This means that when you draw a number, it draws both the number and reflection as a single character.

The benefit of this approach is efficiency: you only need a single font which requires fewer resources and results in a smaller compiled PRG file. Also, your code also runs cheaper as you only need a single statement to draw the number which is more battery friendly. Finally you don’t have to separately manage the positioning of drawing a number’s reflection, making this the simplest approach.  The downside is that you cannot have separate colors for the number and its reflection because the glyph is treated as one atomic character, and only one color can be applied to the glyph as a whole.

To see the skyline behind the time, you first draw the skyline, then you specify a transparent background color for the font and finally draw the time on top of the skyline:

//draw skyline here
..
//load custom font
var font = Ui.loadResource( Rez.Fonts.Sunset );

//set the time's color and draw it
dc.setColor(Gfx.COLOR_DK_GREEN, Gfx.COLOR_TRANSPARENT);
dc.drawText(timeX,timeY, font, timeStr, Gfx.TEXT_JUSTIFY_CENTER);

This approach is the most straightforward and does not need any further image processing of the font once it has been exported using the BMFont tool.

Approach B

The Reflection watch face is a bit more advanced and involves some image processing, but it offers the benefit of specifying a different color for the time and the reflection.

This approach uses two separate fonts. For this I also downloaded a free font and exported it to a PNG using BMFont. I then duplicated the *.PNG and *.FNT files and renamed them to something meaningful so I could easily distinguish between the files of the two different fonts. Using some Photoshop skills I transformed each glyph in the duplicated PNG file to look like a reflected character. It is important to keep in mind with this approach is that it works best with a monospaced font; having constant glyph sizes in both fonts makes it easier to align the normal and reflected time when drawing. Without going into too much detail about the exact image processing steps, here is a basic outline of what to do:

  • For each glyph (one at a time):
    • Use the selection tool to select a glyph
    • Use the transform menu and flip the selection vertically
    • Using the transform menu, either skew or distort the selection to get the desired angle of the character. Keep in mind that you cannot skew too much because you want the reflection of the time to still fit within the screen. In the screenshot above you will notice that the bottom of the reflected “1” touches the screen boundary. A more skewed effect will cause the reflected “1” to be clipped. You have to experiment a few times to get it right. This step is the most challenging, but also the most rewarding one!
    • You have to move the transformed selection to align it alongside other transformed glyphs. This makes it easier to specify the character coordinates in the *.FNT file.
  • Save the png for the reflection font once all glyphs have been transformed.
  • In Photoshop, use the selection tool to find the new x, y coordinates for each transformed glyph, and change the corresponding values in the duplicated *.FNT file.
  • Make sure to point the file property in the duplicated *.FNT file to the duplicated *.PNG (reflected font).
  • In code load your two fonts, and after you’ve drawn the normal time, you draw the same time using the reflection font. For the reflected time, you need to align the characters with the bottom of the normal time’s characters.

Below is an illustration of some of the glyphs from the normal font and their corresponding reflected glyphs in the reflection font.

//load custom font for the normal time
var normalFont = Ui.loadResource( Rez.Fonts.Normal );
//load custom font for the reflected time
var reflectedFont = Ui.loadResource( Rez.Fonts.Reflected );

//set the normal time's color and draw it
dc.setColor(Gfx.COLOR_DK_GREEN, Gfx.COLOR_TRANSPARENT);
dc.drawText(timeX,timeY, normalFont, timeStr, Gfx.TEXT_JUSTIFY_CENTER);

//set the reflected time's color and draw it
dc.setColor(Gfx.COLOR_ORANGE, Gfx.COLOR_TRANSPARENT);
dc.drawText(offsetX,offsetY, reflectedFont, timeStr, Gfx.TEXT_JUSTIFY_CENTER);

Fonts With Two Colors

Connect IQ supports only one color in custom fonts. This is because the font’s PNG is a grayscale image and therefore has only one channel. You cannot create a font to display multiple colors. Below is an illustration of the concept that is not possible within a single font:

But fear not! With some clever tricks it is possible to create the effect of a font that displays multiple colors. The watch face Watch Me displays its time using two colors: white border and blue fill.

The magic behind this trick involves a combination of two fonts with different masks. Below is an illustration of some of the glyphs from the two different font masks. The top image is the font for the border, while the bottom font is for the inner fill. An easy way to remember which is which, is to remember that white is the area that will be drawn onto the screen in a color of your or the user’s choice.

The top mask is the original font that was exported using the BMFont tool. For the bottom mask I created a duplicate of the top mask, and then basically inverted the colors to ensure it will only draw the inner area in a specific color.


//load custom font for the border
var borderFont = Ui.loadResource( Rez.Fonts.Border );
//load custom font for the inner fill
var innerFillFont = Ui.loadResource( Rez.Fonts.InnerFill );

//set the time's border color and draw it
dc.setColor(Gfx.COLOR_DK_GREEN, Gfx.COLOR_TRANSPARENT);
dc.drawText(timeX,timeY, borderFont, timeStr, Gfx.TEXT_JUSTIFY_CENTER);

//set the time's inner fill color and draw it
dc.setColor(Gfx.COLOR_ORANGE, Gfx.COLOR_TRANSPARENT);
dc.drawText(timeX,timeY, innerFillFont, timeStr, Gfx.TEXT_JUSTIFY_CENTER);

Font With a Diagonal Orientation

The idea to write text with an orientation other than horizontal is not something I innovated; I first saw it in another watch face in the store. Being a curious developer I had to try it out myself. The result of this experiment can be seen in my watch face South Africa. The time is displayed diagonal in either an ascending or descending orientation based on a user’s preference. Each orientation is created with its own separate font.

You need to apply a rotation factor to each glyph in your font PNG. Rotating the glyphs will result in glyphs that are slightly bigger than the original. Below is an illustration to get an idea of what the PNG for each font looks like after all glyphs have been rotated:

When drawing text diagonally, you can no longer draw the string as a single entity; otherwise you’ll just end up with a horizontal line of text with tilted characters, similar to what you now see in the above illustration. The real trick is to draw each character individually, but for each character adjust the y and x coordinates appropriately. For descending orientation, you need to increase the y coordinates, and for ascending you need to decrease it. The x coordinate will always increase in both scenarios. The glyphs have to overlap each other in order to create the diagonal effect. This is where a transparent background color does the trick!

The angle of rotation that you would like for your font is all up to you and you can experiment with different degrees of rotation in your graphics editor. In order to know where to draw the next character, you could maintain an array of coordinates. It is a lot easier to manage and draw diagonal text using a monospaced font because any character can be drawn at the same coordinate without causing gaps of varying size between adjacent characters.

//predefined coordinates based on diagonal angle and orientation
var ascCoords = [[21,143],[42,129],[62,119],[73,108],[93,95]];
var descCoords = [[21,34],[42,48],[62,58],[73,69],[93,82]];

//set background color transparent to prevent clipping of characters
dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_TRANSPARENT);

//string to be drawn
var time = clock.hour.format("d") + ":" + clock.min.format("d");

var coords, font;

//determine the font and coordinates to use based on orientation
if(Orientation == “Descending”){
	coords = descCoords;
	font = Ui.loadResource(Rez.Fonts.fontDesc);
}
else{
	coords = ascCoords;
	font = Ui.loadResource(Rez.Fonts.fontAsc);
}

//draw each character individually
for( var i = 0; i < time.length(); i++ ) {
	var char = time.substring(i,i+1);
	dc.drawText(coords[0], coords[1], font, char, Gfx.TEXT_JUSTIFY_LEFT);
}

Dynamic Color Filling

In my signature watch face NoFrills, I use an easy trick to create a special effect that makes the time fill up with water. It effectively serves as a progress gauge for activity tracking, while at the same time conserves real estate on the screen. Talk about a dual-purpose clock!

You only need a single font for this trick, and best of all: there is no image processing required. Only the power of Connect IQ is enough to achieve this! Again, a monospace font provides the best results and is simpler to work with.

  1. Determine the size and coordinates of the area (rectangle) that the text you would like to draw, will occupy on the screen.
  2. Draw a filled rectangle of this size at the predetermined coordinates. The color of this rectangle should be the color that you would normally have used for the text.
  3. Draw any special effects on top of the filled rectangle, but before you draw the text. In NoFrills’ case, I draw the filled rectangle that represents the water level.
  4. Set the foreground color of your text to transparent and the background color to something else, like the background color of the screen. This effectively creates a mask that clips everything you have drawn in the previous steps.
  5. Now draw your text on top of it all, compile and run it and finally stare in awe at your amazing production!
//load custom font
var font = Ui.loadResource( Rez.Fonts.MyFont );

//draw filled rectangle to represent text’s color
dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_WHITE);
dc.fillRectangle(rectX, rectY, width, height);

//draw filled rectangle to represent water level
dc.setColor(Gfx.COLOR_BLUE, Gfx.COLOR_BLUE);
dc.fillRectangle(effectX, effectY, width, effectHeight);

//create and draw the clipping mask
dc.setColor(Gfx.COLOR_TRANSPARENT, Gfx.COLOR_BLACK);
dc.drawText(timeX, timeY, font, timeString, Gfx.TEXT_JUSTIFY_CENTER);

You can find Hermo on Twitter, Facebook, Instagram, and the Connect IQ Developer Forum. See Hermo’s Connect IQ apps in the Connect IQ Store.

Connect IQ : Important Updates

$
0
0

There are a few things changing or rolling out in the next few weeks that we’d like all of you to be aware of.

fēnix® Chronos is now a fēnix 5s

If you have started development for the fēnix 5s, you will know while it shares the same screen shape and resolution with the fēnix 3 family, the fonts are bolder to be more readable with the smaller screen. If you take advantage of our resource family system, this causes problems when you create apps for the fēnix 3 family and the fēnix 5s; as now you potentially need to keep two resources

resources-round-218x218/layouts.xml
resources-fenix5s/layouts.xml

In a future fēnix Chronos update, currently in beta, the firmware will shift from being based on the fēnix 3 to being base on the fēnix 5s. For you Chronos readers out there – congratulations, you’re getting a software upgrade! For Connect IQ developers – congratulations, all of the fonts will change to match the 5s! This has an effect on existing fēnix Chronos apps, as well as new development. For example, now you need three resource directories:

resources-round-218x218/layouts.xml
resources-fenix5s/layouts.xml
resources-fenixchronos/layouts.xml

Clearly this is less than ideal. The Connect IQ team is working on an SDK update that will change the fēnix Chronos simulator to match the fēnix 5s fonts, as well as make it easier to support both devices. Our goal is to make adapting your app to the new fēnix 5s as smooth as possible.

Changes to makeWebRequest

Apple introduced App Transport Security (ATS) in iOS 9. From the iOS 9 release notes:

App Transport Security (ATS) enforces best practices in the secure connections between an app and its back end. ATS prevents accidental disclosure, provides secure default behavior, and is easy to adopt; it is also on by default in iOS 9 and OS X v10.11. You should adopt ATS as soon as possible, regardless of whether you’re creating a new app or updating an existing one.

If you’re developing a new app, you should use HTTPS exclusively. If you have an existing app, you should use HTTPS as much as you can right now, and create a plan for migrating the rest of your app as soon as possible. In addition, your communication through higher-level APIs needs to be encrypted using TLS version 1.2 with forward secrecy. If you try to make a connection that doesn’t follow this requirement, an error is thrown. If your app needs to make a request to an insecure domain, you have to specify this domain in your app’s Info.plist file.

Up until now, Connect Mobile has allowed makeWebRequest to communicate over HTTP and HTTPS because it defined the NSAllowsArbitraryLoads permission. However, Apple has a declaration that all iOS 10 apps should support ATS by the end of 2017.

In light of this, Connect IQ will require that calls to makeWebRequest communicate only with ATS compliant servers.  In a future update the simulator is now going to check to make sure that all requests are talking to properly secured servers, and we will be removing NSArbitraryContent in an upcoming version of Connect Mobile.

App Store Update

A number of issues causing the app store mistakenly prevent users from downloading an app because it believes their firmware is out of date have been resolved. As long as users sync their device after they complete a software update they should be able to download the latest content. If you continue to see issues, please let us know on the developer forum.

New SDK and the Connect IQ Developer Awards Nominees

$
0
0

Today we are releasing the Connect IQ 2.2.5 SDK, which adds support for the Forerunner 935 as well as additional bug fixes.

Get the SDK today!

With that out of the way, it’s time to announce… (drum roll)...

Connect IQ Developer Awards

At this year’s Connect IQ Developer Summit, which will be held at Garmin headquarters April 18th - 20th, we will be presenting the first ever Connect IQ Developer Awards that highlight the content from the Connect IQ Developer Community. The apps were nominated by members of the Outdoor, Fitness, and Connect IQ teams. Only apps developed by developers outside of Garmin qualify for the awards. The nominated apps are below:

Best Watch Face

     
Actiface Gear Min No Frills

Petr.Koula

_MASHAKE_

HermoT

Best Wearable Smart App

     
dwMap Watch Out Note 2 Watch Nightscout CGM Watch

mappicus

trillion

rconradharris

andreas-may

Best Wearable Workout App

     
Shred Deck Workout Genius Race Screen

devshed42

geniuswrist

dp0750

Best EDGE App

     
XERT Workout Player JOIN Best Bike Split

BaronBiosystems

JOINcycling

BestBikeSplit

Best ANT Enabled App

     

 

XERT Workout Player Stryd MOXY Trek

BaronBiosystems

StrydTeam

MoxyRoger

TrekBicycles

The winners will be announced during the summit. If you cannot make the Summit, visit the blog April 20th to see who won in each category. Congratulations to the nominees!

 

Connect IQ 2.3.0 Beta Now Available!

$
0
0

Connect IQ 2.3 beta is now available! The new Connect IQ 2.3 release adds major new features for Connect IQ 2 compatible devices as well as many features for the SDK:

Always Active Watch Faces
Other smart watches turn off their screens to save power and still only get a day of battery life. On the new Fenix 5 family and Forerunner 935, your custom watch faces are always on and update every second while still having industry leading battery life.

Action Intelligence
25 Hz/3-axis accelerometer access, Finite Impulse Response (FIR) and Infinite Impulse Response (IIR) filters allow developers to create new active lifestyle metrics and use cases.

Background Services
Connect IQ apps can now start background services that can do periodic background processing, including communicating with web services, making your smart watch smarter than ever.

SDK Improvements
New Connect IQ debugger, Unit test framework integration with Eclipse, and new additions to the Monkey C language make Connect IQ easier to develop for. Also - SDK for Ubuntu!

Trial Apps - Coming Soon!
Customers download a locked version of your app, and come to you for the key. Bring Garmin customers to your services using Connect IQ. Contact our developer program for details.

We’ll be talking about these features at the Connect IQ Developer Summit. Keep watching the blog for updates.

To get started with the new beta, follow these instructions:

  1. Because we have a beta version of the Connect IQ Plug-in, we encourage developers to download a fresh installation of Eclipse Neon for Java Developers. This separates your beta and production Connect IQ environments.
  2. In the top menu, go to Help > Install New Software
  3. Use the Add… button to add http://developer.garmin.com/downloads/connect-iq/beta/eclipse/
  4. Check the box next to Connect IQ in the list and hit Next
  5. Dependent plug-in modules may need to be downloaded and installed. When this is complete, restart Eclipse to complete the installation.
  6. Use the steps from the Programmers Guide to configure the plug-in
  7. Use Connect IQ > Open SDK Manager to get the latest SDK

You can also download beta firmware for the following devices:

We will update the post as more betas are posted. We’ve been working on this release for a long time and are excited to see what you will create with it. Get started today!

The Connect IQ Developer Summit Starts Today

$
0
0

Summit Logo

The Connect IQ Developer Summit starts today! Over the next two days we’ll be announcing talking about Garmin products, talking to industry leaders, announcing new features, and having a lot of fun. You can follow on the hashtag #ciqsummit17 on Twitter and Instagram.

Connect IQ Developer Award - Best Watch Face - Winner

$
0
0

Actiface - Petr Koula

With over 600K downloads, Actiface is by far the most popular app on the Connect IQ store. Customers appreciate its ability to get at a glance the time and a highly configurable dashboard summarizing their health.

Nominees - Best Watch Face

     
Actiface Gear Min No Frills

Petr.Koula

_MASHAKE_

HermoT


Connect IQ Developer Award - Best Wearable Smart App - Winner

$
0
0

dwMap - Marcus Needham

dwMap allows Garmin users to create routes on the dynamic.watch mobile-friendly website as well as import their routes from Strava, MapMyRun, Garmin Connect, Ride with GPS, Bikemap.net, GPX and more. You can then sync your routes to your Connect IQ compatible devices, and navigate them using the map. dwMap runs across most Connect IQ devices and at 300K downloads is very popular with Garmin users.

Nominees

     
dwMap WatchOut! Wallet Note 2 Watch Nightscout CGM Watch

mappicus

WatchOut! Wallet Team

rconradharris

andreas-may

 

Connect IQ Developer Award - Best Wearable Workout App - Winner

$
0
0


Workout Genius - Robinson Milani

Is there a workout not represented on your Garmin device? Workout Genius has you covered. Workout Genius provides lots of data fields that are not available in most of the devices. It allows to set up a great variety of screen layouts, has a virtual partner with variable speed, enables to configure the lap size, sounds, vibrations, alerts, and more. And last but not least, it has a multisport mode that supports triathlon, duathlon, swim-run, and aquathlon. All of this is configurable on your device from the Genius Wrist website.

Nominees

     
Shred Deck Workout Genius Race Screen

devshed42

geniuswrist

dp0750

Connect IQ Developer Award - Best EDGE App - Winner

$
0
0

XERT Workout Player - Baron Biosystems

The Xert Workout Player plays Xert’s unique Smart Workouts. Using Garmin Connect Mobile, the Xert Player logs in to Xert Online, obtains your latest Fitness Signature, downloads your selected workout, configures the exact workout interval intensities and durations specific to you and then plays the workout using your power meter and/or smart trainer. With your smart trainer, it will do trainer control. If you have both a power meter and smart trainer, it will automatically do powermatch and trainer calibration on-the-fly. Playing Smart Intervals, it will auto-adjust interval power and duration, reducing/increasing intensity and slowing/accelerating the timer depending on how an interval is executed in real-time. Easily adjust target power or trainer resistance with swipes / up-down clicks. It will learn your cadence preferences and provide indication of when you’re pedaling too fast or too slow. The app also sends telemetry back to Xert Online so you can view your data online via the Xert Remote Player and follow your workout progress.

Nominees

     
XERT Workout Player JOIN Best Bike Split

BaronBiosystems

JOINcycling

BestBikeSplit

 

Connect IQ Developer Award - Best ANT Enabled App - Winner

$
0
0

Stryd - Stryd

Stryd, a foot-mounted power meter, measures your running efficiency, pinpoints your performance bottleneck, and guides you through personalized cardiovascular and strength training, as well as form improvements, so you can improve your efficiency and run faster. Stryd also provides the power-based training intensity control and race-day pacing you have grown to expect.

Redefine your performance with power-based training by tracking power, improving run form, and letting Stryd guide your performance seamlessly on your watch screen. The Stryd power meter measures your body’s power output in watts, so you can train at the right intensity, pace yourself for optimal race-day performance, and run more efficiently.

Nominees

     

 

XERT Workout Player Stryd MOXY Trek

BaronBiosystems

StrydTeam

MoxyRoger

TrekBicycles

 

Connect IQ Developer Summit 2017 Breakout - Survival of the FIT-test

$
0
0

In this breakout Robyn and Greg explain the mysteries of the FIT file format, and how you can use Connect IQ to add new metrics and display them on Garmin Connect. For more information on this topic you can read this blog post on Programmable Web.

Viewing all 93 articles
Browse latest View live