Elevate Your Watch Face with Stunning Weather Forecast Features
Most Fowziya Akther Houya
Engineer, Samsung Developer Program
Smartwatches have become a part of our daily lives, combining functionality and style in one compact device. With Samsung's Watch Face Studio (WFS), designers can create unique watch faces that are customized to their requirements. Dynamic weather features, which display real-time updates and forecasts on the watch face, are particularly appealing.
This article covers WFS’s weather features, their uses, and how to create useful weather-themed watch faces. You can create a watch face using weather data as art.
This article introduces the following weather features which enhance watch face design:
- Weather forecast
- The last time the weather was updated in ICU format
- Weather tags
You can follow the examples in this article by downloading the sample project from here.
Forecast for the next few hours and days
Weather information becomes more valuable when presented in a way that is easy to read at a glance. Using weather tags, WFS enables you to easily incorporate forecasts for the coming hours and days.
Hourly forecast
The forecastHours(index, text) tag can be used to show hourly weather updates. One of the two pieces of information that the forecastHours tag collects is an index that takes a number starting at 1 for the following hour. Thus, by setting the index, you can set the data for the next few hours.
The text part uses five distinct weather tags:
• Temperature
• Time of day
• Weather condition
• Weather condition name
• Weather data available
Use the forecastHours tag with the weather condition, time, and temperature to offer users a short-term forecast of what to expect throughout the day. Tiny weather icons (like Sunny: ☀️, Rainy: 🌧️, and Snow: ❄️) can be used as bitmaps portraying the current weather conditions and the corresponding temperatures.
Forecast hours for icon
You can set the weather icon for the upcoming hour by following these steps:
- Create a text component.
- Use this forecast tag on the text: forecastHours (1, "COND")
- Choose the Bitmap Font to use icons for the forecastHours ().
- Select images for the appropriate weather conditions.
5. Set the font size to 40.
Figure 1: Setting the font size
- Include 10-15 on the CUSTOM tab since weather condition has values up to 15.
Figure 2: Bitmap font setting
Forecast hours for temperature
You can now adjust the temperature by using the forecastHours() tag. You may display the temperature (positive or negative) for the upcoming hour and the temperature unit in degrees by following these steps:
- Consider a text element.
- To display the temperature in degrees, use forecastHours(1,"TEM")°
- Choose the temperature unit (([WTHR_TEM_UNIT] == 1)? "C": "F")
The full tag expression looks like this:
(forecastHours(1, "TEM"))°(([WTHR_TEM_UNIT] == 1)? "C": "F"))
To display the weather forecast for the next hour, just change the index value to 2.
Availability of weather data
For every forecast tag, you need to check if the data is available with this tag: (forecastHours(X, "IS_AVAIL")).
In the sample project, for every forecast group, the corresponding weather tag is used for checking its availability. The following tag expression is used for the next hour’s forecast:
((forecastHours(1, "IS_AVAIL")) - 1) * 100
Figure 3: Tag expression for checking availability of weather data
Daily forecast
You can incorporate daily weather forecasts into watch face designs using the forecastDays() tag. Customized indices (for example, 1 for tomorrow) make it simple to portray multi-day weather trends. WFS lets you show the weather conditions for a certain day, including high and low temperatures using forecastDays(index, "TEM_HIGH") for highest temperature and forecastDays(index, "TEM_LOW") for lowest temperature.
The later parts of the sample project show the weather predictions for tomorrow.
WFS uses the forecastDays(1,"TEM_HIGH") tag to show the temperature for the following day’s high and forecastDays(1,"TEM_LOW") tag for the next day’s low.
For the high and low temperatures tomorrow, use the following tag expression:
(forecastDays(1,"TEM_HIGH"))° ~ (forecastDays(1,"TEM_LOW"))°(([WTHR_TEM_UNIT] == 1)? "C": "F")
You can apply a similar tag expression for the forecast for the days after tomorrow by changing the index value.
Last weather update (ICU format)
This watch face example incorporates the most current update time to reassure customers that the weather information is recent. Weather data should be updated often to remain accurate.
WFS offers the most recent weather update in the ICU format. To add the most recent weather update time in ICU format, follow these steps:
- From the component list, get the ICU date and time.
Figure 4: ICU date and time
- To customize the ICU date and time, select the PROPERTIES tab.
- Choose the ICU Format as HH: MM from the DATE AND TIME section.
- Set the Local Calendar to Gregorian and the Time Zone to Sync with Device.
- Select Last Updated Time (Weather) as the Time Source.
Figure 5: Date and Time
Other weather tags
Current weather condition for icon
You can use the bitmap font for the current weather condition since it is already prepared for forecastHours(). Use the [WTHR_COND] tag, which provides the current weather, and choose bitmap as the font setting.
Current temperature
Use the [WTHR_TEM] tag to show the current temperature. The current temperature is obtained with the following tag expression, which also sets the temperature unit:
[WTHR_TEM]°(([WTHR_TEM_UNIT] == 1)? "C": "F")
Today’s highest and lowest temperatures
You can display the highest and lowest temperatures of the day by using the tags [WTHR_DAY_TEM_HIGH]) for the highest temperature and [WTHR_DAY_TEM_LOW] for the lowest temperature. The highest and lowest temperatures for today are listed below, based on the forecastDays() tag expression for the highest and lowest temperatures for the following day:
([WTHR_DAY_TEM_HIGH])° ~ ([WTHR_DAY_TEM_LOW])°(([WTHR_TEM_UNIT] == 1)? "C": "F")
Summary
Smartwatches offering weather forecasts are useful and engaging. With WFS, designers can use advanced tags like forecastDays(), forecastHours(), and last update time to deliver real-time weather updates, daily forecasts, and information such as high and low temperatures. Because they provide information at a glance, smartwatch faces are practical and attractive.
If you have questions or need help with the information presented in this article, you can share your queries on the Samsung Developers Forum. You can also contact us directly for more specialized support through the Samsung Developer Support Portal.
