Open Source for Garmin Connect IQ Watch Face: Analog & Bars

Former Member over 9 years ago

Need an example to start with? Use my source code. The result looks like this:

Download the Connect IQ code from here: http://datawillconfess.blogspot.com/2016/01/opensource-connect-iq-face-for-garmin.html

It also comes with a Matlab / Octave script which generates the background PNG image for the watch. And it includes a bitmap font which has symbols like alarm bell, battery, sound, vibration. You can use those as if you were writing text. Here is how the font file looks like (it comes with a text descriptor with the coordinates too):

I am not maintaining this software and I will not fix or add anything to it. But, feel free to improve it yourself! And share it, that's how we learn.
Boyan

sis651 over 9 years ago

Wow, thanks. As I'm bad at math I was only using straight line watch hands, I can do sth. different now. :D

Anyway good idea to have some codes to see beside the examples in the SDK...

Former Member over 9 years ago

I'm glad it's useful. You don't even need to learn trigonometry. Just look up how to convert from polar to Cartesian coordinates, and what polar coordinates means. You'll design your watch hands in polar, always relative to a given angle, then convert them to Cartesian, which are the screen's coordinates.

travis.vitek over 9 years ago

The analog watch face sample program shows how to transform coordinates.

Former Member over 9 years ago

boyanib,

This is the perfect opportunity to ask the very question I logged on to post to begin with!

How did you generate your bitmap fonts for the various icons (battery, alarm, CPU, etc)? I have been struggling to find a set of common bitmaps for use in my (relatively recent) development endeavors with ConnectIQ. Thus far I have been going to the following and generating my own: https://iconsflow.com/editor

It would be nice, though, to find more resources (as you have so thoughtfully shared) for use with ConnectIQ.

Thanks,
Jeff

HermoT over 9 years ago

boyanib,

This is the perfect opportunity to ask the very question I logged on to post to begin with!

How did you generate your bitmap fonts for the various icons (battery, alarm, CPU, etc)? I have been struggling to find a set of common bitmaps for use in my (relatively recent) development endeavors with ConnectIQ. Thus far I have been going to the following and generating my own: https://iconsflow.com/editor

It would be nice, though, to find more resources (as you have so thoughtfully shared) for use with ConnectIQ.

Thanks,
Jeff

Most of the time we do it by hand, sometimes pixel editing for hours to get things perfectly.
I just find icons online, resize it, edit on pixel level when required and chuck them in a new png containing the other icons. Then I determine the bounds and other relevant properties to put in the fnt file.
When it comes to graphics and design, you have to be prepared to spend some time on it.

Former Member over 9 years ago

Thanks HermoT,

Is there a guide somewhere to the anatomy of the .fnt file?

HermoT over 9 years ago

Thanks HermoT,

Is there a guide somewhere to the anatomy of the .fnt file?

Should be on the BMFont website if there is a specification.
I just played with an exported fnt file and modified values and check the outcome to understand. Mostly I only tweak the obvious ones.
Recently had to alter xadvance in order to fix things with the new SDK.
Not sure myself what most of other settings do if any