1
Interactive Mobile Device
Video App Tutorial
Version 1.00
Samsung Smart TV
Interactive Mobile Device Video App Tutorial
@Samsung Electronics Copyright All Rights Reserved
2
Overview ............................................................................................................................................................................ 4
1. Introduction ................................................................................................................................................................ 5
1.1. Development environment .............................................................................................................................. 5
2. Overall structure ......................................................................................................................................................... 6
2.1. Class description ............................................................................................................................................. 6
2.2. Directory structure .......................................................................................................................................... 7
3. Application Creation and Date Retrieval ................................................................................................................... 8
3.1. Initial setup for Simulator and SDK ............................................................................................................... 8
3.1.1. Subscribing Events.............................................................................................................................. 8
3.1.2. Variable Declaration of Interactive App API Type (Javscript) ............................................................ 8
3.2. Data Flow between SDK and the Mobile Simulator ....................................................................................... 8
3.2.1. Loading GUI ....................................................................................................................................... 8
3.2.2. Actions from Simulator to SDK .......................................................................................................... 9
Interactive Mobile Device Video App Tutorial
@Samsung Electronics Copyright All Rights Reserved
3
Preface
Purpose of Document
This document is a tutorial explaining the use of Interactive Remote device like smart phone in place of Remote Control
for controlling features and functionality of the Samsung Smart TV. It is recommended that you read App Development
Guide for Samsung Smart TV, Tigger App Development Guide, Tigger XML Guide and Tutorial_Video first.
Target Readers
This document is aimed at programmers who have used web development languages such as HTML, CSS, XML and
JavaScript, and will be even more helpful for those who have web development experience. This document has been
written on the assumption that readers have read the Guides mentioned above and have the experience of App
Development.
4
Overview
This tutorial will go step by step through the development of interactive Application .The Core App respond only to the
TV Remote control. In Interactive App the same thing is contolled using Interactive Remote (mobile devices) like smart
phone.This tutorial is sufficient enough for App Developer for making the currently running Video application as
interactive application. This tutorial extends the functionality of controlling the Video on TV through mobile
device.This tutorial consists of:
1) Creating video list to mobile device simulator.
2) Creating media control and controlling the Video through mobile device simulator.
3) Redrawing the video list to mobile device simulator.
5
1. Introduction
In order to develop the Interactive application, developers are required to have background knowledge such as HTML,
JavaScript, XML and CSS. There will be no explanation about HTML, JavaScript, XML or CSS provided in this
document. Developing applications suited for TVs is different from developing applications on PCs in several aspects.
You can get more information on this from the Guides.
Together, we’re going to write code for each development stage and you can see how each part of the code is completed.
1.1. Development environment
You are going to use the Samsung Smart TV SDK made by Samsung to create your application with mobile simulator
provided other than TV Apps SDK for controlling the Samsung Smart TV. It is possible to test your application, before
to run the application on TV using mobile simulator and the Samsung Smart TV SDK.
The Samsung Smart TV SDK also has the Emulator for controlling with App running on TV. You can control the App
on TV by any using Emulator attached with SDK or with Mobile Simulator but for testing Interactive functionality of
App you need to test the application using Interactive device like mobile simulator or mobile device.
@Samsung Electronics Copyright All Rights Reserved
6
2. Overall structure
In this section, we’re going to examine the structure of Interactive application that we will create.
2.1. Class description
Class Description
Main Key handling and coordination of all the application parts
Player Control of audio and video playback from the content server using a plugin
Audio Control of audio volume level using a plugin
Server Retrieval of RSS feed from the data server using AJAX techniques
Data Storage of video data within the application
Display Graphics and text display of information using dynamic HTML
tigger Key handling and controlling of TV App
XMLMaker Generating the XML Metadata from the string sent by the Interactive Remote
videotutorial.meta Making UI of the Interactive Remote device
Interactive App Creation Tutorial
@Samsung Electronics Copyright All Rights Reserved
7
7
2.2. Directory structure
Directory Description
Common Common modules provided by the App Manager./ In the current Development Common
module placed with the sdk.
CSS CSS files.
Images Image files
Javascript Javascript files
Xml To keep the XML files for the project
Videos To keep the video files Which on later be placed in apache server.
Interactive App Creation Tutorial
@Samsung Electronics Copyright All Rights Reserved
8
8
3. Application Creation and Date Retrieval
3.1. Initial setup for Simulator and SDK
3.1.1. Subscribing Events
This event is used for receiving information from mobile device to TV App.
_g_tiger.pluginAppCommon.SubscribeEvent(_g_tiger.PL_APPCOMMON_MESSAGE_XML_INPUT);
This event is used for sending information from TV App to mobile device.
_g_tiger.pluginAppCommon.SendEvent_XML_Sync(“sample.meta");
sample.meta :- This File used to create the initial UI to draw on simulator.
3.1.2. Variable Declaration of Interactive App API Type (Javscript)
Defined as Interactive App API variable
var_g_tiger= {
/* Define values for RemoteApp */
PL_APPCOMMON_MESSAGE_XML_INPUT : 46,
pluginAppCommon : null
};
3.2. Data Flow between SDK and the Mobile Simulator
3.2.1. Loading GUI
To display the list of videos, the sourceitem is defined in the tigger.js file and the same function is called in the Server
class. The sourceitem is defined with the tags like decription, identity, name of the video, description of the video, and
the action whenever you select a video. When you run the SDK application the server will send the video list to the
Interactive Remote. The picture shown below is the home screen of the interactive remote and is generated by the
function mentioned above:
Interactive App Creation Tutorial
@Samsung Electronics Copyright All Rights Reserved
9
9
3.2.2. Actions from Simulator to SDK
Once the UI has been successfully loaded, the user can click on the tags for performing various functions at Simulator
UI which will be reflected on the TV App. In this case the simulator sends the string in the below mentioned format to
the SDK. The tigger.js file acts as an interface for this functionality. The format is:
<action><select>i</select></action>
where “i” is the index of the current selected video from the list.
The tigger.js parses this string as follows:
if(xmlDoc.getElementsByTagName("select").length != 0)
{
str = xmlDoc.getElementsByTagName("select")[0].childNodes[0].nodeValue;
alert("str="+str);
alert("strBeforeClick="+strBeforeClick);
if(str>strBeforeClick){
alert("dOWN");
for(i=0;i<(str-strBeforeClick);i++){
Main.selectNextVideo(Main.DOWN);
Interactive App Creation Tutorial
@Samsung Electronics Copyright All Rights Reserved
10
10
}
strBeforeClick=str; }
if(str<strBeforeClick){
alert("uP");
for(i=0;i<(strBeforeClick-str);i++){
Main.selectPreviousVideo(Main.UP);
}
strBeforeClick=str; }
_tigger_send_play_control(strBeforeClick); }
We can see that in the <action> tag we were parsing according to the <menu> tag. So we see the contents of that tag and
find the value is “i”. This is the way of capturing the events from simulator. In this case we are calling the
“_tigger_send_play_control()” function which is taking us to the next screen where the media control keys can control
the video selection and playback functions of the video being selected from the list. The same is shown through the
pictures below:
@Samsung Electronics Copyright All Rights Reserved
11
All the changes which you can see on the simulator’s screen, upon selecting a video were defined in the
“_tigger_send_play_control()” function. So on selecting the video, the function is displaying the media keys, c
hanging the Title, and making a button to return to the previous video list menu. In relation to how to get th
ese elements on the screen, you can refer to Tigger XML Guide.
“_tigger_send_play_control()” is the function for redrawing the new UI.
function _tigger_send_play_control() {
var mediaMenuMeta = "";
var responseData="";
mediaMenuMeta = MakeMenuHeader(mediaMenuMeta);
Selecting the Video
Focus Pointer shifts to the
now selected video
Interactive App Creation Tutorial
@Samsung Electronics Copyright All Rights Reserved
12
12
mediaMenuMeta=MakeMenuItem(mediaMenuMeta,"menudetail", "media",Data.videoNames[searchStr]," " ,
"example/f.png", "action?menu=0","","");
mediaMenuMeta = MakeMenuFooter(mediaMenuMeta);
_g_tigger.pluginAppCommon.SendEvent_XML_Sync(mediaMenuMeta);
responseData = MakeSourceHeader(responseData, "menudetail");
responseData = MakeSourceHeader(responseData, "menudetail");
responseData = MakeSourceItem(responseData, "button", "", "backButton", "Return to Video List", "", "",
"action?back=1", "", "", "", "");
responseData = MakeSourceFooter(responseData);
alert(responseData);
_g_tigger.pluginAppCommon.SendEvent_XML_Sync(responseData);
}
The Simulator needs the data to recreate UI in the form of XML metadata. “XMLMaker.js” file defines the function to
reconstruct the data in a format which is understandable by the simulator. We start by derfining a variable (which is a
string type variable) in which we construct the metadata.
Metadata starts with the header:
function MakeMenuHeader(XMLBuffer){
XMLBuffer = "<menu>";
return XMLBuffer;
}
Then, we have the body of the item (in this case the item is “button”)
function MakeMenuItem(XMLBuffer, identifier, type, title, name, icon, onClick, onEvent, onHistory){
XMLBuffer = XMLBuffer + "<menuItem>";
if(identifier != null && identifier != "")
XMLBuffer = XMLBuffer + "<identifier>" + identifier + "</identifier>";
if(type != null && type != "")
XMLBuffer = XMLBuffer + "<type>" + type + "</type>";
if(title != null && title != "")
XMLBuffer = XMLBuffer + "<title>" + title + "</title>";
if(name != null && name != "")
XMLBuffer = XMLBuffer + "<name>" + name + "</name>";
if(icon != null && icon != "")
Interactive App Creation Tutorial
@Samsung Electronics Copyright All Rights Reserved
13
13
XMLBuffer = XMLBuffer + "<icon>" + icon + "</icon>";
if(onClick != null && onClick != "")
XMLBuffer = XMLBuffer + "<onClick>" + onClick + "</onClick>";
if(onEvent != null && onEvent != "")
XMLBuffer = XMLBuffer + "<onEvent>" + onEvent + "</onEvent>";
if(onHistory != null && onHistory != "")
XMLBuffer = XMLBuffer + "<onHistory>" + onHistory + "</onHistory>";
XMLBuffer = XMLBuffer + "</menuItem>";
return XMLBuffer;
}
And finally we have the footer
function MakeMenuFooter(XMLBuffer){
XMLBuffer = XMLBuffer + "</menu>";
return XMLBuffer;
}
Then, the method used to send the above data to the simulator is:
_g_tigger.pluginAppCommon.SendEvent_XML_Sync(relMenuMeta);
This way we can see the change of UI on the simulator.
After this you can now map the functionalities of these media keys to control the playback on the SDK. For drawing
sub items within the main menu items like buttons and media buttons we use methods called as: MakeSourceItems().
MakeSourceItems() :
These items also require Headers and Footers as were needed by the Menu items. These methods are also defined in
the XMLMaker.js file.
For constructing these items the methods are defined as follows in the tigger.js file :
responseData = MakeSourceHeader(responseData, "menudetail");
responseData = MakeSourceItem(responseData, "button", "", "backButton", "Return to Video List", "", "",
"action?back=1", "", "", "", "");
");
Interactive App Creation Tutorial
@Samsung Electronics Copyright All Rights Reserved
14
14
responseData = MakeSourceFooter(responseData);
The Information send to the Simulator using the sendEvent which is registered initially.
_g_tigger.pluginAppCommon.SendEvent_XML_Sync(responseData);
MakeSourceHeader(): MakeSourceHeader() used to create the header of the source item.
MakeSourceItem(): MakeSourceItem is used to create the body of the source item.
MakeSourceFooter(): This Method is used to create the footer of that item.
Note : For further details on XML Creation kindly refer to reference section of the document.
“action?back=1” : this defines what action is to be performed when this button is pressed. This is the way we draw the
buttons under the button tag. In the similar way one needs to draw the media buttons for playing, fast forwarding,
rewind, next, previous, start, stop, pause functions of the remote.
Now for decoding these buttons we need to parse the button actions:
action?back=1 : in this action we see “back” as the main tag and “1” is the value of the select tag. So whenever this
button is pressed we are sending the above string which can be parsed as:
else if(xmlDoc.getElementsByTagName("back").length !=0){
alert("back");
Player.stopVideo();
tigger_send_list(Data.videoNames,Data.videoDescriptions);
}
Here you can see that the “tigger_send_list()” is the same function which we were initially calling on start of the
simulator to display the video list.
The below pictures explain the above function:
Interactive App Creation Tutorial
@Samsung Electronics Copyright All Rights Reserved
15
15
Similarly, the functions for the media keys can be explained. When any of the media key is pressed the follo
wing will be called:
else if(xmlDoc.getElementsByTagName("button").length != 0) {
var keyInput = xmlDoc.getElementsByTagName("button")[0].childNodes[0].nodeValue;
tigger_detail_inputKey(keyInput);
}
“tigger_detail_inputKey(keyInput)” has been used to handle the key functioning and to map it to the SDK.
function tigger_detail_inputKey(keyInput){
var tmpContentsID;
switch (keyInput) {
case ("prev") :
Main.selectPreviousVideo(Main.UP);
strBeforeClick--;
_tigger_send_play_control(strBeforeClick);
break;
case ("next") :
Main.selectNextVideo(Main.DOWN);
strBeforeClick++;
_tigger_send_play_control(strBeforeClick);
break;
case ("rew") : //Page Up
alert("RW");
if(Player.getState() != Player.PAUSED)
Player.skipBackwardVideo();
break;
Click
Interactive App Creation Tutorial
@Samsung Electronics Copyright All Rights Reserved
16
16
case ("ff") : //Page Down
alert("FF");
if(Player.getState() != Player.PAUSED)
Player.skipForwardVideo();
break;
case ("enter") : //Enter
Main.toggleMode();
break;
case("play") : // Play Button
alert("PLAY");
Main.handlePlayKey();
break;
case("pause") : // Pause Button
alert("PAUSE");
Main.handlePauseKey();
break;
case("stop") : // Stop Button
alert("STOP");
Player.stopVideo();
break;
case ("volup"):
alert("VOL_UP");
if(Main.mute == 0)
Audio.setRelativeVolume(0);
break;
case ("voldown"):
downVolume();
break;
case ("mute"):
setMute();
break;
default :
return false;
break;
}
}
Interactive App Creation Tutorial
@Samsung Electronics Copyright All Rights Reserved
17
17
Here we are just calling the same functions which we were using for the video playback from the remote control. Below
we have given some examples explaining the functioning of media keys:
a) Playing the selected video:
Pressing the Play key Playing the video with Play and Stop Indication got active
@Samsung Electronics Copyright All Rights Reserved
18
b) Selecting the previous/next video:
Pressing the Previous key Title got changed to the title of previous video in the list
Focus pointer in the SDK got shifted to the previous video