--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>Classic Watch Sample Overview</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
+ </div>
+ <div id="toc_border">
+ <div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html">Time API</a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Classic Watch Sample Overview</h1>
+ <p>The Classic Watch sample application demonstrates how you can implement a simple watchface application.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Web Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the Classic Watch application.</p>
+ <p class="figure">Figure: Classic Watch screen</p>
+ <p align="center">
+ <img alt="Classic Watch screen" src="../images/classicwatch_ww.png" />
+ </p>
+ <p>The application opens with the main screen that shows the current time in an analog watchface.</p>
+
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <caption>Table: Source files</caption>
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>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.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file starts the application and music controls.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h2>Implementation</h2>
+ <h3>Defining the Category for Watchface Application</h3>
+ <p>The <span style="font-family: Courier New,Courier,monospace">config.xml</span> must contain a specific category (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/category/wearable_clock</span>) for watchface applications.</p>
+ <pre class="prettyprint">
+<!--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> </pre>
+
+ <h3>Defining the Application Layout</h3>
+ <p>To define the application layout for the watchface application:</p>
+<ol>
+<li>
+ <p>Create <span style="font-family: Courier New,Courier,monospace"><div></span> element for each component in <span style="font-family: Courier New,Courier,monospace">index.html</span>.</p>
+ <pre class="prettyprint">
+<!--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></pre>
+ </li>
+
+ <li>
+ <p>Set styles for the background of the watchface in <span style="font-family: Courier New,Courier,monospace">style.css</span>.</p>
+ <pre class="prettyprint">
+<!--css/style.css-->
+
+/*-------WATCH PAGE-------*/
+
+#watch-bg {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ background-image: url('../image/lux_3_bg_01.png');
+ overflow: hidden;
+} </pre>
+ </li>
+
+ <li>
+ <p>Set styles for the hands of the watchface in <span style="font-family: Courier New,Courier,monospace">style.css</span> as well.</p>
+ <p>For example, the hour hand can be described as:</p>
+ <pre class="prettyprint">
+<!--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');
+} </pre>
+ </li>
+</ol>
+
+<h3>Displaying the Current Time</h3>
+
+<p>To display the current time:</p>
+
+<ol>
+ <li>
+ <p>Define a function for rotating elements with a specific class name. It will be used to rotate hand elements.</p>
+ <pre class="prettyprint">
+/* 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)";
+ }
+} </pre>
+ </li>
+
+ <li>
+ <p>Use the <span style="font-family: Courier New,Courier,monospace">getCurrentDateTime()</span> method of the Time API to get the current time object, and rotate each hand element accordingly.</p>
+ <pre class="prettyprint">
+/* 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");
+} </pre>
+ </li>
+</ol>
+
+<h3>Displaying the Current Date</h3>
+
+<p>To display the current date:</p>
+
+<ol>
+ <li>
+ <p>Use the <span style="font-family: courier new,courier,monospace">getCurrentDateTime()</span> method of the Time API to get the current date object, and update the text for the date element.</p>
+ <pre class="prettyprint">
+/* 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;
+ }
+} </pre>
+ </li>
+
+ <li>
+ <p>Set a refresh callback to update the date on the next day.</p>
+ <pre class="prettyprint">
+/* 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);
+}</pre>
+ </li>
+</ol>
+
+<h3>Adding Event Listeners</h3>
+
+<ul>
+ <li>
+ <p>Add an event listener for <span style="font-family: courier new,courier,monospace">visibilitychange</span> to update the screen immediately when the device wakes up.</p>
+ </li>
+ <li>
+ <p>Add the <span style="font-family: courier new,courier,monospace">setTimezoneChangeListener()</span> method of the Tizen Time API to update the screen when the time zone is changed.</p>
+ </li>
+ <pre class="prettyprint">
+/* 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);
+ });
+} </pre>
+
+</ul>
+
+
+
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
projects / sdk / online-doc.git / commitdiff
