The following guide describes the main tools and windows included in Watch Face Studio (WFS).
WFS includes the following tools:
- Add Component: Opens a list of components you can add to your watch face.
- Forward / Backward: Moves a selected component to the front or to the back.
- Group/Ungroup: Group multiple components together, and control them as one component.
- Mask: A tool that allows you to cover up all or parts of the other layers based off of the shape outline of the bottommost layer.
- Build: Opens the build dialog.
- Run on device: Opens a dialog to preview your watch face on a device.
Add as many different components as you would like to your watch face. You can also use a customized design source for your components. For example, display heart rate or step count data with a Text component, or add a custom image to launch a particular app.
Supported components are described in the following sections.
Watch face canvas
Set a canvas color for the bottom layer of the watch face.
Text fields are normal text by default. Normal text is static and doesn't change. In the properties window for your text field, you can change the text field from normal text to data text. Data text changes and is populated based on tags.
For more information see Tag expressions.
Select the Apply Curved-Text option to create text that curves with the watch face.
Determine the curve of your text by setting Width (W) and Height (H). Changing W and H automatically changes the dimension of your text component. To determine the position of your text, select one of the range presets. Additional ranges can be created by specifying Start and Angular distance. Set the direction of your text to either clockwise or counter-clockwise.
Add various shapes, including ellipses and rectangles.
WFS supports importing custom images.
Import image sequences for animation.
Add an animation as described in the following steps:
- Create your own animation sequence with a design program, such as Adobe Flash or Adobe Premiere.
- Click Add Component > Animation to add animation files to your watch face.
- Select a sequence of images from your file browser, then click Upload.
- Edit the animation by changing the order of each image, removing images, or adding images.
- Set the Trigger value to determine when you want your animation to play.
Set the trigger value to WatchFace on to start your animation as soon as the watch face is shown. Other options include Tap, Every Sec, Every Min, and Every Hour. You can also delay the start using Delay and entering a number of seconds.
Additional options for animations include the following:
- Auto replay: Immediately repeats the animation upon completion until an interruption, such as turning the screen off, occurs.
- Repeat delay: Sets a delay between iterations of the repeated animation.
- Resume Playback: Determines whether to resume the animation or start from the beginning when play is stopped because of an interruption, such as receiving a notification or phone call.
- Hide before playing: Determines whether to hide the animation until play is triggered.
- Hide after finished: Determines whether to hide the animation when play is completed.
Import already animated images such as AGIF, Lottie, or WebP files.
Add a multimedia image as described in the following steps:
- Click Add Component > Multimedia.
- Select the file from your file browser, and then click Upload.
- Set the Trigger Value to the start time of the animation.
Keep in mind that the file size, resolution, and frame number of the multimedia image may affect device performance and battery consumption. Multimedia images are loaded asynchronously during operation and may have a delay when playing depending on the capabilities of your watch, and various characteristics of the image.
Add analog clock hands for hour, minute and second. Open the file browser to select an image file to import for each hand.
Analog clock hands have a Rotation property. This property includes the following options: * Sync with * Time Zone * Rotate * Value * Movement Effect
Sync With has the following options: * Hour in Day * Minute in Hour * Second in Minute * Day of Month * Month of Year * Day of Week * Day of Year * Moon Phase
Of each of these options, Second in Minute only works with the Sweep movement effect. This effect is set automatically when you add the second hand component.
Options for the digital clock include Date and Time. When adding the Date, add a
text component with the Date tag. The default display for Dates is
DAY_1_31_Z. When adding the Time, add a text
component with a digital clock tag. The default display for digital time is
Add a progress bar to your watch face to track various activities. Options for the progress bar component includes a linear and circular progress bar. Determine the position of your progress bar by selecting one of six range presets. Additional ranges can be created by specifying Start and Angular distance. Set the direction of the progress bar to either clockwise or counter-clockwise.
Manage your components using the WFS tools. You can add, group, ungroup, and order components on your watch face, as described in the following section.
When you add a component it is placed in a default position on the canvas. The component is automatically selected so you can easily modify it.
A group is a combination of one or more components. All components can be grouped. Groups can be ungrouped.
The shape of the bottommost layer determines the visible area of the mask group. The layers above it appear only through the shape outline of the bottommost layer. For example, if you place a triangle image in the bottommost layer and an image and an animation in the layers above it, the image and animation will appear only through the triangle outline of the bottommost layer.
To create the mask group, do the following:
- Select the layers you want to group.
- Choose Mask from the hot key area, or right click the layers and select Mask.
To release the mask group in the Layers window, do the following:
- Select the mask group.
- Choose Unmask from the hot key area, or right click the layers and select Unmask.
The preview window is your main working area when designing your watch face.
Add all watch face elements to the canvas shown in the preview window. On the canvas, drag elements into position, resize, arrange, and rotate them.
The layer window displays the list of components and groups shown in the preview window. Each component has it’s own layer by default.
Within the layer window, the following actions are available:
- Search: Search for layers by name.
- Show / Hide: Layers can be shown or hidden. Hidden layers aren'td is played in the preview window.
- Theme color: Toggle your theme colors on or off.
- Rename: Change the layer name by double clicking the name field and entering a new name.
Right clicking on layers displays the following menu options:
- Lock/Unlock: Locks the layer so that is doesn't move on the canvas.
- Group/Ungroup: Groups multiple components together, and controls them as one.
- Mask/Unmask: Makes layers above the bottommost layer appear only through the shape outline in the bottommost layer.
- Swap image (only for images): Changes the image file in one layer to another.
- Layer color: Adds a color label to the layer, to differentiate between layers.
Conditional lines let you show and hide components on a watch face and control the components behavior. Use conditional lines to change the appearance of your watch face in response to certain conditions, such as the time, step count, battery, or event. When you add a component, the time condition is set by default. To adjust these conditions, click the condition icon on the desired layer. To set your conditional to repeat, right-click the frame area and select Loop.
Keep in mind that layers that aren't displayed don't reduce performance or affect your battery life.
You can set your watch face to respond to the following conditions:
Your watch face can change dynamically based on time intervals. For example, your watch face can be bright during the day then gradually darken as time passes. You can set the time to be measured in hours, minutes, or seconds.
Add a time condition using the following steps:
- Create layers.
- Set time periods to control when each layer is displayed. Select the starting bar then select the time range.
- Click and drag from the start bar to the end bar.
- Repeat steps two and three to set time periods for each of the layers.
- Click Run to preview your changes.
The following example shows you how to display different watch faces for a 12 hour setting and a 24 hour setting, based on the chosen setting on the user’s phone:
- Add two digital clock components. The first component displays the first 12 hours, the second displays the 24 hour version.
- Place them in the same position.
- Add a 12 hour and 24 hour condition to the conditional lines.
- Set time periods to show the first digital clock for the 12-hour layer in the 12-hour format, and show the other layer in the 24-hour format.
The Time Control slider allows you to see your watch face in action. Use this to preview how your watch face will change in the preview window throughout the day. Use the slider to drag to specific times, or view your watch face animations by using the play and fast-forward buttons.
You can design your watch face to change dynamically according to step count. For example, you can create a watch face that changes based on the percentage of daily steps achieved.
You can design your watch face to change dynamically according to the percentage of battery life left of the watch.
You can design the watch face to change dynamically according to your device state, such as low battery or unread notifications. To do so, select a desired event section and the image or animation you want to display during that event.
Each component has a range of modifiable properties. For example, you can change the color of the numbers on a digital clock, or choose whether the watch hands measure hours, minutes, or seconds.
The action panel within the properties window enables interaction with your watch face. The user can tap a component to change images, open different apps, or measure heart rate.
Use the style tab to change styles of the selected layer. You can add styles for images, multimedia images, index, and hands components. You can add up to 30 theme colors and 10 images.
Use the Customization Editor button to apply custom styles to each of these elements all at once.
In the Customization Editor dialog, you can customize the style of each component, layer and name. You can also reorder or merge styles in this dialog.
You can add up to 30 theme colors, and each theme color can have up to three color variations in the Style tab.
Set these colors in the Layer or Properties tab. In the Layer tab set the color by toggling the Apply Theme Color icon up to three times. In the Properties tab, set the color by selecting the Apply Theme Color radio button.
Apply a specified color to your component, or save a theme color for the watch face. For complications, the initial color theme is grayscale.
Modify the image appearance using the following controls:
- Hue: A slider that controls the tone of the color.
- Saturate: A slider that makes the image color more or less vivid.
- Lightness: A slider that causes the image colors to be lighter.
Use the Text appearance tab to set text alignment and font style. Decorate the text by selecting Add Bitmap Font in Project Settings. If you want to use the default font size among the Bitmap fonts added to the project, select the checkbox Apply Default Font Size.
You can also run your watch face within WFS in the Run panel. You can adjust the time, date, device battery, steps, heart rate, or GYRO values within WFS to test how your watch face looks in different circumstances. You can also adjust any other styles set in the Customization Editor, including the number of unread notifications, tag expressions or conditional lines. The Run preview can be set to Active or to Always-on. When using Always-on, WFS shows the Current-On Pixel Ratio value and Analyze button.
Test your watch face using Run on device.
For more details, see Test your watch face.