Classic Watch Sample Overview

The Classic Watch sample application demonstrates how to implement the Tizen official classic watch face application.

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

Figure: Classic 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

To implement the application:

1. Set the http://tizen.org/category/wearable_clock category for watch applications in the config.xml file:

   <!--config.xml-->
   <?xml version="1.0" encoding="UTF-8"?>
   <widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets"
           id="http://yourdomain/ClassicWatch" version="1.0.0" viewmodes="maximized">
      <tizen:category name="http://tizen.org/category/wearable_clock"/>
   </widget> 

2. Define the application layout for the watch face application:

   1. Create a <div> element for each component in the index.html file:

      <!--index.html-->
      <!--Watch page-->
      <div id="watch-bg">
         <!--Watch page: Date-->
         <div id="date-bg">
             <div id="date-text"></div>
         </div>
         <!--Watch page: Hour-->
         <div id="hands-hr-needle" class="hands-hr"></div>
         <div id="hands-hr-shadow" class="hands-hr"></div>
         <!--Watch page: Minute-->
         <div id="hands-min-needle" class="hands-min"></div>
         <div id="hands-min-shadow" class="hands-min"></div>
         <!--Watch page: Second-->
         <div id="hands-sec-needle" class="hands-sec"></div>
         <div id="hands-sec-shadow" class="hands-sec"></div>
      </div>
      

   2. Set styles for the background of the watch face in the style.css file:

      <!--css/style.css-->
      <!--Watch page-->
      #watch-bg
      {
         width: 100%;
         height: 100%;
         position: absolute;
         background-image: url('../image/lux_3_bg_01.png');
         overflow: hidden;
      }
      

   3. Set styles for the watch face hands in the style.css file as well.

      The following example sets the style for the hour hand:

      <!--css/style.css-->
      <!--Watch page: hour-->
      .hands-hr
      {
         width: 30px;
         height: 260px;
         position: absolute;
         top: 50px;
         left: 165px;
         background-size: 30px 260px;
      }
      
      #hands-hr-needle
      {
         z-index: 2;
         background-image: url('../image/lux_3_hands_hr.png');
      }
      
      #hands-hr-shadow
      {
         z-index: 1;
         top: 54px;
         opacity: 0.5;
         background-image: url('../image/lux_3_hands_hr_shadow.png');
      }
      

3. Display the current time.

   Define a method for rotating the elements with a specific class name. It is used to rotate the hand elements.

   /* js/app.js */
   function rotateElements(angle, className)
   {
      var elements = document.querySelectorAll("." + className),
          i;
   
      for (i = 0; i < elements.length; i++)
      {
         elements[i].style.transform = "rotate(" + angle + "deg)";
      }
   }
   

   Use the getCurrentDateTime() 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();
   
      /* Update the hour/minute/second hands */
      rotateElements((hour + (minute / 60) + (second / 3600)) * 30, "hands-hr");
      rotateElements((minute + second / 60) * 6, "hands-min");
      rotateElements(second * 6, "hands-sec");
   }
   

4. Display the current date.

   Use the getCurrentDateTime() method of the Time API to get the current date object, and update the text for the date element:

   /* js/app.js */
   function updateDate(prevDate)
   {
      var datetime = tizen.time.getCurrentDateTime(),
          date = datetime.getDate(),
          nextInterval;
   
      /* Update the text for date */
      if (date < 10)
      {
         document.querySelector("#date-text").innerHTML = "0" + date;
      }
      else
      {
         document.querySelector("#date-text").innerHTML = date;
      }
   }
   

   Set a refresh callback to update the date on the next day:

   /* js/app.js */
   function updateDate(prevDate)
   {
      var datetime = tizen.time.getCurrentDateTime(),
          date = datetime.getDate(),
          nextInterval;
   
      /* Check the update condition */
      /* If prevDate is '0', it always updates the date */
      if (prevDate === date)
      {
         /*
            If the date was not changed (meaning that something went wrong),
            call updateDate again after a second
         */
         nextInterval = 1000;
      }
      else
      {
         /*
            If the date was changed,
            call updateDate at the beginning of the next day
         */
         /* Calculate how much time is left until the next day */
         nextInterval = (23 - datetime.getHours()) * 60 * 60 * 1000 +
                        (59 - datetime.getMinutes()) * 60 * 1000 +
                        (59 - datetime.getSeconds()) * 1000 +
                        (1000 - datetime.getMilliseconds()) + 1;
      }
   
      /* If an updateDate timer already exists, clear the previous timer */
      if (timerUpdateDate)
      {
         clearTimeout(timerUpdateDate);
      }
   
      /* Set next timeout for date update */
      timerUpdateDate = setTimeout(function()
      {
         updateDate(date);
      }, nextInterval);
   }
   

5. Add event listeners:

   • Add an event listener for the visibilitychange to update the screen immediately when the device wakes up.

   • Add the setTimezoneChangeListener() method of the Tizen Time API to update the screen when the time zone is changed.

   /* js/app.js */
   function init()
   {
      /* Add eventListener to update the screen immediately when the device wakes up */
      document.addEventListener("visibilitychange", function()
      {
         if (!document.hidden)
         {
            updateTime();
            updateDate(0);
         }
      });
   
      /* Add eventListener to update the screen when the time zone is changed */
      tizen.time.setTimezoneChangeListener(function()
      {
         updateTime();
         updateDate(0);
      });
   }