Canvas Watch Sample Overview

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

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

Figure: Canvas Watch screen

Watch applications are available in system setting:

• Open Settings on the wearable emulator/device
• Tap Clock
• Move right or left to select a Watch application

The application opens with the screen that shows the current time in an analog watch face.

Source Files

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

Implementation

For watch applications, a specific category (http://tizen.org/category/wearable_clock) must be set in config.xml.

<!-- config.xml -->	

<widget xmlns="http://www.w3.org/ns/widgets">
   <tizen:category name="http://tizen.org/category/wearable_clock" />
</widget>

The getContext() method returns an object which provides methods and properties on the canvas.

/* js/app.js */

canvasLayout = document.querySelector("#canvas-layout");
ctxLayout = canvasLayout.getContext("2d");


// Set the canvases square
canvasLayout.width = document.body.clientWidth;
canvasLayout.height = canvasLayout.width;

The application uses the properties and methods of the getContext("2d") object to draw circles, lines, and texts on the canvas.

• The arc() method is used to create circle elements:
  To created circle, set start angle to 0 and the end angle to 2 * Math.PI.

/* js/app.js */

function renderCircle(context, center, radius, color) {
    context.save();
    context.beginPath();
    context.fillStyle = color;
    context.arc(center.x, center.y, radius, 0, 2 * Math.PI);
    context.fill();
    context.closePath();
    context.restore();
}

• The moveTo() and the lineTo() methods are used to create needle elements:

/* js/app.js */

function renderNeedle(context, angle, startPoint, endPoint, width, color) {
    var radius = context.canvas.width / 2,
        centerX = context.canvas.width / 2,
        centerY = context.canvas.height / 2,
        dxi = radius * Math.cos(angle) * startPoint,
        dyi = radius * Math.sin(angle) * startPoint,
        dxf = radius * Math.cos(angle) * endPoint,
        dyf = radius * Math.sin(angle) * endPoint;

    context.save();
    context.beginPath();
    context.lineWidth = width;
    context.strokeStyle = color;
    context.moveTo(centerX + dxi, centerY + dyi);
    context.lineTo(centerX + dxf, centerY + dyf);
    context.stroke();
    context.closePath();
    context.restore();
}

• The font property and the fillText() method are used to create text elements:

/* js/app.js */

function renderText(context, text, x, y, textSize, color) {
    context.save();
    context.beginPath();
    context.font = textSize + "px Courier";
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.fillStyle = color;
    context.fillText(text, x, y);
    context.closePath();
    context.restore();
}

The application draws the layout and the content of the watch on the canvas.

• For drawing the basic layout of the watch:

/* js/app.js */
	
function drawWatchLayout() {
    var grd,
        angle,
        i,
        j;

    // Clear canvas
    ctxLayout.clearRect(0, 0, ctxLayout.canvas.width, ctxLayout.canvas.height);

    // Draw the background circle
    renderCircle(ctxLayout, center, watchRadius, "#000000");
    grd = ctxLayout.createLinearGradient(0, 0, watchRadius * 2, 0);
    grd.addColorStop(0, "#000000");
    grd.addColorStop(0.5, "#454545");
    grd.addColorStop(1, "#000000");
    ctxLayout.fillStyle = grd;
    renderCircle(ctxLayout, center, watchRadius * 0.945, grd);
    renderCircle(ctxLayout, center, watchRadius * 0.7, "#000000");

    // Draw the dividers
    // 60 unit divider
    for (i = 1; i <= 60; i++) {
        angle = (i - 15) * (Math.PI * 2) / 60;
        renderNeedle(ctxLayout, angle, 0.95, 1.0, 1, "#c4c4c4");
    }

    // 12 unit divider
    for (j = 1; j <= 12; j++) {
        angle = (j - 3) * (Math.PI * 2) / 12;
        renderNeedle(ctxLayout, angle, 0.7, 0.945, 10, "#c4c4c4");
    }

    renderText(ctxLayout, "TIZEN WATCH", center.x, center.y - (watchRadius * 0.4), 25, "#999999");
}

• For drawing the content of the watch:
  The getCurrentDateTime() method returns the current time and date object from the Tizen Time API.

/* js/app.js */

function drawWatchContent() {
    var datetime = tizen.time.getCurrentDateTime(),
        hour = datetime.getHours(),
        minute = datetime.getMinutes(),
        second = datetime.getSeconds(),
        date = datetime.getDate();

    // Clear canvas
    ctxContent.clearRect(0, 0, ctxContent.canvas.width, ctxContent.canvas.height);

    // Draw the hour needle
    renderNeedle(ctxContent, Math.PI * (((hour + minute / 60) / 6) - 0.5), 0, 0.50, 3, "#454545");

    // Draw the minute needle
    renderNeedle(ctxContent, Math.PI * (((minute + second / 60) / 30) - 0.5), 0, 0.70, 3, "#454545");

    // Draw the minute/hour circle
    renderCircle(ctxContent, center, 8, "#454545");

    // Draw the second needle
    ctxContent.shadowOffsetX = 4;
    ctxContent.shadowOffsetY = 4;
    renderNeedle(ctxContent, Math.PI * ((second / 30) - 0.5), -0.10, 0.85, 1, "#c4c4c4");

    // Draw the second circle
    ctxContent.shadowOffsetX = 0;
    ctxContent.shadowOffsetY = 0;
    renderCircle(ctxContent, center, 5, "#c4c4c4");

    // Draw the center circle
    renderCircle(ctxContent, center, 2, "#454545");

    // Draw the text for date
    renderText(ctxContent, date, center.x, center.y + (watchRadius * 0.5), 25, "#999999");
}

The layout of the watch is drawn only once at the beginning, and the content of the watch gets updated every second.

/* js/app.js */

function init() {
    // Draw the basic layout and the content of the watch at the beginning
    drawWatchLayout();
    drawWatchContent();

    // Update the content of the watch every second
    setInterval(function() {
        drawWatchContent();
    }, 1000);
}