Navigation

For JavaScript based navigation please use the Virtual-Key Codes set in the browser. If a user presses a button on the remote control the keyDown Event in the browser is triggered. As the TVs don't use the same integer values for these event they predefine these values to these variables in the browser:

You can test the app on the Opera TV Emulator 3.4 (the browser that runs on most of our TVs): http://www.operasoftware.com/products/tv-emulator

Most important values:

VK_ENTER (OK button)

VK_BACK_SPACE/ VK_BACK (most platforms use VK_BACK_SPACE for back navigation. If no preventDefault(); is called on this event it just invokes history.back(); (like the Back Space key on desktop browser)

VK_UP
VK_DOWN
VK_RIGHT
VK_LEFT

VK_RED (red button)
VK_GREEN
VK_YELLOW
VK_BLUE

As some TV manufactures do not define all variables it is safer to check everyone for type "undefined" and define them with standard Opera values first.

Basic example code for navigation (not optimized just for demo purposes):

if(typeof VK_LEFT === 'undefined') VK_LEFT = 37;
if(typeof VK_UP === 'undefined') VK_UP = 38;
if(typeof VK_RIGHT === 'undefined') VK_RIGHT = 39;
if(typeof VK_DOWN === 'undefined') VK_DOWN = 40;
if(typeof VK_ENTER === 'undefined') VK_ENTER = 13;
if(typeof VK_RED === 'undefined') VK_RED = 403;
if(typeof VK_GREEN === 'undefined') VK_GREEN = 404;
if(typeof VK_YELLOW === 'undefined') VK_YELLOW = 405;
if(typeof VK_BLUE === 'undefined') VK_BLUE = 406;
if(typeof VK_BACK_SPACE === 'undefined') VK_BACK_SPACE = 8;
if(typeof VK_BACK === 'undefined') VK_BACK = 461;
if(typeof VK_PLAY === 'undefined') VK_PLAY = 415;
if(typeof VK_PAUSE === 'undefined') VK_PAUSE = 19;
if(typeof VK_STOP === 'undefined') VK_STOP = 413;
if(typeof VK_FAST_FWD === 'undefined') VK_FAST_FWD = 417;
if(typeof VK_REWIND === 'undefined') VK_REWIND = 412;
if(typeof VK_INFO === 'undefined') VK_INFO = 457;

function ignoreKeyPress(e) {
   
    switch(e.keyCode) {
        // prevent keyPress events keys from being interpreted by platform browser
        case VK_LEFT:
        case VK_RIGHT:
        case VK_DOWN:
        case VK_UP:
        case VK_ENTER:
        case VK_BACK:
        case VK_BACK_SPACE:
        case VK_PLAY:
        case VK_PAUSE:
        case VK_PLAY_PAUSE:
        case VK_PAUSE_PLAY:
        case VK_STOP:
        case VK_FAST_FWD:
        case VK_REWIND:
            e.preventDefault();
        break;
    }
}

function handleRemoteButtons(e) {


 switch(e.keyCode) {
    case VK_ENTER:
            [..]
        break;
   
    case VK_LEFT:
            [..]
        break;
       
        case VK_RIGHT:
            [..]
        break;
       
    case VK_UP:
            [..]
    break;
       
        case VK_DOWN:
            [..]
        break;

    case
    }
}

document.onkeydown = handleRemoteButtons;
// ignoring regular keypress event selective
document.addEventListener("
keypress", ignoreKeyPress, true);