Scenes-Based Display Design of the Samsung SmartTV

A Samsung SmartTV application runs on a browser environment that is similar to PC-based web browsers, and can use most of the standard web development techniques. A scenes-based programming method uses different scenes to efficiently handle key events. This method accommodates the characteristics of a TV application that uses remote controller-generated KeyDown events.

Different situations require different solutions. Please consider this method as a tutorial that will help you understand the structure of a Samsung SmartTV application.

Scenes-based design

A Samsung SmartTV application consists of HTML, CSS, and JavaScript files, as does a web application. Therefore, you can use styles and HTML elements.

image0.jpg

While a website treats each HTML page as a unit display, a Samsung SmartTV application treats each div element as a unit scene. Therefore, a TV application screen often has multi-layered scenes.

image1.jpg

The div element with ID “scene1” is one of the display layers used. Note that “scene1” has an anchor. This anchor is focused when “scene1” is activated. A focused anchor is triggered by remote control key events.

Assigning a unique anchor for each scene is always a good practice. It becomes increasingly harder to control an entire application with just one anchor as the application structure becomes more complex with complicated focus-key events.

Unlike a web application in a browsing environment on a PC, a Samsung SmartTV application uses the remote control as its main user interface.

image2.jpg

The CSS file defines both common and individual scene styles. It also defines the navigation icon styles for remote control keys, which are used by scenarios of all scenes.

scene.js
// instance of necessary elements by scene 1
var Scene1 =
{
    elem: null,
    handler: null
};
 
// initialize necessary elements and anchor by scene 1
Scene1.init = function ()
{
    this.elem = jQuery('#scene1');
    this.handler = this.elem.find('a');
    
    Scene1.init = function(){};
};
 
Scene1.show = function ()
{
    this.elem.show();
};
 
Scene1.hide = function ()
{
    this.elem.hide();
};
 
Scene1.focus = function ()
{
    this.handler.focus();
};
 
Scene1.load = function ()
{
    this.init();
};
 
Scene1.unload = function ()
{
    this.hide();
};

The scene.js needs to define functions to be used by each scene’s scenario. The example code uses the most basic functions, including load, focus, show, and unload.

Scene1.load();
Scene1.show();
Scene1.focus();

First, use the load function to activate scene 1.

Scene1.load = function ()
{
    alert('Scene1 load');
    this.init();
};

The Scene1.load function calls the Scene1.init function to initialize necessary elements. When it is complete, call the Scene.show function to display the scene.

Scene1.show = function ()
{
    alert('Scene1 show');    
    this.elem.show();
};

The preceding code will display scene 1. The Scene1.show function was intentionally separated from the load function so that it could be independently used to switch between scenes. Like the show function, the focus function is also better when used independently.

The show function is called before the focus function. Scene1.elem has “none” as its display value before the this.show function is called. Because Scene1.handler is its subelement, the Scene1.focus function called before the show function is unable to keep the focus for scene 1.

Scene1.unload = function ()
{
    this.hide();
};

The Scene1.unload function is called to deactivate scene 1 and go back to the higher level scene or activate another subscene. While the Scene1.unload only calls Scene1.hide in turn, additional work may be necessary in addition to hiding it, depending on scene 1’s scenario. Also, there can be different unload events for activating another subscene and going back to the higher level scene.

Switching between scenes

When the index.html file is loaded into the SmartTV’s internal browser, the first scene will be displayed on the TV screen according to the application scenario. The activated scene will dominate the focus. If a user moves the focus and selects another scene, then the application activates the new scene and deactivates the previous scene. The activated scene is displayed and the deactivated scene is hidden.

Many other methods can be used to switch scenes on a SmartTV, such as using dynamic layers or pop-up style sublayers. Be careful not to open too many unnecessary scenes; conserve limited physical memory capacity of a TV.

When a scene is switched, the focus also must be moved. Be careful not to lose the focus by switching to no existing scene, or to a scene of which its parent element is hidden.

The next example shows switching between the GalleryScene and its sublayer, SurveyScene.

gallery.js
GalleryScene.load = function()
{
    // GalleryScene 
};
GalleryScene.keyDown = function()
{
    var keyCode = event.keyCode;
    switch(keyCode)
    {
        // Activate SurveyScene
        case tvKey.KEY_ENTER:
            SurveyScene.load();
            SurveyScene.show();
            SurveyScene.focus();
            break;
    }
};

Pressing the OK key while the GalleryScene is activated will activate the SurveyScene. Then the SurveyScene will be displayed on the SmartTV screen and the SurveyScene’s member anchor will be focused.

image3.jpg

However, loading the upper level GalleryScene to return to the GalleryScene is not a good practice. The GalleryScene was only covered by the lower level SurveyScene. Simply transfer the focus back to the GalleryScene. Also, if the SurveyScene is shared by scenes other than the GalleryScene, directly controlling its upper-level scene may complicate the event handling.

Data transfer between scenes

The callback function can be used to easily share data and focus-related information while switching scenes.

image4.jpg
GalleryScene.keyDown = function()
{
    var keyCode = event.keyCode;
    switch(keyCode)
    {
        case tvKey.KEY_ENTER:
            SurveryScene.load({
                onUnload : function(){
                    GalleryScene.focus();
                } 
            });
SurveyScene.show();
SurveyScene.focus();
            break;
    }
};
SurveyScene.load = function(callback) {
    this.callback = jQuery.extend({}, {
        onUnload: function() {}
    }, callback);
};
SurveyScene.unload = function() {
    this.callback.onUnload();
};

In the example, the SurveyScene is loaded with a callback function. It can then use the onUnload call function to return the focus to its upper-level GalleryScene. This practice is one of the safe handling methods in moving the focus: a TV application’s vital function is that its exceptions must be properly handled.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com