Blog

JQuery Navigation for IPTV

As more and more IPTV platforms feature a browser that supports HTML, JavaScript and CSS, it is now possible to use existing Javascript libraries such as JQuery to enhance the UI experience. Animated scrolling navigation for example, is a useful feature used in many web sites that can be accomplished with JQuery.

The default mouse events used by most JQuery plug-ins however, don’t sit well in the IPTV world where remote controls are the common input device. This is where some tweaking needs to be done, so that the JQuery plug-ins can work for IPTV.

SerialScroll JQuery plug-in

As a starting point for one of our project’s navigation, we took Ariel Flesler’s excellent SerialScroll plug-in. Some demos of it can be found here.

If you check out example 2 in the above demo, you’ll see that it contains horizontal scrolling navigation, ideal for many forms of UI navigation. By default it only works with mouse clicks though.

Tweaking it for IPTV…

For the plug-in to work with an IPTV remote control, we need to modify it so that we instead manipulate it’s behaviour with the keyboard! The arrow keys of the keyboard will translate nicely into the arrow keys of IPTV remote controls.

The following keypress event is added to init.js so that key codes 39 (right arrow) and 37 (left arrow) activate the plug-in’s trigger functions:

 $(document).keypress(function(e){
	switch( e.keyCode ){
		case 39://right (->)
			 $x_div.trigger('next');
			break;
		case 37://left (<-)
			 $x_div.trigger('prev');
			break;
		}
});

Examples

Here is a crude example of it in practice, try it out with your left and right arrow keys:

Example 1 - horizontal jquery scrolling for iptv

This can be expanded to support more flexible navigation systems, such as vertical lists or a combination of horizontal and vertical.

Example 2 - vertical jquery scrolling for iptv
Example 3 - horizontal and vertical jquery scrolling for iptv

This navigation was then plumbed into the application's front end, we also used images as well as text for the scrolling links. Obviously the Enter key (key code 13, i.e. 'select' on Remote Controls) was also implemented for navigation to other pages. A future Labs post will look at how we implemented full screen transitions to other pages.