Garmin WatchFaces Online Builder

Garmin Watch App Online Builder


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

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

    gr8bb - February 18, 2022 at 4:01 am

    Joshua
    Are you considering setting up a Forum, so users can help each other?
    I think, this would be a great benefit to all of us.
    Thanks.

    joshuahxh - February 18, 2022 at 7:46 am

    This is a great idea. I will setup one either on Reddit or discord.

    Kuro Time Design - February 18, 2022 at 3:34 am

    Hi everyone !

    Thanks so much Joshuah for this online builder ! I don’t even imagine the amount of work you put in this !

    I noticed a strange issue with analog watch faces on my Fenix 6 pro.
    Hands are not properly placed all the time. Their axis tend to move around by some pixels on the watch, not in the editor. I find it impossible to align perfectly the hands axis on the watch. I tried with the supplied hands and even with custom hands : same issue. Watching the hands rotate their axis moves a bit on the left and the right, independently for each hand.

    Did I miss something ?

    joshuahxh - February 18, 2022 at 7:47 am

    It seems like a roundup issue. Can you send me your appid so I can take a look at it?

    randypenn - February 17, 2022 at 4:13 pm

    Hey Joshua – I’m trying to put in a multiday weather forecast with custom icons, so I’d like to be able to copy and paste the condition icon and just change the “forecast date/time” field. However, the pasted condition field is missing all the weather description fields, as well as the forecast/date time field. Can you help?

    randypenn - February 17, 2022 at 4:15 pm

    “Missing” is a little inaccurate for the weather description fields. They are actually all “undefined”. The forecast date/time field is missing however.

    joshuahxh - February 17, 2022 at 4:40 pm

    That’s a bug, and I found and fixed it.

    Please save your design, refresh your browser (maybe clear cache too), reopen saved design, and try duplicate again.

    randypenn - February 17, 2022 at 5:08 pm

    Awesome, that was fast, and the bug is squashed!

    joshuahxh - February 17, 2022 at 5:45 pm

    Thanks for reporting the bug. I saw some watch faces with multiple weather icons, and thought the duplicate just worked. ?

    ErikJ - February 16, 2022 at 2:13 am

    Hi there, I have a problem with new fonts. When I customized a new watchface and use a new font I see in my screen the font in a normal proportion just the way I want it. When I synchronized the Watch the fonts I used are bigger and do not fit anymore. I do something wrong but do not no what. Thanks For any support. Erik

    GBrunet - February 16, 2022 at 10:43 am

    I’ve been spending a whole day trying to figure this one out myself. Haven’t figured it out yet. I am trying to reduce the vertical space in fontforge but so far no luck since I am still learning fontforge.

    joshuahxh - February 17, 2022 at 10:35 am

    FontForge is for designing the vector font. Garmin uses bitmap font. If you already have the vector font (like ttf, woff, etc.), you can import it to BMF, and try to reduce the line height. it should reduce the font height without shrinking the font size.

    GBrunet - February 17, 2022 at 12:55 pm

    I did try that but when it generates the custom font it adds a space on top and on bottom of the font. This ends up blocking anything within that space once you create the face and save it to the watch. I discovered that other users have custom font which have no space on top or bottom of the font. I still don’t know how they were able to create a custom font using BMF which in their case doesn’t add those space. Looking at their font glyph you can see there is not black space on top or bottom.

    joshuahxh - February 17, 2022 at 1:10 pm

    Usually the black top & bottom areas should be fine since the glyph has transparent background.

    GBrunet - February 16, 2022 at 7:20 pm

    Found a work around by using one of the watch face available which has the desired font I am looking for. This gave me access to that person’s custom fonts that don’t have any space between characters.

    joshuahxh - February 17, 2022 at 10:32 am

    Could you please let me know what exactly the issues are? You can set the device on the bottom of the screen, and create bitmap font that will fit for your device.

    I saw some compile errors from the log, and found out the line height was set to zero, so I made a changes to BMF so the lowest line height is 50%.

    eelco.hanraads@gmail.com - February 16, 2022 at 12:51 am

    It would be great to be able to personalise/design the face for when tracking your activities like “running” or “swimming” not sure if this functionality is already possible exists or even supported by Garmin?

    joshuahxh - February 17, 2022 at 10:40 am

    I see. That’s different app type. There are five app types available in the Connect IQ system:

    1. Watch Faces – These are the home screen for Garmin wearables. They can be simple timepieces or complex data screens with dozens of health and fitness stats.
    2. Data Fields – Data fields are plug-ins to the Garmin activity experience. They allow computation of new metrics or allow bringing new data into a workout.
    3. Widgets – Widgets are mini-apps that can be launched from the home screen. They are intended to provide glanceable access to information.
    4. Device Apps – Device apps are the most powerful app type and provide full access to the system.
    5. Audio Content Providers – Audio content providers are plug-ins to the media player on music-enabled wearables, and they provide a bridge between the media and third-party content services.

    Right now this builder only creates Watch Faces. The one you are looking for is “Data Fields”. I’m planning to add them, but it’s in the bottom of the list.

    eelco.hanraads@gmail.com - February 15, 2022 at 4:57 pm

    This thing is amazing thanks for building it. Just donated. Also super interested in setting up specific activity trackers when you make it available. Keep up the awesome work!!!

    joshuahxh - February 15, 2022 at 5:07 pm

    Thanks.

    What are the “specific activity trackers”? Pulling data from internet?

    eelco.hanraads@gmail.com - February 16, 2022 at 12:51 am

    It would be great to be able to personalise/design the face for when tracking your activities like “running” or “swimming” not sure if this functionality is already possible exists or even supported by Garmin?

    bienieksz - February 15, 2022 at 1:24 pm

    Hi,
    Thanks for the fantastic app.
    Does this app allow to build datafileds for specific activities?
    When I open a builder, I can only choose watchface, the datafiled option cannot be selected (same for device language, although I am not looking to change that).

    joshuahxh - February 15, 2022 at 1:30 pm

    Thanks. I’m planning to add that, but it’s in the bottom of my to-do list.

Comments are closed.