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
- download the zip file and unzip it, you should get a .prg file.
- connect your watch to your computer with the device’s USB cable.
- 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.
- drag the unzipped .prg file into this Garmin\\Apps folder.
- 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.
Please go to this Reddit forum for all your Comments, Questions & Suggestions.
https://www.reddit.com/r/watchfacebuilder/
Thanks,
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.
This is a great idea. I will setup one either on Reddit or discord.
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 ?
It seems like a roundup issue. Can you send me your appid so I can take a look at it?
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?
“Missing” is a little inaccurate for the weather description fields. They are actually all “undefined”. The forecast date/time field is missing however.
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.
Awesome, that was fast, and the bug is squashed!
Thanks for reporting the bug. I saw some watch faces with multiple weather icons, and thought the duplicate just worked. ?
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
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.
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.
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.
Can you send me your font file?
Usually the black top & bottom areas should be fine since the glyph has transparent background.
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.
?
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%.
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?
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.
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!!!
Thanks.
What are the “specific activity trackers”? Pulling data from internet?
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?
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).
Thanks. I’m planning to add that, but it’s in the bottom of my to-do list.