Page Example

Basic Watch Sample Overview

Wearable Web

Related Info

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

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.

Table: Source files
File name Description
config.xml This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.
css/style.css This file contains the CSS styling for the application UI.
index.html This is a starting file from which the application starts loading. It contains the layout of the application screens.
js/app.js This file starts the application and rotates the time hands.

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