Garmin WatchFaces Online Builder

Watchface Builder for Garmin


Garmin Device App Builder Help Guide


Please go to this Reddit forum for all your Comments, Questions & Suggestions.

https://www.reddit.com/r/watchfacebuilder/

Garmin Device App Online Builder is a powerful and flexible design tool to build a Garmin device app. This guide will walk you through how to use the various tools within the Garmin Device App Online Builder interface.

How to install watchface

Follow this post to install your app to your device.
How to install watchface : watchfacebuilder (reddit.com)

The following are manual steps:

Go to the top right section that says “Save & Build” clicking this will download a zip that contains the watchface

  1. download the zip file and unzip it, you should get a .prg file.
  2. connect your watch to your computer with the device’s USB cable.
  3. wait till the icon of your device shows up, double click to open it, and you should see the Garmin folder, open it, and double click to open the Apps folder in this Garmin folder.
  4. drag the unzipped .prg file into this Garmin\\Apps folder.
  5. unhook your watch and your designed watchface should show up in a few seconds.

Note- If you’re using a Mac you’ll need to download Android File Transfer utility

Working With Widgets

Selecting Widgets

Widgets can be selected by either left-clicking them, dragging a selection box around them, or clicking on the widget’s tile in the Widgets panel.
To select multiple widgets at a time, hold down shift while selecting them, or drag a selection box around the widgets you wish to select.

Moving Widgets

Once selected, a widget can be moved either by dragging it, or using the arrow keys on your keyboard. For smaller movements, use the shift key and arrow keys at the same time.

Resizing Widgets

Once selected, a widget can be resized using the resize controls in the corners of each widget. (Please note that some widgets must be resized using the font option in the widgets panel)

Rotating Widgets

Once selected, a widget can be rotated using the floating rotate control that appears above the selected object.

Deleting Widgets

Once selected, a widget can be deleted by clicking the Delete button at the top of toolbar, or press Delete key on your keyboard.

Duplicating Widgets

Once selected, a widget can be duplicated by clicking the Duplicate button at the top of toolbar.

Widget’s Alignment

The default widget’s alignment will be center, which means the content of that widget will be centered.  If you want the content starts from a certain left position, you should choose “Left” alignment.  And if you want the content ends at a certain right position, you should choose “Right” alignment.  Content will always be centered vertically.

Color Palettes

Browsing Color Palettes

Garmin Device App Online Builder features a powerful palette system for dynamically recoloring your label design. Click the Browse button within the Global settings section on Widgets Panel to select color scheme in hundreds of palette options.

Palette Variations

Each palette is available in four different variations, and each variation changes the order that the palette’s colors are applied to your design. To try a different variation, click the Swatch in the Global settings section on Widgets Panel.

Swatch Assignments

The palette system assigns a color swatch to each of your widgets based on widget type, however once selected you may wish to make further changes to some of your widget’s color assignments. You can assign a different swatch position by dragging the four color boxes to re-arrange the color order. Feel free to make further changes to your design’s colors until everything looks just right.

Widgets Panel

Selecting Widgets

Each widget in your design is represented by a tile within the Widgets Panel on the right side of the editor. Selecting any widget in your design is as simple as clicking on its associated tile, even if that object is below another object.

Locking Widgets

A widget can be locked or unlocked by clicking on the Lock Icon within that widget’s tile. When a widget is locked, you can only select that widget by clicking on that widget’s tile.

Widget Visibility

A widget can be hidden or made visible by clicking on the Eye Icon within that widget’s tile.

Math Expression

You can use math expression to extend the build-in data fields. For example: (ds9) – 10 will return 10 less of current heart rate from sensor history.

How it Works?

This section provides a brief description of process.

When you first open the Garmin Device App Online Builder, you will need to select which Garmin device you want to build an app for. This is where the real fun begins and where your creativity will be called upon. <…brief steps…>

Once you have your design setup up exactly the way you like it, click “Build App” on the top right corner. Wait a while, and your app file’s download link will be displayed or an error message will show if there is any error.

Download the zip file, unzip it, copy all files on to your device (Garmin\Apps folder), and launch it to see it action.

If you have an account with us, you can sign in, and click “Open” to retrieve your previous designs.

549 thoughts on “Garmin Device App Builder Help Guide

    roerigdalgaard - February 15, 2022 at 4:22 am

    Open Weather Map vs Garmin Weather
    I can see in the translations that you are preparing to move to Open Weather Map.
    When can vi choose Open Weather Map for the weather forecast? The Garmin one is quite bad here in Denmark. Looks like Denmark has only one ore to positions for the forecast. Open Weather ist much more granular…
    Regards
    Martin

    joshuahxh - February 15, 2022 at 8:54 am

    Since I’ve done the server migration, my next priority is to implement the background service. So it’s coming soon. 🙂

    joshuahxh - February 15, 2022 at 8:49 am

    I can open it fully in the builder. Are all widgets showing inside the builder when you open it? If so, you can scroll the left panel to see the rest of widget, or click any widget you want to edit, the associated widget’s property will be visible.

    maybe increasing browser window’s height to see if you can see other sections?

    mko87 - February 14, 2022 at 11:55 pm

    Hi joshuahxh, first this is a amazing work. is there a way to rotate datafields? if i use for example the total cal text datafield i can’t find a option to rotate the text like the widgets or a static picture.

    joshuahxh - February 15, 2022 at 8:53 am

    Garmin SDK does not support rotation. Rotating widget with stock fonts will require the program to create custom font. I will put it on my to-do list.

    wizrad - February 14, 2022 at 11:40 am

    Do you have any plans to support the new Instinct 2?

    Your app is amazing on the Fenix 6

    joshuahxh - February 14, 2022 at 12:13 pm

    Wow, you are fast. 😉

    On Feb 9th, Garmin just released instinct support on its 4.0.10 SDK. Three new devices are added:
    d2airx10
    instinct2
    instinct2s

    I will add them into this online builder soon.

    joshuahxh - February 14, 2022 at 12:19 pm

    I spoke too soon. I could not get 4.0.10 SDK from Garmin. Maybe they are rolling it out region by region?

    wizrad - February 14, 2022 at 12:31 pm

    Awesome news! Thanks for getting back to me.
    Hopefully you’re able to get the latest SDK soon; I’ll keep my eye on the changelog.

    Fantastic work on this app mate!

    joshuahxh - February 14, 2022 at 10:51 pm

    Instinct 2 and 2S are up now. Can’t wait to see some creative designs for that device.

    wizrad - February 17, 2022 at 9:37 am

    I tested it out last night and it’s working great! Thanks for adding support so quickly!

    gr8bb - February 14, 2022 at 6:50 am

    Would it be possible to better integrate the Watch Faces into the IQ App on the phone, for expample with a picture of the watch face… If you have installed more than one, all the Watch Faces from the builder look the same…. Thanks for considering.

    joshuahxh - February 14, 2022 at 7:37 am

    I believe that will make you only have one of watchfaces from this builder.

    I don’t know exactly, but I believe the way how Garmin connect app shows watchface image is: it gets the prg file’s appid, then go to connect iq store to pull the image for that appid.

    You can set AppName in string dialog to show different watchface. Just click the localization button under global section, change the AppName. Then in your connect app, it will show that AppName when you click on app’s blank icon.

    elifendt - February 14, 2022 at 1:50 am

    Hi Joshua,
    i hope just an easy one:
    Can you add a filter in the “List of Watchfaces” overview with following setup:
    fenix6xpro
    fenix5plus
    venu2
    forerunner

    That would be cool, to find a watchface for my watch / watchface.

    Thanks.

    joshuahxh - February 14, 2022 at 7:29 am

    You can either search the device or click the device underneath the watchface image.

    elifendt - February 15, 2022 at 5:26 am

    thanks. didn´t know that.

    roerigdalgaard - February 13, 2022 at 10:20 am

    My fault messed up with activity and move bar…

    ErikJ - February 13, 2022 at 8:33 am

    Hy there, can anyone tell me how tot install an other font than the one in de builder.
    I try it with BMF but it does not work. I know that I do something wrong but doe not
    no what (perhaps because I am 58 :). I try to build my one watch face and most of
    I can do only not change the font. Thanks for any respons.

    gr8bb - February 13, 2022 at 8:56 am

    I think it’s a problem on the server, I also can’t do it ….

    joshuahxh - February 13, 2022 at 10:29 am

    I disabled the cache/minify and it works for me now. Could you please try it again?

    gr8bb - February 13, 2022 at 12:22 pm

    It’s working again, thanks

    ErikJ - February 13, 2022 at 1:14 pm

    Thanks it is also working on my pc. lets start the fun of creating watch faces.
    thanks again.

    calivan - February 13, 2022 at 10:02 am

    Also for me, I tried many times but dosn’t works.

    joshuahxh - February 13, 2022 at 10:29 am

    I disabled the cache/minify and it works for me now. Could you please try it again?

    joshuahxh - February 13, 2022 at 10:29 am

    Sorry about that. Please refresh your page and it should work now.

    roerigdalgaard - February 13, 2022 at 2:54 am

    Is it posible in the Analog Watch to get the Seconds hand as an Always on?

    joshuahxh - February 13, 2022 at 10:35 am

    The second hand is too big for showing during the low power mode.

    During the low power mode, the average run time each second can’t be greater than 30 milliseconds. Unfortunately drawing a second hand is way longer than 30ms.

    gr8bb - February 13, 2022 at 1:19 am

    I’m thinking about buying a Fenix 7.
    I’m wondering how the touchscreen is interacting with the watchfaces created with this builder.
    Is it reacting Iike it does with the factory supplied faces? Does it go to the corresponding app if you touch a widget on the watch face?
    Thanks.

    joshuahxh - February 13, 2022 at 10:47 am

    I have not messed around with touchscreen/keys. I believe it’s for widget/app, not for watchface. I think watchface app has no access to any sensor/key/touchscreen. But again, I have not looked around for such things yet.

    randypenn - February 13, 2022 at 12:01 pm

    For the stock watch faces on the new watches, touching and holding a widget on the watch face brings up the corresponding app. I don’t know if third party faces have or will ever have this ability.

    gr8bb - February 13, 2022 at 2:08 pm

    That’s why I ask… Maybe somebody with a Fenix 7 can give an answer…

    joshuahxh - February 13, 2022 at 2:16 pm

    You are right. Watch face app does not have access to input device. At least for 3rd party watchface. Native watchface app is totally different store. Garmin native watchface apps have ways to access device’s data which are not available to us (developer).

    https://developer.garmin.com/connect-iq/core-topics/input-handling/
    ====
    Not all app types have access to input. Watch faces and data fields cannot handle input, though widgets can receive input (may be limited on some devices) and watch-apps will have the most input capability.

Comments are closed.