Building the Base

Overview

The Gear S2 is a perfect example of having an intuitive user interface while utilizing the circular bezel, making it feel natural for the wearer. Tizen enhances that experience even further with its optimized power management and ecosystem.

The watch face is the first screen that the wearer will see day-to-day; part of it is the watch board.
The watch board is an integral element that will be used as a base to build a complete Tizen Watch application for the wearable.

Figure 1 The Final Watch Board

Figure 1 The Final Watch Board

Setting up the Environment

To build the Tizen native watch face for the wearable, the environment should be downloaded and installed:

  • Tizen 2.4 SDK

  • A Tizen Wearable Template

  • Watch Application Assets

Testing:

  • Samsung Gear S2

  • Emulator (Optional)

Preparing the Area

a. Open the Tizen IDE and create a new Tizen Web Project. In the New Project window, choose "Basic" inside "WEARABLE-2.3.1". Give your project a name and click Finish.

Figure 2 Create a new Web Project

Figure 2 Create a new Web Project

b. Since the Basic Web App template was used, it is not categorized as watch face.That is why we need to add the line. Add the following line to the config.xml file.

<tizen:category name="http://tizen.org/category/wearable_clock"/>

c. Since the Basic Web App template was used, it is not categorized as watch face.That is why we need to add the line. Add the following line to the config.xml file.

Figure 3 Asset Folder Placement

Figure 3 Asset Folder Placement

Step 2. Placing the Assets

a. In the index.html file, place <img> tags for every asset to be manipulated later on.As shown below, the hour, minute, and second hands are defined with the id and source path.

<html>

<head>
…
</head>

<body id="body">
	<img id="hour" src="/images/hand_hour.png">
	<img id="minute" src="/images/hand_minute.png">
	<img id="second" src="/images/hand_second.png">
	<img id="center" src="/images/center.png">
</body>
</html>

Step 3. Define Asset Properties

a.In the CSS file (style.css), define the background property by providing the URL to the image.

html {...}

body {
	width: 100%;
	height: 100%;
	margin: 0;
	background: url("/images/bg.png") center center no-repeat;
	overflow: hidden;
}

b. Set the position, z-index, and right properties of each image of the watch hands.

Note

The image with the higher z-index value overlaps the ones of lesser value.
The value of right is computed by taking off half the width of the image from 180px.

html {…}

body {…}

#hour{
	position: absolute;
	z-index: 2;
	right: 171px;
}

#minute {
	position: absolute;
	z-index: 3;
	right: 171px;
}

#second {
	position: absolute;
	z-index: 4;
	right: 172px;
}

#center{
	position: absolute;
	z-index: 5;
	right: 172px;
	top: 172px;
}

Step 4. Manipulating the Images

a. In the JS File (main.js), define the method drawWatchContent(). Use the rotate() method in the transform CSS property to rotate the watch hands according to its corresponding time.

function drawWatchContent(hour, minute, second) {
	document.getElementById("hour").style.transform  = "rotate("+
	((hour+minute/60)*30) +"deg)";

	document.getElementById("minute").style.transform  = "rotate("+
	((minute+second/60)*6) +"deg)";

	document.getElementById("second").style.transform = "rotate(" +
	(second * 6) + "deg)";
}

b. Define the drawWatch() method. Use tizen.time.getCurrentDateTime() method to get the hours, minutes, and seconds. Pass these parameters to drawWatchContent().

function drawWatchContent(hour, minute, second) {…}

function drawWatch() {
	var datetime, hour, minute, second;

	datetime = tizen.time.getCurrentDateTime();
	hour = datetime.getHours();
	minute = datetime.getMinutes();
	second = datetime.getSeconds();

	drawWatchContent(hour, minute, second);
}

c. In the window.onload event function, add setInterval() method to call the drawWatch() method every second (1000 miliseconds).

function drawWatchContent(hour, minute, second) {…}

function drawWatch() {…}

	window.onload = function() {
	// Start main loop

	setInterval(drawWatch,1000);

}

d. Add an eventListener to update the screen when the device wakes up.

function drawWatchContent(hour, minute, second) {…}

function drawWatch() {…}

window.onload = function() {
	// Start main loop

	setInterval(drawWatch,1000);

	// Add eventListener for screen update here
	document.addEventListener("visibilitychange", function() {
	if (!document.hidden) {
	drawWatch();
	}
});
};

Build and run the app on the emulator. Once you’ve successfully run the app in the emulator for testing. You can expect it to appear as the final watch board in figure 1.

Step 5. Testing the Watch Face

a. In the Project Explorer, right click on your project and select "Run As" then "Tizen Web Application"

Note

The Gear Emulator must be already running in the background.

Figure 4 Running the Watch App

Figure 4 Running the Watch App

b. Go to the Gear Emulator, swipe up (click and drag upwards) on the watch face, click on "Settings" and select "Clock".

c. Swipe left (click and drag from right to left) on the watch face options until the created watch face is displayed then click on it.

d. Click the Power button on the emulator(lower right button) to see the applied watch face.

Figure 5 The Watch Face Result

Figure 5 The Watch Face Result

Prev
Previous article does not exist