Watchface Builder for Garmin
Premium-
Basic static shapes
- text
- line
- triangle
- rectangle
- arc or circle
- circle
-
Dynamic basic shapes
- stack
- line
- grid lines
- arc or circle
- circle
-
Image in top layer
-
mask: square dot line
-
mask: black line
-
mask: black curve line
-
Image in background layer
- stock shapes
Select a screen size for design
Select a garmin device
Edit Group Field
| Icon | Description (click row to toggle editing) |
|---|---|
|
Value must be unique in this group field, the following format is accept:
|
|
Pick a color
Pick quadruple colors
Select a color scheme to apply to your design.
Pick a font
FONT_XTINY
Extra tiny Connect IQ fontFONT_TINY
Tiny Connect IQ fontFONT_SMALL
Small Connect IQ fontFONT_MEDIUM
Medium Connect IQ fontFONT_LARGE
Large Connect IQ fontFONT_NUMBER_MILD
Normal size number only Connect IQ fontFONT_NUMBER_MEDIUM
Medium size number only Connect IQ fontFONT_NUMBER_HOT
Large size number only Connect IQ fontFONT_NUMBER_THAI_HOT
Huge size number only Connect IQ fontFONT_SYSTEM_XTINY
Extra tiny system fontFONT_SYSTEM_TINY
Tiny system fontFONT_SYSTEM_SMALL
Small system fontFONT_SYSTEM_MEDIUM
Medium system fontFONT_SYSTEM_LARGE
Large system fontFONT_SYSTEM_NUMBER_MILD
Normal size number only system fontFONT_SYSTEM_NUMBER_MEDIUM
Medium size number only system fontFONT_SYSTEM_NUMBER_HOT
Large size number only system fontFONT_SYSTEM_NUMBER_THAI_HOT
Huge size number only system fontFONT_GLANCE
Glance text fontFONT_GLANCE_NUMBER
Glance number only fontTo create your own icon, visit https://garmin.watchfacebuilder.com/ site and click BMF for Garmin link.
Pick a google font
Pick a data field
Pick a data field
Edit expression
Expression:
Pick a goal
Date/Time/Duration format
Most used tokens
Tokens are case-sensitive. Not all moment.js tokens are supported.| Format | Description | Example | |
|---|---|---|---|
HH:mm |
Time | ||
ss |
Seconds * it's best to set second in its own datafield if you turn on the partial update during the sleep mode. |
||
h:mm a |
Time | ||
ddd, MMM D |
Date
* check week/month section for the explanation of tokens. |
||
MMM D |
Date
* check week/month section for the explanation of tokens. |
||
MM/DD |
Date |
Hour, minute, second tokens
Only the following tokens are available.| Format | Description | Example | ||
|---|---|---|---|---|
H |
Hours (24 hour time) | 0..23 |
||
HH |
Hours (24 hour time) | 00..23 |
||
h |
Hours (12 hour time used with a A.) |
1..12 |
||
hh |
Hours (12 hour time used with a A.) |
01..12 |
||
a |
Post or ante meridiem
* to customize the output of am/pm, expanding the Global settings section in Widgets, and click "Localization" button. |
am pm |
||
A |
Post or ante meridiem
* to customize the output of am/pm, expanding the Global settings section in Widgets, and click "Localization" button. |
AM PM |
||
m |
Minutes | 0..59 |
||
mm |
Minutes | 00..59 |
||
s |
Seconds | 0..59 |
||
ss |
Seconds | 00..59 |
||
G |
Military Date Time Group
G references the military identifier of time zone: |
A..IK..Y |
G
|
Week year, week, and weekday tokens
Only the following tokens are available.| Format | Description | Example | ||
|---|---|---|---|---|
W |
ISO Week of year | 1..53 |
||
WW |
ISO Week of year | 01..53 |
||
e |
Day of week (Sun:0,Mon:1,...,Sat:6) | 0..6 |
||
ddd |
Day name
* to customize the output of week day name, expanding the global settings section in Widgets, and click "Localization" button. |
Mon...Sun |
||
dddd |
Day name
* to customize the output of week day name, expanding the global settings section in Widgets, and click "Localization" button. |
Monday...Sunday |
Year, month, and day tokens
Only the following tokens are available.| Format | Description | Example | ||
|---|---|---|---|---|
YYYY |
4 digit year | 2014 |
||
YY |
2 digit year | 14 |
||
Q |
Quarter of year. Sets month to first month in quarter. | 1..4 |
||
M |
Month number | 1..12 |
||
MM |
Month number | 01..12 |
||
MMM |
Month name
* to customize the output of month name, expanding the global settings section in Widgets, and click "Localization" button. |
Jan..Dec |
||
MMMM |
Month name
* to customize the output of month name, expanding the global settings section in Widgets, and click "Localization" button. |
January..December |
||
D |
Day of month | 1..31 |
||
DD |
Day of month | 01..31 |
||
Do |
Day of month with ordinal | 1st..31st |
||
DDD |
Day of year | 1..365 |
||
DDDD |
Day of year | 001..365 |
Duration
Only the following tokens are available.| Format | Description | Example |
|---|---|---|
%d |
days | 3 |
%h |
hours | 6 |
%m |
minutes | 09 |
%s |
seconds | 56 |
Formatting string
Format a number using a formatting string
The formatting string is similar to that available in printf from the
C stdio library, though the length option is not available:
%[flags][width][.precision]specifier
- specifiers
-
- d or i - signed decimal integer
- e - scientific notation (mantissa/exponent) using 'e' character
- E - scientific notation (mantissa/exponent) using 'E' character
- f - decimal floating point
- o - signed octal
- u - unsigned decimal integer
- x - unsigned hexadecimal integer
- X - unsigned hexadecimal integer (capital letters)
- flags
-
- + - Prepends the result with a plus or minus sign ('+' or '-'), including positive numbers. By default, only negative numbers are preceded with a '-' sign.
- 0 - Left-pads the number with zeros (0) instead of spaces, where padding is specified (see width sub-specifier).
- width
- supports only numbers (* is not supported)
- .precision
- supports only numbers (* is not supported)
Examples:
| Format | Description |
|---|---|
%d |
signed integer value |
%f |
float value |
%.2f |
float value with two decimal places |
Format a duration using a formatting string
%d |
days |
%h |
hours |
%m |
minutes |
%s |
seconds |
All other characters will be copied to the result. For example,
if you set the format to %d °C, and value is 25,
the result will be 25 °C.
Result
Your garmin app design is uploaded successfully!
Your design contains ${totalImagesCount} images. *Garmin app can only have 255 drawables in one app.
Your app id is: ${result.guid}
Uploaded...
Replace Icon
Pick a date/time format
Analog Clock (12-hour)
Localization
| id | default string |
|
|---|
Properties and App Settings
-
The title to display in Garmin Connect Mobile/Garmin Express when displaying the list of settings/value of the setting.
The key of the property that this setting will manage. Letter, under score, and number only, no space and special characters allow. To access this property value in your design, use (prop.propertykey) in the expression.
The initial value for this property.
The display type of the setting. A value of list will require array of elements, ex. [1, 2, 3], or [0xffffff,0xffaa00,0xff0000].
The maximum allowed value length.
The message to display when prompting the user to set the value.
An error message to display if the value a user enters isn't valid based on the type, min, max and maxLength values.
-
The title to display in Garmin Connect Mobile/Garmin Express when displaying the list of settings/value of the setting.
The key of the property that this setting will manage. Letter, under score, and number only, no space and special characters allow. To access this property value in your design, use (prop.propertykey) in the expression.
The initial value for this property.
The display type of the setting.
The minimum value to allow.
The maximum value to allow.
The message to display when prompting the user to set the value.
An error message to display if the value a user enters isn't valid based on the type, min, max and maxLength values.
-
The title to display in Garmin Connect Mobile/Garmin Express when displaying the list of settings/value of the setting.
The key of the property that this setting will manage. Letter, under score, and number only, no space and special characters allow. To access this property value in your design, use (prop.propertykey) in the expression.
The initial value for this property.
The display type of the setting.
The minimum value to allow.
The maximum value to allow.
The message to display when prompting the user to set the value.
An error message to display if the value a user enters isn't valid based on the type, min, max and maxLength values.
-
The title to display in Garmin Connect Mobile/Garmin Express when displaying the list of settings/value of the setting.
The key of the property that this setting will manage. Letter, under score, and number only, no space and special characters allow. To access this property value in your design, use (prop.propertykey) in the expression.
The initial value for this property.
The display type of the setting.
The message to display when prompting the user to set the value.
An error message to display if the value a user enters isn't valid based on the type, min, max and maxLength values.
-
The title to display in Garmin Connect Mobile/Garmin Express when displaying the list of settings/value of the setting.
The key of the property that this setting will manage. Letter, under score, and number only, no space and special characters allow. To access this property value in your design, use (prop.propertykey) in the expression.
The initial value for this property.
The display type of the setting.
The message to display when prompting the user to set the value.
An error message to display if the value a user enters isn't valid based on the type, min, max and maxLength values.
Add property
Set Widget Position/Size
Are you sure?
Please confirm your delete action.
As a guest account, you won't be able to save your design.