Watchface Builder for Garmin
-
Basic static shapes
- text
- line
- triangle
- rectangle
- arc or circle
- circle
-
Dynamic basic shapes
- line
- arc or circle
- circle
-
Image/Video
-
mask: square dot line
-
mask: black line
-
mask: black curve line
-
Other shapes
- 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 fontPick 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 |
|
|---|