Garmin WatchFaces Online Builder

Watchface Builder for Garmin


Version 7.2.3

  • Update: UI re-organized

Most static objects (image, svg shape, etc.) can be set to the layer objects. A layer object is an image stored separated in your app, so you can place it on top of other object (including data field object). Because it’s a separated image, it counts against the total 256 image one app could have at most.

This demo shows how to add a dust layer object on top of the time object.
Watchface – Watchface Builder for Garmin

Version 7.2.2

  • Added: Export to Connect IQ store

If you want to have the iq file, so you can publish your design to the Connect IQ store, please send me your requests in email. Compiling to iq file takes up too much resources, so it will be manual steps.

Version 7.2.1

  • Added: Expression to fields: position and color
  • Added: alignment indicator
  • Updated: daily tide predications to 7 days
  • Fixed: bugs when set object’s position in widget section

Version 7.2.0

  • Added: sun events in one arc or line
  • Changed: no color quantization is on by default

You can add all (or partial) sun events in one widget. Click goal->sun events on arc / line.

You can turn on or off certain segment between sun events, like the following:

This will draw the arc/line starting from Civic dawn.

The above settings will draw a segment from Blur hour AM to Sunrise end with blue color.

Version 7.1.0

  • Updated: line goal, arc goal, and rotating hand goal
  • Added: dynamic location for widgets (WIP, more coming)
  • Added: line segment, arc segment, image layer
  • Changed: top menu bar
  • Fixed: bugs
  1. When you want to add a goal field, first, select the shape from goal menu, then you can select a preset (like steps, battery, floor, etc.), it will update the necessary data fields for value, min, and max fields.
  2. Dynamic objects
    • Line: you can set the line’s color, length, width, angle, and position, based on the value from watch’s datafield, or a static value. The line will not be merged to background with other static objects. So you can set the layer’s order to make it visible on top of another object.
    • Arc/Circle: you can control radius, line width, stroke color, fill color, angles, and position, based on a value from watch’s datafield, or a static value.
    • Image: you can control image’s position, based on the value from watch’s datafield. Use this one to replace layer mask image. This should save a little bit of watch’s memory.
  3. Static objects: basic shape, text, image, and other shapes are moved here

Version 7.0.0

  • Added: grid lines
  • Added: remove color button
  • Added: triangle shape indicator for arc goal field
  • Changed: one coordinate system
  • Fixed: too many to list

You can now toggle the grid lines in the status bar:

All color input box has an eraser button. When you click it, the widget will either draw itself with a transparent color or be skip (without drawing).

Arc goal field has a triangle indicator

it will render the widget like this:

You can use this instead to replace the point goal field in case you have 256 images limit error.

Version 6.1.0

  • Added: math expression for data fields
  • Added: position and rotation angle in widget section
  • Added: Air Pollution API from Open Weather Map
  • Fixed: widget name not saved
  • Fixed: missing data causes group field failed

Now you can write a math expression for any data field. For example:

This will output the heart rate from latest sensor history data minus 10.

Version 6.0.2

  • Added: group field
  • Fixed: in low power mode, caching the custom font

To add your own group field, you can first create a series of images in your favorite image editor, then add a custom group field (under datafield->icons->custom group field), set the data field, click “Edit”, and add the serials of images for each possible values of that data field.

Version 6.0.1

  • Fixed: widget left/right alignment issue
  • Added: allow to turn on/off AOD dim
  • Changed: dim AOD screen (instead of shifting)

When your device enters into AOD mode, the watch face will be dimmed. You will still need to follow the rule #1, but instead, the percentage increases to 20%.

Version 6.0.0

  • Added: Layers supported for multiple power modes
  • Added: Design for a screen size, not for just one specify device
  • To-do: DND mode (not working yet)
  • Fixed: goal field indicator
  • Fixed: bunch bugs

Screen size

Your design is starting from picking device’s screen size now.

Your design should work for all devices with the same screen size.

Widget section

On the left side widgets section, the first row is the power mode selector, click one of them will toggle the visibility of widgets in canvas:

  1. All: canvas will show all widgets in your design
  2. High: canvas will show all widgets which are only visible in high power mode
  3. Low or AOD: canvas will show all widgets which are only visible in low power mode. (When your device has always-on function, it will be AOD, otherwise it will be Low)
  4. DND: (not working yet)

The name of widget can be changed by clicking the text on the widget’s header section:

Each widget has three visibility controls:

If you want to hide the widget in certain power mode, check the checkbox.

When a widget is selected, the name of the widget, as well as the size will be displayed in the status bar

If you uncheck “snapping” on the status bar, when moving a widget, it will not auto-align with other widgets. The string in front of “snapping” is the screen size for your design.

There are more changes. If you have any issue, please post it on the reddit forum.