Chronograph Watch Sample Overview

The Chronograph Watch sample application demonstrates how to implement the Tizen official chronograph watch application.

The following figure illustrates the main screen of the Chronograph Watch.

Figure: Chronograph Watch screen

The application has a stopwatch mode, which measures the time with a 1/100-second precision.

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 the watch application in the config.xml file:

   <?xml version="1.0" encoding="UTF-8"?>
   <widget xmlns="http://www.w3.org/ns/widgets">
      <tizen:category name="http://tizen.org/category/wearable_clock" />
   </widget>
   

2. Make a snapshot of the main screen and refresh it for every animation frame using the drawMainAnimationFrame() method:

   function drawMainAnimationFrame(timestamp)
   {
      var elmInnerSecond = document.querySelector("#hand-dial-inner-second"),
          elmMainHour = document.querySelector("#hand-main-hour"),
          elmMainMinute = document.querySelector("#hand-main-minute"),
          datetime = tizen.time.getCurrentDateTime(),
          hour = datetime.getHours(),
          minute = datetime.getMinutes(),
          second = datetime.getSeconds(),
          millisecond = datetime.getMilliseconds(),
          sum;
   
      /* Second needle takes 60000 milliseconds to run 1 cycle */
      sum = millisecond + (second * 1000);
      setAnimationStyle(elmInnerSecond, NEEDLE_DATA, "START", "END", (sum / 60000));
      /* Minute needle takes 60 * 60000 milliseconds to run 1 cycle */
      sum += (minute * 60000);
      setAnimationStyle(elmMainMinute, NEEDLE_DATA, "START", "END", (sum / 3600000));
      /* Hour needle takes 12 * 60 * 60000 milliseconds to run 1 cycle */
      sum += (hour * 3600000);
      setAnimationStyle(elmMainHour, NEEDLE_DATA, "START", "END", ((sum % 43200000) / 43200000));
   
      animRequest = window.requestAnimationFrame(drawMainAnimationFrame);
   }
   

3. Calculate the style value by ratio from the difference between the style value of the start and the end positions.

   In this application, only transform: rotate style value is applied.

   /* Calculate the style value of the element for the moment */
   Object.keys(dataArray[origPos]).forEach(function(key)
   {
      switch (key)
      {
         case "transform":
            /* Remove the "rotate(" string, then parse float value */
            /* After parsing, calculate the result value and recover the prefix "rotate(" and suffix "deg)" */
            valOrigStyle = parseFloat(dataArray[origPos][key].substring(7));
            valDestStyle = parseFloat(dataArray[destPos][key].substring(7));
            valAnimStyle = "rotate(" + (valOrigStyle + (valDestStyle - valOrigStyle) * ratio) + "deg)";
            break;
         default:
            break;
      }
   
      elm.style[key] = valAnimStyle;
   });
   

4. Set the mode changing between the main mode and the stopwatch mode.

   The following example shows how to change the screen display, and how to reset the stopwatch before the screen is changed.

   switch (mode)
   {
      case "Stopwatch":
         /* Main -> Stopwatch */
         elmCompMain.style.display = "none";
         elmCompStopwatch.style.display = "block";
         elmCompToucharea.style.display = "none";
         break;
      case "Main":
         /* Stopwatch -> Main */
         resetStopwatch();
         animRequest = window.requestAnimationFrame(drawMainAnimationFrame);
         elmCompMain.style.display = "block";
         elmCompStopwatch.style.display = "none";
         elmCompToucharea.style.display = "block";
         break;
      default:
         break;
   }
   

5. When the mode is changed from stopwatch to main, the content of the stopwatch screen is reset.

   The following example shows how to reset the stopwatch by setting the default values.

   To start or pause the stopwatch, use the toggleStopwatch() method.

   /* If the stopwatch is working, stop it first */
   if (modeStopwatch === "Start")
   {
      toggleStopwatch();
   }
   
   /* Reset elapsed time variable */
   timeElapsed = 0;
   
   /* Clear all label texts and needle angles */
   setText(elmTextMinute, "00");
   setText(elmTextSecond, "00");
   setText(elmTextMsecond, "00");
   applyStyleTransition(elmStopwatchSecond, NEEDLE_DATA, "START", "END", 0);
   applyStyleTransition(elmStopwatchMinute, NEEDLE_DATA, "START", "END", 0);
   applyStyleTransition(elmStopwatchHour, NEEDLE_DATA, "START", "END", 0);
   

6. Start and stop the animation and change the button image:

   switch (modeStopwatch)
   {
      case "Pause":
         /* Pause -> Start */
         modeStopwatch = "Start";
         elmStopwatchStart.style.backgroundImage = "url('image/chrono_stopwatch_btn_stop.png')";
         animRequest = window.requestAnimationFrame(drawStopwatchAnimationFrame);
         break;
      case "Start":
         /* Start -> Pause */
         modeStopwatch = "Pause";
         timePrevFrame = 0;
         elmStopwatchStart.style.backgroundImage = "url('image/chrono_stopwatch_btn_resume.png')";
         window.cancelAnimationFrame(animRequest);
         break;
      default:
         break;
   }