Getting Started with Watch Face Development Using the Tizen Web API

[STF News]

Watch faces are a special type of application that runs on the home screen of a Tizen wearable watch. Different watch faces have different purposes and can be interacted with in diverse ways. A watch face creates the first impression of the watch and holds value as a fashion accessory.

Anyone can make a watch face using Galaxy Watch Designer (GWD).[1] However, GWD limits how many different features you can add in a watch face. On watch faces, data is displayed to the user in the form of “complications,” which show individual data points such as steps or heart rate. While GWD gives you a set of complications you can add to designs, it does not allow you to add custom complications, as the numbers of complications are fixed inside the GWD tool. With Tizen Studio, you can create complications that pull in data from your own custom sources or perform custom actions, such as launching a separate application or opening a settings menu. With Tizen Studio, you have more options than the ones GWD gives you.

Using Tizen Web/Native/.NET APIs, developers can add a large number of functionalities on watch faces programmatically. In this article, we’ll start by developing a basic watch face using Tizen Web API.

Prerequisites

You need to define your app as a watch face application through an application category in the config.xml file. To achieve that, add wearable_clock under category.

<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/WatchFace" version="1.0.0" viewmodes="maximized">
    <tizen:application id="msWLHN3Mpw.WatchFace" package="msWLHN3Mpw" required_version="2.3.1"/>
    <tizen:category name="http://tizen.org/category/wearable_clock"/>
    <content src="index.html"/>
    <feature name="http://tizen.org/feature/screen.shape.circle"/>
    <feature name="http://tizen.org/feature/screen.size.all"/>
    <icon src="icon.png"/>
    <name>WatchFace</name>
    <tizen:profile name="wearable"/>
</widget>

Resources

For an analog watch, we need three hands for second, minute, and hour. We also need a background image with a marked time index.

The following table shows resolutions for images in our example:

Image	Width (pixels)	Height (pixels)
Background	360	360
Hour hand	15	360
Minute hand	16	360
Second hand	16	360

Implementation

1. We need to create a <div> element for each component, such as background, hour hand, minute hand, and second hand.

   <div id="container">
           <div id="background">
               <div id="components-main">
                   <div id="hand-main-hour"></div>
                   <div id="hand-main-minute"></div>
                   <div id="hand-main-second"></div>
               </div>
           </div>
       </div>
   

2. We are using an image as the watch face background, so we need to set the background image by setting styles in the CSS file.

   Background Image: The clock time index is set on top of the background image. It could be a separate <div> element, but we assembled the clock index with the green background into one image (see Figure 1).

   

   Figure 1: Watch face background image
   

   CSS

   #background {
       width: 100%;
       height: 100%;
       background-image: url("../image/watch_bg.png");
   }
   

3. We also need to set styles for watch face hands separately. The app image folder holds three images, one each for the hour hand, minute hand, and second hand. Then we’ll add some info to the CSS to adjust the position, size, and so on.
   The style set for the minute hand is shown below:

   #hand-main-minute {
       position: absolute;
       left: 172px;
       top: 0px;
       width: 16px;
       height: 360px;
       background-image: url("../image/watch_hand_minute.png");
       background-position: center top;
       background-size: contain;
   }
   

4. We need to define a function that will rotate hands by a specific angle with its element ID.

    function rotateElement(elementID, angle) {
           var element = document.querySelector("#" + elementID);
           element.style.transform = "rotate(" + angle + "deg)";
       }
   

5. We also need to have the hand update every second. To do that, we’ll set an interval to call the updateTime() function every second.

   // Update the watch hands every second
           setInterval(function() {
               updateTime();
           }, 1000);
   

6. We are using the getCurrentDateTime() function of Tizen Time API[2] to get the current time object. From this time object, we can get the hour, minute, and second.

   var datetime = tizen.time.getCurrentDateTime(),
               hour = datetime.getHours(),
               minute = datetime.getMinutes(),
               second = datetime.getSeconds();
   

7. Now we are going to call our defined function rotateElement() for the hour, minute, and second hands.

     // Rotate the hour/minute/second hands
       rotateElement("hand-main-hour", (hour + (minute / 60) + (second / 3600)) * 30);
       rotateElement("hand-main-minute", (minute + second / 60) * 6);
       rotateElement("hand-main-second", second * 6);
   

8. We need to set an event listener for visibilitychange to update the screen when the display turns on from the off state.

   // Add an event listener to update the screen immediately when the device wakes up
        document.addEventListener("visibilitychange", function() {
            if (!document.hidden) {
                 updateTime();
            }
        });
   

   We also need to set an event and update the screen when the device’s time zone changes.

   // Add eventListener to update the screen when the time zone is changed
           tizen.time.setTimezoneChangeListener(function() {
               updateTime();
           });
   

9. Additionally, we can set an event listener for ambient mode change. In this article, we added the listener and printed a console message when the ambient mode changed. It will not change anything on the watch during ambient mode, because we haven’t updated the sample watch face for ambient mode.

   window.addEventListener("ambientmodechanged", function(e) {
           if (e.detail.ambientMode === true) {
                // Rendering ambient mode case
                console.log("Ambient mode");
           } else {
                // Rendering normal case
                console.log("Normal mode");
           }
        });
   

Demo

A sample watch face app can be downloaded here, and the final watch face is shown in Figure 2.

Figure 2: Demo watch face developed using Tizen Web

Conclusion

This article demonstrates how to start developing watch face apps with Tizen web API using Tizen Studio. We can now add more functionalities and change the watch into more than just a device that shows time.

References

1. https://developer.samsung.com/galaxy-watch/design/watch-face/complications
2. https://developer.tizen.org/development/guides/web-application/device-settings-and-systems/time-and-date-management

View the full blog at its source