Skip to main content

Ready to market your stellar app?

Samsung Developer Program is your gateway to app monetization success.

Learn More

Samsung Developer Program

Tizen Studio Watch Face Developer Guide

This guide provides information for watch face app development using Tizen Studio.

The fully functional Watch Face sample application described in this guide is located in Github: 
https://github.com/Samsung-US-Developer-Support/WatchFace

 

Prerequisites

 

Create a New Project

1. Click File > New > Tizen Project.

2. In the New Tizen Project wizard, select Template, and click Next.

3. Select profile Wearable and version Wearable v2.3.1, and click Next.

4. Select Web Application as the application type, and click Next.

5. Select Basic UI as the application template, and click Next.

6. Enter a project name in the Define the project properties screen, and click Finish.

 

Modify the config.xml File

Add Category 

  1. From Project Explorer, open the config.xml file.
  2. Click the Tizen tab, and scroll down to Category.
  3. Click the + icon, and select http://tizen.org/category/wearable_clock.
  4. Save the config.xml file.

 

Add Privileges 

  1. From Project Explorer, open config.xml.
  2. Click the Privileges tab.
  3. Click the + icon, and add http://tizen.org/privilege/application.launch and http://tizen.org/privilege/healthinfo privileges.
  4. Save the config.xml file.

 

Add Ambient Support 

To support ambient mode in the watch face, add ambient_support="enable" in the config.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets"
                         id="http://yourdomain/ArtBoardWatch" version="1.0.0" viewmodes="maximized">
                                    <tizen:application id="OqHNdZ1Wb7.ArtBoardWatch" package="OqHNdZ1Wb7" required_version="2.3.2"
                         ambient_support="enable"/>
</widget>

To use ambient mode, you must enable it in device settings, as follows:

Setting > Display > Watch always on

In the Gear S2 device, ambient mode activates only when you are wearing the watch on your wrist. See the following link for more details:

https://developer.tizen.org/development/training/web-application/getting-started/creating-your-first-tizen-wearable-web-watch-application

 

Add HTML Code

  1. From Project Explorer, open index.html and change the body element, as shown below.
This is single-page application with following div elements:
  • background - Div element will show the watch background image background.png.
  • index -  Div element will show the watch index using the index.png image as div background.
  • components-steps – This is a container div with three child divs - step-icon, step-count, and step-text - for step-count GUI.
  • components-main – This is a container div with three child divs - one each for the hour, minute, and second hand images.
  • action-steps – This is a transparent div. Tapping it launches the S Health app.
  1. Save and close index.html.
<body>
    <div id="container">
        <div id="background">
          <div id="index"></div>

          <div id="components-steps">
              <div id="step-icon"></div>
              <div id="step-count">0</div>
              <div id="step-text">Steps</div>
            </div>

            <div id="components-main">
                <div id="hand-main-hour"></div>
                <div id="hand-main-minute"></div>
                <div id="hand-main-second"></div>
            </div>
         <div id="action-steps"></div>

        </div>
    </div>
</body>

 

Add Image Resources

  1. Create a new folder in the root folder of your project, and name it image.
  2. We are using our own image resources for watch hands, background, and the step-count icon. Copy the following images to your project’s image folder:
  • background.png – Watch background
  • index.png – Watch index
  • hour_hand.png – Hour watch hand
  • minute_hand.png – Minute watch hand
  • seconds_hand.png –  Seconds watch hand
  • steps_bg_03.png – Background image for step count GUI
  • icon_steps_03.png –  Step icon

            

 

Add JavaScript Code

  1. From Project Explorer, open js > main.js.
  2. Add add application logic, as shown below.


This function rotates the hour, minute and second hands. We are using java script "style transform" property to rotate the "element."

function rotateElement(elementID, angle) {
        var element = document.querySelector("#" + elementID);

        element.style.transform = "rotate(" + angle + "deg)";

}

This function updates time in watch face, the hour/minute/second hands according to the current time.
This function will get called every second.
This will also get called when the time zone is changed or the visibility of the watch face is changed.

function updateTime() {
       var datetime = tizen.time.getCurrentDateTime(),
       hour = datetime.getHours(),
       minute = datetime.getMinutes(),
       second = datetime.getSeconds();

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

 

This is a Callback function, which will get invoked on pedometer data change, then it updates the steps count in watch face accordingly.

function onchangedCB(pedometerInfo)
{
      var element = document.querySelector("#step-count");
      element.innerHTML = pedometerInfo.accumulativeTotalStepCount;
}

 

This will launch the SHealth application, this will get triggered when user tap on steps count.

        function onOpenShealth() {
             console.log("launching SHealth");

                // Launch sHealth application expicitly
                tizen.application.launch("com.samsung.shealth",
                          function() {console.log("launch application control succeed"); },
                                 function(e) {console.log("launch application control failed. reason: "
+ e.message); }
                        );
       }

Sets default event listeners.
This function will bind click events to step count & to ambient mode as well (Always on mode).
When user tap on step count, it will trigger the on OpenShealth callback.

 

        function bindEvents() {
                // Add an event listener to update the screen immediately when the device wakes up
                document.addEventListener("visibilitychange", function() {

                if (!document.hidden) {
                            updateTime();

                            if (isAmbientMode === true) {
                                // Rendering ambient mode case
                                activateMode("Ambient");
                            } else {
                                // Rendering normal case
                                activateMode("Normal");
                            }
                     }
               });

               // Add an eventListener for ambientmodechanged, this event will get trigger only when user wear the watch on his/her wrist.
               window.addEventListener("ambientmodechanged", function(e) {
                       if (e.detail.ambientMode === true) {
                            // Rendering ambient mode case
                            activateMode("Ambient");
                       } else {
                           // Rendering normal case
                           activateMode("Normal");
                       }
               });

              // Add an click event listener of div to launch sHealth application
              document.getElementById("action-steps").addEventListener("click", onOpenShealth);

              // Add eventListener to update the screen when the time zone is changed\
              tizen.time.setTimezoneChangeListener(function() {
                    updateTime();
             });

             //Add listner for pedometer data change
             tizen.humanactivitymonitor.setAccumulativePedometerListener(onchangedCB);\
} 

This function activates normal watch face on Gear device.
It will first remove the css class which is used for ambient mode and the add css for normal watch face.
It will change the visibility of the components to "visible" which were set as "hidden" in ambient mode.

    function showNormalWatch(){

             var myButtonClasses = document.getElementById("background").classList;

             if (myButtonClasses.contains("ambientBackground")) {
             myButtonClasses.remove("ambientBackground");
             }
             
             myButtonClasses.add(“normalBackground”);

             document.getElementById(("hand.main.second").style.visibility     = “visible”;
             document.getElementById(("components-steps").style.visibility     = “visible”;
             document.getElementById(("action-steps").style.visibility         = “visible”;
     }    

This function activates ambient watch face.
This is being done by changing the background of the watch face as black, which is done be adding the "ambientMode" class and setting the visibility of second niddle, steps countcomponent to hidden.

    function showAmbientWatch(){I

    var myButtonClasses = document.getElementById("background").classList;

    if (myButtonClasses.contains("normalBackground")){
    (myButtonClasses.remove("normalBackground");
    }

    myButtonClasses.add("ambientBackground");

    document.getElementById("hand-main-second").style.visibility   = "hidden";
    document.getElementById("components-steps").style.visibility   = "hidden";
    document.getElementById("action-steps").style.visibility       = "hidden";
} 
Initiates the watch face application.

     function init() {
              bindEvents();

              // Update the watch hands every second
              setInterval(function() {
                    updateTime();
              }, 1000);
      }

      window.onload = init();

}());

Add Styles to HTML Elements

  1. From Project Explorer, open css > style.css.
  2. Add the following code to the file:

html, body {
       
width: 100%;
       
height: 100%;
       
margin: 0px;
       
overflow: hidden;
}

Specify the style property for the Div id “container” declared in index.html.

#container {
       
width: 100%;
       
height: 100%;
       
overflow: hidden;
}

Define a class to set the properties of watch face “background” when it is in “normal” mode.

.normalBackground {
      
width: 100%;
      
height: 100%;
      
background-image: url("../image/background.png");
}

Define a class to set the properties of watch face “background” when it is in “ambient” mode. Here we are changing the image resource by specifying the URL of where the image is stored.

.amibentBackground {
      
width: 100%;
     
height: 100%;
      
background-image: url("../image/ambient.png");
}

Specify the style property for the Div id “index” declared in index.html. We are loading the image resource that shows the index of the watch.

#index {
      position: absolute;
      
width: 100%;
      
height: 100%;
      
background-image: url("../image/index.png");
}

Specify the style property for the Div id “components-main” declared in index.html.

#components-main {
        
position: absolute;
        
width: 100%;
}

Specify the style property for the Div id “hand-main-hour” declared in index.html. We are also loading the hour hand image.

#hand-main-hour {
        
position: absolute;
        
left: 170px;
        
top:80px;
        
width: 21px;
        
height: 111px;
        
background-image: url("../image/hour_hand.png");
        
transform-origin: 50% 90%;

}

Specify the style property for the Div id “hand-main-minute” declared in index.html and load the minute hand image.

#hand-main-minute {
        
position: absolute;
        
left: 174px;
        
top: 38px;
        
width: 12px;
        
height: 149px;
        
background-image: url("../image/minute_hand.png");
        
background-position: center top;
        
background-size: contain;
        
transform-origin: 50% 95.3%;
}

Specify the style property for the Div id “hand-main-second” declared in index.html and load the second hand image.

#hand-main-second {
        
position: absolute;
        
left: 174px;
        
top: 32px;
        
width: 12px;
        
height: 178px;
        
background-image: url("../image/seconds_hand.png");
        
background-position: center top;
        
background-size: contain;
        
transform-origin: 50% 83.15%;
}

Specify the style property for the Div id “components-steps” declared in index.html and load the step-count image.

#components-steps {
        position: absolute;
        
left: 134px;
        
top: 213px;
        
width: 92px;
        
height: 92px;
        
background-image: url("../image/steps_bg_03.png");
        
background-size: contain;
}

Specify the style property for the Div id “step-icon” declared in index.html, loading the background of the step-count icon.

#step-icon {
      
position: absolute;
      
left: 0px;
      
top: 0px;
      
width: 92px;
      
height: 92px;
      
background-image: url("../image/icon_steps_03.png");
      
background-size: contain;
}

Specify the style property for the Div id “step-count” declared in index.html.

#step-count {
      position: absolute;
      
left: 0px;
      
top: 38px;
      
width:92px;
      
height:20px;
      
color:#116DD1;
      
text-align: center;
      font-size: 20px;
      
font-weight: bold;
}

Specify the style property for the Div id “step-text” declared in index.html.

#step-text {
      position: absolute;
      
left: 0px;
      
top: 58px;
      
width:92px;
      
height:20px;
      
color:#AAAAAA;
      
text-align: center;
}

Specify the style property for the Div id “action-steps” declared in index.html. We are using a CSS property called “-webkit-tap-highlight-color” to give a visual cue to users. It changes color after the user taps on it.

#action-steps {
       position: absolute;
       
left: 134px;
       
top: 213px;
       
width: 92px;
       
height: 92px;
       
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

 

Replace the Default Icon

Replace the icon.png file in your project with the WatchSample icon.png file.

  1. From Project Explorer, go to Settings > Style > Watch Face > icon.png.
  2. Replace the icon.png file with your own icon for your project.

 

Run the Watch Face Application

From Project Explorer, right-click on your project, and select Run As > 1 Tizen Web Application.

 

The watch face looks like this:

Set the Watch Face in the Gear Watch 

To set the Gear watch face as active in the watch, go to Settings > Style > Watch faces, and select the developed watch face.

  • Was this article helpful?