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.
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
|
Set up your environment
You will need the following:
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)
Start your project
- Download the sample project file, and click Open Project in Watch Face Studio.
- Locate the downloaded file, then click Open.
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.
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
.
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
-
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
-
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
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.
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