Ambient Watch Sample Overview

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

The following figure illustrates the main screen of the AmbientWatch.

Figure: AmbientWatch 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.

Prerequisites

To ensure proper application execution, the following privilege must be set:

• http://tizen.org/privilege/alarm

Source Files

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

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.

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

    <!--Get timetick events, occuring once a minute to enable the UI to be updated-->
    <tizen:privilege name="http://tizen.org/privilege/alarm"/>
</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)
   {
      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");
ctx = canvas.getContext("2d");
/* Assigns the area that uses the canvas */
canvas.width = document.body.clientWidth;
canvas.height = canvas.width;
clockRadius = document.body.clientWidth / 2;

The application draws the clock the on the canvas element by using the drawNormalWatch() 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 drawNormalWatch()
{
    'use strict';

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

    animTimeout = setTimeout(function() {
        animRequest = window.requestAnimationFrame(drawNormalWatch);
    }, nextMove);
}

The following code presents drawing on the canvas element.

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

    ctx.save();
    // Assign the center of the clock to the middle of the canvas
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(angle);

    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.strokeStyle = "#ffffff";
    ctx.moveTo(0, 0);
    ctx.lineTo(clockRadius * radius, 0);
    ctx.stroke();
    ctx.closePath();

    ctx.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
        activateMode("Ambient");
    } else {
        // Rendering normal case
        activateMode("Normal");
    }
});

/* Add eventListener for timetick */
window.addEventListener("timetick", drawAmbientWatch);