How to Add Watch Face Features Using Tizen Web

[STF News]

Smart watch users are interested in having an interactive and eye-catching watch faces, which makes creating watch faces a great area for developers to explore. You can create varieties of watch faces, focusing on different perspectives and purposes. This blog can help you create a basic watch face using HTML and JavaScript in Tizen Studio. We will also discuss simple interactions, such as launching an app from watch face, providing sensor data, and so on.

Design Watch Face

Figure 1 shows a sample watch face that implements an analog clock, has two interactive icons, and shows the wearer’s step count using the pedometer sensor. One of the icons launches the SHealth app to measure heart rate, and another icon displays the current date and launches the Calendar app.

Figure 1: Sample watch face design

Define Category

Add wearable_clock as the category of your app in the config.xml file. It defines your application as a watch face.

<tizen:category name="http://tizen.org/category/wearable_clock"/>

Create a Basic Watch Face

As this is an analog clock, first you’ll have to calculate the rotation angles of the watch hands and then update the UI accordingly. A sample implementation is shown in the following code snippets: the updateTime() function calculates rotation angle with respect to time, and the rotateElement() function updates the UI with rotating watch hands (see Figure 2).

function updateTime() {
    var curtime = new Date(),
        hour = curtime.getHours(),
        minute = curtime.getMinutes(),
        second = curtime.getSeconds();
rotateElement("hand-main-hour", (hour + (minute / 60) + (second / 3600)) * 30);
rotateElement("hand-main-minute", (minute + second / 60) * 6);
rotateElement("hand-main-second", second * 6);
     if (curDate < 10)
         str_curdate.innerHTML = "0" + curDate;
     else
         str_curdate.innerHTML = curDate;
    }

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

Figure 2: Basic watch face

Add Functionality

Launch App

The Application API provides a method to launch an app in Tizen. To launch the app, add following privilege to the config.xml file:

<tizen:privilege name="http://tizen.org/privilege/application.launch"/>

Then use launch(ApplicationID) method to launch the desired application. If you do not know the ID of that application, you can use getAppsInfo() to get the list of IDs.
The Heart icon launches SHealth app’s heart rate measuring page (com.samsung.shealth.heartrate.measure). The implementation is as follows:

var heart_click = document.getElementById("heart");
heart_click.addEventListener('click', function() {
    tizen.application.launch("com.samsung.shealth.heartrate.measure");
});

Figure 3: Launch SHealth from the watch face

The Calendar icon shows the current date and launches the calendar application (com.samsung.w-calendar2) on the watch.

var calendar_click = document.getElementById('date-calendar');
calendar_click.addEventListener('click', function() {
    tizen.application.launch("com.samsung.w-calendar2");
});
var curtime = new Date(),
    curDate = curtime.getDate(),
    str_curdate = document.getElementById("date-calendar");
str_curdate.innerHTML = curDate;

Figure 4: Launch Calendar from the watch face

Access Device Sensor Data

The pedometer sensor provides step count data. To access this sensor, you need to add a feature and a privilege to the config.xml file:

Next, you have to ask for user permission to start reading data from the pedometer sensor. The following code snippet shows the implementation:

function onchangedCB(pedometerInfo) {
   var str_step = document.getElementById('step-count');
   str_step.innerHTML = pedometerInfo.cumulativeTotalStepCount;

}
function onSuccess() {
   tizen.humanactivitymonitor.start("PEDOMETER", onchangedCB,onError,option);
}
function onError(e) {
   console.log("error " + JSON.stringify(e));
}
tizen.ppm.requestPermission("http://tizen.org/privilege/healthinfo", onSuccess, onError);

Figure 5: Step count

It’s simple to add functionalities to a basic watch face, isn’t it? I hope this blog inspires and helps you create some amazing watch faces using your own ideas and designs.

View the full blog at its source