Quantcast
Jump to content

Getting Started with Watch Face Development Using the Tizen Web API


STF News
 Share

Recommended Posts

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

    2019-11-11-01-01.png

    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.

2019-11-11-01-02.png

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

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 lukaszdiekemper
      Hi, i have samsung profesional display QH55R with Tizen 4. The software is up-to-date 2350.
      I want to display my own web application or just a movie. I don't want to use the management panel from samsung.
      Display is connected to my wi-fi network. I instal tizen studio,  create new web project tv-samsung-6.5 (template -> tv-samsung-6.5 ->web application -> Basic Project) , change project required version 4.0, create Samsung author  certificate, create distributor certificate, instal distributor cetrificate on Samsung Display, connect to Display in Device Manager.
      I can run app on Display from tizen studio by Debug mode.  I build signed package and i have .wgt file.
      Now i have problem.
      In device manager when i try install application i have error:  org.tizen.sdblib.exception.SdbCommandRejecteException: closed.
      I put .wgt file on web serwer, and set in Samsung Display to run from url: "http://........ /file.wgt" and I have error too.
      I try to run some webpage from url, also does not work. (I can manually open webbrowser and open webpage but this is not the effect I mean).
      I cant find any information, how can i always on start:
      - run my tizen app on display,
      - run wideo from url/local file
      - open url website
       
      I will be grateful for help or link to documentation.

    • By Gerald Griffith
      The USB warning code comes up when the TV is turned on and it will not change modes to anything. You cannot get into settings, absolutely anything. The TV will not move. We tried all the suggestions online, unplugging for one minute unplugging for 30 seconds doing the reset button, at least five hours on the phone with different people from Best Buy and Samsung. No help. Very frustrating.



×
×
  • Create New...