javascript - Navigation through Remote in Samsung Smart Tv application - Stack Overflow

admin管理员组

文章数量:1405170

I am creating a samsung smart Tv javascript application, the HTML page is finished and now its time to integrate remote control options in it.

My application contains tabs/images for different chanells etc which when the user selects through remote, he will be redirected to. Now the the problem is that how this navigation will work?? how the user can go left right or up and down on these channel tabs using the remote control?

In the samsung smart tv documentation they have given info about their keys library but how can i use it in my application to move to different elements?

I am creating a samsung smart Tv javascript application, the HTML page is finished and now its time to integrate remote control options in it.

My application contains tabs/images for different chanells etc which when the user selects through remote, he will be redirected to. Now the the problem is that how this navigation will work?? how the user can go left right or up and down on these channel tabs using the remote control?

In the samsung smart tv documentation they have given info about their keys library but how can i use it in my application to move to different elements?

• javascript
• jquery
• html
• samsung-smart-tv

Share Improve this question Follow asked May 29, 2012 at 13:25 waqaswaqas 9822 silver badges88 bronze badges 1

• You need to handle keys by yourself. The Samsung Guide give you the keys list so you will know which button on remote is pressed as they returns different keycodes than normal keyboard. Take a look at @IntoTheVoid solution. – Adam Lukaszczyk Commented Jun 4, 2012 at 12:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

can not give you a fully working solution, but at least some practices from how we did this.

You can organize your HTML into different navigations zones and types. A navigation zone has a navigation type, typically list or a grid.

A JavaScript navigation controller keeps track of what zone you are in. It also handles keypress (up/down/left/right/enter), and figure out what is next item to highlight based on navigation type.

Lets say you have a list of tabs:

<div id="maintabs" class="tabs nav-current-zone" data-nav-type="list">
    <span class="tab nav-current-item">Tab 1</span>
    <span class="tab">Tab 2</span>
    <span class="tab">Tab 3</span>
</div>

The JavaScript would typically look like this:

if($(".nav-current-zone").data("nav-type") === "list"){
    if(key === "down"){
       var currentItem = $(currentZone).find("nav-current-item");
       var nextItem =  $(currentItem).next();
       $(currentItem).removeClass("nav-current-item");
       $(nextItem).addClass("nav-current-item");
    } else if(key === "up"){
    ...
}

What if you are at the top/bottom of list and navigate out of list? In this case you can either do nothing or define an other zone to enter.

<div id="maintabs" data-nav-type="list" data-nav-leave-down="anotherZone">
    ...
</div>

<div id="anotherZone" data-nav-type="list" data-nav-leave-up="maintabs">
    ...
</div>

So lets handled this:

if(key === "down"){
   var nextItem =  $(currentZone).find("nav-current").next();
   if($(next).size() === 0){
        var nextZone = $(currentZone).data("nav-leave-down");
        //navigate to the other zone
   }
}

本文标签： javascriptNavigation through Remote in Samsung Smart Tv applicationStack Overflow