designing for the AppleTV remote

Navigation is limited to the 6 input controls on the AppleTV remote: up, down, left, right, select/play/pause and back/menu. There is no way to override this and use a mouse cursor as the META tag in the projects main web file, index.html, would imply (<meta name=”hdtv-cursor-off” content=”true”/>). TuneKit, Apple’s LP/Extras Javascript development framework, automatically implements methods of controlling your project via the AppleTV remote. When using the default TKController up and down will be automatically used to scroll within a scrollable content box. Although this is helpful in a way, it then leaves the only methods of navigation around the interface of the left and right buttons, which can will leave any vertical navigation inopperable. Horizontal navigation or no navigation whatsoever is best for scrolling content pages. iTunes disables the keyboard interface, but Safari will let you use the cursor keys for directional movement, enter for select/play/pause and backspace for back/menu, so try navigating through your project using just these keys during development.

developing for limited processing power

The AppleTV is quite limited when it comes to what it can comfortably process when it comes to Javascript and CSS transitions. CSS transitions are always preferable to Javascript ones within this environment, thanks to how CSS3 transitions are optimised on the webkit platform, so try to avoid using jQuery for eye candy. Even when using CSS transitions you will notice that they refresh slowly, making fades and movement look jumpy. Try to use longer transition times to minimise this effect, or no transitions at all if possible. Many LPs/Extras disable visualisers and other effects dependant upon Javascript for the AppleTV.

designing for display on a television set

The AppleTV can display resolutions as low as 420p, but don’t let that worry you. All LP/Extra content should be designed for an HD TV at 1280×720 pixels. The title-safe display area is 1024×576, but very few LPs/Extras I have found have limited themselves to this area. Colour and brightness levels can vary greatly between TV sets, much more than on computer monitors. If you are using subtle colour or alpha changes in your navigation try to make them much more prominant on the AppleTV.

beware

The AppleTV uses a custom version of the Safari code, and so operates slightly differently in places. Meaning it has a couple of bugs. Test everything throroughly on an AppleTV before deployment. Just because something works in iTunes and Safari it doesn’t mean that it will work on the AppleTV.

in conclusion

• Only use horizontal navigation on pages using a scrollable content box.
• Use CSS transitions over Javascript ones.
• Disable visualisers or other Javascript-heavy pages.
• Design for a high degree of colour and brightness variation between TV sets.
• AppleTV uses a custom implementation of Safari, so may be buggy using newer features.

helpful code

The global Javascript variable IS_APPLE_TV is helpful when displaying different content on the AppleTV, but try using the following function so you can perform a basic functionality test for iTunes and AppleTV within Safari:

//after initialisation, TuneKit creates the window.iTunes object within Safari, which is why the IS_ATV variable is created on init and referenced later. You could just use this global variable instead of the isAppleTV() function if you wanted to
var IS_ATV = isAppleTV_init();
function isAppleTV_init() {
	//safari
	if(window.iTunes == undefined)
		return false;

	//itunes
	if(window.iTunes.platform == "Windows"
		|| window.iTunes.platform == "Mac"
		|| window.iTunes.platform == "Emulator")
		return false;

	return true;
}
function isAppleTV() {
	return IS_ATV;
}

Sometimes you need to manually control how the AppleTV remote keypresses will affect your project. The following code will allow you to override the default behaviour outlined by TuneKit:

var KEY_BACK = 8;
var KEY_ENTER = 13;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;

function onKeyDown() {
	if(event.keyCode == KEY_BACK) {
		//your action
	} else if(event.keyCode == KEY_ENTER) {
		//your action
	} else if(event.keyCode == KEY_DOWN) {
		//your action
	} else if(event.keyCode == KEY_LEFT) {
		//your action
	} else if(event.keyCode == KEY_RIGHT) {
		//your action
	} else if(event.keyCode == KEY_UP) {
		//your action
	}

	//prevent default behaviour
	event.stopPropagation();
	event.preventDefault();
}

//assign key down listener
function onKeyDown_init() {
	window.addEventListener("keydown", onKeyDown, true);
}

//click a link with id 'my_link'
clickLink(document.getElementById('my_link'));

function clickLink(elementId) {
	var elm = document.getElementById(elementId);

	//set up mouse click event
	var evt = document.createEvent('MouseEvents');
	evt.initMouseEvent('click', true, true, document.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0,  null);

	//trigger click event on html element
	elm.dispatchEvent(evt);
}