Basic Watch Sample Overview

The Basic Watch sample application demonstrates how to implement a basic watch face with full functionality.

The following figure illustrates the main screen of the Basic Watch application.

Figure: Basic Watch screen

The application opens with the main screen that shows the current time.

Source Files

You can create and view the sample application project, including the source files, in the IDE.

Implementation

Watch Face Application Category

The config.xml contains a specific category (http://tizen.org/category/wearable_clock) for watch face applications.

<!--config.xml-->
<?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/BasicWatch" version="1.0.0" viewmodes="maximized">
   <tizen:category name="http://tizen.org/category/wearable_clock"/>
</widget>

Application Layout

To define the application layout for the watch face application:

1. Create a <div> element for each component:

   <!--index.html-->
   <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. Set styles for the watch face background:

   <!--css/style.css-->
   #background
   {
       width: 100%;
       height: 100%;
       background-image: url("../image/watch_bg.png");
   }
   

3. Set styles for the watch face hands. For example, the hour hand can be described as:

   <!--css/style.css-->
   #hand-main-hour
   {
       position: absolute;
       left: 172.5px;
       top: 0px;
       width: 15px;
       height: 360px;
       background-image: url("../image/watch_hand_hour.png");
       background-position: center top;
       background-size: contain;
   }
   

Current Time Display

To display the current time:

1. Define a function for rotating elements with a specific element ID. It is used to rotate the hand elements.

   /* js/app.js */
   function rotateElement(elementID, angle)
   {
      var element = document.querySelector("#" + elementID);
   
      element.style.transform = "rotate(" + angle + "deg)";
   }
   

2. Use the updateTime() method of the Time API to get the current time object, and rotate each hand element accordingly:

   /* js/app.js */
   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);
   }
   

Event Listeners

Add an event listener for the visibilitychange event to update the screen immediately when the device wakes up. In addition, use the setTimezoneChangeListener() method of the Time API to set a listener to update the screen when the time zone changes.

/* js/app.js */
function bindEvents()
{
   /* Add an event listener to update the screen immediately when the device wakes up */
   document.addEventListener("visibilitychange", function()
   {
      if (!document.hidden)
      {
         updateTime();
      }
   });

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