BasicWatch Sample Overview

The BasicWatch sample application demonstrates how you can create a simple application using the Canvas element.

For information on creating the sample application project in the IDE, see Creating Sample Applications, and on the coding of the sample application, see Basic Watch task.

The following figure illustrates the main screen of the BasicWatch.

Figure: BasicWatch screen

The application opens with the main screen that shows the current time.

When the ambient mode is enabled, the watch application with a limited UI can be displayed on the idle screen to reduce power consumption.

Source Files

You can create and view the sample application project including the source files in the IDE.

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/main.js	This file contains the code for the main application module used for initialization and application methods.

Implementation

The config.xml file contains the application information required to install and launch the application. The category name (http://tizen.org/category/wearable_clock) defines the application to be installed as a wearable clock application.

To enable a custom UI for the ambient mode, the ambient_support attribute must be set to enable. Additionally, the http://tizen.org/privilege/alarm privilege must be set to get timetick events, which occur once a minute to enable the UI to be updated.

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://yourdomain/BasicWatch" version="1.0.0" viewmodes="maximized">
   <tizen:category name="http://tizen.org/category/wearable_clock"/>
   <tizen:application id="OEYCjlM8hl.BasicWatch" package="OEYCjlM8hl" required_version="2.3" ambient_support="enable"/>

   <tizen:privilege name="http://tizen.org/privilege/alarm"/>
   <tizen:setting background-support="disable" encryption="disable" hwkey-event="enable"/>
</widget>

The GetDate function returns the current time object from the Time API. If an exception is thrown, the function returns a new Date object.

/* js/main.js */
function getDate() 
{
   'use strict';

   var date;
   try 
   {
      date = tizen.time.getCurrentDateTime();
   } 
   catch (err) 
   {
      console.error('Error: ', err.message);
      date = new Date();
   }

   return date;
}

The following code presents how to get the canvas context and how to set the canvas size.

/* js/main.js */
canvas = document.querySelector('canvas');
context = canvas.getContext('2d');
clockRadius = document.body.clientWidth / 2;

/* Assigns the area that uses the canvas */
canvas.width = document.body.clientWidth;
canvas.height = canvas.width;

The application draws the clock the on the canvas element by using the watch() method. The first step is clearing the whole canvas element using the clearRect() method and repainting the canvas object using the requestAnimationFrame() method.

/* js/main.js */
function watch() 
{
   'use strict';

   context.clearRect(0, 0, context.canvas.width, context.canvas.height);

   window.requestAnimationFrame(watch);
}

The following code presents drawing on the canvas element.

/* js/main.js */
function renderNeedle(angle, radius) 
{
   'use strict';

   context.save();
   context.rotate(angle);
   context.beginPath();
   context.lineWidth = 4;
   context.strokeStyle = '#fff';
   context.moveTo(6, 0);
   context.lineTo(radius, 0);
   context.closePath();
   context.stroke();
   context.closePath();
   context.restore();
}

To bind an event callback to ambient events, use the following event listeners:

/* Add eventListener for ambientmodechanged */
window.addEventListener('ambientmodechanged', function(e) 
{
   if (e.detail.ambientMode === true) 
   {
      /* Rendering ambient mode case */
      isAmbientMode = true;
      ambientWatch();
   } 
   else 
   {
      /* Rendering normal case */
      isAmbientMode = false;
      window.requestAnimationFrame(watch);
   }
});

/* Add eventListener for timetick */
window.addEventListener('timetick', function() 
{
   ambientWatch();
});