Using the Remote Control

Overview

The Samsung Tizen TV can be controlled by two types of remote control – the Smart Controller and the Basic Controller. It is important that the developer knows how to handle inputs from these remote controllers when developing web applications for Smart TVs.

In this tutorial, a sample game application will be developed which can be played on a Smart TV using the remote control. As a prerequisite, the developer is expected to have a basic knowledge in developing Tizen web applications in order to keep up with the steps in creating the game app.

Figure 1 Types of Remote Controls

Figure 1 Types of Remote Controls
(L to R) Smart (2015), Basic (US), Basic (EU), Smart (2016)

Setting up the Environment

Below are the requirements for developing the sample app:

  • Tizen IDE 2.4

  • Tizen TV Emulator / Simulator

  • Tizen TV Web Simulator

For testing:

  • Smart TV (Optional)

  • Remote Control (Optional)

The Game

The goal of the Minefield is to reveal all the tiles that do not contain a bomb. Otherwise, all bombs will explode and the player loses.

The rule is simple:

  • Reveal a bomb and the game ends.

  • Reveal a numbered tile and it tells the number of bombs adjacent to it.

  • Reveal an empty space and all the adjacent empty tiles and some adjacent numbered tiles will be revealed.

Figure 1 Minefield
Figure 1 Minefield

The game is controlled using the remote control keys. On the Menu Screen, use the ArrowLeft and ArrowRight keys to navigate on the menu items and use the Enter key to select/click a menu item. On the Board Screen, use the four directional keys (ArrowLeft, ArrowUp, ArrowRight, and ArrowDown) to navigate on the minefield and use the Enter key reveal the selected tile.

Importing the Game App

a. Launch the Samsung TV IDE and import the Minefield project.

Figure 2 New Tizen Web Project

Figure 2 New Tizen Web Project

b. In the Project Explorer, expand the Minefield project and review the contents.

Figure 3 VSMSample Project

Figure 3 VSMSample Project

Step 2. Declaring the Remote Control Keys

The following table lists the KeyNames and KeyCodes supported by Samsung Tizen TV. The remote control keys that will be used include the four directional keys (ArrowLeft, ArrowUp, ArrowRight, and ArrowDown), the Enter key, the Back key, and the Exit key.

KeyName Key Code KeyName Key Code KeyName Key Code
ArrowLeft 37 MediaPlayPause 10252 Menu 18
ArrowUp 38 MediaRewind 412 Tools 10135
ArrowRight 39 MediaFastForward 417 Info 457
ArrowDown 40 MediaPlay 415 Exit 10182
Enter 13 MediaPause 19
Back 10009 MediaStop 413 Caption 10221
MediaRecord 416 ChannelList 10073
VolumeUp 447 MediaTrackPrevious 10232 E-Manual 10146
VolumeDown 448 MediaTrackNext 10233 3D 10199
VolumeMute 449
ChannelUp 427 0 48 PictureSize 10140
ChannelDown 428 1 49 Soccer 10228
2 50 Teletext 10200
ColorF0Red 403 3 51
ColorF1Green 404 4 52 Search 10225
ColorF2Yellow 405 5 53 Guide 458
ColorF3Blue 406 6 54 Source 10072
7 55 Extra 10253
8 56 MTS 10195
9 57
Minus 189
PreviousChannel 10190

a. Open the config.xml and declare the following privilege to allow the application to receive input device events.

<tizen:privilege name="http://tizen.org/privilege/tv.inputdevice"/>

b. n the main.js file and add the following code in Game.init() function which registers the remote control key.

tizen.tvinputdevice.registerKey("Exit");
Note

The default remote control keys include the four directional keys (ArrowLeft, ArrowUp, ArrowRight, and ArrowDown), the Enter key, and the Back key. Default keys can be used even if not registered. Other keys should be registered before use.

c. Add the following code in Game.exit() function. This will unregister the remote control key.

tizen.tvinputdevice.unregisterKey("Exit");

d. Declare the following KeyNames and KeyCodes for the Minefield game.

var KEY_ARROW_LEFT = 37;
var KEY_ARROW_UP = 38;
var KEY_ARROW_RIGHT = 39;
var KEY_ARROW_DOWN = 40;
var KEY_ENTER = 13;
var KEY_BACK = 10009;
var KEY_EXIT = 10182;

Step 3. Adding and Removing Event Listeners for the Remote Control Keys

Minefield has three main screens – the Menu, the Board, and the Popup Screens. As the function of the remote control keys varies depending on the current screen, different listeners will be used for each screen.

Menu Screen

a.In the Menu.load() function, add the following code to add event listener to the Menu Screen.

document.addEventListener('keydown', Controller.menu);

b. In the Menu.unload() function, add the following code to remove event listener from the Menu Screen.

document.removeEventListener('keydown', Controller.menu);

c. In the Menu.resume() function, add the following code to add event listener to the Menu Screen.

document.addEventListener('keydown', Controller.menu);

d. In the Menu.pause() function, add the following code to remove event listener from the Menu Screen.

document.removeEventListener('keydown', Controller.menu);
Board Screen

a. In the Board.load() function, add the following code to add event listener to the Board Screen.

document.addEventListener('keydown', Controller.board);

b. In the Board.unload() function, add the following code to remove event listener from the Board Screen.

document.removeEventListener('keydown', Controller.board);

c. In the Board.resume() function, add the following code to add event listener to the Board Screen.

document.addEventListener('keydown', Controller.board);

d. In the Board.pause() function, add the following code to remove event listener from the Board Screen.

document.removeEventListener('keydown', Controller.board);
Popup Screen

a. In Popup.alert() function, add the following code to add event listener when the Alert Popup is displayed.

document.addEventListener('keydown', Controller.popup);

b. In Popup.confirm() function, add the following code to add event listener when the Confirm Popup is displayed.

document.addEventListener('keydown', Controller.popup);

c. In Popup.unload() function, add the following code to remove event listener when the Popup Screen is unloaded.

document.removeEventListener('keydown', Controller.popup);

Step 4. Adding Event Handlers for the Remote Control Keys

a. In this step, you will call the Minefield related functions based on the current screen and the KeyCode of the remote control key.

The Controller object, add the following event handlers for the Menu Screen.

menu: function(e){
	switch(e.keyCode){
		case KEY_ARROW_LEFT:
			Menu.navigate("left");
			break;
		case KEY_ARROW_RIGHT:
			Menu.navigate("right");
			break;
		case KEY_ENTER:
			Menu.select();
			break;
		case KEY_BACK:
			Popup.confirm("Are you sure you want to exit?", "exit", "menu");
			break;
		case KEY_EXIT:
			Popup.confirm("Are you sure you want to exit?", "exit", "menu");
			break;
	}
},

b. The Controller object, add the following event handlers for the Board Screen>.

board: function(e){
	switch(e.keyCode){
		case KEY_ARROW_LEFT:
			Board.navigate("left");
			break;
		case KEY_ARROW_RIGHT:
			Board.navigate("right");
			break;
		case KEY_ARROW_UP:
			Board.navigate("up");
			break;
		case KEY_ARROW_DOWN:
			Board.navigate("down");
			break;
		case KEY_ENTER:
			Board.reveal(Data.board_selected);
			break;
		case KEY_BACK:
			Popup.confirm("Are you sure you want to quit?", "quit", "board");
			break;
		case KEY_EXIT:
			Popup.confirm("Are you sure you want to exit?", " exit ", "board");
			break;
	}
},

c. The Controller object, add the following event handlers for the Popup Screen.

popup: function(e){
	switch(e.keyCode){
		case KEY_ARROW_LEFT:
			Popup.navigate("left");
			break;
		case KEY_ARROW_RIGHT:
			Popup.navigate("right");
			break;
		case KEY_ENTER:
			Popup.select();
			break;
	}
}

Step 5. Registering Certificates

Every Tizen app must be digitally signed with a certificate to ensure the authenticity of the app. For this tutorial, the Security Profile will only be made locally. For detailed instructions on how to generate signatures, navigate to: www.samsungdforum.com/tizenguide/tizen3531/index.html.

  1. In the IDE, click Window > Preferences.

  2. Then select Tizen SDK > Security Profiles.

  3. At the Profiles section, click Add button.

  4. Enter a profile name then click OK.

  5. On the Author Certificate section, click Generate button.

  6. Fill up the blanks marked as required (*). The others are optional.

  7. Confirm the popup to fill the author certificate information automatically.

  8. Click Apply button then click OK.

Step 6. Running the Game App

You can test and run the app even without a Samsung Tizen TV by using an emulator or simulator.

Popup Screen
  1. In the Connection Explorer, click the Emulator Manager icon.

  2. On the Emulator Manager window, click the Create New Emulator then select TV.

  3. You may want to edit the values in the form provided.

  4. Click Confirm button.

  5. The created emulator will be added on the Emulator List.

  6. Select the emulator and click the Play icon to launch the selected emulator.

  7. Right click on the project name and select Run As > Tizen Web Application.

  8. The app will run in the main area of the Virtual TV Screen.

  9. Use the virtual Remote Control to play the game.

Running in the Simulator
  1. Right click on the project name and select Run As > Tizen Web Simulator Application (Samsung TV). This will launch the Samsung Tizen TV Web Simulator.

  2. The app will run in the main area of the Virtual TV Screen.

  3. Use the virtual Remote Control to play the game.