Classic Watch Sample Overview

The Classic Watch sample application demonstrates how you can implement a simple watchface application.

For information on creating the sample application project in the IDE, see Creating Web Sample Applications.

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

Figure: Classic Watch screen

+ Classic Watch screen +

The application opens with the main screen that shows the current time in an analog watchface.

+ + +

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 music controls.

+ +

Implementation

Defining the Category for Watchface Application

The config.xml must contain a specific category (http://tizen.org/category/wearable_clock) for watchface applications.

+<!--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>

+ +

Defining the Application Layout

To define the application layout for the watchface application:

Create <div> element for each component in index.html.

+<!--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>

Set styles for the background of the watchface in style.css.

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

Set styles for the hands of the watchface in style.css as well.

For example, the hour hand can be described as:

+<!--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');
+}

+ +

Displaying the Current Time

+ +

To display the current time:

+ +

Define a function for rotating elements with a specific class name. It will be used to rotate 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");
+}

+ +

Displaying the Current Date

+ +

To 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 will always update 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);
+}

+ +

Adding Event Listeners

+ +

+
Add an event listener for 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);
+    });
+}

+ + + + + + +