Interactive Mobile Device Video App Tutorial

Transcription

1 Interactive Mobile Device Video App Tutorial Version 1.00 Samsung Smart TV 1

2 Interactive Mobile Device Video App Tutorial Overview Introduction Development environment Overall structure Class description Directory structure Application Creation and Date Retrieval Initial setup for Simulator and SDK Subscribing Events Variable Declaration of Interactive App API Type (Javscript) Data Flow between SDK and the Mobile Simulator Loading GUI Actions from Simulator to SDK... Electronics Copyright All Rights Reserved 2

3 Interactive Mobile Device Video App Tutorial 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 Electronics Copyright All Rights Reserved 3

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. 4

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 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. 5

6 2. Overall structure In this section, we re going to examine the structure of Interactive application that we will create Class description Class Main Player Audio Server Data Display tigger XMLMaker videotutorial.meta Description Key handling and coordination of all the application parts Control of audio and video playback from the content server using a plugin Control of audio volume level using a plugin Retrieval of RSS feed from the data server using AJAX techniques Storage of video data within the application Graphics and text display of information using dynamic HTML Key handling and controlling of TV App Generating the XML Metadata from the string sent by the Interactive Remote Making UI of the Interactive Remote Electronics Copyright All Rights Reserved 6

7 2.2. Directory structure Directory Common CSS Images Javascript Xml Videos Description Common modules provided by the App Manager./ In the current Development Common module placed with the sdk. CSS files. Image files Javascript files To keep the XML files for the project To keep the video files Which on later be placed in apache Electronics Copyright All Rights 7 Reserved 7

8 3. Application Creation and Date Retrieval 3.1. Initial setup for Simulator and SDK 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 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 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 Electronics Copyright All Rights 8 Reserved 8

9 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++){ Electronics Copyright All Rights 9 Reserved 9

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 Electronics Copyright All Rights 10 Reserved 10

11 Selecting the Video Focus Pointer shifts to the now selected video 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 = Electronics Copyright All Rights Reserved 11

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, XMLBuffer = XMLBuffer + "<menuitem>"; title, name, icon, onclick, onevent, onhistory){ 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!= Electronics Copyright All Rights 12 Reserved 12

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", "", "", "", ""); Electronics Copyright All Rights 13 Reserved 13

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 Electronics Copyright All Rights 14 Reserved 14

15 Click 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); case ("next") : Main.selectNextVideo(Main.DOWN); strbeforeclick++; _tigger_send_play_control(strbeforeclick); case ("rew") : //Page Up alert("rw"); if(player.getstate()!= Player.PAUSED) Electronics Copyright All Rights 15 Reserved 15

16 case ("ff") : //Page Down alert("ff"); if(player.getstate()!= Player.PAUSED) Player.skipForwardVideo(); case ("enter") : //Enter Main.toggleMode(); case("play") : // Play Button alert("play"); Main.handlePlayKey(); case("pause") : // Pause Button alert("pause"); Main.handlePauseKey(); case("stop") : // Stop Button alert("stop"); Player.stopVideo(); case ("volup"): alert("vol_up"); if(main.mute == 0) Audio.setRelativeVolume(0); case ("voldown"): downvolume(); case ("mute"): setmute(); default : return Electronics Copyright All Rights 16 Reserved 16

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 Electronics Copyright All Rights 17 Reserved 17

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 Electronics Copyright All Rights Reserved 18