overlaid image from flash memory...
TRANSCRIPT
@Samsung Electronics Copyright All Rights Reserved 1
Overlaid Image from Flash Memory
Tutorial
Version 1.00
Samsung Smart TV
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 2
1. OVERVIEW .............................................................................................................................................................. 4
2. INTRODUCTION .................................................................................................................................................... 4
2.1. DEVELOPMENT ENVIRONMENT ............................................................................................................................ 4
3. OVERALL STRUCTURE ....................................................................................................................................... 5
3.1. THE APP‟S DESIGN ............................................................................................................................................... 5
3.2. APP PROJECT DIRECTORY STRUCTURE .................................................................................................................. 5
4. APP CREATION....................................................................................................................................................... 6
4.1. STAGE 1 - CREATING THE BASIC APP ................................................................................................................... 6
4.2. STAGE 2 - CREATING THE FLASH FILE ................................................................................................................ 33
4.3. STAGE 3 - COMMUNICATING WITH FLASH FILE USING JAVASCRIPT ..................................................................... 37
5. CONCLUDING REMARKS ................................................................................................................................. 39
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 3
Preface
Purpose of Document
This document is a tutorial that is aimed at App developers for Samsung Smart TV, and is written to help developers
understand how to use the Adobe Flash Player features of the Samsung App service. These features are needed to access
Flash Memory and display their contents (images) by putting overlaid images on App and then remove it. With the help
of this tutorial a user can learn how to access Flash memory and display/hide its contents on flash.
It is recommended that you read “Development Guide for Samsung Smart TV” (hereinafter referred to as "the Guide")
and USB APIs. This document provides references to the Guide tutorial for your understanding. Other
recommendations are “Flash App Creation Tutorial” and “Samsung Smart TV SDKUX Guideline”.
Target Readers
This document is aimed at programmers who have used web development languages such as HTML, CSS, Action
Script and JavaScript. This document has been written on the assumption that readers have already read the Guide.
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 4
1. Overview
This tutorial will go step by step through the development of a App that features Flash Memory access and display
overlaid JPEG pictures like a stack and then removing images one-by-one. The main goal for this tutorial is to present
basic ideas in clear and possibly simple way. It focuses on providing basic code that needs to take place in any App that
uses Flash Memory Access. At the time of writing the Samsung Smart TV engine is supporting version 10 of the
Adobe Flash Player.
2. Introduction
In order to develop the Adobe Flash Player App, developers are required to have background knowledge such as HTML,
JavaScript, ActionScript and CSS. In general, there will be no explanation about HTML, JavaScript, ActionScript or
CSS provided in this document. However some aspects including cooperation between JavaScript and ActionScript will
be discussed as they are crucial for good understanding of the idea. Developing Apps suited for TVs is different from
developing Apps on PCs in several aspects. You can get more information on this from the Guide.
2.1. Development environment
You are going to use the Samsung Smart TV SDK ("SWDK") version 1.5 made by Samsung to create your App. With
use of the emulator provided with the SWDK, you can operate your App before actually putting it in your TV.
It is also possible to run the App on a TV using the "User App" feature. For details of this process please see the
document "User App for Samsung Apps Into a TV Set". Uploading to a TV is recommended as a test method.
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 5
3. Overall structure
In this section, we are going to examine the structure of the App that we will create.
3.1. The App’s design
Our Flash Player App will be composed of the following parts:
1. ActionScript based application:
a. Load_image.swf file - generated by the Flash application and played by Flash Player.
b. Load_image.fla file - contains ActionScript code to control the playback.
2. JavaScript based application:
a. Main.js - module with the basic player functionality
b. usb.js - Accesses Flash Memory devices and Contents
c. usbController.js - Helps in browsing contents
d. usbUI.js - Handles Displaying contents of Flash Memory
e. structure.js - Handles to store contents with relevant File/Directory information
3.2. App project directory structure
The following picture presents the App project directory structure:
Fig 1: File/Directory structure
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 6
Files/Directories Description
Common Includes the common Javascript APIs used in App
Javascript Includes the Javascript files used in App
Images Includes the all image files used in App
index.html Html file which runs in App
config.xml Configuration file for App
Main.css Cascade style sheet file
Load_Image.swf Flash file
Load_image.fla contains ActionScript code to control the flash display
4. App Creation
This section will briefly show the initial configuration of the App. It assumes that basic App creation is already
understood by the reader. For more detail on this part, please see the Guide tutorial.
4.1. Stage 1 - Creating the Basic App
Start the SWDK for Samsung TV Apps. Create a new App using the following config.xml file:
<?xml version="1.0" encoding = "UTF-8" ?>
<widget>
<widgetname>Image Overlay from USB</widgetname>
<type>user</type>
<fullwidget>y</fullwidget>
<srcctl>n</srcctl>
<flashplayer>y</flashplayer>
<category>others</category>
<ver>1.04</ver>
<ThumbIcon>Images/tut_106.png</ThumbIcon>
<BigThumbIcon>Images/tut_115.png</BigThumbIcon>
<ListIcon>Images/tut_85.png</ListIcon>
<BigListIcon>Images/tut_95.png</BigListIcon>
<description>Drawing overlaid Image from USB</description>
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 7
<width>960</width>
<height>540</height>
<author>
<name>Samsung Electronics Co. Ltd.</name>
<email></email>
<link>http://www.samsung.com</link>
<organization>Samsung Electronics Co. Ltd.</organization>
</author>
</widget>
<fullwidget>y</fullwidget> - this means that the App will run in full screen mode. This affects what keys are
registered by default.
<type>user</type> - this enables the user App feature for testing on a real TV set. This tag has no effect on the
emulator.
Add a file index.html as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Image Overlay From USB App Tutorial</title>
<!-- CSS -->
<link rel='stylesheet' type='text/css' href = 'Main.css'/>
<!-- Common widget API -->
<script type="text/javascript" src="$MANAGER_WIDGET/Common/API/Plugin.js"></script>
<script type="text/javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
<script type="text/javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>
<script type="text/javascript" src="$MANAGER_WIDGET/Common/Util/Language.js"></script>
<script type="text/javascript" src="$MANAGER_WIDGET/Common/Util/Include.js"></script>
<script type="text/javascript" src="$MANAGER_WIDGET/Common/Plugin/Define.js"></script>
<!-- Scripts -->
<script type='text/javascript' language='javascript' src='Javascript/Main.js'></script>
<script type='text/javascript' language='javascript' src='Javascript/usb.js'></script>
<script type='text/javascript' language='javascript' src='Javascript/structure.js'></script>
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 8
<script type='text/javascript' language='javascript' src='Javascript/usbUI.js'></script>
<script type='text/javascript' language='javascript' src='Javascript/usbController.js'></script>
<!-- Plugins -->
<object id="pluginStorage" border=0 classid="clsid:SAMSUNG-INFOLINK-STORAGE"></object>
<object id="pluginObjectTVMW" border=0 classid="clsid:SAMSUNG-INFOLINK-
TVMW"></object>
<object id='pluginObjectNNavi' border=0 classid='clsid:SAMSUNG-INFOLINK-NNAVI'></object>
<!-- Flash Object -->
<object type="application/x-shockwave-flash" id="flvplayer" class="fullscreen" width="500"
height="400" >
<param name="movie" value="Load_Image.swf">
<param name="quality" value="high" >
<param name="bgcolor" value="black">
</object>
</head >
<body onload='Main.onLoad();' onunload='Main.onUnload();'>
<div id='mainBG'>
<div id='Path' ></div>
<div id='Topic1'></div>
<div id='Topic2'></div>
<div id='Topic3'></div>
<div id='Topic4'></div>
<div id='Topic5'></div>
<div id='Topic6'></div>
<div id='Topic7'></div>
<div id='Topic8'></div>
<div id='Topic9'></div>
<div id='Topic10'></div>
<div id='Topic11'></div>
<div id='Topic12'></div>
<div id='Topic13'></div>
<div id='Topic14'></div>
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 9
<div id='Topic15'></div>
<div id='Topic16'></div>
<div id='Topic17'></div>
<div id='Topic18'></div>
<div id='Topic19'></div>
<div id='Topic20'></div>
<div id='Topic21'></div>
<div id='Topic22'></div>
</div>
<!--User Guidelines -->
<div id="nav" class="widget" >
<img src="Images/btn/up.png"> Up
<img src="Images/btn/down.png"> Down
<img src="Images/btn/enter.png"> Enter / Display
<img src="Images/btn/exit.png"> Remove Image
<img src="Images/btn/return.png"> Return
</div>
<a href='javascript:void(0);' id='keyHandler' onkeydown='Main.keyHandler()'></a>
</body>
</html>
Add Plugin with class id SAMSUNG-INFOLINK-STORAGE for accessing Flash memory and create a Adobe flash
player object, Topic1 to Topic22 refers to the contents which are drawn onto their innerHtml at runtime.
Main.keyHandler() listens to the key events and takes appropriate action. For more details of index.html refer to “App
Development Guide for Samsung Smart TV.pdf”.
Main.css:
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and
formatting) of a document written in a markup language. CSS rules are added to a webpage either by writing the code
directly into the <head> of the webpage HTML, or by linking to a separate file. A separate file containing only CSS
rules is commonly referred to as a “stylesheet”, and has the extension “.css “.
body {
margin: 0;
padding: 0;
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 10
}
#mainBG
{
position : fixed;
left :0px;
top :0px;
width : 960px;
height : 510px;
visibility:visible;
background-image: url('Images/widget_bg.png');
}
#nav {
position: absolute;
top: 511px;
left: 0px;
width: 960px;
height: 29px;
background-color:#000;
color: #fff;
text-align:right;
}
#nav img {
vertical-align: -3px;
margin-left: 20px;
margin-right: 10px;
}
#Path
{
position :absolute;
left :30px;
top :30px;
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 11
height:10px;
width:350px;
visibility:visible;
}
#Topic1
{
position :absolute;
left :30px;
top :50px;
height:10px;
width:290px;
visibility:visible;
}
#Topic2
{
position :absolute;
left :30px;
top :70px;
height:10px;
width:290px;
visibility:visible;
}
#Topic3
{
position :absolute;
left :30px;
top :90px;
height:10px;
width:290px;
visibility:visible;
}
#Topic4
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 12
{
position :absolute;
left :30px;
top :110px;
height:10px;
width:290px;
visibility:visible;
}
#Topic5
{
position :absolute;
left :30px;
top :130px;
height:10px;
width:290px;
visibility:visible;
}
#Topic6
{
position :absolute;
left :30px;
top :150px;
height:10px;
width:290px;
visibility:visible;
}
#Topic7
{
position :absolute;
left :30px;
top :170px;
height:10px;
width:290px;
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 13
visibility:visible;
}
#Topic8
{
position :absolute;
left :30px;
top :190px;
height:10px;
width:290px;
visibility:visible;
}
#Topic9
{
position :absolute;
left :30px;
top :210px;
height:130px;
width:290px;
visibility:visible;
}
#Topic10
{
position :absolute;
left :30px;
top :230px;
height:10px;
width:290px;
visibility:visible;
}
#Topic11
{
position :absolute;
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 14
left :30px;
top :250px;
height:10px;
width:290px;
visibility:visible;
}
#Topic12
{
position :absolute;
left :30px;
top :270px;
height:10px;
width:290px;
visibility:visible;
}
#Topic13
{
position :absolute;
left :30px;
top :290px;
height:10px;
width:290px;
visibility:visible;
}
#Topic14
{
position :absolute;
left :30px;
top :310px;
height:10px;
width:290px;
visibility:visible;
}
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 15
#Topic15
{
position :absolute;
left :30px;
top :330px;
height:10px;
width:290px;
visibility:visible;
}
#Topic16
{
position :absolute;
left :30px;
top :350px;
height:10px;
width:290px;
visibility:visible;
}
#Topic17
{
position :absolute;
left :30px;
top :370px;
height:10px;
width:290px;
visibility:visible;
}
#Topic18
{
position :absolute;
left :30px;
top :390px;
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 16
height:10px;
width:290px;
visibility:visible;
}
#Topic19
{
position :absolute;
left :30px;
top :410px;
height:10px;
width:290px;
visibility:visible;
}
#Topic20
{
position :absolute;
left :30px;
top :430px;
height:10px;
width:290px;
visibility:visible;
}
#Topic21
{
position :absolute;
left :30px;
top :450px;
height:10px;
width:290px;
visibility:visible;
}
#Topic22
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 17
{
position :absolute;
left :30px;
top :470px;
height:10px;
width:290px;
visibility:visible;
}
.widget {
position: absolute;
top: 0px;
left: 0px;
color: #999;
font-size: 19px;
}
.fullscreen {
position: absolute;
top: 40px;
left: 500px;
width: 400px;
height: 300px;
}
#container {
width: 960px;
height: 540px;
}
In css # symbol is used for id and dot (.) is used for class. In Main.css you can define styles for different ids and classes.
For more details refer to “App Development Guide for Samsung Smart TV.pdf”.
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 18
Main.js:
var Main = {
player: null,
originalSource: null
}
/*Common API Objects*/
var widgetAPI = new Common.API.Widget();
var pluginAPI = new Common.API.Plugin();
var tvKey = new Common.API.TVKeyValue();
/*Function to be loaded on launch of widget*/
Main.onLoad=function()
{
alert("Main.onLoad()");
widgetAPI.sendReadyEvent();
usbController.init();
usbTV.init();
/*API for various TV functionalities*/
var mwPlugin = document.getElementById("pluginObjectTVMW");
this.originalSource = mwPlugin.GetSource();
mwPlugin.SetMediaSource();
/*Flash Object Support*/
Main.player = window["flvplayer"];
if(Main.player)
{ document.getElementById("keyHandler").focus(); }
else
{ alert("Flash Engine is not present"); }
}
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 19
/*Function to handle various key events*/
Main.keyHandler=function(){
alert("IN FIRST COLUMN%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%");
var dwKeyCode = event.keyCode;
switch(dwKeyCode) {
case tvKey.KEY_ENTER:
usbController.keyEnter();
break;
case tvKey.KEY_UP:
usbController.shiftUp();
break;
case tvKey.KEY_DOWN:
usbController.shiftDown();
break;
case tvKey.KEY_RETURN:
event.preventDefault();
usbController.keyReturn();
break;
case tvKey.KEY_EXIT:
event.preventDefault();
Main.remove();
break;
default:
alert("Unhandled key");
break;
}
}
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 20
/*Function to unload widget*/
Main.onUnload=function()
{
var mwPlugin = document.getElementById("pluginTVMW");
if (mwPlugin && (this.originalSource != null) )
{
/* Restore original TV source before closing the widget */
mwPlugin.SetSource(this.originalSource);
alert("Restore source to " + this.originalSource);
}
}
/*Function to Add Images on stack */
Main.play = function(path)
{
try {
alert("playing...: "+path);
// Set media file URL
Main.player.showImage(path);
} catch (e) {
alert("Error in Main.play() function: " + e);
}
}
/*Function to remove images */
Main.remove = function()
{
try {
alert("removing...: ");
// Set media file URL
Main.player.rem_img();
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 21
} catch (e) {
alert("Error in Main.remove() function: " + e);
}
}
Main.js interacts directly with usbController and usbTV for storing and displaying contents.
usb.js:
/*Variable for USB connection event */
var USB_CONNECTED_EVENT = 0;
var USB_DISCONNECTED_EVENT = 1;
/*Variable to store USB Storage plugin*/
var usbPlugin = null;
var currentFile=0;
var currentLevel=0;
var currentFilePath = null;
var commonFilePath=null;
var usbTV =
{
/*Array to store USB contents*/
detailsArray:null,
}
/*Function to initialize USB functionality*/
usbTV.init = function()
{
//Number of USBs connected
var nUSBCount = 0;
//Number of Partitions in device
var nPartition = 0;
var Partition;
// Device ID of USB
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 22
var nid1;
var nid;
this.detailsArray=new Array();
//Path where USB is mounted
var mntPath;
usbPlugin = document.getElementById("pluginStorage");
// If there isn't mounted USB : -1
// otherwise : from 1 ~
nUSBCount = usbPlugin.GetUSBListSize();
if(nUSBCount == -1)
document.getElementById("Path").innerHTML="No USB Devices Found";
for (var i = 0; i < nUSBCount; i++)
{
nid1 = usbPlugin.GetUSBDeviceID(i);
nid = parseInt(nid1);
alert ("nid = " + nid);
alert ("VendorName =" + usbPlugin.GetUSBVendorName(nid));
alert ("ModelName =" + usbPlugin.GetUSBModelName(nid));
nPartition = usbPlugin.GetUSBPartitionNum(nid);
for (var j = 0; j < nPartition; j++)
{
mntPath = usbPlugin.GetUSBMountPath(nid, j);
usbTV.drawFileList (mntPath);
alert ("MountPath = " + usbPlugin.GetUSBMountPath(nid, j));
alert ("AvailSize = " + usbPlugin.GetUSBAvailSize(nid, j));
alert ("TotalSize = " + usbPlugin.GetUSBTotalSize(nid, j));
}
}
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 23
alert("nUSBCount=================="+nUSBCount);
alert("_------------------------------___________________________________________");
// Subscribe the USB Event
usbPlugin.SubscribeEvent(USB_CONNECTED_EVENT); // USB connection Event
usbPlugin.SubscribeEvent(USB_DISCONNECTED_EVENT); // USB Disconnection Event
usbPlugin.OnMessage = 'usbTV.Message';
}
/*Function to be executed on USB connection events*/
usbTV.Message = function()
{
//Number of USBs connected
var nUSBCount = 0;
//Number of Partitions in device
var nPartition = 0;
var Partition;
// Device ID of USB
var nid1;
var nid;
delete this.detailsArray;
this.detailsArray=new Array();
//Path where USB is mounted
var mntPath;
//USB plugin
usbPlugin = document.getElementById("pluginStorage");
currentFilePath=null;
// If there isn't mounted USB : -1
// otherwise : from 1 ~
nUSBCount = usbPlugin.GetUSBListSize();
if(-1 == nUSBCount)
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 24
{
document.getElementById("Path").innerHTML="No USB Devices Found";
usbUI.hide_data();
return;
}
for (var i = 0; i < nUSBCount; i++)
{
nid1 = usbPlugin.GetUSBDeviceID(i);
nid = parseInt(nid1);
alert ("nid = " + nid);
alert ("VendorName =" + usbPlugin.GetUSBVendorName(nid));
alert ("ModelName =" + usbPlugin.GetUSBModelName(nid));
nPartition = usbPlugin.GetUSBPartitionNum(nid);
for (var j = 0; j < nPartition; j++)
{
mntPath = usbPlugin.GetUSBMountPath(nid, j);
usbTV.drawFileList (mntPath);
alert ("MountPath = " + usbPlugin.GetUSBMountPath(nid, j));
alert ("AvailSize = " + usbPlugin.GetUSBAvailSize(nid, j));
alert ("TotalSize = " + usbPlugin.GetUSBTotalSize(nid, j));
}
}
alert("nUSBCount=================="+nUSBCount);
}
usbTV.drawFileList = function(mntPath)
{
usbTV.readV1 (mntPath);
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 25
}
/* Function for showing list of content, when enter a directory */
usbTV.readV1 = function(mntPath)
{
//Hide current listing
usbUI.hide_data();
var fs = new FileSystem();
commonFilePath = '/dtv/usb/' + mntPath;
if(currentFilePath == null)
{currentFilePath = commonFilePath;currentFile=0;}
else
{
currentFilePath = currentFilePath + '/'+mntPath;
var arr_length = this.detailsArray.length;
this.detailsArray.splice(0,arr_length);
currentFile=0;
}
alert("commonfilepath......"+currentFilePath);
var files = fs.readDir (currentFilePath);
this.detailsArray[currentFile]
for (var i = 0; i < files.length; i++)
{
alert ("-------- " + files[i].name);
//Save array element as new obeject
this.detailsArray[currentFile]=new usbDocument(files[i].name,currentLevel,0);
alert ("-------- ++++++" + this.detailsArray[currentFile].title);
if (files[i].isDir)
{
this.detailsArray[currentFile].hasChild=1;
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 26
}
currentFile++;
}
// Show Content Listing
usbUI.showUI();
}
/* Function for showing list of content of parent directory, when return from a directory */
usbTV.readPath = function()
{
usbUI.hide_data();
var pathStr=currentFilePath;
var slashPos=pathStr.lastIndexOf('/');
pathStr=pathStr.substring(slashPos-3,pathStr.length);
var str_to_search = 'usb';
alert("in readPath..."+ currentFilePath);
var i = 0;
while(i <3)
{
alert( "compared vals here "+ pathStr[i]+ " "+str_to_search[i]);
if(pathStr[i] == str_to_search[i])
++i;
else
break;
}
if(3==i)
//blockNavigation()
widgetAPI.sendReturnEvent ();
else
currentFilePath = currentFilePath.substring(0,slashPos);
var fs = new FileSystem();
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 27
var files = fs.readDir (currentFilePath);
var arr_length = this.detailsArray.length;
this.detailsArray.splice(0,arr_length);
currentFile=0;
this.detailsArray[currentFile]
for (var i = 0; i < files.length; i++)
{
alert ("-------- " + files[i].name);
//Save array element as new obeject
this.detailsArray[currentFile]=new usbDocument(files[i].name,currentLevel,0);
alert ("-------- ++++++" + this.detailsArray[currentFile].title);
if (files[i].isDir)
{
this.detailsArray[currentFile].hasChild=1;
}
currentFile++;
}
usbUI.showUI();
}
/* Function to check for USB connections*/
usbTV.checkUSB = function()
{
var count = usbPlugin.GetUSBListSize();
if(-1 != count)
{ return true; }
else
{ return false; }
}
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 28
In usb.js detailsArray is initialized with null. In usbTV.init() function usbPlugin is initialized with storage plugin that is
defined in index.html as ……… . It then checks number of USBs connected to TV. If there is no usb connected then
GetUSBListSize() function returns -1 or it will return number of USBs connected. If it returns -1then a message will be
displayed on screen. SubscribeEvent(…) function is used to subscribe event, when USB gets connected or disconnected.
In usbTV.drawFileList(…) function usbTV.readV1(…) is called.
In usbTV.readV1(…) function first of all current data gets hidden. Then „/dtv/usb/‟ is added in the beginning of
current mount path (mntPath). If USB is getting accessed first time after starting the App the currentFilePath will be
null, so it is assigned the value of commonFilePath. readDir function is executed on currentFilepath and it content is
stored in files array. Elements of files array are stored in detailsArray as usbDocuments. If any file is a directory then its
hasChild property is set to 1. Then the contents are shown on screen.
usbTV.readPath() function is triggered on pressin return key. In usbTV.readPath() function currentFilePath is checked.
If the last part of CurrentFilePath is usb then it should get out of App. If it is not the case then the part after the last slash
is removed from currentFilePath. Now currentFilePath is read and its contents are stored in files array and finally in
detailsArray that is displayed on screen.
usbTV.checkUSB() function returns true if any USB is connected, else return false.
usbcontroller.js
var usbController={
//Current focused element in listing
currDiv:0,
//Previously focused element in listing
prevDiv:0,
//Position of parent directory in previous listing
prevDir:0,
usbContent:null,
focussedContent:null,
}
usbController.init=function(){
document.getElementById("Topic"+(this.currDiv+1)).style.color="blue";
}
/*Function to go up in content listing */
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 29
usbController.shiftUp=function(){
this.prevDiv=this.currDiv;
this.currDiv--;
alert("contentBox===="+contentBox);
alert("this.currDiv===="+this.currDiv);
if(this.currDiv<0)
this.currDiv=contentBox-1;
usbController.blurTitle();
usbController.highlightTitle();
}
/*Function to go down in content listing */
usbController.shiftDown=function(){
this.prevDiv=this.currDiv;
this.currDiv++;
alert("contentBox===="+contentBox);
alert("this.currDiv===="+this.currDiv);
if(this.currDiv>=contentBox)
this.currDiv=0;
usbController.blurTitle();
usbController.highlightTitle();
}
/* Set focus on current element */
usbController.highlightTitle=function(){
document.getElementById("Topic"+(this.currDiv+1)).style.color="blue";
}
/* Remove focus from previous element */
usbController.blurTitle=function(){
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 30
document.getElementById("Topic"+(this.prevDiv+1)).style.color="#000000";
}
/*************************************************************************************/
/* Function for entering a directory */
usbController.keyEnter=function(){
alert("usbController.keyEnter======================+++++++");
/*If current element is a directory */
if(1 == usbTV.detailsArray[this.currDiv+2].hasChild)
{
this.prevDir = this.currDiv;
this.focussedContent=usbTV.detailsArray[this.currDiv+2].title;
alert("this.focussedContent======================"+this.focussedContent);
document.getElementById("Topic"+(this.currDiv+1)).style.color="#000000";
usbTV.readV1(this.focussedContent);
this.currDiv = 0;
usbController.changeFocus();
document.getElementById("keyHandler").focus();
}
/*If current element is a file */
else
{
this.focussedContent=usbTV.detailsArray[this.currDiv+2].title;
Main.play(currentFilePath+'/'+this.focussedContent);
alert(currentFilePath+'/'+this.focussedContent);
}
}
/*Function for Return */
usbController.keyReturn=function(){
/*If any USB is connected */
if(usbTV.checkUSB())
{
document.getElementById("Topic"+(this.currDiv+1)).style.color="#000000";
usbTV.readPath();
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 31
this.currDiv = this.prevDir;
usbController.changeFocus();
document.getElementById("keyHandler").focus();
}
/*If any USB is not connected*/
else
{ widgetAPI.sendReturnEvent (); }
}
/*Function to change focus*/
usbController.changeFocus=function(){
this.prevDiv=0;
document.getElementById("Topic"+(this.currDiv+1)).style.color="blue";
}
Usbcontroller.js directly interacts with Main.js on button events and provides functionality of blur and highlighting
while browsing contents up and down. usbController.keyEnter() is called upon pressing enter button on remote and if
it‟s a file it calls Main.play(path), path is Flash memory file path where it is accessed. Main.play() and calls
Main.player.showImage(path), Load_image.fla should register showImage with a callback function.
In usbController.init() function color of currDiv element is changed to blue.
In usbController.shiftUp() function prevDiv is assigned the value of currDiv, and currDiv is decremented.
usbController.blurTitle() function is called to make previously focused element blur. usbController.highlightTitle()
function is called to make currently focused element highlighted.
usbController.shiftDown() is same as usbController.shiftUp(), only difference is currDiv is incremented.
In usbController.keyEnter() if current element is a directory means it has a child, then its position is saved in prevDir
element. Its title is assigned to focusedContent value. usbTV.readV1(…) is called on this value and focus is changed to
the first element of current directory. If current value is not a directory means it is a file then this file is displayed in
flash interface.
In usbController.keyReturn() function first it checks number of USBs connected. If any of it is connected then currDiv
element gets black, and usbTV.readPath() function is called which shows the listing of parent directory. currDiv
element gets value of prevDir, and focus is changed to current directory. If no USB is connected then App will be exited.
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 32
usbController.changeFocus() function changes the color of currDiv elenet to blue.
usbUI.js:
var usbUI={
contentArray:null,
}
var contentBox=0;
/* Function to show USB contents*/
usbUI.showUI=function(){
this.contentArray=usbTV.detailsArray;
contentBox=this.contentArray.length-2;
alert("contentBox=================="+contentBox);
var totalTopic=0;
if((this.contentArray.length-2)>22)
totalTopic=22;
else
totalTopic=this.contentArray.length-2;
for(var i=0;i<(totalTopic);i++)
{ alert("$$$$$$$$$$$$$$$$$$$$$$$$$$ FILE_NAME " +this.contentArray[i+2].title);
document.getElementById("Topic"+(i+1)).innerHTML=this.contentArray[i+2].title;
}
document.getElementById("Path").innerHTML="PATH: "+currentFilePath;
}
/* Function to hide USB contents*/
usbUI.hide_data=function(){
for(var i=0;i<22;i++)
document.getElementById("Topic"+(i+1)).innerHTML="";
}
usbUI.js defines how the content of flash memory will be displayed on TV screen.
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 33
contentArray is the array which contains the element of current directory. It is assigned the value of detailsarray that is
defined in usb.js.
In showUI function it shows the contents of current directory. If the number of contents is greater than 20 then variable
totalTopic (number of elements to show at one time) is set to 22. Then the title of all the contents are shown using for
loop. Content of Path div. is set to currentFilePath to show the usb file system path.
In hide_data function all the contents of Topic div. is set to nothing to hide the previous listing of directory. It is done so
that we can show the new listing of directory contents.
Structure.js:
/*Function to make new content node*/
var usbDocument=function(title,level,hasChild){
this.title=title;
this.level=level;
this.hasChild=hasChild;
}
var prevStates=function(currPos,prevPos){
this.currPos=currPos;
this.prevPos=prevPos;
}
Structure.js defines the structure of every directory node.
usbDocument function defines the title, level, and hasChild (if a file is directory) property of any node.
4.2. Stage 2 - Creating the Flash File
Creating .fla file:
Open Adobe Flash Professional CS5. Choose File > New. In New Dialog box select ActionScript 2.0 and press OK.
Select first frame in Timeline of first layer. Then press F9. This will open action panel for this frame, where we can
write our ActionScript code. Write this code in action panel.
/* Imported Classes*/
import flash.external.ExternalInterface;
import mx.transitions.Tween;
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 34
import mx.transitions.easing.*;
if (flash.external.ExternalInterface.available)
{
info("onLoad: External Interface available, exposing callbacks to enclosing JavaScript");
/*Register functions to call from javascripts*/
flash.external.ExternalInterface.addCallback("showImage",null, _externalShowImage);
flash.external.ExternalInterface.addCallback("rem_img",null, removeImage);
}
else
{
warn("onLoad: External Interface is not available - no methods exposed");
}
_root.createEmptyMovieClip("ImageContainer_mc",_root.getNextHighestDepth());
var top:Number = -1;
//Array to store clips
var clip_arr:Array = new Array();
//Top movie clip
var mc:MovieClip = null;
/*Function to remove Images from stack*/
function removeImage(){
if(top >= 0)
{
trace(pic_arr[top] + ": removed " + top);
new Tween(mc,"_alpha",Strong.easeOut,100,0,0.1,true);
clip_arr.pop();
top = clip_arr.length - 1;
mc = clip_arr[top];
new Tween(mc,"_alpha",Strong.easeOut,0,100,0.1,true);
}
}
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 35
/*Function to add Images in stack*/
function _externalShowImage(str:String) {
var mystr=str.substr(str.lastIndexOf('.')+1,str.length);
if ((mystr == "jpg" ) || (mystr == "png" ) || (mystr == "bmp" ) || (mystr == "jpeg" ))
{
top++;
if(mc)mc._alpha = 20;
ImageContainer_mc.createEmptyMovieClip("mc"+top, top+1);
mc = ImageContainer_mc["mc"+top];
mc._x = top*20;
mc._y = top*20;
mc.loadMovie(str);
clip_arr.push(mc);
clip_arr[top]._alpha = 100;
}
}
Decription of this actionscript code is give below:
if (flash.external.ExternalInterface.available)
{
info("onLoad: External Interface available, exposing callbacks to enclosing JavaScript");
/*Register functions to call from javascripts*/
flash.external.ExternalInterface.addCallback("showImage",null, _externalShowImage);
flash.external.ExternalInterface.addCallback("rem_img",null, removeImage);
}
else
{
warn("onLoad: External Interface is not available - no methods exposed");
}
The flash.external.ExternalInterface class is the External API, that enables straightforward communication between
ActionScript and the Flash Player container. We can call an ActionScript function in Flash Player, using JavaScript in
the HTML page.
First of all addCallBack function is used to register _externalShowImage and removeImage functions with name
showImage and rem_img, that will be called by javascript.
_root.createEmptyMovieClip("ImageContainer_mc",_root.getNextHighestDepth());
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 36
createEmptyMovieClip function is used to create a empty movie clip with ImageContainer_mc as it‟s instance name
and with currently available highest depth.
var top:Number = -1;
//Array to store clips
var clip_arr:Array = new Array();
//Top movie clip
var mc:MovieClip = null;
top variable shows number of images currently on stage this is initialized as -1, because initially array is empty. clip_arr
is array to contain clips.
/*Function to remove Images from stack*/
function removeImage(){
if(top >= 0)
{ trace(pic_arr[top] + ": removed " + top);
new Tween(mc,"_alpha",Strong.easeOut,100,0,0.1,true);
clip_arr.pop();
top = clip_arr.length - 1;
mc = clip_arr[top];
new Tween(mc,"_alpha",Strong.easeOut,0,100,0.1,true);
}
}
removeImage function is used to remove image from stack of images. top checks if there is any image in
ImageContainer_mc. If there is any image then it changes alpha property of currently overlaid image to 0 by making an
instance of Tween class obeject. Top most clip from stack is removed using pop() function. Then mc is assigned the new
top of clip_arr and its alpha is changed to 100, again using Tween class object. top clip is removed from array using pop
function and top is assigned the new value to show new number of images.
We have used Tween class to change the alpha property of clip smoothly.
/*Function to add Images in stack*/
function _externalShowImage(str:String) {
var mystr=str.substr(str.lastIndexOf('.')+1,str.length);
if ((mystr == "jpg" ) || (mystr == "png" ) || (mystr == "bmp" ) || (mystr == "jpeg" ))
{
top++;
if(mc)mc._alpha = 20;
ImageContainer_mc.createEmptyMovieClip("mc"+top, top+1);
mc = ImageContainer_mc["mc"+top];
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 37
mc._x = top*20;
mc._y = top*20;
mc.loadMovie(str);
clip_arr.push(mc);
clip_arr[top]._alpha = 100;
}
}
_externalShowImage function is used to draw an overlaid image in flash image interface. First of all type of file is
checked. Variable mystr stores the substring of file name starting from last index of dot (.) till the end of the string. If it
is jpg, png or bmp then succeeding statements will be executed.
Number of current images is incremented. _alpha value of previously overlaid image is changed to 20. A new movie
clip is created inside ImageContainer_mc using createEmptyMovieClip function with depth value top+1 to give it
highest depth value. This movie clip mc is then assigned to movie clip mc. Position of top left corner of this clip is
changed to show previously overlaid images also. This is done by multiplying 20 with index of this clip and assigning
this to _x & _y value of movie clip. This clip is then added in array and value of _alpha is changed to 100.
Save this file with some <filename>.fla (Load_image.fla in our case).
Creating .swf file:
Compile this .fla file by pressing Ctrl + Enter. A .swf file will be created with same name as fla file.
4.3. Stage 3 - Communicating with flash file using JavaScript
After finishing the Flash file part we are ready to implement all the event handling procedures we need.
/*Function to handle various key events*/
Main.keyHandler=function(){
alert("IN FIRST COLUMN%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%");
var dwKeyCode = event.keyCode;
switch(dwKeyCode) {
case tvKey.KEY_ENTER:
usbController.keyEnter();
break;
case tvKey.KEY_UP:
usbController.shiftUp();
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 38
break;
case tvKey.KEY_DOWN:
usbController.shiftDown();
break;
case tvKey.KEY_RETURN:
event.preventDefault();
usbController.keyReturn();
break;
case tvKey.KEY_EXIT:
event.preventDefault();
Main.remove();
break;
default:
alert("Unhandled key");
break;
}
}
First of all the Main.keyHandler() function, that is defined in Main.js retrieves the pressed key value from the global
event object that is provided by the App Engine. All the event.keyCode values are being compared with the enumeration
constants defined in the, common for all the Apps, library file provided by the tvKey object which has been defined
globally. The object could be created in any place of the code in the following form: var tvKey = new
Common.API.TVKeyValue(). It is true with the assumption that there is an html reference to its source file within the
index.html page. And finally we need the wrapper functions to execute Flash Player‟s commands.
case tvKey.KEY_ENTER:
usbController.keyEnter();
break;
Enter key is used to usbController.keyEnter function described in usbController.js. It checks if file is directory or not if
it is an image in flash memory then it calls showImage function which calls _externalShowImage from ActionScript.
case tvKey.KEY_UP:
usbController.shiftUp();
break;
Overlaid Image from Flash Memory Tutorial
@Samsung Electronics Copyright All Rights Reserved 39
case tvKey.KEY_DOWN:
usbController.shiftDown();
break;
Up and down keys are use to go through the listing of current directory by calling usbController.shiftUp() and
usbController.shiftDown(), that are defined in usbController.js.
case tvKey.KEY_RETURN:
event.preventDefault();
usbController.keyReturn();
break;
case tvKey.KEY_EXIT:
event.preventDefault();
Main.remove();
break;
Return key is used to come back to parent directory (if there is any) or return from App using usbController.keyReturn()
function, that is defined in usbController.js. Exit key is used to remove using rem_img which calls removeImage from
actionscript.
5. Concluding remarks
This tutorial has explored the main functions of the Flash Player plugin used to access USB device contents. It is
recommended that you read the full API description for each plugin, which you can find in the Guide.