Get creative with weather data in Watch Face Studio

Objective

Learn how to create a watch face that changes dynamically based on weather conditions using weather tags, bitmap font, and conditional lines.

Overview

Watch Face Studio is a graphic authoring tool which provides a straightforward and easy-to-understand method of configuring the watch movement and adding watch components without the need of any coding. You can use Watch Face Studio to create custom watch faces for Galaxy Watch, and other watches running on Wear OS.

Bitmap fonts are images that can be used to replace preset dynamic elements such as timestamps, dates, text, and digital clock components. You can replace numbers, punctuation, clock, and calendar abbreviations.

Tag expressions are conditions that let you change the rotation, placement, and opacity of a component based on tag values that represent watch data, such as the date and time, battery status, steps, or weather. Your watch face changes dynamically as the tag value changes. You can configure its movement and data dynamically. Weather tags provide a variety of information about the weather such as weather conditions, current temperature, or UV index.

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 step count, battery, or weather.

Set up your environment

You will need the following:

• Watch Face Studio (Version 1.7 or higher)
• Galaxy Watch or smartwatch running on Wear OS 5 or higher

Sample Project

Here is a sample project for 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 select Weather Data Sample Project.

Check the availability of weather data

When creating watch faces, always check the value of the [WTHR_IS_AVAIL] tag before utilizing other weather tags. In the sample project, it is already configured to display a No Info text with a black background whenever the weather data is not available. Go to the Run pane > Weather to preview how your watch face appears with and without weather data.

Change the background

Using bitmap font

Watch Face Studio allows you to use bitmap font for text components. You can use the bitmap font to change the background color of your watch face based on specific weather conditions such as sunny, rainy, or snowy. Using the weather condition tag [WTHR_COND] as the value of the Text Field, you can change the background during a snowy weather:

1. Select BG from the component list.

2. From the Properties tab, go to Font Setting section. Click the gear icon of the Bitmap Font Setting.

3. To set the bitmap font for snowy weather, click the + sign for 7 to add a background image.

4. Locate the image from the downloaded sample project. In the Resources folder, select the BG_Snow.png image.

Using tag expression

To set the background of your watch face during a rainy weather condition, use a tag expression:

1. Under the BG_Transparent group, select the BG_Rain_Transparent image component.
2. Change the image visibility by toggling the eye icon.

3. From the Properties tab, go to Color and in its opacity click the Tags button.

4. Input ([WTHR_COND] == 6)?0:-100 as the tag expression. Since the initial opacity value is 100, the expression indicates that the background image is set to 100% opacity when the weather is rainy and 0% opacity otherwise.

Set the weather icon using conditional lines

To add a weather icon, you can either use bitmap font or conditional lines. In this part, use the conditional lines to set the icon based on weather conditions. The conditional line is already added for all weather conditions except for the sunny weather.

1. Click on the + sign to add the conditional lines for Weather.

2. Click the Show/Hide Weather icon to show the conditional lines for Weather.
3. Under the Icon group, select the Sunny image component and set its condition under Sunny.

Add a temperature unit using bitmap font

The weather data provides the current temperature in either Celsius (C) or Fahrenheit (F) as its temperature unit. Use the temperature unit tag [WTHR_TEM_UNIT] to change the text component to the unit based on preference.

Use bitmap font to set the image of the temperature unit based on the value of [WTHR_TEM_UNIT]:

1. Under the Temperature group, select Unit C/F from the component list.

2. From the Properties tab, go to Font Setting section. Click the gear icon of the Bitmap Font Setting.

3. To set bitmap font for the value of 2 (Fahrenheit), click the + sign to add an image.

4. Locate the image from the downloaded sample project. In the Resources folder, select the Fahrenheit.png image.

Test the watch face

Go to the Run panel > Weather to test the watch face for different weather conditions by changing the values of the Condition. Adjust the weather condition value to see how the watch face changes for sunny, rainy, and snow weather conditions.

You can also check whether the temperature unit changes to either Celsius or Fahrenheit.

For other weather conditions, the watch face displays the following:

You're done!

Congratulations! You have successfully achieved the goal of this Code Lab. Now, you can create a watch face that changes dynamically based on weather conditions in Watch Face Studio 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/