Comment caputure Samsung Smart tv à distance droite, gauche, centre et entrer en utilisant javascript?


J'apprends à créer une application Web HTML Samsung smart tv. J'ai créé une application hello world qui suppose de changer le texte simultanément lorsque l'utilisateur appuie sur le bouton gauche, droite, centre ou entrée de la télécommande.L'application s'installe sur la série D Samsung tv et affiche même les textes Samsung Smart TVand Hello world, mais lorsque j'appuie sur le bouton gauche,droite, centre ou entrée de la télécommande, rien ne se passe et le texte(Samsung Smart TV) ne change pas! Un expert pourrait-il me dire ce qui ne va pas avec Main.js ?Merci à l'avance.

Dossiers:

CSS
icons
JavaScript
config.xml
index.html

Index.code html:

<!DOCTYPE html>
<html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Hello World!!</title>
     <link rel='stylesheet' type='text/css' href = 'CSS/Main.css'/>
     <script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
     <script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>
    <script type="text/javascript" language="javascript" src="./JavaScript/Main.js"></script>
   </head>
   <body onload="Main.onLoad();" onunload="Main.onUnload();">

   <a href="javascript:void(0);" id="anchor" onkeydown="Main.keyDown();"> </a>

    <label id="LabelId">Samsung Smart TV!</label>

    <div id='welcome'>Hello world !</div>
</body>

Principal.js:

var Main = {
   // Main object
}

var widgetAPI = new Common.API.Widget(); // Create Common module

Main.onLoad = function () {
  // called by <body>'s onload event
this.enableKeys();
widgetAPI.sendReadyEvent(); // Send ready message to Application Manager
}

Main.onUnload = function()
{
};

Main.enableKeys = function()
{
    document.getElementById("anchor").focus();
};

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:
        //alert("LEFT");
        document.getElementById("LabelId").innerHTML = "Smart TV - LEFT";
        break;
    case tvKey.KEY_RIGHT:
        //alert("RIGHT");
        document.getElementById("LabelId").innerHTML = "Smart TV - RIGHT";
        break;
    case tvKey.KEY_UP:
        //alert("UP");
        break;
    case tvKey.KEY_DOWN:
        //alert("DOWN");
        break;
    case tvKey.KEY_ENTER:
        document.getElementById("LabelId").innerHTML = "Smart TV - Center";
        break;
    case tvKey.KEY_PANEL_ENTER:
        //alert("ENTER");
        break;
    default:
        alert("Unhandled key");
    break;
}
};

Principal.css:

body {
    margin: 0;
    padding: 0;
    background-color: transparent;
}

#welcome {
   position: absolute;
   left: 50px;
   top: 50px;
   width: 500px;
   height: 50px;
   background-color: #AFAFAF;
   color: #99FFFF;
   font-size: 30px;
   text-align: center;
}

#LabelId{
   position: absolute;
   left: 50px;
   top: 100px;
   width: 500px;
   height: 50px;
   background-color: #AFAFAF;
   color: #99FFFF;
   font-size: 30px;
   text-align: center;
}
Author: user1788736, 2017-09-23