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 STF News
      The smallest products can bring about the biggest changes in our lifestyle. Enhancing your TV can be as simple as adding an accessory, but the results — from adding portability, to changing the format from landscape to portrait, to decorating your home — can have a significant impact on your viewing experience. Samsung Newsroom has compiled a list of the best simple and practical accessories made by Samsung Electronics to help you make the most out of your screen experience.
       
       
      Consume Content Horizontally or Vertically With the Auto Rotating Wall Mount & Stand
      Have you ever wanted to watch a vertical video meant for mobile on your Neo QLED or The Frame? With the Auto Rotating Wall Mount and Auto Rotating Stand,1 you can watch content the way it’s intended. Simply press the rotation key on your remote control to automatically change the screen from horizontal to vertical mode for the perfect viewing experience. Not only can you enjoy various content in comfort, but you can also take advantage of mirroring and casting features in vertical mode.
       
      With the Auto Rotating Wall Mount, your screen automatically rotates when you press a single button on your remote control.
       
       
      Tilt Your Screen Any Way You Want to With the Full Motion Slim Wall Mount
      The days when a TV is a device permanently fixed to the wall in one orientation are long gone. These days, you can harness the Full Motion Slim Wall Mount accessory to flexibly tilt your screen up, down, left or right to view your favorite content from any posture or angle that you desire.
       
      What’s more, the Full Motion Slim Wall Mount fits neatly against your wall, putting the wall and your screen in close contact for even more comfortable and immersive viewing experiences.
       

       
       
      Tidy Up Messy TV Cables With the One Connect Box
      If you manage to organize all of your messy TV cables, you’re already halfway done styling your TV room’s interior. The Neo QLED neatly pulls together any living room, thanks to the One Connect Cable and the Slim One Connect box. With this accessory, you can quickly organize and eliminate all distracting cable clutter, streamlining your home decorating for a functional and beautiful space.
       
      The One Connect Cable connects to the TV to make any room look neat. Hide wires in plain sight with the One Connect box, the hub for all devices connected to the TV.
       
       
      Turn Your TV Into a Work of Art With Custom Bezels
      The accessory that puts the finishing touch on Samsung’s The Frame, which features a picture frame trim that displays world-class art right on your wall, is a customizable bezel. You can swap between different color options to get exactly the look you want in your home. You can choose from the Modern Flat Bezels that come in White, Teak and Brown for a clean and contemporary look, or you can go with one of the Beveled Bezels that come in White and Brick Red for a more traditional design.2 In addition, the Slim Fit Wall Mount minimizes the space between your TV and your wall to seamlessly blend into any room.
       
      If you don’t want to install your TV on a wall, The Floor Stand offers an alternative way to express your style and fit your space. As it is easy to install even in small areas, The Floor Stand is the perfect accessory to bring artistic flair into any home.
       
      Choose between the Modern Flat Bezel and Beveled Bezel, depending on your space and preferences. The Slim Fit Wall Mount allows for easy installation while minimizing the space between the TV and the wall.
       
       
      Entertainment On-the-Go With The Sero Wheels
      The one-of-a-kind, rotating The Sero has now become even more flexible with The Sero Wheels. For TV lovers who want to change both the orientation of their content and the location of their TV, The Sero Wheels is just the right choice. By allowing you to move your TV freely from one room to the next, this accessory helps The Sero adapt to any space or interior at any time.
       
      Easily move or install The Sero with its practical accessory, The Sero Wheels.
       
       
      Express Your Personal Style With The Freestyle
      A portable screen, a Bluetooth speaker and a mood light — The Freestyle does it all in style. You can add a splash of color to The Freestyle’s neat, white design with a colorful range of rubber skins which feature Blossom Pink, Forest Green and Coyote Beige swatches. If you’re taking The Freestyle outdoors when going camping or attending a rooftop party, you can conveniently carry the device with you in a sleek, compact case.
       
      The Freestyle Carrying Case is the best way to transport The Freestyle with ease. Choose from a lineup of colorful skins for The Freestyle to match your personal taste.
       
       
      Reinvent Your Space With The Serif
      With its practical design that looks like the letter “I,” The Serif itself can be a statement centerpiece of any room. Using the flat surface above the top bezel as a shelf, you can decorate The Serif based on your unique tastes and preferences. You can display several handmade or limited edition items to add an accent to your home and make your space reflect you. Like any high-end shelf, the possibilities to elevate your room’s interior and grab your guests’ attention are endless.
       

       
       
      * The product images shown are for illustration purposes only and may differ from the actual product.
       
      1 Compatible with Neo QLED 8K, Neo QLED 4K and The Frame models. Size availability varies by product line ups.
      2 The number and availability of color swatches may vary by country or region.
      View the full article
    • By STF News
      View the full blog at its source





×
×
  • Create New...