Tutorials Design, UI/UX, Galaxy Watch

Use Tag Expressions To Create Dynamic Watch Faces

Jakia Sultana

Engineer, Samsung Developer Program

Galaxy Watch Designer's (GWD) Tag Editor includes a list of tag IDs that allow a watch face to change dynamically as the tag value changes. With the release of GWD 1.7, a tag ID for moon phase position has been added, which means you can now create a watch face that changes  with the current phase of the moon.

Let’s use Tag Expressions to develop an example based on this cool new feature.

Note: For those familiar with coding, ternary and nested ternary operations can be used while designing your watch faces. For those not familiar, read this article on Tag Expressions for a better understanding of this concept.

Moon Phase Introduction

The moon takes 29.5 days on average to complete one lunar cycle (New Moon to New Moon). This cycle has been divided into 8 phases with 29 positions (0 ~ 27.99).

Let’s Get Started

To keep the example simple, let’s build a watch face that shows one of four moon phases: New Moon, First Quarter, Full Moon, and Last Quarter. The moon phase is shown only between moonrise and moonset, not during any other time of day.

  • New Moon: Moon is positioned between the earth and sun, and is not visible.
  • First Quarter: Moon is at a 90-degree angle between the earth and sun, and is half visible.
  • Full Moon: Earth is positioned between the sun and moon, and moon is fully visible.
  • Last Quarter: Moon is at a 90-degree angle between the earth and sun, and the opposite side of first-quarter moon is visible.

Design

First, design your four moon phase symbols with the graphic program of your choice. Next, open the GWD application and follow the steps below:

  1. Create a new project.
  2. Add a background image. You can use a default image or import a custom image.
  3. Import your four moon symbols and place them according in the proper positions.
  4. Add an index and watch hands (optional).

Determining the Tag Expression

Before you write a Tag Expression, it is important to clearly understand how “AND” and “OR” logic work.

  • AND operator: If both of the statements are true, then the whole statement returns true (1), otherwise it returns false (0). The symbol of AND operator is * in GWD.
  • OR operator: If any of the statements are true, then the whole statement returns true (1), otherwise it returns false (0). The symbol of OR operator is + in GWD.

You can learn more about AND/OR logic operation from:

The following Truth table summarizes these two operators for two inputs:

For each moon phase symbol, we will create a slightly different tag that determines which symbol is viewable based on the lunar cycle. For moon phase, use the Tag Expression [mp]. We will also create a tag to determine what time of day the symbol is shown based on moonrise and moonset. For the hour in a day use the Tag Expression [h].

Note: It's a good idea to use a text editor for writing Tag Expressions and then copy/paste your tags into the Tag Editor window. After you paste the Tag Expression be sure to press Enter on your keyboard or click X to save the expression since there is not a save button.

New Moon

Click on the image of the New Moon to set its opacity value. Since this phase is shown on lunar cycle days 27.5 to 28 and 0 to 6.5, the If/Else concept is:

If the moon phase is greater than 27.5 days or less than 6.5 days, the opacity of the New Moon symbol will be 100%, or else it will be 0%.

Moon Phase concept example:

IF [mp]>=27.5 OR [mp]<=6.5       Opacity = 100 ELSE Opacity = 0

The Moon Phase [mp] Tag Expression:

([mp]>=27.5)+([mp]<=6.5)?100:0

The second condition determines the time of day that the New Moon symbol is displayed. New Moons rise at 6:00 am and set at 6:00 pm, so the If/Else concept is:

If the current hour in the day is greater than 6:00 and less than 18:00, the opacity of the New Moon symbol will be 100%, or else it will be 0%.

Moonrise, Moonset concept example:

IF [H]>=6 AND [H]<=18 Opacity = 100 ELSE Opacity = 0

The hour in a day Tag Expression:

([H]>=6)*([H]<=18)?100:0

Final combined Tag Expression for the New Moon symbol:

([mp]>=27.5)+([mp]<=6.5)? (([H]>=6)*([H]<=18)?100:0) : 0

First Quarter Moon

Final combined Tag Expression for the First Quarter Moon symbol:

([mp]>=6.5)*([mp]<=13.5)? (([H]>=12)*([H]<=24)?100:0) : 0

Full Moon

Final combined Tag Expression for the Full Moon symbol:

([mp]>=13.5)*([mp]<=20.5)? (([H]>=18)+([H]<6)?100:0) : 0

Last Quarter

Final combined Tag Expression for the Last Quarter Moon symbol:

([mp]>=20.5)*([mp]<=27.5)? ([H]<12?100:0) : 0

Testing

To test, use the Run window emulator. Since the moon phase is determined by the time of day as a condition you must set both the day of month and the time of day to see the specific moon phases.

Follow the steps below to test the watch face:

    • Click on the Play button in the Run window.
      • Testing New Moon:
        • Set the time between 6:00 am ~ 6:00 pm.
        • Find a website or app showing a moon phase calendar and pick a month. Change the date according to the moon phase calendar and test all four phases.

Conclusion

Congratulations on successfully completing this tutorial! This is a very simple example of using a Tag Expression to show the moon phase on a watch face. If you’d like to make a more complicated example, you can use a total of 29 images to show the complete lunar cycle. Of course, you don’t have to limite yourself to moons; now that you’re familiar with this mechanic you can use the new Tag Expression feature to develop complex designs of your own.

Recent Posts