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.
Hi Joshua !
I have a request.
Can you please give the location of
for example…..
City,Country – Dusseldorf,Germany
in
Dusseldorf,DE
London, UK
Budapest,H
change
So the country code shorter
The larger the font or the city name, the larger the display should be ;-D
Thanks in advance !
Schaebby
Right now the location name is from phone’s Garmin Connect App. I saw a site provides such API for us to call, so in the future I will implement one.
Thanks,
Nice ! Thank you !
Schaebby
Hi Joshua, what’s the problem if I get a bad gateway error message during build
Can you tell me your appid? It might be an issue during the migration of the site to AWS.
Hey Joshua, I’m having some issues with goal fields where the shape is set to “line”. First, it seems like the lines are about twice as thick as they should be. Next, resizing the lines with the “set widget position/size” controls in the lower right has unexpected and random results, such as making the line so enormous that everything else on screen disappears. Also, when checking the size after trying to numerically adjust them, both x and y are blank and putting a value in the blank fields doesn’t do anything. I’m OK as long as I use the handles…until I try to rotate the line. Please see app id 61fdab8ee5169 and you can see the very beginning of what I’m trying to do. However, on the watch it looks nothing like it does in the builder. I was going to attach a screenshot, but I guess I can’t do that.
Hello and thanks for you BIG hardwork on this project.
Do you think to plan a cross-compatibility through display size / model type instead of a single model?
For example Fenix 6 Pro / 6 Sapphire / … are similar in terms of display size with Fenix 6 / 6 Solar / … + Fenix 7 + Descentmk2 + Enduro
Good idea. I will add it. Thanks,
Hi Joshua, i made a watchface with a german localization. Now i want to make another one also with german localization. But if i select german all fields are empty. Could you please create a standard localization for german
Can I have your appid with german language? So I can add them for everyone to use. Thanks,
surely, here it is: guid=61f938c071c13
Hello and thanks for your BIG work. I try to build a watch face I created and updated a lot of time but today I receive an error like
Uploaded…Out of memory, try again in a few seconds..Building: 2nd try.
Then I got this message on the page: A compile error or server can’t build your app.
So I try an empty watch face with Starter Watchface template and same problem and errors.
Is there something wrong with the build server-side app ?
I saw your last watchface with compile error. The one was created a long time ago, and since then I made a lot of changes backend. I think you have to recreate it from scratch. Sorry about it.
Thanks… I rebuild it back from scratch and now works perfectly.
Hello, can we save our progress within the face creator?
TY! the app is amazing btw!
Click build button will save your design.
ty alot!
Hey Josh,
I believe there still may be a bug with the battery remaining data field. It did take a couple of hours to populate as you previously mentioned, but it doesn’t display an accurate number. My watch face displays 11 days but when I swipe up to get to glances, the watch shows 9 days of battery remaining. Any insight? Thank you!
Whitney
No third party app can access Garmin’s battery remaining days data field. Next version SDK (current in beta) will have it available for us(developers), then we can display it on screen.
So in order to show battery life now, I have to record the battery usage every 17 minutes, then use the average usage to calculate the remaining days.
I don’t know how Garmin calculates the battery life, but according to my previous experience, when I had a routine workouts every week, mine method had better estimated result. But recently my workout schedules are spontaneous, so the remaining battery is off, and Garmin’s result is better.
This is awesome news! I look forward to that update 🙂 Thanks again!
Dear Josh, Thanks for the explanations about the graphs.
The Pressure (pa) graph seems to be backwards on my Pro6. The barometric pressure has been rising the last two days, however, my graph shows it as falling.
I am thinking newest data to the right, like on Temperature and Altitude. New data appears on Left for Pressure? May be a bug.
Thanks!!!
What device do you have? Can you change the period to 6 hours, then compare the chart with the chart shown on the barometer widget? I have fenix 6 pro, the charts match.
here
Hi Josh, Fenix 6 Pro here, too.
I reset my chart to 6 hours, will let you know how it works out.
My step activity history (bar chart) is definitely showing new data left-to-right.
Thanks
OK, I built and installed your graph app. My watch reports having only six hours of data, even though it has been running for days… Perhaps that is the limit of the Fenix 6 Pro?
I’ll wait for the pressure to change and see if my app responds the same way with 6-hour period.
Hi Joshua, I want to add a Custom Letter Font with the Font Builder i created a fnt. file how can i add this font to the watchface creator?
After you got the font files (both fnt and png), click Fonts button under global section, then drag and drop both files into the windows. Scroll all the way down, you should see your font file loaded. Then for each widget, if there is a font drop down, you can select the custom font.
Thanks! I only dragged the fnt file to drag them both works!!
The next issue is the size of the font i tried different size`s manually to 200×200 but it generate`s a 24x24pixel size?
You can adjust font size from left side, or click “Advance CSS Style” button, and change css values.