AnalogWatch Sample Overview

The AnalogWatch 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.

The following figure illustrates the main screen of the AnalogWatch.

Figure: AnalogWatch screen

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

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 screen.
js/lowBatteryCheck.js	This file contains the code for the methods for checking the battery state in the device.
js/main.js	This file contains the code for the main application module used for initialization and application methods.

Implementation

The config.xml contains a specific category (http://tizen.org/category/wearable_clock) for the clock application:

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" 
   <tizen:category name="http://tizen.org/category/wearable_clock" />
</widget>

The getCurrentDateTime() method returns the current time and date object from the Time API:

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

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

canvas = document.querySelector("#myCanvas");
context = canvas.getContext("2d");

/* Set a canvas square */
canvas.width = document.width;
canvas.height = canvas.width;

The application draws the watch layout on the canvas element by using the drawWatchLayout() method:

• The first step of painting is to clear the entire canvas element using the clearRect() method and to draw a background circle:

  function drawWatchLayout() 
  {
     /* Clear canvas */
     context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  
     /* Draw a background circle */
     drawCircle(centerX, centerY, watchRadius, "#000000");
  }
  

• The following code presents drawing the hour and minute needle on the canvas element:

  function drawWatchContent(hour, minute, second, date) 
  {
     /* Draw an hour needle */
     drawNeedle(Math.PI * (((hour + minute / 60) / 6) - 0.5), 0, 0.50, 3, "#454545");
  
     /* Draw a minute needle */
     drawNeedle(Math.PI * (((minute + second / 60) / 30) - 0.5), 0, 0.70, 3, "#454545");
  }