+ All Categories
Home > Documents > Interactive Mobile Device Video App...

Interactive Mobile Device Video App...

Date post: 30-Aug-2019
Category:
Upload: others
View: 2 times
Download: 0 times
Share this document with a friend
18
1 Interactive Mobile Device Video App Tutorial Version 1.00 Samsung Smart TV
Transcript
Page 1: Interactive Mobile Device Video App Tutorialdjsiw1wjy8vi7.cloudfront.net/[SDK2.5]Documents_Tutorials/Tutorial... · phone.This tutorial is sufficient enough for App Developer for

1

Interactive Mobile Device

Video App Tutorial

Version 1.00

Samsung Smart TV

Page 2: Interactive Mobile Device Video App Tutorialdjsiw1wjy8vi7.cloudfront.net/[SDK2.5]Documents_Tutorials/Tutorial... · phone.This tutorial is sufficient enough for App Developer for

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

Page 3: Interactive Mobile Device Video App Tutorialdjsiw1wjy8vi7.cloudfront.net/[SDK2.5]Documents_Tutorials/Tutorial... · phone.This tutorial is sufficient enough for App Developer for

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.

Page 4: Interactive Mobile Device Video App Tutorialdjsiw1wjy8vi7.cloudfront.net/[SDK2.5]Documents_Tutorials/Tutorial... · phone.This tutorial is sufficient enough for App Developer for

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.

Page 5: Interactive Mobile Device Video App Tutorialdjsiw1wjy8vi7.cloudfront.net/[SDK2.5]Documents_Tutorials/Tutorial... · phone.This tutorial is sufficient enough for App Developer for

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.

Page 6: Interactive Mobile Device Video App Tutorialdjsiw1wjy8vi7.cloudfront.net/[SDK2.5]Documents_Tutorials/Tutorial... · phone.This tutorial is sufficient enough for App Developer for

@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

Page 7: Interactive Mobile Device Video App Tutorialdjsiw1wjy8vi7.cloudfront.net/[SDK2.5]Documents_Tutorials/Tutorial... · phone.This tutorial is sufficient enough for App Developer for

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.

Page 8: Interactive Mobile Device Video App Tutorialdjsiw1wjy8vi7.cloudfront.net/[SDK2.5]Documents_Tutorials/Tutorial... · phone.This tutorial is sufficient enough for App Developer for

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:

Page 9: Interactive Mobile Device Video App Tutorialdjsiw1wjy8vi7.cloudfront.net/[SDK2.5]Documents_Tutorials/Tutorial... · phone.This tutorial is sufficient enough for App Developer for

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);

Page 10: Interactive Mobile Device Video App Tutorialdjsiw1wjy8vi7.cloudfront.net/[SDK2.5]Documents_Tutorials/Tutorial... · phone.This tutorial is sufficient enough for App Developer for

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:

Page 11: Interactive Mobile Device Video App Tutorialdjsiw1wjy8vi7.cloudfront.net/[SDK2.5]Documents_Tutorials/Tutorial... · phone.This tutorial is sufficient enough for App Developer for

@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

Page 12: Interactive Mobile Device Video App Tutorialdjsiw1wjy8vi7.cloudfront.net/[SDK2.5]Documents_Tutorials/Tutorial... · phone.This tutorial is sufficient enough for App Developer for

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 != "")

Page 13: Interactive Mobile Device Video App Tutorialdjsiw1wjy8vi7.cloudfront.net/[SDK2.5]Documents_Tutorials/Tutorial... · phone.This tutorial is sufficient enough for App Developer for

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", "", "", "", "");

");

Page 14: Interactive Mobile Device Video App Tutorialdjsiw1wjy8vi7.cloudfront.net/[SDK2.5]Documents_Tutorials/Tutorial... · phone.This tutorial is sufficient enough for App Developer for

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:

Page 15: Interactive Mobile Device Video App Tutorialdjsiw1wjy8vi7.cloudfront.net/[SDK2.5]Documents_Tutorials/Tutorial... · phone.This tutorial is sufficient enough for App Developer for

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

Page 16: Interactive Mobile Device Video App Tutorialdjsiw1wjy8vi7.cloudfront.net/[SDK2.5]Documents_Tutorials/Tutorial... · phone.This tutorial is sufficient enough for App Developer for

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;

}

}

Page 17: Interactive Mobile Device Video App Tutorialdjsiw1wjy8vi7.cloudfront.net/[SDK2.5]Documents_Tutorials/Tutorial... · phone.This tutorial is sufficient enough for App Developer for

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

Page 18: Interactive Mobile Device Video App Tutorialdjsiw1wjy8vi7.cloudfront.net/[SDK2.5]Documents_Tutorials/Tutorial... · phone.This tutorial is sufficient enough for App Developer for

@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


Recommended