You have to focus!


You’re watching TV. You see an onscreen button that looks shiny and clickable. You mash the buttons on your remote in an attempt to select the button and click it but nothing happens! You try various random button combinations with one particular button triggering a purchase from the app store and charging your credit card. You throw the remote down in disgust, leave the house and go shopping. Hi, I’m Cliff. You’re here because you’ve run up debt on your credit cards from frustration related to terrible TV user interfaces which sends you on shopping sprees where you purchase unnecessary paraphernalia. I’m here because I too have massive credit card debt. The word of the day is focus.

I’ve recently begun a new career developing apps for Samsung TVs and I’m having more fun than a fun loving person who is trapped in funplex funded by functionally competent people who are colocated with funny people who are fundamentally incapable of having a bad day. In the middle of this fun, however, I ran into an issue while trying to develop my first TV app. In short, I couldn’t click an onscreen button.

My1stTVApp

I was following the Tizen tutorials/guides on creating your first TV web-app. The basic project template gives you an on-screen clock button that you’re supposed to click to see a running clock. This works out of the box for most people. You open the template, run it on the emulator (by the way, Tizen Studio has these cool TV emulators which remind me so much of Android!), then click the button using the mouse and viola! A clock appears where the button was. The REAL problem comes when you run the project on an actual TV set. You find that there is no mouse on the screen and you only have the TV remote control!

Intuitively you will try to use the directional arrows on the remote where you discover they control nothing! There is no on-screen pointer, no focus elements, and no way to change or set any focus.

This threw me into a documentation scouring frenzy. I read through tons of online docs, downloaded other samples, only to come up empty handed. (Why is it whenever I try a new framework I get hung up on the simplest functionality?) At any rate, after some head scratching, I learned that I could use the Chrome dev tools debugger and from there I was able to interactively poke at the on screen elements using JavaScript. I located the clock button using the getElementById() function. I played around with calling focus, and I still didn’t see any on screen changes. (usually when an item is in focus you would expect to see a little focus ring but I saw nothing visually that indicated any sort of focus.) Not to be defeated, I tried clicking the ok button on the remote and magically the click event was triggered! The final solution is actually very elementary! (Source code below.)

var checkTime;
var clockButton;

//Initialize function
var init = function () {
    // TODO:: Do your initialization job
    console.log('init() called');
    clockButton = document.getElementById("divbutton1").getElementsByTagName("button")[0];
    
    document.addEventListener('visibilitychange', function() {
        if(document.hidden){
            // Something you want to do when hide or exit.
        } else {
            // Something you want to do when resume.
        }
    });
 
    // add eventListener for keydown
    document.addEventListener('keydown', function(e) {
	    	switch(e.keyCode){
	    	case 37: //LEFT arrow
	    	case 38: //UP arrow
	    	case 39: //RIGHT arrow
	    	case 40: //DOWN arrow
	    		clockButton.focus();
	    		break;
	    	case 13: //OK button
	    		break;
	    	case 10009: //RETURN button
			tizen.application.getCurrentApplication().exit();
	    		break;
	    	default:
	    		console.log('Unhandled key. Key code : ' + e.keyCode);
	    		break;
	    	}
		console.log('Key code : ' + e.keyCode);

    });
};
// window.onload can work without 
window.onload = init;

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('runningclock').innerHTML='Current time: ' + h + ':' + m + ':' + s;
    setTimeout(startTime, 10);
}

function checkTime(i) {
    if (i < 10) {
        i='0' + i;
    }
    return i;
}

Long story lengthened, I was able to overcome my first baby hurdle of using the TV remote with my web app by merely asking the button in question to become focused. I was then able to click the button and trigger the clock using the remote. I wish there was more excitement to my story than a missing focus ring but I'm just getting started! In the meantime I'll try to remain focused! (Pun is partially intended for cheesiness.)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s