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
Do I understand this correct. To have another font available for a Widget like a digital watch, I have to create a bitmap font from a ttf font?
Thanks.
maybe i can answer: You have to download a ttf like this:
https://www.dafont.com/ds-digital.font
Then open your font and just drag and drop it.
I tried it with a digital watch and it´s really cool:
here
Thanks. This is correct. Thanks for sharing your design.
Yes
thanks you both for your answers….
what do you mean by open your font?
if I drag and drop a ttf.font to the ‘pick a font’ screen, I get an error ‘invalid files’ or nothing happens.
please help…. thanks.
You will need click “BMF for Garmin” at the left side menu from the main page to open Bitmap Font Generator.
Hi Joshua, You have created a fantastic app. I am having some trouble with the watch face being slightly off center from how it appears in the builder. Any ideas what I might be doing wrong?
Thanks,
Dante
Could you please let me know your appid? I can take a look at it.
Dear Joshua,
First off, thanks for writing this app! I find it useful and donated.
I am having issues understanding the graph options.
I made three graphs:
Barometer (pa)
Temperature (c)
Elevation (m)
I am in the USA, and we still use imperial for some odd reason, so I attempted to constrain the values of pressure and temperature by converting my imperial boundaries to metric, and used metric values in the Min/Max fields. This makes the graph appear at 100% still, i.e. temperature is 20 degF and my limits are 0-100 degF, however, display shows nearly 100% height…
Another issue I have is with the Period field. I see 24h as an option, however, the graph shrinks to a fraction of the width. I can set ‘fill chart width’, however, I don’t understand the data. Is it the last day? ‘6 hours’ seems to also fill the width, however, I would like this to be a longer, 24hour period if at all possible.
Is the graph data based on history in the watch, or is it instantaneous with history, from time of reboot?
I would like to see some clarification of graph fields in the help.
Otherwise, I am moving along nicely and almost have a face to share with everyone.
Thanks Agaain!
Thanks, Tim.
Garmin records most of sensor data in metric. If you want to set the min/max, you will need to convert the range from Fahrenheit to Celsius. You can use the getmin/getmax of each sensor history to find out the min and max value. If you want to show the chart in the above are of a rectangle, please take a look at this demo: here
Here is the list of each sensor history data period: (from Garmin SDK)
1. Elevation: up to the last power cycle.
2. Heart Rate: up to the last power cycle.
3. Oxygen Saturation: device dependent.
4. Pressure: up to the last power cycle.
5. Temperature: up to the last power cycle.
6. Battery: up to last 7 days. (this one is a log I write)
I think the reason you see the graph shrinks to a fraction of the width when you set to 24h as the period could be you just did a power cycle, so it only has about 6 hour data. Let it run for a few days, and check to see if it starts to fill the chart.
Thanks again.
Hm, can anyone help me with my heart rate monitor in watchface? It is updating only after playing with the watch. If I don’t touch it and just have a look on it, heart rate updates all 60(?) secs and not immediately… Does anyone know, how to change?
Thanks
In high power mode, it updates every second, and in low power, it updates every minute. I believe it still records every second, but in low power mode, the screen only get update every minute.
I just did a test, and the HR is recorded every second, even in low power mode. Not sure if I should turn it on since updating screen during the low power mode is very bad for battery life. I will add a choice for user in the future release.
Thanks for your answers. Now it is clear 😉
And many thanks for this application. I have much more fun with my watch 😉
Hi
Nice Builder!
I created a Watch Face got an AppID and downloaded it. This all before I registered.
Now I’m a registered user, can I import the Watch Face I created so I don’t have to do it all again?
Thanks and keep up the good work!
If you have the shared link, you can open the design in the builder when you login, then click build button, and it will be saved under your account.
Dumme Frage…
Wo befindet sich der Garmin\App Ordner?
Sry, Thx
When you connect your watch to your PC with the charging cable, you should have an icon in your desktop. Double click to open it and you will find Garmin folder, under Garmin folder, there is an app folder. Copy your prg file to that app folder and you are good to go.
HI Josh, thank you for this incredible application.
I get an error while loading the app to my venu sq music. I can see the watchface for a splitsecond and it seems, that the face has a problem with the miniutes and the floors. i created a custom font for the time, but it doesnt seem to work. APP ID: 61f3ead5e97dc
thank you
Your device doesn’t support the floors count. Please remove it and rebuild your app.
That was the mistake. Thank you!
The venu sq supports respiration and body battery – two datafield i dont find in the builder. do you plan to add this?
Yes, as soon as Garmin releases them in the next version.
I saw body battery in the upcoming release (beta now), but can’t find respiration, are you talking about Oxygen Saturation?
It does seem to be something different: https://support.garmin.com/en-US/?faq=2yEgS0Pax53UDqUH7q4WC6
Watchface app has very limited access to data fields. According to the article you mentioned above, it can be accessed via Widget app or Datafield app, but do not mention the Watchface app.
Weird. It is avalaible as a datafield in the system-build watchfaces. But thanks for checking!
Hi, Nice work so far! I try to generate rotated text by using e.g. transform: rotate(10deg) in the CSS. The preview shows it correctly, but when generated, no rotation is applied. Can you get that to work? Would be great! Thnx
This is a little bit challenge for me. I have tried several ways to implement it, but can’t get it correct.
Right now the best way, I guess, is to rotate the each char image in your image editor, then replace it by click “Edit” button in the second step (before build).
thanks, will try that
Hi Joshua
Thanks for creating this tool. You have and are doing an amazing job!
I’ve made a watch face (61e9b92945eca) with weeknumber. Up until today the weeknumber has been correct. Now I see that weeknumber shows the weeknumber for previous week. I don’t know whether this has something to do with my design or a bug. Is this something you can look into?
Thanks!
Thanks. It’s a bug on how to calculate the iso week number. I found and fixed it. Please rebuild your app and it should work.
Works great. Thanks!
Hi Joshua, thanks for creating that page. Really cool.
One question:
on my Fenix 5 plus it´s not possible to show weather (temp., wind, …). Do you know how to fix it? Or am i doing something wrong?
Thanks.
For fenix series, Garmin weather is only available since Fenix 6. When I got time, I will implement the background service so I can pull data from internet. Then we can have openweather data or more.
That’s very interesting what you are saying. So if I understand what you are saying, you can at the same time implement a way to display on the watchface something from the internet.
Let’s imagine I can make a webpage (https://mysite.com/test.php) that only displays a number (or something in a json format). For example the current temperature of the sensor of my garden, then you may be able to create a widget to display the result of this URL? How often would it be updated? Through wifi (if the watch supports it) or bluetooth/phone?
That would be an amazing feature, with a simple url parameter in the settings of the widget that would provide a way to really open what we can display on a watchface!
Correct. You can pull data from internet as often as every 5 minutes.
Is it something that you would like to implement?
Yes.