This post is also available in: Russian

Over the past two years, we have witnessed a rapid growth of a new trend in the mass TV set market. Next generation TV sets that are connected to the Internet and empowered with an application platform, are becoming exceedingly popular. Like with smart phones, the TV applications can be supplied with a device or installed from a directory. The mass media and promotional publications often dub such an approach as "Smart TV" or, less frequently, "Connected TV" or "Hybrid TV". We believe that this trend is mostly neglected today by the developer community. It is little written and spoken about, but at the same time, it offers tremendous opportunities to attract that part of the audience which is poorly or even not yet covered by the ubiquity of computer and smart phone technology. In particular, for applications designed to deliver video content, the television video platforms are a natural environment, and they should be given the same attention as the mobile applications.

Unfortunately, at this point the TV based development is highly fragmented. As there is no common standardized platform for TV application development , each manufacturer offers its own SDK, APIs, application requirements and installation agreements. Each manufacturer is yearly updating its SDK with new features. Good news is that all of them are, in one way or another, based on Web technologies, each offering its specific restrictions and additional features. The most abundant today on the market, are Smart TV based devices made by LG, Samsung and Philips. In this post, we will brief you on developing of TV based applications exemplified by LG Smart TV.

Essentially, an LG application platform is a Web browser based on WebKit of yet not the latest, but however not a too outdated version. The platform has been stripped of all the functionality that could even hypothetically disclose its browser-based nature: there is no address bar, back or forward buttons or other buttons of any kind, it does not allow you to enter text into forms, display JavaScript-based alerts or use any debugging tools. Even the window.onerror event, which could be helpful in tracing JavaScript errors, has been uprooted. It is assumed that all the necessary features should be implemented exclusively using HTML, CSS and JavaScript. Standard HTML form elements are supported, but not recommended for use. The vendor development tools include the platform emulator, but first of all, it exists only in Windows based versions, and, second, we have found it awkward and useless in view in the context that almost all the application features can be easily debugged in the Google Chrome browser.

In addition to the software features of the platform, there are also limitations inherent to the type of user interaction with the TV and their hardware functionality. Let’s discuss the main of them.

Compared to desktops and laptops, TVs have been traditionally using quite slow CPUs, usually based on the MIPS architecture. This limits the capabilities of GUI visual design, including all kinds of page element animation, semi-transparency, interface smoothness, not to mention the 3D graphics.

But the main challenge for a developer accustomed to common Web based applications, is the way the user interacts with the TV: usually laying on a sofa at a distance of several meters and using a relatively slow and awkward input device, a remote control. Such a big TV watching distance means that text and the images should be shown large. As a result, the information density is comparable to mobile devices. Also, it is recommended to avoid page scrolling as it is not user friendly.

Navigating with the Remote Control

For LG TVs, several remote control types are available: a regular control with digit buttons and arrows, Magic-RCU, allowing to control the cursor on the TV screen and similar to a Wii joystick, and special smart phone based applications. Despite such a wide diversity, the development efforts should focus on the very basic functionality available on all the NetCast platforms. A regular TV remote control is the most popular input device, which immediately cuts off a multitude of familiar scenarios of application interactivity: typing on a keyboard, point-and-click with a mouse, screen tapping or gestures. Instead of all that, a lengthy and awkward process of selecting an item using the four buttons: up, down, left, right, and OK to confirm. Fortunately, there are ready-made JavaScript libraries that could help to implement this functionality. The jquery-keynav plugin for jQuery allows to use just a single simple call to set all elements focusable with the keypad arrow keys and define state classes for them:

$('.fcsbl').keynav('focused', 'unfocused');

Along with that, the plugin automatically detects, en every direction, the closest element focusable by arrow keys. To track pressing of arrows or a confirm button (Enter/OK), the plugin uses standard keyboard codes that match the codes on the LG remote. The keynav plugin is very easy to use, but its algorithm to determine a neighboring element is not suitable for complex layouts, e.g., when the screen is divided into several independent areas, including the top menu, sidebar, content, footer. In this case, we would prefer that navigation within each of these areas has also been independent of the others. However, a strange effect might occur with keynav, when on sequential pressing of the same arrow the cursor jumps between areas, as it identifies the closest element in another zone. But even if you have a pretty simplistic design, jquery-keynav can still behave wierdly at the slightest several-pixel deviation of elements.

How can this be avoided? Based on performance considerations, the LG developer documentation recommends to avoid using of any libraries altogether. Following this principle, in the sample provided with the SDK, the entire logic of arrow navigation is manually coded. But for us, such an approach is a premature optimization, as it would create undesirable application complexity, but the gain in performance would be minimal. For ease of development, we need such a level of abstraction which is flexible enough and would allow you to intervene with the automatic navigation logic where needed. Such features are offered by the KeyController class which is part of the Web Google TV UI Library. With the useGeometry option, this class is similar to jquery-keynav, but offers the following additional benefits:

• A more accurate algorithm to find the closest element, taking into account the arrow direction.
• An ability to split the page into areas and layers with an independent navigation (for instance, to display modal dialogs) .
• The capability to override the default navigation behavior.

Dedicated JavaScript APIs

Most of the functionality available on the LG NetCast platform, is in no way different from the similar functionality available in any WebKit based browser, except for some APIs missing by natural reasons. But in addition to that, it has also implemented a set of custom objects and JavaScript methods, allowing to access the platform-specific and TV-specific functions. Using them, you can do the following:

• Control the browser engine: going to the previous page (the "Back" button feature), exit the application and return to the main menu, show the download indicator.
• Control video playback: set the zoom mode, invoke a built-in menu with settings of video and sound, call the scale settings menu.
• Manage the functions of Magic-RCU control (point-and-click, similar to a mouse): hide the cursor, enable control’s on and off events.
• Get the TV specific details: version of software and hardware, supported features and options.
• Manage the Media Player.

The LG NetCast Video Player

In the LG Web applications, the media player is a browser plugin embedded into a page using the object tag. Depending on the content of the type attribute, it can run as a video or audio player. The player can play back content encoded in different formats and codecs. In particular, support of H.264/AVC has been declared with settings up to High Profile (3.2/4.1), 4 Mbps, 1920×1080 and AAC-LC/HE, MP3 audio codecs. A complete list is given in the developer documentation. HTTP Live Streaming with multi-bitrate is also supported. The video player can support two operating modes: full-screen or embedded, and enables 3D video on the application level with 3D-enabled TVs. The player can run content in accelerated or slow motion, provided that it is supported by the video protocol.

The media player supports two DRM systems: Windows Media DRM and Widewine. If you are not willing to invest your effort in the purchase and deployment of a full-fledged DRM system, the player can help protect your content from unauthorized download using oneshot URLs. In this mode, the Web server provides content links valid for one download, and the player adequately handles such operations.

Development Process

All the necessary design documentation and sample code are available and regularly updated on a dedicated LG Developer Lounge portal. First of all, please read the guide on how to run your applications on real TVs, download sample applications, try to launch them and become familiar with the source code. If you are familiar with Web based application development, mastering all this is not a big deal, and the sample code will help you learn the specifics of the platform. If you are going to port an existing application, try running it on a platform first. This way you will immediately understand what challenges you are going to face and what needs to be changed. Then read through the Web Application Development Guide describing the technical features of the platform: supported HTML features, codecs, video formats, transport protocols, screen resolution, etc., recommendations to the Smart TV user interface as well as Media Product User Interface Guidelines.

To publish an application in the store, you should fill out several forms and submit an application for testing. The details of this process are described in Required documents for application submission to LG Seller Lounge.

To push your application not just to the the store, but also to the NetCast main page with the next automatic update, you should acquire the LG partner status. Partner development guidelines embrace not just the technical issues and GUI requirements, but also the process of application development: its various phases, length, milestones, internal application testing at LG, etc. This allows to ensure a higher quality of partner applications.