WorldClock Sample Overview

The WorldClock sample application demonstrates how you can create a world clock using the Time and Web Storage APIs.

For information on creating the sample application project in the IDE, see Creating Sample Applications.

The following figure illustrates the main screens of the WorldClock.

Figure: WorldClock screens

The application opens with a main screen that shows the current local time with a world map on the background.

To select the cities whose time is displayed, two-finger tap the main screen. In the Emulator, press the CTRL key and click twice on the Emulator screen.

The selected cities are indicated with colored marks on the map and correspondingly colored hour hands. The data for the selected cities is stored in the Web storage, so that the same settings can be applied when the application restarts.

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/data.js	This file contains the data array of the location and time zone information of the available countries.
js/main.js	This file contains the code for handling the main functionalities of the application.

Implementation

The setSize() function dynamically calculates and sets the size and margin of the canvas according to the screen size of different devices.

function setSize() 
{
   var pageWatch = document.getElementById('pageWatch'),
       divTable = document.getElementById('selectTable');

   pageWatch.style.width = document.body.clientWidth + 'px';
   pageWatch.style.height = document.body.clientHeight + 'px';
   divTable.style.paddingTop = ((document.body.clientHeight / 2) - (TABLE_HEIGHT / 2)) + 'px';
}

The drawWatch() function draws the layout and the content of the WorldClock.

The getCurrentDateTime() function of the Time API returns the time data of the current local time. The toTimezone(tzid) function returns the time data converted to a given time zone.

function drawWatch() 
{
   var i = 0,
       date = tizen.time.getCurrentDateTime(),
       hour = date.getHours(),
       minute = date.getMinutes(),
       second = date.getSeconds();

   /* Draw the layout of the clock, including the world map on the background */
   drawWatchLayout();

   /* Draw the minute hand and the hour hand of the current time of the user's default city */
   drawWatchContentDefault(hour, minute, second, 0, 0);

   /* Draw the colored hour hands for corresponding cities */
   for (i = 0; i < colorCity.length; i++) 
   {
      if (cityArray[colorCity[i].cityId].tzid !== 'NONE') 
      {
         hour = tizen.time.getCurrentDateTime().toTimezone(cityArray[colorCity[i].cityId].tzid).getHours();
         drawWatchContentCity(hour, minute, colorCity[i].colorCode,
                              cityArray[colorCity[i].cityId].mapX * (document.body.clientWidth / 360),
                              cityArray[colorCity[i].cityId].mapY * (document.body.clientWidth / 360));
      }
   }
}

To ensure that the hands of the clock move with the time, the drawWatch() function is called repeatedly every 500 milliseconds as defined in the setInterval() function.

setInterval(function() {drawWatch();}, 500);

The event listener with the 'touchstart' event determines the number of touch points the user places. When a two-finger tap event is received, the page for the city selection is displayed.

document.getElementById('myCanvas').addEventListener('touchstart', function(ev) 
{
   touch = ev.touches[0] || ev.changedTouches[0];
   touchList = ev.touches;

   if (touchList.length === 2) 
   {
      displayCity();
   }
});

The localStorage object stores the data for the selected cities. This way the data is not lost when the application is terminated, and it is available again when the application restarts.

document.getElementById('btnSave').addEventListener('click', function() 
{
   for (i = 0; i < colorCity.length; i++) 
   {
      localStorage.setItem(colorCity[i].colorCode, colorCity[i].cityId);
   }
   displayWatch();
   drawWatch();
});