Tutorials Galaxy Watch

How to Add Watch Face Features Using Tizen Web

Ummey Habiba Bristy

Engineer, Samsung Developer Program

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 the 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.

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)";
}

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");
});

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;

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);

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

Recent Posts