Remote control:
Usually the remote control is remotely controlled, allowing standard 5-way control with additional physical keys as a shortcut to common operations. The buttons available for the application are as follows:
| Button | App Usage |
| OK | Select/Enter |
| Up Arrow | Moves focus to up |
| Right Arrow | Moves focus to the right |
| Down Arrow | Moves focus to down |
| Left Arrow | Moves focus to the left |
| Back | Returns to the previous panel, or returns to the Home screen if there is no previous page. |
| Number Buttons | Input number |
Color Buttons: Red, Green, Yellow, Blue | Customizable by the app |
| Video control buttons: play, pause, stop, fast forward, rewind | Control video playback |
Remote keys
Note: Different devices across different years and brands can define different key code values for their remote control keys.
You must use VK_ and KEYCODE_ constants instead of checking for specific key code values. Key constants are provided to give generic remote control support.
Remote control keys are supported as shown in below table:
| Button | Keycode HTML5 | Keycode Android |
| Enter | VK_ENTER | KEYCODE_ENTER |
| Left | VK_LEFT | KEYCODE_DPAD_LEFT |
| Down | VK_DOWN | KEYCODE_DPAD_DOWN |
| Right | VK_RIGHT | KEYCODE_DPAD_RIGHT |
| UP | VK_UP | KEYCODE_DPAD_UP |
| 0-9 | VK_0 to VK_9 | KEYCODE_1 to KEYCODE_9 |
| Back | VK_BACK | KEYCODE_BACK |
| Red | VK_RED | KEYCODE_PROG_RED |
| Blue | VK_BLUE | KEYCODE_PROG_BLUE |
| Green | VK_GREEN | KEYCODE_PROG_GREEN |
| Yellow | VK_YELLOW | KEYCODE_PROG_YELLOW |
| Play | VK_PLAY | KEYCODE_MEDIA_PLAY |
| Pause | VK_PAUSE | KEYCODE_MEDIA_PAUSE |
| Play/Pause | VK_PLAY_PAUSE | KEYCODE_MEDIA_PLAY_PAUSE |
| Stop | VK_STOP | KEYCODE_MEDIA_STOP |
| Fast fwd | VK_FAST_FWD | KEYCODE_MEDIA_FAST_FORWARD |
| Rewind | VK_REWIND | KEYCODE_MEDIA_REWIND |
| Channel UP/DOWN | VK_PAGE_UP/VK_PAGE_DOWN | KEYCODE_CHANNEL_UP/KEYCODE_CHANNEL_DOWN |
Adding Event Listener
The keydown event is fired when users press a key on the Remote Control, Remote Control Keyboard or external USB Keyboard. To handle the keydown event, you need to add the event listener to the document element.
document.addEventListener('keydown',function (e) {
/* Handling keydown event */
/*e.preventDefault();//Add prevent Default when you handle for back key*/
}, true);Handling Key Event
To handle the received keycode from the keydown event, add the below code in your application. Example of implementation can be found here
| HTML5 | Android (APK) |
function KeydownEvent(e) {
switch (e.keyCode) {
case VK_PLAY:
//Your Code here
break;
case VK_STOP:
//Your Code here
break;
case VK_PAUSE:
//Your Code here
break;
case VK_PLAY_PAUSE:
//Your Code here
break;
case VK_BACK:
case VK_BACK_SPACE:
/* Add preventDefault
only if focus is not
on input field */
e.preventdefault();
//Your Code here
break;
case VK_FAST_FWD:
//Your Code here
break;
case VK_REWIND:
//Your Code here
break;
case VK_LEFT:
//Your Code here
break;
case VK_RIGHT:
//Your Code here
break;
}
} | function KeydownEvent(e) {
switch (e.keyCode) {
case KEYCODE_MEDIA_PLAY:
//Your Code here
break;
case KEYCODE_MEDIA_STOP:
//Your Code here
break;
case KEYCODE_MEDIA_PAUSE:
//Your Code here
break;
case KEYCODE_MEDIA_PLAY_PAUSE:
//Your Code here
break;
case KEYCODE_BACK:
/* Add preventDefault
only if focus is not
on input field */
e.preventdefault();
//Your Code here
break;
case KEYCODE_MEDIA_FAST_FORWARD:
//Your Code here
break;
case KEYCODE_MEDIA_REWIND:
//Your Code here
break;
case KEYCODE_DPAD_LEFT:
//Your Code here
break;
case KEYCODE_DPAD_RIGHT:
//Your Code here
break;
}
} |
You do have to take into account special handling for fast forward and rewind handling. Devices running our Smart TV OS can be sold with full feature supported remote controls, but also with simple remote controls. It's a must to support fast forward and rewind remote control keys on top of left and right keys if you handle trickmodes with it.
In addition, the Whale OS is also compatible with almost all key codes of a standard keyboard. You can also be compatible with more devices.
The following example shows the key code received from the keydowm event. You can view it in your browser:https://support.nettvservices.com/samples/keydown.html
function init() {
document.addEventListener('keydown',handlekeydown, false);
};
function handlekeydown(e) {
document.getElementById("test").innerHTML = e.keyCode;
};