Design a Watch Face using Mask and Moon Phase Tags

1. Objective

Design a watch face that shows the eight phases of the Moon using the Mask feature and Moon Phase tags in Watch Face Studio.

2. 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 masking and tag expression, for creating attractive and dynamic watch faces without coding.

Masking is the technique of hiding or revealing parts of a layer based on the shape outline of the bottom layer. You can use it to enhance visual impact, create special effects, or draw focus to specific areas of an image.

Tag expressions are conditions in Watch Face Studio that let you dynamically configure the movement and data of a watch face.

What is Moon phase?

The Moon completes its orbit for approximately 28 days, undergoing a singular lunar cycle from new Moon to new Moon. This lunar cycle is divided into eight distinct phases with 28 positions.

The visible appearance of the Moon, as observed from Earth, is referred to as its phase.

Moon Phase Position (Days)	Type of Moon Phase
0~0.5	New Moon
0.5~0.65	Evening Crescent
7	First Quarter
7.5~13.5	Waxing Gibbous
14	Full Moon
14.5~20.5	Waning Gibbous
21	Last Quarter
21.5~27.5	Morning Crescent
27.5~28	New Moon

3. Set up your environment

You will need the following:

Watch Face Studio
Galaxy Watch4 or newer
Smart watch running on Wear OS3 or higher

Sample Project

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

Moon Phase Sample Project

(1.41 MB)

4. Start your project

Download the sample project file, and click Open Project in Watch Face Studio.

Locate the downloaded file, then click Open.

5. Show grid, coordinate axis and rulers

To set the different positions of the moon accurately and easily, you can utilize the coordinate system of the Watch Face Studio.

Select the Show Grid, Show Coordinate axis, and Show Rulers options from the View menu.

It will display a grid on the canvas, the X and Y axis, and rulers for precise measurement and placement of components. The center placement of the entire watch face is (225,225).

NoteYou can change the grid's color from the Preferences > View.

6. Create two mask groups

When you mask two or more images, the shape of the bottom-most layer determines the visible area of the mask group. The layers above it appear only through the shape outline of the bottom layer.

For example, if you place a square image on the bottom layer and an image in the layer above it, the image appears only through the square outline of the bottom layer.

The sample project consists of two similar images of the Moon (Moon_QGF and Moon_NC) and two different shapes as bottom layers (Moon_QGF_Layer and Moon_NC_Layer).

Using these components, create two mask groups to use for simulating eight major Moon phases:

Select Moon_QGF and Moon_QGF_Layer images and click Mask.
Rename the mask group as Moon_QGF_Mask. It will cover five Moon phases: the first quarter, waxing gibbous, full Moon, waning gibbous, and last quarter.
Do the same for Moon_NC and Moon_NC_Layer to cover the remaining Moon phases: the new Moon, evening crescent, and morning crescent.
Rename the mask group as Moon_NC_Mask.

TipRead Use Masks to Get Creative with Watch Faces to explore other possibilities of masking.

7. Add tag expressions to simulate different Moon phases

Watch Face Studio provides tags to determine the Moon phase's type (MOON_TY) and position (MOON_PO).

The corresponding tag values per Moon phase are listed in the table below:

Moon Phase	[MOON_TY] Values	[MOON_PO] Values
New Moon	0	0~0.5
Evening Crescent	1	0.5~0.65
First Quarter	2	7
Waxing Gibbous	3	7.5~13.5
Full Moon	4	14
Waning Gibbous	5	14.5~20.5
Last Quarter	6	21
Morning Crescent	7	21.5~27.5
New Moon	0	27.5~28

Using tag expressions, adjust the properties of each mask group and its bottom-most layer to dynamically show each Moon phase in different placements.

You can lay out the Moon phases as below:

Gibbous, Quarter, and Full Moon

The Moon_QGF_Mask currently displays the full Moon, and its placement coordinate is (195, 23).

Use the grid lines and rulers to determine the placement of the other four Moon phases: the first quarter, waxing gibbous, waning gibbous, and last quarter.

Add tag expressions to the Placement (X and Y) and Color properties of Moon_QGF_Mask:

Placement - X coordinate

Move the mask group to the left of the full Moon for the first quarter and waxing gibbous and to the right for the waning gibbous and last quarter. Replace each X with the distance (in pixels) between the X-placement of the full Moon and the preferred X-placement of the other four Moon phases.
```
([MOON_TY] == 2)? -X: ([MOON_TY] == 3)? -X: ([MOON_TY] == 5)? + X: ([MOON_TY] == 6)? + X : 0
```

Placement - Y coordinate

Move the mask group down. Replace each Y with the distance between the Y-placement of the full Moon and the preferred Y-placement of the other four Moon phases.
```
([MOON_TY] == 2)? + Y :([MOON_TY] == 3)? + Y :([MOON_TY] == 5)? + Y :([MOON_TY] == 6)? + Y : 0
```

Color - opacity

Show Moon_QGF_Mask only if the mask group covers the current Moon phase. Otherwise, hide it.
```
([MOON_TY] ==2) + ([MOON_TY] ==3) + ([MOON_TY] ==4) + ([MOON_TY] ==5) + ([MOON_TY] ==6)?0:-100
```

Change the moon's appearance by adjusting the dimension and image placement of Moon_QGF_Layer using tag expressions:

Placement - X coordinate

Move the image to the right of the Moon image for the first quarter and waxing gibbous and to the right for the waning gibbous and last quarter. Replace each X with the length of the portion to hide. If the Moon image is 50px and the quarter Moon shows only half of it, then the portion to hide is ~25px.
```
([MOON_TY] == 2)? +X: ([MOON_TY] == 3)? +X : ([MOON_TY] == 5)? -X : ([MOON_TY] == 6)? - X: 0
```

Placement - Y coordinate

Move the image up for the first and last quarter.
```
([MOON_TY] == 2)? -Y: ([MOON_TY] == 6)? -Y : 0
```

Dimension - Height

For the first and last quarter, adjust the height (H) to transform the image from a circle to an oval shape to simulate the appearance of a quarter Moon.
```
([MOON_TY] ==2)? H: ([MOON_TY] ==6)? H: 0
```

Crescent and New Moon

The Moon_NC_Mask currently displays the evening crescent, and its placement coordinate is (6, 110). Changing its placement and dimension properties can show the rest of the Moon phases: the morning crescent and the new Moon.

Similarly, add tag expressions to the properties of Moon_NC_Mask:

Placement - X coordinate

Move the mask group slightly to the left of the evening crescent when the new Moon's position is 0.5 or less. Otherwise, move the mask group to the opposite side of the watch face; the same for the morning crescent. Replace each X with the distance between the X-placement of the evening crescent and the preferred X-placement of the other Moon phases.
```
([MOON_TY] == 0)? ([MOON_PO] <= 0.5)? -X: +X: ([MOON_TY] == 7)? +X: 0
```

Placement - Y coordinate

Move the mask group down for the new Moon. Replace Y with the distance between the Y-placement of the evening crescent and the preferred Y-placement of the new Moon.
```
([MOON_TY] == 0)? +Y: 0
```

Color - opacity

Show Moon_NC_Mask only if the mask group covers the current Moon phase. Otherwise, hide it.
```
([MOON_TY] ==0) + ([MOON_TY] ==1) + ([MOON_TY] ==7)?0:-100
```

Change the moon's appearance by adjusting the image placement of Moon_NC_Layer using tag expressions:

Placement - X coordinate

Move the image slightly to the right of the Moon image when the new Moon's position is 0.5 or less. Otherwise, move the image to the left. Replace each Y with the distance between the initial X-placement of the layer and the preferred X-placement; to hide portions of the Moon image to simulate the appearance of the other Moon phases.
```
([MOON_TY] == 0)? (([MOON_PO] <= 0.5)? +Y: -Y): ([MOON_TY] == 7)? -Y: 0
```

8. Test the watch face

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

Adjust the date to see the Moon change from one phase to another. You can check for a complete lunar cycle from 18 July 2023 to 16 August 2023.

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

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

NoteThe Always-on Display is already set in the project. To run the watch face successfully, you may need to configure its Always-on Display to avoid any error when you Run on Device.

9. You're done!

Congratulations! You have successfully achieved the goal of this Code Lab. Now, you can use mask and Moon phase tags for making a dynamic watch face in Watch Face Studio all by yourself! If you're having trouble, you may download this file:

Moon Phase Complete Project

(1.87 MB)

To learn more about Watch Face Studio, visit:
developer.samsung.com/watch-face-studio