1

I am trying to develop a basic Tizen tv application. for that, I've created two anchor tags and a button. the code is as follows.

  <!DOCTYPE html>
<html>
<head>
    <title>ReactSampleApp</title>
    <style>
    body,html{
        position:absolute;
        padding:0px;
        margin:0px;
        width:100%;
        height:100%;
        background:#fff;
    }
</style>
<script src="js/main.js"></script>
</head>

<body> 
    <a href="./page2.html">
    <button>click here for some music</button>
    </a>
    <a href="./page3.html">
    <button>click here to go to page3</button>
    </a>
    <button onclick="function(){alert(0)}">click here for an alert</button>
    
</body>
</html>

as you can see it's just a normal sample HTML page that traverses to different pages upon these button clicks.

and it works fine, so no problems there.

the problem lies while focusing on the elements. well, it's not exactly a problem just my doubt.

window.onload = function() {

    // add eventListener for keydown
    document.addEventListener('keydown', function(e) {
        switch(e.keyCode){
        case 37: //LEFT arrow
            break;
        case 38: //UP arrow
            break;
        case 39: //RIGHT arrow
            break;
        case 40: //DOWN arrow
            break;
        case 13: //OK button
//          window.open("/page2.html");
            break;
        case 10009:
            tizen.application.getCurrentApplication().exit();
            break;
        default:
            console.log('Key code : ' + e.keyCode);
            break;
        }
    });
    
};

this code is from my main.js file.

I just wrote it to handle the key events - up, down, left, right, and enter. now inside this switch block, I was able to write alerts and was able to interact with the page. but now instead of alerts I want to give regular up, down, left, right, enter inputs.

meaning - say if there was a grid(a dynamic one). How do I focus on elements by traversing them horizontally or vertically? do I need to write explicit code or am I missing something here? does Tizen provide this basic traversal of web elements with input keys?

Thanks in advance

kevin godfrey
  • 153
  • 1
  • 11

2 Answers2

2

For remote control key events to be passed through to the JS runtime of your client app you first need to register the key events that you want to use with the registerKey method

https://www.tizen.org/tv/web_device_api/tvinputdevice#::TVInputDevice::TVInputDeviceManager::registerKey

Use the value from the "Key Name" column in the table at the bottom of this page: https://developer.samsung.com/smarttv/develop/guides/user-interaction/remote-control.html

For example to register the "red" button on the TV remote control..

window.tizen.tvinputdevice.registerKey("ColorF0Red");

Then you can listen for a keycode value of 403 in your keyDown handler

Xoundboy
  • 827
  • 15
  • 26
  • No, I was able to send the key inputs, there were no problems there. Enter, up, left, down, right these keys are auto-registered. I gave little alerts to each of these keys which displayed a message. of course, the message being unique for each key. My question is, whether if I have to write explicit code to navigate between one web element to another using these keys or if there was an easier way to do this? like you know an inbuilt function that focuses on the web element to the right. when I click on the right button – kevin godfrey Jun 24 '21 at 17:08
  • @kevingodfrey sorry, I misread the original question. Yes you do have to write explicit code to focus the different focusable elements on your web page just like you would in any browser environment. Normally the tab key could be used along with the tabindex attribute to access the browser's native focus navigation, however there's no tab ky on the Tizen RC and afaik the tab key event cannot be programatically triggered by JS. So you need to implement your own custom focus manager. – Xoundboy Jun 30 '21 at 09:20
  • I was afraid that was the case, hey would you happen to know how do we automate these tizen tv applications? like properly, I'm searching for a way to monitor my web elements check if they are ready or not, and then perform some operation on them. just like how we automate web apps with selenium. is there a proper way to do this? when I searched for this on the web. most of the sources were pointing towards appium. but alas! It's no longer supported. please do share if you any insights on this. thanks in advance – kevin godfrey Jul 01 '21 at 17:29
  • Sorry, no. We always used real QA people with remote controls manually testing our apps. I heard that Suitest have a product that captures and retransmits RC commands along with a test runner but don't have any experience. – Xoundboy Jul 02 '21 at 12:43
  • 1
    Some TV navigation libraries provide ways to focus elements independently. https://github.com/NoriginMedia/react-spatial-navigation provides setFocus() – Kiran Aug 27 '21 at 07:29
1

To develop spatial navigation, I would recommend Luke Chang's js-spatial-navigation. There's a ReactJS wrapper for this library, but it's hardly ever updated and I had to make modifications to it myself to get it working kind-of-properly. The library Xoundboy suggested is a good library as well, but, at least to me, it seemed way too complicated to implement properly, and for Tizen, JS Spatial Navigation works very well and it's easy-ish to implement.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Martin Scola
  • 15
  • 1
  • 3