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.
Hello Joshua,
I realized that data field “Pressure from sensor” do not show the value wf ID 61e948f8aebef on my watch Fenix 6X Pro Saphire. Yesterday the firmware was updated to version 20.30 I guess that this is the reason. Also the Total calories goal not working correctly. it show incorrect (always 100%) of progress.
Same or similar problem. Since update to 20.30 this night, my Fenix 6x pro could not load the deisgn anymore. After I deleted the “calories” datafields, it is working again. BR Christoph
Could you please let me know what’s your appid so I can take a look at it? I download palee’s design, and it works on my simulator.
It is 61e483a761aeb . But I removed the calories data fields and goal to get my design working again. will try to add the elements again and will let you know if it worked. anyhow: thank you for your reply!
I think there is a typo in Garmin SDK document.
. The calories burned so far for the current day in kilocalories (kCal).
But the value I got from my device is in Calories, not kCal.
Could you please remove the calories goal and add it back to with correct goal value (should be in unit of calories, not kCal)?
Ignore it. My mistaken. It’s Calories, which is kCal. So Garmin SDK document is right.
Hi, thanks for sharing that page.
I tried to create my own font for my fenix 5 plus. But it was not possible drop the fnt & .png files to the font overview. It started to work, but it never ends.
Thanks.
elifendt
To add custom font, you will need to select both files (.fnt and .png) at the same time, and drop them both to the area at the same time.
I will see how to fix this to make it user friendly.
Hi, Thanks for your fast answer. That´s how i´ve done it. But the circle never ends to upload. So i have to close the window after 30 min..
Thanks.
I have the same. The BMF doesn’t work at all. And the older files that I created earlier png & fnt hang the editor. In addition, it is not possible to load older projects with their own fonts. Also other people’s projects
The issue of not loading custom font in the builder is fixed.
Thank you very much. It is working now!
But (sorry :-)): if i click now with the new font “Save and build” it never ends to say “Server is building your app, please wait!”. So i think it´s not possible to save the new font.
Two more points:
1: The size is limited to 72 – is it possible to get it bigger?
2: It would be nice, to have an overview for the fonts, so it´s not necessary to click through.
Thank you so much.
“Server is building your app, please wait!” means server is building an app with same appid. I looked the log, and find out what caused it, and manually remove it from build queue. You should be good to rebuild it now.
BMF was created a long time ago, and I’ll reword on it based on feedbacks I got from you guys. Stay tune.
Thanks for the feedback.
I´ve seen that it´s not necessary to use the bar for the size. I can just add the size number. So that´s fine for me. Thanks again.
The new BMF is release, please try it to see if it works for you.
Thanks.
Two points:
1. now it´s not possible to choose any other font family like the “ubuntu”.
2. If i drag&drop a *.ttf file, it´s not working. I see the orange background, but it´s not changing the letters.
Thanks.
sorry, it´s working. my fault. thanks for working on it. really cool
The new BMF is release, please try it to see if it works for you.
Hello – I’m so pleased I found this. Looks good so thanks for creating it.
I’ll be waiting for the Epix to be added to the watches supported and just wanted to ask if you had plans for that?
TIA.
Perhaps I could just get started using the Venu 2 as it seems to have same display specs as the Epix.
No need, the Expix (Gen 2) was just added.
New devices (Fenix 7 / Epix (Gen 2) are added.
I also have Venus 2 plus configuration files, but waiting for Garmin to release it on their website.
I have a problem with the digital second hand. I added one to my dial, but after a minute or two it freezes at 00 until the agar activates. The ID is 61c9647858928
By the way, in the Garmin app, each watch face has the same name Garmin WF. Would it be possible to edit these names?
One more thing – is the FMO working? For me, it generates a standard font, not the one I have loaded
here
After you changed the font and css style, did you click “Add to result” button? It looks like the characters were added before you changed the font/styles.
Yes, I use Add to result and it generates some standard font, not the one I loaded from ttf
In editor version 5.0.0 all my additional fonts for all older projects have been lost
And not only mine. It loads other projects from the main page and all custom fonts are lost as well
I found and fixed the not loading custom font issue. Thanks.
For BMF issue, how big is the TTF? Because the font will need upload to my server to render the character’s image, if it’s too big, maybe it got rejected?
Font has 67KiB, it worked on the older version of the editor. Iona-Black
here
On the other hand, the new version of the bulider cuts the corners (right and left of the watchface).
here
I’m going to rework on BMF soon. In the meantime, please try Bitmap Font Generator here: here
And would it be possible to just load tft fonts directly? With the choice of whether the font should be proportional or not?
There is a lot of work with the preparation of fonts, and you need to hit the size and set the proportions accordingly, because it always cuts the number 1 somehow crookedly.
You don’t know why I’m cutting the edges on the left and right on watch? In buldier look normal … ID: 61c9647858928
In my next version, it should allow user to pick a device and preview the custom font on it before building it. Stay tune.
Thanks!
The new BMF is release, please try it to see if it works for you.
Not sure if your device support update during low power mode or not. If it freezes on the second datafield, sounds like it doesn’t support onPartialUpdate. What you could do is to use the new feature, check “Hide in low power mode” for the second datafield.
Now you can change the name of app by click “Localization” button under global section. (Thanks for the suggestion)
On Garmin IQ dials that have the option to turn on the second hand, this works. I have VivoActive4 and it supports this feature.
Hello, I have been having an issue with some modified builds that I did for my Venu2 I used build 616c9008e6887 from mikeuri and made some small changes to get 61d5c6ea510c5 (saved to my own account). It works mostly great, but for some reason from the hours of 18:00 to 05:00 the next morning the watch face only shows the “IQ” symbol like there is something causing the watch face to crash. Not sure if it was because of the new fields I added or what. So I tried to make a new one where there was just a minor color edit to 616c9008e6887 which is saved as 61e56d18036db. The issue happens in this one too. I’m not sure why the watch face won’t work during that time window.
It sounds like that it was caused by the changes I made recently (check if it’s day or night). I will take a look at it later on and let you know what I found.
Thanks
Can you try to build it again? I made a change on how to calculate a day or night based on sunset/sunrise time?
I built it again and it no longer crashes when in the time window mentioned. However, now I get a thin red line through the heart rate monitor number and steps line.
Under the global section, click first eye icon (in front of Font button), to show all widgets, you will see the hidden line. Delete it and rebuild.
That works! Thanks for all of this it’s an amazing site! Your support is amazing based on all the comments here.
I may have spoke too soon. It didn’t crash when I changed the time manually like it used to, but the watch still crashed. This time it started at 17:00 and went to about 07:00 this morning.
Hi,
how long should the “building” part usually last?
All I get for the last days, is “Server is building your app, please wait!”, but nothing gets finished. Any simple mistake on my end? Or is your server currently overloaded?
here
Best regards
Thanks for reporting that. The second server was offline somehow. I just reboot it and all the pending build jobs are running. Please wait for a few minutes and check back again.
Thanks for your patient.
I can confirm that it works now. Thank you for this great project and your fast response time. Really appreciate the builder.
Hi,
When uploading watchfaces on my watch, the charts (historical heart rate fe.) do not seem to appaer on my Garmin Venu 2.
Could there still be a bug / glicht in the buildin process.
Other than that – great platform & tool – muchos gracias!
I have not heard about it. Could you please let me know the appid so I can take a look at it?
HI,
app ID; 61e3da272fa16
The chart below the time is not displayed on my watch.
Thanks for having a look!
I don’t see any issue for your design. Do you see the heart rate inside the heart icon? Can you go to the heart rate widget and check if there are any history data there? To view the heart rate widget, go to your widget list on your device, Health Stats -> Heart Rate. You should see a chart for last 4 hours.
The current heart rate displays wel on the watch.
Inside my heart rate app/widget/glance I can see my HR history – but is does not display on the watch face.
Tested a few things; The issue does not occour when the PERIOD is set to ‘Fill Chart width’ – in other cases the chart does not show on the watch itself.
what time frame did you choose for other cases? Last 6 hours?
yes, and last day.
Hello, Is there a way to change the color of the compass rose icons?
Yes, any icon can be replaced by your own. First, you will need to create the icon with your favorite image editor, then to replace an icon, drag and drop the image over the image you want to replace.
Hello, it seems like I am having trouble with my watch face. It won’t show on my watch which is a fr235. Could it possibly be the seconds sleep thing added? I have made watch faces with the exact same data and they work. My app id is 61e46d8013e07.
FR235 does not have activeMinutesWeek and activeMinutesWeekGoal fields. Your design includes both.
You can reopen your design and remove both fields and rebuild it. then it should work.
I fixed my watch face but now when I view it on this site it won’t show anything. It is almost like everything got deleted.
I’m following the instructions to add a custom font, but my font doesn’t appear in the builder list. I’m doing something wrong or this is part of the problem that must be fixed of BMF?
i’m trying to add a classic digital font on the watch face but actually i can’t…
To add a custom font, first you will need to open the font dialog, then select both files (.fnt and .png), drag and drop them into the font dialog.
If you use BMF to create custom bitmap font, after you click “Save files”, you should get a zip file. Unzip it and you will get both .fnt and .zip file. drag both of them into font dialog, and the custom font should be there.
I’ve been playing around with BMF a bit, but all I get in my zip file is the .fnt. I’ve tried several fonts but never get a .png included in the zip file.
After you enter which characters should includes in the custom font, then select font, set the css styles, etc.
Click “Add to result” button, and all those characters with styles you set should be listed under result table. You can future adjust the x-offset, y-offset, advance, etc. When everything is fine for you, click “Build” button, and you should get a zip file. Inside the zip file, it should have both .fnt and .png files.
Thanks, I was missing the “add to result” part. Seems to be working as expected now.
Thank you! i’m understanding how it works and i’m developing my first watch face step by step… Another question, is it possible put an interactive item like a clock hand backward a shape and not necessarily forward? I’m trying to create a particular effect, but i cannot move the items at the level i need
You can use the data field named layer mask image to achieve such effect.