Quantcast
Jump to content

How to Add Watch Face Features Using Tizen Web


STF News
 Share

Recommended Posts

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.

2019-12-10-01-01.png
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)";
}

2019-12-10-01-02.png
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");
});

2019-12-10-01-03.png
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;

2019-12-10-01-04.png
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);

2019-12-10-01-05.png
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

Link to comment
Share on other sites



  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Similar Topics

    • By BGR
      Software updates usually ship with a bug or two, but it’s not often that they permanently kill your device. Unfortunately, that appears to be precisely what is happening to Galaxy Watch 4 owners after installing Samsung’s latest firmware for the smartwatch.
      SamMobile reports that new firmware update R8xxXXU1GVI3 is bricking Galaxy Watch 4 and Galaxy Watch 4 Classic devices. A number of Galaxy Watch 4 users claim that once they apply R8xxXXU1GVI3 and turn the watch off, it won’t turn back on. If you let the smartwatch die or accidentally power it off after updating, it might be dead for good.
      It’s unclear just how widespread the issue was, but users from all over the world have been complaining about bricked smartwatches on social media. The good news is that Samsung halted the rollout and plans to release another update soon.
      One user shared a screenshot of a notice from Samsung over on the company’s community forums, and we’ve copied the text of that notice here:
      Presumably, anyone who didn’t download the update is safe now. On the other hand, if you did install R8xxXXU1GVI3 on your Galaxy Watch 4, the only way to fix it may be to bring it into a Samsung service center. Samsung’s notice does seem to imply that just installing the next update won’t be enough to save the watch.
      If and when we learn more about what happened, we’ll be sure to provide an update. In the meantime, keep an eye on Samsung’s social channels if you own a Galaxy Watch 4 or Galaxy Watch 4 Classic. A new update should begin rolling out soon.
      More Samsung news: Samsung expects Apple to join foldable market in 2024
      The post This firmware update killed a bunch of Galaxy Watch 4 models appeared first on BGR.
      View the full article
    • By STF News
      View the full blog at its source



×
×
  • Create New...