Apply gyro effects to a watch face using Watch Face Studio

Objective

Learn how to change the appearance of your watch face as the watch tilts in different directions by applying gyro effects using Watch Face Studio.

Overview

Watch Face Studio is a graphical authoring tool that enables you to design watch faces for the Wear OS smartwatch ecosystem, including Galaxy Watch4 and newer versions. It provides easy and simple features, such as gyro effects, for creating attractive and dynamic watch faces without coding.

Gyro effects are a feature in Watch Face Studio, which uses the watch's gyro sensor to animate or alter the look of watch faces. The effects are triggered when the watch is tilted within the -90° to 90° tilt angle range along the X and Y axes (see illustration below). A tilt angle of 0° on both axes indicates that the watch rests on a flat surface.

The following shows the expected tilt angle values when the watch tilts 90° in different directions:

Direction of Tilt	Tilt Angle
Clockwise along the Y-axis or tilt forward	Y = -90°
Counterclockwise along the Y-axis or tilt backward	Y = 90°
Clockwise along the X-axis or tilt to the right	X = 90°
Counterclockwise along the X-axis or tilt to the left	X = -90°

Set up your environment

You will need the following:

• Watch Face Studio (latest version)
• Galaxy Watch4 or newer
• Smart watch running on Wear OS (API 30 or higher)

Sample Project

Here is a sample project for you to start coding in this Code Lab. Download it and start your learning experience!

Start your project

To load the sample project in Watch Face Studio:

1. Click Open Project.

2. Locate the downloaded file and click Open.

The sample project is a premade watch face design. It contains a background image, a digital clock, and a date.

The project also contains three ellipses: two ellipses with tag expressions in Rotate > Angle properties to represent the analog time (hour and second) and one ellipse as the background of the digital hour.

In the Style tab, you can see the watch face's different theme color palettes.

Resize a component when tilted forward or backward

As the watch tilts, a component can enlarge or shrink relative to its pivot when applying gyro effects. The pivot is the point at the center of the component.

The component remains at the same position as it gets bigger or smaller.

1. Select the Time Background component. In Properties, you can see that the component's dimension (width x height) is 100px by 100px.

2. Select Apply Gyro to show the properties of gyro effects.

Initially, a component does not resize, move, rotate, or change opacity when you tilt the watch in any direction. The gyro effect occurs when you set the Changing to properties higher or lower than the default values

3. To resize the component when the watch tilts forward or backward, go to Y-axis properties and set the Scale (width and height) to the following:

   • 70% for -90° to 0° range
   • 130% for 0° to 90° range

4. In the Run pane, you can simulate the rotation of the watch. The component enlarges from 100% to 130% as the watch tilts backward and shrinks to 70% as the watch tilts forward.

Rotate a component when tilted to the left or right

In gyro mode, a component can rotate around its pivot. When a component rotates, its position remains the same.

1. Select the Digital Date component. The format of the digital date is a curved text, and its pivot is at the center of the canvas (Inner Pivot X = 225px, Inner Pivot Y = 225px).

2. Enable gyro effects.

3. Then, change the rotation angle to -90° for the following tilt angle ranges along the X-axis:

   • -90° to 0°
   • 0° to 90°

As the watch tilts to the left or right, the date component rotates up to 90° gradually counter-clockwise.

Change the appearance of the background image based on the adjusted tilt angle range

Range values define how tilted the watch should be for a component to resize, rotate, appear, or move to the maximum value you set. For example, when you set the Range from 0° to 45° along the X-axis and the Scale to 200%, the component will enlarge twice from its original size once the watch reaches the 45° tilt angle to the right.

1. Select the Background Image.

2. Change the Opacity of the components to 0° for the following ranges:

   • -45° to 0° along the X-axis
   • 0° to 45° along the X-axis
   • -45° to 0° along the Y-axis

As the watch tilts in any direction other than backward, the background image slowly disappears as it approaches the 45° tilt angle.

3. Then, for the 0° to 45° range along the Y-axis, change the rotation angle to 360° to rotate the background image clockwise as the watch tilts backward.

Test the watch face

In the Run pane, click the Preview Watch Face icon.

Move the gyro simulator joystick to see how the appearance of Time Background, Digital Date, and Background Image changes.

To test your watch face on a smartwatch, you need to:

1. Connect a watch device to the same network as your computer.
2. In Watch Face Studio, select Run on Device.
3. Select the connected watch device you want to test with.
4. If your device is not detected automatically, click Scan devices to detect your device or enter its IP address manually by clicking the + button.

You’re done!

Congratulations! You have successfully achieved the goal of this Code Lab. Now, you can apply gyro effects using Watch Face Studio to change the appearance of your watch face all by yourself! If you’re having trouble, you may download this file:

To learn more about Watch Face Studio, visit:

developer.samsung.com/watch-face-studio