Panasonic IPTV Apps Developers (HTML5)

07/11/2018 HTML5 v2.
0 | Panasonic IPTV Apps DEVELOPERS
Development Guide
In this section we will cover the design guidelines for Panasonic's IPTV Apps platform. These guidelines can be used to
develop applications that will perform the best on Panasonic IPTV devices.
Application Guidelines gives you practical recommendations for how to develop your application, making the best use of the
device features.
Browser Configuration helps you set your browser up to to develop your applications

Development Environment Setup
Environment Prerequisites
Below are the prerequisites for setting up the development environment
1. Panasonic IPTV device (TV) (Please click here for the device models)
2. Development PC
APACHE web server installed to serve up the code to the Panasonic IPTV Device (TV)
3. Local network connecting Panasonic IPTV Device (TV) and Development PC
4. Panasonic IPTV Apps DEVELOPERS Basic/Premium Account.

Development Environment Architecture
StepbyStep Guide In Setting Up The Environment
We will provide two addresses to be connected from development environment to HTML5 application. One is a fixed address
and another is domain name. For latter case a developer should set a DNS server.

Step 1
Create a new folder named "sdkhtml" under the root directory of the APACHE web server.
Download helloworld_full_html.zip and place all the necessary files under the newly created folder "sdkhtml".
https://developer.vieraconnect.com/dev-guide/html5-v2.0?print=all 1/54
07/11/2018 HTML5 v2.0 | Panasonic IPTV Apps DEVELOPERS
"main.html" should be located and stored in the following path:
http://192.168.0.100/sdkhtml/main.html or http://localserver.vieraconnect.com/sdkhtml/main.html
Click to Download source: helloworld_full_html.zip

Step 2
Connect Panasonic IPTV device and PC to the same network. The network should have Internet Connection option.
Start IPTV service on your device and upgrade the device firmware to the latest version.

Step 3
Go to "Market for Smart VIERA" by pressing the Internet(*) button from the remote control (*Some remote controls have a
'VIERA Connect' or 'Apps' button instead of 'Internet' button) and select "Market for Smart VIERA".
Install Panasonic IPTV Apps DEVELOPERS (HTML5) App.

Step 4
Run Panasonic's IPTV Apps DEVELOPERS (HTML5) App. It will take you to the Developers login and set path screen.
Enter the email and password used to login for the Panasonic IPTV Apps DEVELOPERS (HTML5) App.
Select the application path. (If you choose "localserver.vieraconnect.com", you have to set up the DNS server.)
Click OK to your application.

Once all the four steps are followed, the setup is complete and you will be able to view your application on the screen.
Development IDE
There is no specific IDE provided for the development of the Panasonic's IPTV Apps Platform. Any IDE/Text editor that
supports Javascript editing should be fine to be used. For example, Eclipse: http://www.eclipse.org/downloads/
Setting Up Console Logging For Debug
Prerequisites
Configure the APACHE web server to enable Perl CGI script on "Root Directory/cgibin/"

Click to Download source: consolehtml.zip

Setting of a user defined log
Step 1
Create a new folder named "tmp" under the cgibin folder (Root Directory/cgibin/tmp)

Step 2
Add a new file named "console.log" under the tmp folder (i.e. Root Directory/cgibin/tmp/console.log)

Step 3
Apply the following instructions to the corresponding files:
post_console_log.pl.cgi:
1. Place it into the cgibin folder in the APACHE web server,
2. Modify the first line to point to perl binary.

Step 4
Put the “console.js” and “console.php” files into the “sdkhtml” folder.
The following shows the full path of both files:

http://<YOUR_DOMAIN>/sdkhtml/console.js
http://<YOUR_DOMAIN>/sdkhtml/console.php

Step 5
Put the following code:

<script type="text/javascript" src="<relative path>/console.js"></script>
into the head tag in the “main.html” file, modify the “<relative path>” to point to the path of “console.js”.
For example:

<head>
<script type="text/javascript" src="<relative path>/console.js"></script>
</head>

Step 6
Open the console.js file, search the variable “PHP_FILE_PATH”, modify it to point to the “console.php” file.
Search the variable “LOG_FILE_PATH”, modify it to point to the “console.log” file.

How to use it:

<script type=”text/javascript”>
// Write the message to the file
console.log(“Your message...”);

// Write the message to the console panel, if you are testing your application on the browser,
// such as Firefox, Opera, Chrome.
console.log(“Your message...”);
</script>

Setting of a System log
Set console_log to true in init.json
(Click here for details about init.json)

Step 1
Create a new folder named "tmp" under the cgibin folder (Root Directory/cgibin/tmp)

Step 2
Add a new file named "console.log" under the tmp folder (i.e. Root Directory/cgibin/tmp/console.log)

Step 3
Apply the following instructions to the corresponding files:
post_console_log.pl.cgi:
Place it into the cgibin folder in the APACHE web server,
Modify the first line to point to perl binary.

Note: Currently displaying of pop up by alert() and aleart() is not supported

Application Guidelines
Application Guidelines

Partner’s HTML5 application
Partner needs to be responsible for all HTML5 pages displayed within partner’s HTML5 application. Please be advised that
outside web sites referred by your application are your responsibility. To avoid moving to unexpected outside web site, you
can limit URL where your HTML5 application can do page transition.

Fonts
Fonts are embedded into the device at the time of production. They are developed to enhance users readability on the device,
especially for old or handicapped people, in an elegant way. They are truetype fonts and designers can basically use arbitrary
size.
Fonts are required to be big enough and with a high enough contrast to be clearly seen on the device screen
Recommended font size: 36pt (Full High Definition screen size 1920 x 1080)
Minimum font size: 14pt (Full High Definition screen size 1920 x 1080)

In addition to embedded fonts, Downloadable fonts can be used by CSS3. However, the developer has to be responsible for
the licensing of downloaded font.
Color
Designers can use a wide range of colors, within hardware limitations, however they need to bear in mind that there is a much
larger number of device users than users on PCs or other devices. It is recommended to consider people with sight problems,
such as cataracts and colorblindness. Below are the sample guidelines.
View Sample
Screensaver
Screensaver design is based on the current display context. Screensaver will not be started while video is being played.
Video
Video area shall not be outside the rendering area. Even if only one pixel of video area is out of the rendering area, video is
not displayed.
Scroll Bar
Scroll bar is not displayed automatically. HTML5 application needs to take care of scrolling.
HTML5 Files Text
Only UTF8 can be used in HTML5 files

Browser Configuration
HTML5 browser configuration
HTML5 browser reads init.json at startup. User can configure various kinds of browser feature by init.json

Features defined in init.json
Parent property Child property Available value Definition
rendering_size width number width of browser(px)
height number height of browser(px)
keyboard use true enable screen keyboard
false disable screen keyboard
color "BLACK" make screen keyboard black
"WHITE" make screen keyboard white
mode (none) "free" free cursor mode
"key" arrow key mode
user_agent (none) string string appended to the end of the default user agent
console_log (none) true enable console logging for debug
false disable console logging for debug (default)
allowed_domain (none) list of string Specify web server domain path which can be navigated

within this HTML5 application.
Browser does not loads web pages which is outside of
listed domain.
If this property or property value is not defined, there is no
limitation for web site navigation by browser

Please find an example init.json below:
{
"rendering_size" :{
"width" : 1280,
"height" : 720
},
"keyboard" :{
"use" :true,
"color" :"BLACK"
},
"mode" : "free",
"user_agent" : "",
"console_log" : false,
"allowed_domain" : [
"www.panasonic.com",
"www.panasonic.jp"
]
}

Application Tutorial
Here are sample applications that will let you have comprehensive knowledge about Panasonic's IPTV Apps Platform:
"Hello World" Tutorial provides the necessary steps to write your first program on the VIERA Connect platform.
Memory Game Tutorial goes through the development of a simple board game called "Colour Memory". It covers the drawing
of GUI objects, key handling, moving focus, timer, and destruction of components.

"Hello World" Tutorial
Overview
This tutorial will take you stepbystep through the development of the "Hello World" HTML5 application. This application will
simply display the greeting "Hello World" with animation in the middle of the device screen.

Prerequisite
In order to develop the application, developers are required to have a background knowledge of HTML, CSS and JavaScript.
For this exercise, it is assumed that you have finished Development Environment Setup
In this tutorial, we are using Netbeans 6.9.1 for coding. You can use any text editor of your choice.
Overall structure
In this section, we are going to examine the structure of the application that we will create.
Click to Download source: helloworld_full_html.zip
File Description
main.html Main file of "Hello World"
init.json File for browser configuration

Creating your application
Step 1
Extract "helloworld" from "helloworld_full_html.zip".
Step 2
Open Netbeans, drag and drop the folder "helloworld" into it. Double click the "main.html" from the Explorer Window and you
will see the following lines of code.

<!DOCTYPE HTML>
<html>
<head>
<style>
<!
.anime {
margintop:250px;
marginleft:200px;
width:800px;
height:120px;
fontsize: 800%;
color: #191990;
webkitanimation: anime 3s linear infinite;
}

@webkitkeyframes anime {
0% { webkittransform: rotateY( 0deg ) rotate( 10deg); }
}

.bg01 {
background: webkitgradient(linear, left top, right bottom, from(#707078), colorstop(0.3, #808088),
colorstop(0.5, #90a0b0), to(#066));
}

>
</style>
</head>

<body class="bg01" >
<div class="anime" >
<p>Hello World</p>
</div>

<script type="text/javascript">
window.onload = function() {
// Your code here
};
</script>

</body>
</html>

The above code creates a div container. When the application starts, the window.onload() function will be called.

Let's focus on the style tag
.anime is a class name, it controls the appearance of each HTML tag, each HTML tag can append one or more class names.
Use the following syntax:
<div class="anime bg01">text</div>
@webkitkeyframes is one of new supported features of CSS3, it allows for the animation of HTML elements using CSS.
For more details about how to use CSS3 animation, please visit: http://www.w3schools.com/css3/css3_animations.asp

Step 3
To create the gradient background, we can create a CSS class and put it in the <style> tag. You can customize the properties
of the CSS class.

<style>
.bg01 {
background: webkitgradient(linear, left top, right bottom, from(#707078),
colorstop(0.3, #808088), colorstop(0.5, #90a0b0), to(#006666));
}
</style>
<body class="bg01">...</body>

You will see a gradient background displayed on the TV screen
If we want to change the background color from #006666 to #0000FF. Use following syntax:
<style>
.bg01 {
background: webkitgradient(linear, left top, right bottom, from(#707078),
colorstop(0.3, #808088), colorstop(0.5, #90a0b0), to(#0000FF));
</style>

For more details, please visit: http://dev.w3.org/csswg/css3images/

Step 4
To create the texts, we can create a p tag and put it inside div container. You can customize the properties of the p tag by
using CSS class.
<div><p>Hello World</p></div>

You will see "Hello World" with gradient background displayed on the TV screen

HTML tags can also be added by using JavaScript.
<div id=”msg”></div>

<script type=”text/javascript”>
window.document.getElementById(“msg”)[removed] = “<p>World Hello</p>”;
</script>

When above code executed. The HTML structure became:
<div id=”msg”><p>World Hello</p></div>

For more details about how to use JavaScript, please visit: http://www.w3schools.com/js/default.asp
Step 5
Copy "main.html" to the "sdkhtml" folder, which is under the root directory of your APACHE server.

Congratulations! You have completed your first Panasonic's IPTV application.

Memory Game Tutorial
There are two versions of this tutorial, each with a different input mode:
Arrow Key Mode give a demonstration on how to create the Memory Game with a Key Handling input mode.
Free Cursor Mode give a demonstration on how to create the Memory Game with a Free Cursor input mode.
About the different input modes, more information can be found under the Browser Configuration page.

Arrow Key Mode
Arrow Key Mode is when you use your remote controller to change focus using the navigation keys
and make selections
Overview
This tutorial will take you stepbystep through the development of a simple board game HTML5 application, "Colour Memory"
in Arrow Key Mode. The application consists of a 4x4 grid, all in all 16 slots. All slots consist of cards faced down. The player
flips two of these cards upward during each round, trying to find equals. If the two cards are the same, the player receives two
points, and the cards are removed from the game board. Otherwise, the player loses one point and the cards are returned to
the faced down position. This continues until all pairs have been found.
Development process diagram
Prerequisite

Overall structure
Click to Download source: colorMemoryArrowKey.zip
File/Folder Description
images Folder used to store the image files of this HTML5 application
js Folder used to store the JavaScript files of this HTML5 application
css Folder used to store the CSS files of this HTML5 application
main.html Main file of "Colour Memory"

Game Logic
When users navigate on the game board , the javascript function window.onload() will be called to initial the game.
Game Logic Diagram

Creating Your Application
Step 1
Extract "main.html", "images", "js" and "css" from "colourMemory.zip"
Step 2
Open Netbeans, drag and drop the folder "colourMemory" into it.
Double click the "main.html" from the Explorer Window and you will see the following lines of code:
<!DOCTYPE HTML>
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=UTF8" />
<title>Memory Game</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript" src="js/global.js"></script>
</head>
<body>
<! All cards will be shown in the table >
<div id="table">
<! HTML tags here >
</div>

<! Pop up message >
<div id="gameOverPanel">
<div class="gameTitle gameOver">Game Over</div>
<input type="button" id="closeAlert" value="OK"></input>
</div>

<! Information panel >
<div id="infoPanel">
<div class="clsHeight5Percent">&nbsp;</div>
<div class="gameTitle">Colour Memory</div>
<span class="infoRow">Pair left:</span><span id="pairLeft">0</span>
<p></p>
<span class="infoRow">Score:</span><span id="score">0</span>
<input type="button" id="restartGame" value="Restart"></input>
</div>
// Entry Point of the HTML5 application
var g = window.global;
g.initGame(8, 4);
};
</script>
</body>
</html>

The “main.html” created three containers, id=”table”, id=”infoPanel” and id=”gameOverPanel”.
In the head tag, a CSS file and a JavaScript file have been included already:
The following file created a “global” object and assigned it to the window object as a property (window.global):
window.onload() function will be executed automatically once the “main.html” loaded completely, the window.global object
now is ready to be used.
The variable window.global object can be used in any scope of javascript code, as you can see the first line of
window.onload() function:
Now the variable g points to the window.global object, use following syntax to call its function:
g.initGame(...);
Step 3
We will create two kinds of things in here, "game board" UI and key events.
We defined a function “g.initGame()” in the global.js file, this function is the entry point of the game.

In the “g.initGame()” function, there are several things that have been done:
Reset values of all properties of “window.global” object to default
Create all cards (UI)
Cache dom objects in order to be used in the life cycle of the game
Refresh the information panel
Set the mapping of each key on each card

Initial UI
After the function “g.buildHTML(...)” executed, all cards should be shown on the screen.

Two steps to attach key events on each card
1) Set the mapping of each key on each card. The following partial code implemented the mapping of arrow keys of the TV
remote control.
var arrowKeys = {},
o;

arrowKeys["cardId" + size] = o = {
up: "cardId" + (size cardsOneRow),
down: "cardId" + (size + cardsOneRow),
left: "cardId" + (size 1),
right: "cardId" + (size + 1),
preDomId: ""
};

// Check if it's first card of each row
if ((size 1) % cardsOneRow === 0) {
o.left = "";
}

// Check if it's last card of each row
if ((size % cardsOneRow) === 0) {
// restartGame is the id of dom
o.right = "restartGame";
}

// Check if it's first row
if ((Math.ceil(size / cardsOneRow) 1) === 0) {
o.up = "";

// dom id
o.down = "cardId" + (size + cardsOneRow);
}

// Check if it's last row
if ((Math.ceil(size / cardsOneRow)) === cardsOneRow) {
o.down = "";

// dom id
o.up = "cardId" + (size cardsOneRow);
}

2) Event delegation, catch the key down event when one of the keys on the TV remote control is clicked.
window.document.onkeydown = function(e) {
window.global.keyboardEvent(e, "keydown");
};

window.global.keyboardEvent = function(e, eventType) {
var g = this,
id, arrowKeyMapping, nextMove,
target = g._target(e),
keyCode = target.keyCode,
key = g.keyCodeDic[keyCode],
focusDom = g.focusDom,
focusedDom, prevFocusedDom,
nextFocusedTbIdx,
arrowKeys = g.arrowKeys,
defaultTabIdx = 10000;

if (!g.allowClick) { return; }

// Check arrow up, down, left, right and ok button
switch(eventType) {
case "keydown":
focusedDom = focusDom.focusInDom || focusDom.defaultFocusedDom;

// Get the id of current focused dom
id = focusedDom.id || "";

switch(key) {
case "ok":
// Handle OK button on the TV remote control
break;

case "arrowup":
// Handle arrow up button on the TV remote control
break;

case "arrowdown":
// Handle arrow down button on the TV remote control
break;

case "arrowleft":
// Handle arrow left button on the TV remote control
break;

case "arrowright":
// Handle arrow right button on the TV remote control
break;
}
break;
}
};
You may also use window.document.keyup and window.document.keypress instead of window.document.keydown.
The above code handles the behavior of arrow keys and OK button on the TV remote control.

Implement the following code to retrieve the key code from “e” object
g._target = function(e) {
!e && (e = window.event);

var target = (e.target || e.srcElement) || {};

target.keyCode = e.which;

return target;
};

Benefit of using event delegation
Less memory usage. Event delegation is recommended to be used for developing HTML5 applications, as it can reduce
memory usage dramatically, and also prevent memory leaks.
"window.global" object
Function Description
window.global.initGame(...) The entry point of the game
window.global.generateCards(...) Used for generating each pair of same color cards
window.global.buildHTML(...) Used for creating the HTML tags and appending to the dom
tree
window.global.randomNum(...) Used for generating a random number between min and max
window.global.refreshInfoPanel() Used for updating the information of the panel, such as pair left
and score
window.global.showAllColors() Used for displaying all generated colors once the game started
or restarted.
window.global.getDom(...) A shortcut to document.getElementById(...) function
window.document.onclick = function() The click event of each card has been defined in this function
{...}
window.global.removeClass = Used for removing one or more CSS classes from a dom object
function(...) {}
window.global.addClass = function(...) Used for adding one or more CSS classes to a dom object
{}
Window.document.onkeydown = Fire the key down event when pressing the key on the TV
function(...) {} remote control
window.global.keyboardEvent = The main core of handling keys on the TV remote control
function(...) {}
window.global.log(...) Debugging function. Print the message to the console
window.global.printDomUsage(...) Debugging function. Print out the usage of dom objects.

Step 4 Create the game board interface
Game board design for Colour Memory

Add the “table” container to the main.html
<div id="table">
<! This section will be filled after the window.global.buildHTML() executed >
</div>

Add the “infoPanel” container to the main.html
<p></p>
</div>

Add the “gameOverPanel” container to the main.html
<div class="gameTitle gameOver">
Finish! You got <span id="alertScore">0</span>
<br /><br /><br />
New game will be started after 5 seconds
</div>
</div>

Step by step to implement the game logic

Inside the function window.global.initGame()
1) Reset all status of “window.global” to default
2) Call .generateCards() function to generate each pair card
3) Call .buildHTML() function to show the cards on the screen and set the mapping of each key on the card
4) Call .refreshInfoPanel() function to refresh the information
5) Call .showAllColors() function to show all generated colors

You will see the following result after executing the “.initGame()” function, the default focus will be set on the topleft card.

Step 5 Create variables
When a new game starts, the color of the cards are shuffled, the value of "Pair left" and "Score" are also reset to the initial
values.
Add the following line of code to “global.js” file

An array used to store the colour code of the colors of the cards
// g points to the “window.global” variable
g.backgroundColors = "yellow,red,blue,green,violet,gray,black,pink".split(",");

The following variables are necessary for the game
// The global object, it will be assigned to window.global object
var g = {},
keyCodeDic;

g.keyCodeDic = {};
keyCodeDic = g.keyCodeDic;

// Key mapping
keyCodeDic[38] = "arrowup";
keyCodeDic[40] = "arrowdown";
keyCodeDic[37] = "arrowleft";
keyCodeDic[39] = "arrowright";
keyCodeDic[13] = "ok";

// Assign to a property “keyCodeDic” of window.global object
g.keyCodeDic = keyCodeDic;

// Background color of each card
g.defaultBgColor = "#DCDCDC";
g.cardMargin = 4;
g.cardWidth = 12;
g.cardHeight = 18;


g.sameColorPairs = {};

g.colorIdxs = [];

g.cardDoms = [];

g.firstCard = {};

g.cntClicked = 0;

g.markCnt = 0;

g.curPairs = 0;

// The number of pair cards
g.pairs = 0;

g.cardsOneRow = 0;

g.allowClick = true;

g.showAllCardsTimer = 0;

g.eventInitialized = false;

g.alertTimer = 0;

g.flipTimer = 3500;

// Arrow keys id => {up: "dom id", down: "dom id", left: "dom id", right: "dom id"} mapping
g.arrowKeys = {};

g.focusDom = {
focusInDom: null,
prevFocusedDom: null,
defaultFocusedDom: null
};

// More code here

// Expose the g variable to global scope as a property of window object
window.global = g;

Cache the dom objects and the status in order to be used in the life cycle of the game
g.pairs = pairs;
g.cardsOneRow = cardsOneRow;
g.curPairs = pairs;
g.tblDom = getDom("table");
g.infoPanel = getDom("infoPanel");
g.pairLeft = getDom("pairLeft");
g.score = getDom("score");
g.restartGame = getDom("restartGame");
g.gameOverPanel = getDom("gameOverPanel");
g.closeAlert = getDom("closeAlert");
g.alertScore = getDom("alertScore");

Function used to shuffle the cards
g.generateCards = function(pairs) {
if (!pairs || typeof pairs != "number" || pairs < 0) { return; }
var g = this,
size = pairs,
card1, card2,
randomNum = g.randomNum,
handledCards = [],
colors = g.backgroundColors,
color,
sameColorPairs = g.sameColorPairs,
totalCards = pairs * 2,
colorIdxs = g.colorIdxs;
// Generate each card
while (size) {
card1 = randomNum(1, totalCards);
if (card1 != card2 && !handledCards[card1] && !handledCards[card2]) {
handledCards[card1] = true;
size;
color = colors[size];

// These two cards have same colors
sameColorPairs[color] = {card1: card1, card2: card2};

colorIdxs[card1] = color;
}
}
};

Add the following function to the “global.js” file to build the UI of each card
g.buildHTML = function(totalCards, cardsOneRow) {
var g = this,
html = "",
top, left, id, o,
cardMargin = g.cardMargin,
cardWidth = g.cardWidth,
cardHeight = g.cardHeight,
total = totalCards + 1,
size = 0,
cardDoms = g.cardDoms,
getDom = g.getDom,
defaultBgColor = g.defaultBgColor,
startIdx = 10000,
cardPos = null,
defaultFocusId,
arrowKeys = g.arrowKeys;

// Empty the “table” container
g.tblDom[removed] = "";
while (size++ < totalCards) {
// Compute the yaxis of each card
top = (Math.ceil(size / cardsOneRow)1) * (cardHeight + cardMargin) + cardMargin;
// Compute the xaxis of each card
left = (((size1) % cardsOneRow) * cardWidth) + cardMargin;

// Find the first card
if (cardPos === null || (top + left) < cardPos) {
cardPos = top + left;
defaultFocusId = "cardId" + size;
}

// Set the mapping of arrow keys on the each card
arrowKeys["cardId" + size] = o = {
up: "cardId" + (size cardsOneRow),
down: "cardId" + (size + cardsOneRow),
left: "cardId" + (size 1),
right: "cardId" + (size + 1)
};

// Check if it's first element of each element
if ((size 1) % cardsOneRow === 0) {
o.left = "";
}

// Check if it's last element of each element
if ((size % cardsOneRow) === 0) {
o.right = "restartGame";
}

// Check if it's first row
if ((Math.ceil(size / cardsOneRow) 1) === 0) {
o.up = "";
o.down = "cardId" + (size + cardsOneRow);
}

// Check if it's last row
if ((Math.ceil(size / cardsOneRow)) === cardsOneRow) {
o.down = "";
o.up = "cardId" + (size cardsOneRow);
}

top += "%";
left += "%";

html += '<div class="clsCard" style="top:'
html += top;
html += ';left:';
html += left;
html += ';"><div class="clsCardInner" tabIndex="';
html += (startIdx + size);
html += '" id="cardId';
html += size;
html += '"';
html += '></div></div>';
}

g.tblDom[removed] = html;

// Cache objects
while (total) {
id = "cardId" + total;
cardDoms[total] = getDom(id);

if (id === defaultFocusId) {
g.focusDom.defaultFocusedDom = cardDoms[total];
}
}
};

Step 6 Key handling in the game board
// Event delegation
g.keyboardEvent = function(e, eventType) {
var g = this,
id, arrowKeyMapping, nextMove,
target = g._target(e),
keyCode = target.keyCode,
key = g.keyCodeDic[keyCode],
focusDom = g.focusDom,
focusedDom, prevFocusedDom,
nextFocusedTbIdx,
arrowKeys = g.arrowKeys,
defaultTabIdx = 10000;


// Check arrow up, down, left, right and ok button
switch(eventType) {
case "keydown":
focusedDom = focusDom.focusInDom || focusDom.defaultFocusedDom;

// Get the id of current focused dom
id = focusedDom.id || "";

switch(key) {
case "ok":
switch(id) {
case "restartGame":
g.removeClass(g.restartGame, "cardFocusIn");
g.restartGame.onclick();
break;

default:
g.onclick({id: id});
break;
}
break;

case "arrowup":
arrowKeyMapping = arrowKeys[id] || {};
nextMove = arrowKeyMapping.up || "";

if (!nextMove) { return; }

// Current focus
focusedDom = g.cardDoms[parseInt(id.replace("cardId", "") || "0")];
g.removeClass(focusedDom[removed], "cardFocusIn");
focusDom.prevFocusedDom = focusedDom;

// Next Focus
focusedDom = g.cardDoms[parseInt(nextMove.replace("cardId", "") || "0")];
focusDom.focusInDom = focusedDom;
g.addClass(focusedDom[removed], "cardFocusIn");
break;

case "arrowdown":
nextMove = arrowKeyMapping.down || "";


// Current focus

// Next Focus
break;

case "arrowleft":
prevFocusedDom = focusDom.prevFocusedDom;

// Current focus is on the card
if (id.indexOf("cardId") === 0) {
nextMove = arrowKeyMapping.left || "";


// Current focus

// Next Focus
}

switch(id) {
case "restartGame":
focusDom.focusInDom = prevFocusedDom;
g.removeClass(g.restartGame, "cardFocusIn");
g.addClass(prevFocusedDom[removed], "cardFocusIn");
break;
}
break;

case "arrowright":
// Current focus

nextMove = arrowKeyMapping.right || "";


// Next Focus

// Check if focus on the "RestartGame" button
switch(nextMove) {
case "restartGame":
focusDom.focusInDom = g.restartGame;
g.addClass(g.restartGame, "cardFocusIn");
break;

default:
break;
}
break;
}
break;
}
};

When one of the arrow keys is pressed, there are two things will be handled.
1) Remove the focused CSS style from current focused dom object
2) Move to the next target dom object, and set the focused CSS style

When the OK button is pressed, the program will check the focused dom object and then execute it's related event.

Add the following function to the “global.js” file, this function will refresh the information panel
g.refreshInfoPanel = function() {
var g = this,
mark = g.markCnt;

g.pairLeft[removed] = g.curPairs;
g.score[removed] = g.markCnt;
};

Add the following function to the “global.js” file to show all generated colors at the beginning of each round
g.showAllColors = function() {
var g = this,
color, o, css,
card1, card2;

g.allowClick = false;

for (color in sameColorPairs) {
if (!sameColorPairs.hasOwnProperty(color)) { continue; }

o = sameColorPairs[color];
card1 = o.card1;
card2 = o.card2;
css = ";backgroundcolor:" + color + ";";
cardDoms[card1].style.cssText += css;
}

window.clearTimeout(g.showAllCardsTimer);

g.showAllCardsTimer = window.setTimeout(function() {
color, o, css,
card1, card2;

css = ";backgroundcolor:" + g.defaultBgColor + ";";


card1 = o.card1;
card2 = o.card2;
}
}, g.flipTimer); // 3.5 seconds
};

Here is the main core of the game logic
g.onclick = function(o) {
var g = window.global,
id = o.id || "",
idx,
card, color, card1Dom, card2Dom,
firstCard = g.firstCard,
firstCardDom,
defaultBgColor = g.defaultBgColor;


// Handle “click” event on the “ok” button of each card
idx = id.replace("cardId", "");

if (!idx || isNaN(idx)) { return; }

card = cardDoms[idx];
color = g.colorIdxs[idx];

if (!card || card.hideCard) { return; }

card.style.cssText += ";backgroundcolor:" + color + ";";
g.cntClicked++;

// Flip the first card
if (g.cntClicked === 1) {
firstCard.idx = idx;
firstCard.color = color;
}

// Flip the second card
else if (g.cntClicked === 2) {
// Clicked the same card
if (firstCard.idx && firstCard.idx === idx) {
g.cntClicked;
return;
}

g.cntClicked = 0;
firstCardDom = cardDoms[firstCard.idx];

// Do both cards have the same color?
if (firstCard.color === color) {
card1Dom = cardDoms[firstCard.idx];
card2Dom = cardDoms[idx];

if (card1Dom.hideCard || card2Dom.hideCard) { return; }

card1Dom.hideCard = true;
card2Dom.hideCard = true;

window.setTimeout(function() {
tblDom = g.tblDom;

// Hide both cards
firstCardDom.style.display = "none";
card.style.display = "none";

// Change the class style
g.removeClass(firstCardDom[removed], "clsCard");
g.removeClass(card[removed], "clsCard");

g.addClass(firstCardDom[removed], "clsCardHide");
g.addClass(card[removed], "clsCardHide");

g.markCnt += 2;
g.curPairs;
g.refreshInfoPanel();

// Does the game finish?
if (!g.curPairs) {
g.alertScore[removed] = g.markCnt;
g.gameOverPanel.style.cssText += ";display:block;";

// Restart the game after 5 seconds
g.alertTimer =

g.gameOverPanel.style.cssText += ";display:none;";

// Reset the status
g.focusDom = {
focusInDom: null,
prevFocusedDom: null,
defaultFocusedDom: null
};

g.initGame(g.pairs, g.cardsOneRow);
}, 5000);
}

g = firstCardDom = card = null;
}, 700);
return;
}
else {
g.markCnt;

var css = ";backgroundcolor:" + defaultBgColor + ";";

firstCardDom.style.cssText += css;
card.style.cssText += css;
window.global.refreshInfoPanel();

firstCardDom = card = defaultBgColor = null;
}, 700);
}
}
}
};

You will see the following result after adding all the code
All cards will return to faced down position after 3.5 seconds
Here is the sample code to show you how to use the setTimeout() function:
// 1 second = 1000 milliseconds
window.setTimeout( function() {
// The code in this scope will be executed after “millisecond”.
}, millisecond );

Step 8 Show a pop up message when all pairs are found
<! Pop up message >
<br />
</div>
</div>

You will see the following result when all the pairs are found

Step 9 Copy the files to "sdkhtml"
Copy "main.js", “js”, “css” and "images" to the "sdkhtml" folder, which is under the root directory of your APACHE web server.

Congratulations! You have completed the Colour Memory HTML5 application.
Click to download finished source: colorMemoryArrowKey.zip

Free Cursor mode
Free Cursor Mode is when you see a browser like pointer and use it to make your selections
Overview
This tutorial will take you stepbystep through the development of a simple board game HTML5 application, "Colour Memory"
in Free Cursor Mode. The application consists of a 4x4 grid, all in all 16 slots. All slots consist of cards faced down. The player
flips two of these cards upward during each round, trying to find equals. If the two cards are the same, the player receives two
points, and the cards are removed from the game board. Otherwise, the player loses one point and the cards are returned to
the faced down position. This continues until all pairs have been found.
Development process diagram
Prerequisite
Overall structure
Click to Download source: colorMemoryFreeCursor.zip
images Folder used to store the image files of this HTML5 application
js Folder used to store the JavaScript files of this HTML5 application
css Folder used to store the CSS files of this HTML5 application
main.html Main file of "Colour Memory"

Game Logic
When users navigate on the game board , the javascript function window.onload() will be called to initial the game.
Game Logic Diagram

Creating Your Application
Step 1
Extract "main.html", "images", "js" and "css" from "colorMemoryFreeCursor.zip"
Step 2
Open Netbeans, drag and drop the folder "memoryGame" into it.
Double click the "main.html" from the Explorer Window and you will see the following lines of code:
<<!DOCTYPE HTML>
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=UTF8" />
<title>Memory Game</title>
</head>
<body>
<! All cards will be shown in the table >
<div id="table">
<! HTML tags here >
</div>

<! Pop up message >
<div class="gameTitle gameOver">Game Over</div>
</div>

<! Information panel >
<p></p>
</div>
// Entry Point of the HTML5 application
g.initGame(8, 4);
};
</script>
</body>
</html>

The “main.html” created three containers, id=”table”, id=”infoPanel” and id=”gameOverPanel”.
In the head tag, a CSS file and a JavaScript file have been included already:
The following file created a “global” object and assigned it to the window object as a property (window.global):
window.onload() function will be executed automatically once the “main.html” loaded completely, the window.global object
now is ready to be used.
The variable window.global object can be used in any scope of javascript code, as you can see the first line of
window.onload() function:
Now the variable g points to the window.global object, use following syntax to call its function:
g.initGame(...);
Step 3
We will create two kinds of things in here, "game board" UI and key events.
We defined a function “g.initGame()” in the global.js file, this function is the entry point of the game.

In the “g.initGame()” function, there are several things have been done:
Reset values of all properties of “window.global” object to default
Create all cards (UI)
Cache dom objects in order to be used in the life cycle of the game
Refresh the information panel
Attach events to each button, such as “OK” button, “Refresh” button

Initial UI
After the function “g.buildHTML(...)” executed, all cards should be shown on the screen.
Attach key events
There are three ways to implement the key events, use “click” event as example:
1) Use addEventListener() function:
// Attach “click” event to the dom object with id = “btn”
window.document.getElementById(“btn”).addEventListener(“click”, function(e) {
// your code here
}, false);

2) Override “onclick” function of dom object:
window.document.getElementById(“btn”).onclick = function(e) {
// your code here
};

3) event delegation:
window.document.onclick = function(e) {
!e && (e = window.event);

var target = e.target || e.srcElement,
id = target.id || “”,
className = id.className || “”,
tagName = (target.tagName || “”).toLowerCase();

if (id === “target id”) {
// your code here
}

if (className === “target class name”) {
// your code here
}

// ex: tagName === “div”
if (tagName === “target tag name”) {
// your code here
}
};

Benefit of using each of above implementation
1) Easy to implement. If “btn” dom object need to be removed from dom tree, developer has to call the
.removeEventListener(...) function before removing the “btn” dom object. Use following syntax:
window.document.getElementById(“btn”).removeEventListener(“click”, function() {…}, false);
2) Easy to implement. Remove the event using the following syntax:
window.document.getElementById(“btn”).onclick = null;
3) Less memory usage compared with 1 and 2. If a complex HTML5 application need to be implemented, event delegation is
recommended to be used, as it can reduce memory usage dramatically, and also prevent memory leaks.

"window.global" object
Function Description
window.global.initGame(...) The entry point of the game
window.global.generateCards(...) Used for generating each pair of same color cards
window.global.buildHTML(...) Used for creating the HTML tags and appending to the dom tree
window.global.randomNum(...) Used for generating a random number between min and max
window.global.refreshInfoPanel() Used for updating the information of the panel, such as pair left
and score
window.global.showAllColors() Used for displaying all generated colors once the game started or
restarted.
window.global.getDom(...) A shortcut to document.getElementById(...) function
window.document.onclick = The click event of each card has been defined in this function
function() {...}
window.global.log(...) Debugging function. Print the message to the console
window.global.printDomUsage(...) Debugging function. Print out the usage of dom objects

Step 4 Create the game board interface
Game board design for Colour Memory

Add the “table” container to the main.html
<div id="table">
<! This section will be filled after the window.global.buildHTML() executed >
</div>

Add the “infoPanel” container to the main.html
<p></p>
</div>

Add the “gameOverPanel” container to the main.html
<br />
</div>
</div>

Step by step to implement the game logic

Inside the function window.global.initGame()
1) Reset all status of “window.global” to default
2) Call .generateCards() function to generate each pair card
3) Call .buildHTML() function to show the cards on the screen
4) Call .refreshInfoPanel() function to refresh the information
5) Call .showAllColors() function to show all generated colors
6) Attach “click” events to “OK” and “Refresh” buttons

You will see the following result after executing the “.initGame()” function

Step 5 Create variables
When a new game starts, the color of the cards are shuffled, the value of "Pair left" and "Score" are also reset to the initial
values.
Add the following line of code to “global.js” file

An array used to store the colour code of the colours of the cards
// g points to the “window.global” variable

The following variables are necessary for the game
var g = {};

// Background color of each card
g.defaultBgColor = "#DCDCDC";
g.cardMargin = 4;
g.cardWidth = 12;
g.cardHeight = 18;


g.sameColorPairs = {};

g.colorIdxs = [];

g.cardDoms = [];

g.firstCard = {};

g.cntClicked = 0;

g.markCnt = 0;

g.curPairs = 0;

// The number of pair cards
g.pairs = 0;

g.cardsOneRow = 0;


g.showAllCardsTimer = 0;

g.eventInitialized = false;

g.alertTimer = 0;

// More code here

// Expose the g variable to global scope as a property of window object
window.global = g;

Cache the dom objects and the status in order to be used in the life cycle of the game
g.pairs = pairs;
g.cardsOneRow = cardsOneRow;
g.curPairs = pairs;
g.tblDom = getDom("table");
g.infoPanel = getDom("infoPanel");
g.pairLeft = getDom("pairLeft");
g.score = getDom("score");
g.restartGame = getDom("restartGame");
g.gameOverPanel = getDom("gameOverPanel");
g.closeAlert = getDom("closeAlert");
g.alertScore = getDom("alertScore");

Function used to shuffle the cards
g.generateCards = function(pairs) {
if (!pairs || typeof pairs != "number" || pairs < 0) { return; }
var g = this,
size = pairs,
card1, card2,
randomNum = g.randomNum,
handledCards = [],
colors = g.backgroundColors,
color,
totalCards = pairs * 2,
colorIdxs = g.colorIdxs;
// Generate each card
while (size) {
if (card1 != card2 && !handledCards[card1] && !handledCards[card2]) {
size;
color = colors[size];

// These two cards have same colors
sameColorPairs[color] = {card1: card1, card2: card2};

}
}
};

Add the following function to the “global.js” file to build the UI of each card
g.buildHTML = function(totalCards, cardsOneRow) {
var g = this,
html = "",
top,
left,
cardMargin = g.cardMargin,
cardWidth = g.cardWidth,
cardHeight = g.cardHeight,
total = totalCards + 1,
getDom = g.getDom,

//Empty the “table” container first
g.tblDom[removed] = "";

while (totalCards) {
top = (Math.ceil(totalCards / cardsOneRow)1) * (cardHeight + cardMargin) +
cardMargin;
top += "%";
left = ((totalCards % cardsOneRow) * cardWidth) + cardMargin;
left += "%";
html += '<div id="cardId';
html += totalCards;
html += '" class="clsCard" style="top:';
html += top;
html += ';left:';
html += left;
html += ';backgroundcolor:';
html += defaultBgColor;
html += ';"></div>';
totalCards;
}
g.tblDom[removed] = html;

// Cache objects
while (total) {
cardDoms[total] = getDom("cardId" + total);
}
};

Step 6 Key handling in the game board
// Event delegation
win.document.onclick = function(e) {
!e && (e = window.events);
target = e.target || e.srcElement,
id = target.id || "",
cls = target.className || "",
idx,
card, color,
firstCard = g.firstCard,
firstCardDom,


// Handle "click" event of each card
idx = id.replace("cardId", "");
if (!idx || isNaN(idx)) { return; }
card = cardDoms[idx];
color = g.colorIdxs[idx];
if (!card) { return; }

card.style.cssText += ";backgroundcolor:" + color + ";";
g.cntClicked++;
if (g.cntClicked === 1) {
firstCard.idx = idx;
firstCard.color = color;
}
else if (g.cntClicked === 2) {
// Clicked the same card
if (firstCard.idx && firstCard.idx === idx) {
g.cntClicked;
return;
}
g.cntClicked = 0;
firstCardDom = cardDoms[firstCard.idx];
// Are both cards the same color?
if (firstCard.color === color) {
delete cardDoms[firstCard.idx];
delete cardDoms[idx];
tblDom = g.tblDom;
tblDom.removeChild(firstCardDom);
tblDom.removeChild(card);
g.markCnt += 2;
g.curPairs;
g.refreshInfoPanel();
// Game Over
if (!g.curPairs) {
g.gameOverPanel.style.cssText += ";display:block;";
// Restart the game after 5 seconds
g.alertTimer =
g.gameOverPanel.style.cssText += ";display:none;";
g.initGame(g.pairs, g.cardsOneRow);
}, 5000);
}
g = firstCardDom = card = null;
}, 700);
return;
}
else {
g.markCnt;
var css = ";backgroundcolor:" + defaultBgColor + ";";
firstCardDom.style.cssText += css;
card.style.cssText += css;
window.global.refreshInfoPanel();
firstCardDom = card = defaultBgColor = null;
}, 700);
}
}
}
};

Add the following function to the “global.js” file, this function will refresh the information panel
g.refreshInfoPanel = function() {
var g = this,
mark = g.markCnt;

g.pairLeft[removed] = g.curPairs;
g.score[removed] = g.markCnt;
};
Add the following function to the “global.js” file to show all generated colors at the beginning of each round
g.showAllColors = function() {
var g = this,
color, o, css,
card1, card2;



card1 = o.card1;
card2 = o.card2;
css = ";backgroundcolor:" + color + ";";
}

window.clearTimeout(g.showAllCardsTimer);

g.showAllCardsTimer = window.setTimeout(function() {
color, o, css,
card1, card2;

css = ";backgroundcolor:" + g.defaultBgColor + ";";


card1 = o.card1;
card2 = o.card2;
}
}, 3500); // 3.5 seconds
};

You will see the following result after adding all the code
All cards will return to faced down position after 3.5 seconds
Step 8 Show a pop up message when all pairs are found
Add the following HTM tags to the “main.html” file
<! Pop up message >
<br />
</div>
</div>

Attach “click” event to the pop up panel in the “global.js” file
g.closeAlert.addEventListener("click", function(e) {
g.alertScore[removed] = g.markCnt;
window.global.gameOverPanel.style.cssText += ";display:none;";
}, false);

You will see the following result when all the pairs are found

Step 9 Copy the files to "sdkhtml"
Copy "main.js", “js”, “css” and "images" to the "sdkhtml" folder, which is under the root directory of your APACHE web server.

Congratulations! You have completed the Colour Memory HTML5 application.
Click to download finished source: colorMemoryFreeCursor.zip
Video Player Tutorial
Overview
This tutorial will take you stepbystep through the development of video template application. The application will display a
grid holding videos on the device screen. The following image shows you a landing page, the default focus has been set at the
first video item of the grid, user can press the arrow up, down, left or right to move the focus to any video item. From this
tutorial, developers will learn the following techniques:

• Video player user interface routines
– Create a grid to hold all video data.
– How to catch the key event of each button on the TV remote control
– How to move the focus from one to another
• How to control the video (play, pause, stop, fast forward, fast rewind and full screen)
• How to update the progress bar and timer using JavaScript
Application Preview
The following illustrations show the application operation stepbystep
1) Select any one of the videos in the grid and then press the “OK” button on the TV remote control to play the selected video
2) A normal dimension of the video will show on the device screen (current selected video will be played automatically)
3) The normal sized player controls will hide automatically after 6 seconds

4) The video can be played in full screen mode when pressing the full screen icon on the player control
5) Press back button on the TV remote control to exit full screen mode or go back to the landing page(if in normal dimension
of video)

Prerequisite

Overall structure
Click to Download source: SampleVideoPlayer_html5_HD.zip
(*note: file size is approximately 130MB)

HTML
File Description
main.html Main file of "Video Tutorial"
init.json File for Browser Configuration

CSS
css/grid.css The appearance of grid component
css/navigationMenu.css The appearance of application
css/player.css The appearance of player component
css/playerControl.css The appearance of player control
videojs/videojs.css The appearance of player object

JavaScript
js/global.js The common functions
js/grid.js A framework to show each video on the device screen
js/remoteControlManager.js A framework to catch the events of keys on the TV remote
control (Arrow up, down, left, right and OK buttons)
js/navigationMenu.js To handle the click event of each button on the device
screen
js/player.js To handle the event of each button on the player panel
js/jquery.js A common framework helps developers to do a lot of things
Link: http://jquery.com/
videojs/video.js Video.js is a JavaScript and CSS library that makes it easier
to work with and build on HTML5 video. Video.js is an open
source project.
Please refer to the link below for usage conditions.
http://www.gnu.org/licenses/

Creating your HTML5 application

Step 1
Extract "sdkhtml" from "videoTemplate_html5_HD.zip".

Step 2
Create a custom framework to handle the key event of each key on TV remote control.

In the remoteControlManager.js file, we created an anonymous function
function() {...}, and then execute it immediately with the syntax: (function() {...})();
Once the anonymous function has been executed, only one variable named “remoteControlManager” is exposed to the global
scope as a property of window object.

The “remoteControlManager.js” framework supports the following keys on the TV remote control:
Key name Key code
Arrow up 38
Arrow down 40
Arrow left 37
Arrow right 39
OK 13

Step 3
Create a framework to handle all videos.
Here is the basic program structure in “js/grid.js” file
function initGrid(container, data, total, cellsPerRow, videosPerPage, msg, focusEvent,
defaultVideoImgCallback) {
// more code here...
}

Property name Description
container A container is a <div> object existing in the HTML document.

<div id=”aContainer”></div>

After executed the initGrid(...) function, all video data will be put into above div
container.
data An array of video data [json object]
total The total number of videos [positive number]
cellsPerRow Videos in one row [positive number]
videosPerPage Total videos in one page [positive number]
msg The message will be shown on the bottom of the grid. [string]
Format: "{$first} {$last} of {$total} video(s)"
The {$first}, {$last} and {$total} are constant strings
focusEvent Set the event of each video cell on the current page of grid [function /
undefined / null]
defaultVideoImgCallback Override this function to show custom image for each video cell [function /
undefined / null]

Step 4
Create a loading image, the image will be shown on the device screen during the data is being loaded

HTML
<div id="loadingImg" class="loadingImgCls hide">
Loading...
</div>

Also its CSS file needs to be included.
<link rel="stylesheet" type="text/css" href="<file path>/loading.css" />

When the video data is being downloaded from server/local machine, the loading image will show on the device screen, and it
will close automatically once the data has been downloaded.
Use following syntax to show / hide loading image:
var rcManager = window.remoteControlManager,
doms = rcManager.doms;

// Show container
rcManager.removeClass(doms["loadingImg"], "hide");

// Hide container
rcManager.addClass(doms["loadingImg"], "hide");

Create a popup container for showing error message
<div id="connectionImg" class="connectionImgCls hide">
Cannot connect to network
<br /><br />
<input type="button" id="connectionImgBtn" style="backgroundcolor:blue;" value="OK"
/>
</div>

If the network connection is disconnected, the error message will show on the device screen, the user needs to press the “OK”
button to close the alert.
We can use following syntax to hide / show the container
var rcManager = window.remoteControlManager,
doms = rcManager.doms;

// Show container
rcManager.removeClass(doms["connectionImg"], "hide");

// Hide container
rcManager.addClass(doms["connectionImg"], "hide");

More details about handling error message, once the network connection is disconnected, we have to show a message on the
device screen.

In this application, AJAX is always to be used to retrieve data from server/local machine. Here is the syntax:
window.global.ajax({
url: “<file_url>”,
time: 5,
callback: “<function>”,
failCallback: function(txt, g) {
window.remoteControlManager.removeClass(doms["connectionImg"], "hide");
}
});

We use failCallback() function to catch any network issues, when the program sent out an Ajax request to the server/local
machine.
A timer will be activated immediately, and then the failCallback() function will be called if the program doesn't receive any data
from server/local machine after 5 seconds. We can put some logic into the failCallback() function to show the error message.
Step 5
The window.onload() function is defined in the global.js file, there are two steps need to be implemented in the
window.onload() function before the grid can work properly.
5.1 – Implement the action for each dom object
1) Set the key mappings
window.remoteControlManager.setkeyCodeMapping(
{"38": "arrowup", "40": "arrowdown", "37": "arrowleft", "39": "arrowright", "13": "ok"}
);

2) Set the focus relationship of each dom object
window.remoteControlManager.setFocusMovementMapping(
{“<dom id 1>”: [“<dom id 2 arrow up>”, “<dom id 3 arrow down>”, “<dom id 4 arrow left>”,
“<dom id 5 arrow right>”,
{focusStyle: <fn name>, focusIn: "className1 className2", focusOut: "className1
className2", selected: "className1 className2"}],

“<dom id 2>”: [...],
…
});

In order to move the focus from one dom to another, we have to set focus on doms. For example, if current focus is on “dom1”
object and we press the “arrow up” key to move the focus on the “dom2” object:
press “arrow down” to move the focus on the “dom3” object,
press “arrow left” to move the focus on the “dom4” object,
and press “arrow right” to move the focus on the “dom5” object,
Therefore, we have to write the following code:
{“dom1”: [“dom2”, “dom3”, “dom4”, “dom5”,

// Add the class name(s) to the “dom1” when the focus is on the “dom1”
{focusIn: "className1 className2", '

// Add the class name(s) to the “dom1” when the focus is moved away from “dom1”
focusOut: "className1 className2",

// Add the class name(s) to the “dom1” when the focus is on the “dom1” and the “OK” key
is pressed
selected: "className1 className2"}]});

5.2 – Create a player control UI
Create the player control, the HTML part shows below:
<! Player control >
<div id="playerControlContainer" style="hide">
<div id="playerControl" class="">
<div id="playerControlPlay" class="playerControlBtnPlay inlineBlock"></div>
<div id="playerControlPause" class="playerControlBtnPause inlineBlock"></div>
<div id="playerControlStop" class="playerControlBtnStop inlineBlock"></div>
<div id="playerControlFB" class="playerControlBtnFastBackward inlineBlock"></div>
<div id="playerControlFF" class="playerControlBtnFastForward inlineBlock"></div>

<div id="playerControlTimeBar" class="">
<div id="playerControlTimeline"></div>
</div>

<div id="playerControlTimer" class="">00:00:00</div>
</div>
</div>

5.3 – Implement the focus for each button
Implement the logic of each button on the player control
{“playerControlPlay”: [“”, “”, “”, “playerControlStop”,
{focusIn: "playerControlBtnPlayFocus", focusOut: "playerControlBtnPlay", selected:
"playerControlBtnPlayFocus"}],

“playerControlStop”: [“”, “”, “playerControlPlay”, “playerControlFB”,
{focusIn: "playerControlBtnStopFocus", focusOut: "playerControlBtnStopFocus", selected:
"playerControlBtnStopFocus"}],

// And more...
});

5.4 – Create a video object
Create a player object for playing the video
<video id="videoObject" class="videojs vjsdefaultskin" width="800" height="600"
poster="" preload="auto" datasetup="{}"></video>
Define a video container in the navigationMenu.html file, videojs and vjsdefaultskin are predefined in videojs/videojs.css
file.
//Pause the video
window.global.player.pause();
//Play the video
window.global.player.play();

//Stop the video
window.global.player.currentTime(0);
window.global.player.pause();

//Fast forward
window.global.player.currentTime(+seconds);

//Fast backward
window.global.player.currentTime(seconds);

//Fullscreen mode
window.global.player.requestFullScreen();

//Cancel fullscreen
window.global.player.cancelFullScreen();

5.5 – Implement the logic to update the progress bar and timer
Handle the timeline and timer on the player control. We just created the player object in the previous step, we have to attach
two events to this player object (window.global.player)
// This function will be called automatically during playback
// This is fired 15 ~ 250 milliseconds
window.global.player.addEvent("timeupdate", function() {
// Now this object is pointing to the window.global.player object
var player = this,

// Get the current time
curTime = player.currentTime(),

// Get the duration of video
duration = player.duration();

// Implementation
};

// Fired when the end of the media resource is reached
window.global.player.addEvent(“ended”, function() {
// Now this object is pointing to the window.global.player object
var player = this,

// Get the current time
curTime = player.currentTime(),

// Get the duration of video
duration = player.duration();

// Implementation
});

5.6 – Create a grid to show videos on the device screen
Now, create a grid to show videos, here is the syntax:
var grid = initGrid(“<contianer dom id>”, json, <total videos>, <number of cells in one row>,
<number of rows on a page>,
“<message>”, callback);

Step 6
Add the following events to the ”js/player.js” file
Var global = window.global;

// Defined the logic to retrieve a video data from json object
global.playVideo = function() {...};

// Play the video when “Play Now” button is clicked
global.playVideoNow = function() {...};

// Play in full screen when “Play Fullscreen” button is clicked
global.playFullscreen = function() {...};

// The above implemented source code was defined in “js/player.js” file

Final step
Copy all folders to the "sdkhtml" folder, which is under the root directory of your APACHE web server.

Congratulations! You have completed the application.
Click to download the finished source:
1920×1080
SampleVideoPlayer_html5_HD.zip

1280×720
SampleVideoPlayer_html5_SD.zip

API Reference
As HTML 5 standards are still being developed by W3C and WHATWG, this document itself may not be consistent wit latest
HTML5 specification. This document is written by referring to HTML5 Working Draft 25 August 2009
Please note that API implementation may be changed from time to time and this API reference document may be inconsistent
with API implementation. If it is inconsistent, API implementation is valid.

HTML5
CSS
JavaScript
DOM

HTML5
The following is a table of supported and not supported elements (* means partial support).
Supported Not Supported
Document Type <!DOCTYPE html> triggers MathML in text/html
Declaration standard mode, HTML5
tokenizer, HTML5 tree building,
SVG in text/html
Multimedia Video MP4(H.264 / AAC), HLS(Http Subtitle support, Ogg Theora support, WebM
live streaming), video element, support, Full screen support, Pointer Lock
poster image support, Window.requestAnimationFrame,
track
Multimedia Audio AAC, audio elements PCM audio support, MP3 support, Ogg
Vorbis support, Ogg Opus support, WebM
support, Web Audio API
Canvas Canvas element, 2d context,
Canvas text
Elements Global attributes or methods:
Hidden attributes, Dynamic
markup insertion, Embedding
custom nonvisible data
Root tag Html
Form and Input tags Form, Form validation, CSS Input type=color, Input type=file, Datalist,

selectors, Events, fieldset*, Meter, output
legend, input type=text*, input
type=search, input type=tel,
input type=url, input type=email,
input type=datetime*, input
type=date*, input type=month*,
input type=week*, input
type=time*, input type=datetime
local*, input type=number*, input
type=range, input
type=checkbox, input
type=image*, label, button,
select, optgroup, option,
textarea, keygen, progress
Global attributes class accesskey
Section Body, section, article, aside, h1,
h2, h3, h4, h5, h6, hgroup,
header, footer, address
Table tags Table, caption, colgroup, col,
tbody, thead, tfoot, tr, td, th
User Interaction Drag Attributes, Events,
and Drop
User Interaction Editing elements, Editing documents, APIs,
HTML Editing
Document tag Head, title, base, link, meta,
style
Microdata Microdata
Web Applications Application cache, Custom scheme handlers,
Custom content handlers, Customer search
providers
HTML Scripting tag Script, noscript
Embedded tags img, iframe, embed, object,
param, video, audio, source,
map, area
Security Sandboxed iframe, Seamless iframe, Iframe with inline contents,
Asyncromous script execution,
Runtime script error reporting,
Base64 encoding and decoding
WebGL Native binary data 3D context
Communication Cross document messaging ServerSent Events, WebSocket
Local Storage Session storage Local Storage, IndexedDB, Web SQL

Database
Grouping tags P, hr, pre, blockquote, ol*, ul, li,
dl, dt, dd, figure, figcaption, div
Text tags a, em, strong, small, s, cite, q,
dfn, abbr, code, var, samp, kbd,
sub, sup, I, b, u, mark, ruby, rt,
rp, bdi, bdo, span, br, wbr
Insertion/Deletion ins, del
Location and Geolocation, Device Orientation
Orientation
Files File API, Directories and System
Spellcheck Spellcheck attribute
Threading Web Workers, Shared Workers
Multimedia Others Access to webcam
History and Navigation Session history
Others Text Selection, Scroll into viewPage Visibility, Mutation Observer, Scoped
style element
*For more information on the partially supported items, go to Partially Supported Items

Partially Supported items
Grouping Content elements figure element yes
figcaption element yes
reversed attribute on the ol no
element
Textlevel semantic elements download attribute on the a no
element
ping attribute on the a element yes
mark element yes
ruby, rt and rp elements yes
time element yes
wbr element yes
Interactive elements details element yes

summary element yes
command element no
menu element of type list no
menu element of type toolbar no
menu element of type context no
Input type=text Minimal element support yes

Selection direction no
Input type=datetime, date, month, week, Minimal element support yes

time, datetimelocal custom userinterface yes
Value Sanitization no
min attribute yes
max attribute yes
stop attribute yes
stepDown() method yes
stepUp() method yes
valueAsDate() method yes
valueAsNumber() method yes
Input type=number Minimal element support yes

custom userinterface no
Value Sanitization yes
min attribute yes
max attribute yes
stop attribute yes
stepDown() method yes
stepUp() method yes
Field validation yes
valueAsNumber() method yes
Input type=image Minimal element support yes

width property no
height property no
Fieldset Minimal element support yes

elements attribute no
disabled attribute no
Other attributes autofocus attribute yes

autocomplete attribute no
placeholder attribute yes
multiple attribute no
dirName attribute no
XMLHttpRequest Level 2 Upload files no
Text response type yes
Document response type no
Array buffer response type no
Blob response type no

JavaScript
ECMA262 specification. More information for it can be found here

DOM
LEVEL 1 Full
LEVEL 2 Core Full
LEVEL 2 Views Full
LEVEL 2 Events Full
LEVEL 2 Style Full
LEVEL 2 Traversal/Range Full
LEVEL 2 HTML Full
CSS

CSS 1 Full
CSS 2 Partial
CSS 2 R1 Partial
CSS 3 Partial
*Corresponds to Webkit version 535.1
Capabilities
The capabilities of the HTML5 SDK are discussed here. It will provide you with comprehensive knowledge about the
Panasonic's IPTV Apps Platform.
Basic Features
Audio and Video
Input Devices
Cookies

Basic Features

Screen resolution 1920x1080 or 1280x720 (application can
configure)
Color 32 bit
Communication HTTP 1.1, TLS 1.0/SSL 3.0
Audio and Video
MP4(H.264 / AAC), HLS(Http live streaming), video element, poster image, audio elements, AAC, are supported
*For information about the supported DRMs contact Support here.

Input Devices

Remote Controller
Free cursor mode Arrow key mode***
Input
On link On textarea 2012 2013
OK Start loading specified web page Show soft keyboard Enter key VK_ENTER
Return Go back to the previous screen BackSpace* BackSpace key** VK_BACK
Up arrow Move pointer up Up arrow key VK_UP
Down arrow Move pointer down Down arrow key VK_DOWN
Left arrow Move pointer left Left arrow key VK_LEFT
Right arrow Move pointer right Right arrow key VK_RIGHT
* In case back space is not used by the contents it will go back to previous page
** In case back space key is not used by contents, nothing happens
*** If the application is targetted for both 2012 and 2013 devices, both cases will need to be handled in the application
Regardless of the cursor mode (Free Cursor mode or Arrow Key mode), the following key codes are supported by
2013 model TVs (lower model TV remotes may not support some of control keys)
Numeric key VK_0, VK_1, VK_2, VK_3, VK_4, VK_5, VK_6, VK_7, VK_8, VK_9
Color Key VK_RED, VK_GREEN, VK_YELLOW, VK_BLUE
Control key VK_PLAY, VK_PAUSE, VK_STOP, VK_FAST_FWD, VK_REWIND

Touch Pad
Input
Start loading specified Show soft
Left click Enter key VK_ENTER
web page keyboard
Start loading specified Show soft
Tap Enter key VK_ENTER
web page keyboard
VK_UP
Slide on touch Arrow key with the slide VK_DOWN
Move pointer
pad direction VK_LEFT
VK_RIGHT
Wheel Scroll up/down
Go back to the previous
Return key BackSpace* BackSpace key** VK_BACK
screen
Smart Phone
Input
Start loading specified web Show soft
Tap Enter Key VK_ENTER
page keyboard
VK_UP
Arrow key with the slide VK_DOWN
Slide on pad Move pointer
direction VK_LEFT
VK_RIGHT
Twofinger
Scroll
scroll
Go back to the previous VK_BACK
Return key BackSpace* BackSpace key**
screen
Color Key VK_RED, VK_GREEN, VK_YELLOW, VK_BLUE
Control key VK_PLAY, VK_PAUSE, VK_STOP, VK_FAST_FWD, VK_REWIND

USB Keyboard
Input Free cursor mode Arrow key mode***


Enter Start loading specified web page Show soft keyboard Enter key VK_ENTER
BackSpace Go back to the previous screen BackSpace* BackSpace key** VK_BACK
Up arrow Move pointer up Up arrow key VK_UP
Down arrow Move pointer down Down arrow key VK_DOWN
Left arrow Move pointer left Left arrow key VK_LEFT
Right arrow Move pointer right Right arrow key VK_RIGHT

*Note: Numeric key, color key and control key support in 2012 models is to be decided

Cookies
up to 300 cookies
up to 4096 bytes per cookie (as measured by the characters that comprise the cookie nonterminal in the syntax
description of the SetCookie2 header, and as received in the SetCookie2 header)
up to 20 cookies per unique host or domain name

Submitting Apps for QA
Submitting Apps for QA

Self Check List
The purpose of this self checklist is to provide developers with a list of self test items before you submit your application to the
Panasonic IPTV Apps platform.
Please make sure you have a good read before submitting your applications as the test cases below are part of the test items
in our Quality Assurance (QA) process.

Test Device for HTML5 Apps
Note that even if application is written in HTML5, a computer browser does not replicate the behavior of an application on
a Panasonic IPTV device (TV). The application must be tested on a Panasonic IPTV device (TV).

Application Settings during submission
Application must be submitted in its final Setup with all settings (code, server settings etc) as it would be seen by the end
user. For Apps updates the final setup should be deployed on a different URL and NOT on the same URL as the currently
live production URL.

GeoBlocked Contents
If the application has some contents which is geoblocked (not available in certain regions), please contact us
at: support@developer.vieraconnect.com so that we could provide you with the list of IP addresses which will need to be
whitelisted.

Application Documentation
Application and Staging URL shouldn’t be the same
Application Description Document should be in English even if the application is not. This is crucial is as it will enable our
test team to test your app quickly
Emergency Technical Support Telephone number is included in the Appllication Description Document. The number will
only be used in case of emergencies
*Sample Application Description Document here.

Application which have Video/Music players
Video loads within 10s (if applicable)
Audio syncs in with the video (if applicable)
Some mechanism to show the time line for videos which are longer than three minutes
Loading Indicator should be shown for contents which takes longer than three seconds
*Our Video Player Tutorial gives an example on how to implement these functions. Please refer to here for more details
Navigation
The application must close itself without causing any unexpected effects, such as freezing the application
Pressing of Return key in the remote controller should consistently bring the user back to previously selected
positions/feeds/features/content
Pressing of VIERA Connect/Internet/HOME button at any stage of the application should consistently bring the user back
to the home screen
Network error is captured with an appropriate error message. Network error can be simulated by removing a network
cable or shutting down a WiFi Connection
*Our Video Player Tutorial gives an example on how to implement these functions. Please refer to here for more details

Stability
Soak test passes (3hrs of idle app/video playback)


Panasonic IPTV Apps Developers (HTML5)

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Panasonic IPTV Apps Developers (HTML5)

Hochgeladen von

Copyright:

Verfügbare Formate

07/11/2018 HTML5 v2.

0 | Panasonic IPTV Apps DEVELOPERS

Parent property Child property Available value Definition

rendering_size width number width of browser(px)

height number height of browser(px)

keyboard use true enable screen keyboard

color "BLACK" make screen keyboard black

mode (none) "free" free cursor mode

user_agent (none) string string appended to the end of the default user agent

console_log (none) true enable console logging for debug

allowed_domain (none) list of string Specify web server domain path which can be navigated

Form and Input tags Form, Form validation, CSS Input type=color, Input type=file, Datalist,

Communication Cross document messaging ServerSent Events, WebSocket

Local Storage Session storage Local Storage, IndexedDB, Web SQL

Interactive elements details element yes

Input type=text Minimal element support yes

Input type=datetime, date, month, week, Minimal element support yes

Input type=number Minimal element support yes

Input type=image Minimal element support yes

Fieldset Minimal element support yes

Other attributes autofocus attribute yes

Input Free cursor mode Arrow key mode***

On link On textarea 2012 2013

Das könnte Ihnen auch gefallen

Panasonic IPTV Apps Developers (HTML5)

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Panasonic IPTV Apps Developers (HTML5)

Hochgeladen von

Copyright:

Verfügbare Formate

07/11/2018 HTML5 v2.

0 | Panasonic IPTV Apps DEVELOPERS

Parent property Child property Available value Definition

rendering_size width number width of browser(px)

height number height of browser(px)

keyboard use true enable screen keyboard

color "BLACK" make screen keyboard black

mode (none) "free" free cursor mode

user_agent (none) string string appended to the end of the default user agent

console_log (none) true enable console logging for debug

allowed_domain (none) list of string Specify web server domain path which can be navigated

Form and Input tags Form, Form validation, CSS Input type=color, Input type=file, Datalist,

Communication Cross document messaging Server­Sent Events, WebSocket

Local Storage Session storage Local Storage, IndexedDB, Web SQL

Interactive elements details element yes

Input type=text Minimal element support yes

Input type=datetime, date, month, week, Minimal element support yes

Input type=number Minimal element support yes

Input type=image Minimal element support yes

Fieldset Minimal element support yes

Other attributes autofocus attribute yes

Input Free cursor mode Arrow key mode***

On link On textarea 2012 2013

Das könnte Ihnen auch gefallen

Communication Cross document messaging ServerSent Events, WebSocket