Samsung Smart tv Application Development Simple key Navigation

Samsung Smart tv Application Development Simple key Navigation

HTML:

<div class = "container">

<div class = "box"></div>

<div class = "box"></div>

<div class = "box"></div>

<div class = "box"></div>

<div class = "box"></div>

        </div>

<script>

$('.container').find('div').eq(0).addClass('focus');

</script>

CSS:

{

padding: 0;

margin: 0;

border: 0;

}

/* Layout */

body

{

width: 1280px;

height: 720px;

background: white;

color: black;

}

.box{

border: 2px solid black;

height: 100px;

width: 100px;

margin-top: 10px;

margin-left: 10px;

margin-right: 10px;

}

.container{

display: -webkit-box;

}

.focus{

border: 2px solid red;

}

JAVASCRIPT - MAIN.JS

var index = 0;

Main.keyDown = function()

{

var keyCode = event.keyCode;

alert("Key pressed: " + keyCode);

switch(keyCode)

{

case tvKey.KEY_RETURN:

case tvKey.KEY_PANEL_RETURN:

alert("RETURN");

widgetAPI.sendReturnEvent();

break;

case tvKey.KEY_LEFT:

$('.container').find('div').eq(index).removeClass('focus');

$('.container').find('div').eq(--index).addClass('focus');

alert("LEFT");

break;

case tvKey.KEY_RIGHT:

$('.container').find('div').eq(index).removeClass('focus');

$('.container').find('div').eq(++index).addClass('focus');

alert("RIGHT");

break;

case tvKey.KEY_UP:

alert("UP");

break;

case tvKey.KEY_DOWN:

alert("DOWN");

break;

case tvKey.KEY_ENTER:

case tvKey.KEY_PANEL_ENTER:

alert("ENTER");

break;

default:

alert("Unhandled key");

break;

}

};

VIDEO TUTORIAL:

https://www.youtube.com/watch?v=NS1TzGffvFA