Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Addendum

Hands Frame Source Code

The Hands Frame application's basic version was developed in chapter 8. The application was upgraded with advanced functions in chapter 12. The application's final version's source code is provided here to give a practical guide for readers.

To the previous Hands Frame advanced version, the latest verson added the VOD URL management technique and a subscene (i.e., Info Scene) management example.

The complete sample application package can be downloaded from the following URL.

▸ Download URL: https://bitbucket.org/handstudio/handsframe/

Hands Frame Basic Version

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
        <title>HG_Layout</title>

        <!-- TODO : Style sheets code -->
        <link rel=“stylesheet” href=“app/stylesheets/Main.css” type=“text/css”>

        <!-- TODO: Plugins -->

    </head>

    <body onload=“Main.onLoad();” onunload=“Main.onUnload();”>
        <div id=“scene_main” >
            <div id=“header”></div>
            <div id=“category”>
                <ul>
                    <li class=“work”>Work</li>
                    <li class=“people”>People</li>
                    <li class=“dream”>Dream</li>
                </ul>
            </div>
            <div id=“content”>
                <div class=“work”>
                    <img alt=“ ” src=“./images/img_title_work.png” class=“title”/>
                    <ul>
                        <li>
                            <img alt=“ ” src=“./images/1_1.png” class=“title”/>
                            <label>What is killer contents? <p>2012.06</p></
label>
                        </li>
                        <li>
                            <img alt=“ ” src=“./images/1_2.png” class=“title”/>
                            <label>Handmade application <p>2012.05</p></label>
                        </li>
                    </ul>
                 </div>
                 <div class=“people”>
                     <img alt=“ ” src=“./images/img_title_people.png”
class=“title”/>
                     <ul>
                         <li>
                             <img alt=“ ” src=“./images/2_1.png” class=“title”/>
                             <label>2012 Moments to Remember! <p>2013.01</p></
label>
                         </li>
                         <li>
                             <img alt=“ ” src=“./images/2_2.png” class=“title”/>
                             <label>People<p>2011.01</p></label>
                         </li>
                     </ul>
                 </div>
                 <div class=“dream”>
                     <img alt=“ ” src=“./images/img_title_dream.png”
class=“title”/>
                     <ul>
                         <li>
                             <img alt=“ ” src=“./images/4_1.png” class=“title”/>
                             <label>What does your work mean to you? <p>2011.11</
p></label>
                         </li>
                         <li>
                             <img alt=“ ” src=“./images/4_2.png” class=“title”/>
                             <label>Workplace with true visions, is there one in
Korea? <p>2011.07</p></label>
                         </li>
                     </ul>
                 </div>
            </div>
           <!-- anchor as focus for key events -->
           <a href=“javascript:void(0);” id=“anchor_category” onkeydown=“Main.
category.keyDown();”></a>
        <a href=“javascript:void(0);” id=“anchor_content” onkeydown=“Main.
content.keyDown();”></a>
        <a href=“javascript:void(0);” id=“anchor_player” onkeydown=“Main.
player.keyDown();”></a>
        <a href=“javascript:void(0);” id=“anchor_info” onkeydown=“Main.
info.keyDown();”></a>
        </div>

       <!-- INFO Scene element Scene -->
       <div id=“scene_info” style=“display: none;”>
           <img src=“./images/img_philosophy.png”>
       </div>

       <!-- Player container -->
       <div id=“player_container”></div>
   </body>

    <!-- TODO : Common API -->
    <script type=“text/javascript” language=“javascript” src=“$MANAGER_WIDGET/
Common/API/Widget.js”></script>
    <script type=“text/javascript” language=“javascript” src=“$MANAGER_WIDGET/
Common/API/TVKeyValue.js”></script>
    <script type=‘text/javascript’ language=‘javascript’ src=‘$MANAGER_WIDGET/
Common/jquery.js’></script>
    <script type=“text/javascript” language=“javascript” src=“$MANAGER_WIDGET/
Common/webapi/1.0/webapis.js”></script>

    <!-- TODO : Javascript code -->
    <script language=“javascript” type=“text/javascript” src=“app/javascript/
GetPath.js”></script>
    <script language=“javascript” type=“text/javascript” src=“app/javascript/
Main.js”></script>
</html>

Main.js

var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();

var Main = {
    category : {
        elem : jQuery(‘#category’),
        li     : jQuery(‘#category’).find(‘ul > li’),
        anchor : jQuery(‘#anchor_category’)
    },

    content : {
        elem : jQuery(‘#content’),
        div : jQuery(‘#content > div’),
        anchor : jQuery(‘#anchor_content’)
    },
    // added Player anchor element
    player : {
        anchor : jQuery(‘#anchor_player’)
    },
    info : {
        elem : jQuery(‘#scene_info’),
        anchor : jQuery(‘#anchor_info’)
    }
};



var index = 0;
var content_index = 0;

// stores the currently focused element for INFO Scene
var focused_comp = ‘category’;


// nested URL array indexed by Category and Contents
var url = [[getAbsPath(‘resource/1_1.mp4’), getAbsPath(‘resource/1_2.mp4’)],
           [getAbsPath(‘resource/2_1.mp4’), getAbsPath(‘resource/2_2.mp4’)],
           [getAbsPath(‘resource/3_1.mp4’), getAbsPath(‘resource/3_2.mp4’)]];


var Player = {
    init : function(){
        try{
            var playerInstance = webapis.avplay;
            playerInstance.getAVPlay(Player.onAVPlayObtained, Player.
onGetAVPlayError);

        }catch(e){
            alert(‘######getAVplay Exception :[‘ +e.code + ’] ’ + e.message);
        }
    },
    onAVPlayObtained : function(avplay){
        // callback function that initializes AVPlayer module
        Main.AVPlayer = avplay;
        Main.AVPlayer.init({containerID : ‘player_container’, displayRect: {
            top: 0,
            left: 0,
            width: 1280,
            height: 720
        }, autoRatio: true });
        },
        onGetAVPlayError : function(){
            // error handling function for initializing AVPlayer module
            alert(‘######onGetAVPlayError: ’ + error.message);
        },
        onError : function(){
            alert(‘######onError: ’);
        },
        onSuccess : function(){
            alert(‘######onSuccess: ’);
        },
        play: function() {
            try{
                jQuery(‘#player_container’).addClass(‘show’);
                Main.AVPlayer.open(url[index][content_index]);
                Main.AVPlayer.play(Player.onSuccess, Player.onError);

            }catch(e){
                alert(e.message);
            }
        },
        stop: function() {
            jQuery(‘#player_container’).removeClass(‘show’);
            Main.AVPlayer.stop();
        }
    };


    Main.onLoad = function()
    {
        this.focus();    // assigns the initial focus
        widgetAPI.sendReadyEvent();
        Main.loadContent();   // loads View contents linked to the current Category
        Player.init();
    };

    // changes contents to match new Category selection
    Main.loadContent = function(){
    Main.content.div.hide();
    Main.content.div.eq(index).show();
};


Main.onUnload = function()
{

};
Main.enableKeys = function()
{

};

// application's initial focus
Main.focus = function(){
    Main.category.anchor.focus();
    Main.category.elem.addClass(‘focus’);
    Main.category.li.eq(index).addClass(‘focus’);
};

Main.category.keyDown = function()
{
    var keyCode = event.keyCode;

    switch(keyCode)
    {
        case tvKey.KEY_RETURN:
            widgetAPI.sendReturnEvent();
            break;
        case tvKey.KEY_RIGHT:
            Main.content.anchor.focus();
            Main.category.elem.removeClass(‘focus’);
            Main.content.elem.addClass(‘focus’);
            Main.content.div.eq(index).find(‘li’).eq(content_index).
addClass(‘focus’);
            focused_comp = ‘content’;
            break;
        case tvKey.KEY_UP:
            if(index > 0){
                Main.category.li.eq(index).removeClass(‘focus’);
                Main.category.li.eq(--index).addClass(‘focus’);
                Main.loadContent();
            }
            break;
        case tvKey.KEY_DOWN:
            if(index < Main.category.li.size() − 1){
                Main.category.li.eq(index).removeClass(‘focus’);
                Main.category.li.eq(++index).addClass(‘focus’);
                Main.loadContent();
            }
            break;
        case tvKey.KEY_INFO :
            Main.info.elem.show();
            Main.info.anchor.focus();
            break;
        default:
            alert(“Unhandled key”);
            break;
    }
};

Main.content.keyDown = function()
{
    var keyCode = event.keyCode;

    switch(keyCode)
    {
        case tvKey.KEY_RETURN:
            widgetAPI.sendReturnEvent();
            break;
        case tvKey.KEY_LEFT:
            if(content_index == 1){
                Main.content.div.eq(index).find(‘li’).eq(content_index).
removeClass(‘focus’);
                Main.content.div.eq(index).find(‘li’).eq(--content_index).
addClass(‘focus’);
        }else{
            Main.category.anchor.focus();
            Main.content.elem.removeClass(‘focus’);
            Main.category.elem.addClass(‘focus’);
            focused_comp = ‘category’;
        }
        break;
    case tvKey.KEY_RIGHT:
        if(content_index == 0){
            Main.content.div.eq(index).find(‘li’).eq(content_index).
removeClass(‘focus’);
               Main.content.div.eq(index).find(‘li’).eq(++content_index).
addClass(‘focus’);
           }else{
              return false;
           }
           break;
       case tvKey.KEY_ENTER:
           Player.play();
           Main.player.anchor.focus();
           break;
       case tvKey.KEY_INFO :
           Main.info.elem.show();
           Main.info.anchor.focus();
           break;
       default:
          break;
    }
};

Main.player.keyDown = function()
{
    var keyCode = event.keyCode;
    switch(keyCode)
    {
        case tvKey.KEY_RETURN:
            event.preventDefault();
            Player.stop();
            Main.content.anchor.focus();
            break;
        case tvKey.KEY_PLAY:
            Player.play();
            break;
        case tvKey.KEY_STOP:
            Player.stop();
            Main.content.anchor.focus();
            break;
        default:
            break;
    }
};

Main.info.keyDown = function()
{
    var keyCode = event.keyCode;

    switch(keyCode)
    {

        case tvKey.KEY_RETURN:
            event.preventDefault();
            Main.info.elem.hide();
            if(focused_comp==‘category’){
                Main.category.anchor.focus();
            }else if(focused_comp==‘content’){
                Main.content.anchor.focus();
            }
            break;
        default:
            break;
    }
};

GetPath.js

function getAbsPath(linkString) {

    var sPath = null;
    var sLocation = window.location.href;
    var sRoot = sLocation.substring(0, sLocation.lastIndexOf(‘/’) + 1);

    sLocation = unescape(sLocation);
    sRoot = unescape(sRoot);

    if (sRoot.indexOf(‘file://localhost/’) != −1 && (sLocation.indexOf(‘C:’) !=
−1 || sLocation.indexOf(‘D:’) != −1)) {
        sPath = sRoot.split(‘file://localhost/’)[1].replace(/\/g, ‘/’);
    } else if (sRoot.indexOf(‘file://localhost/’) != −1) {
        sPath = ‘/’ + sRoot.split(‘file://localhost/’)[1];
    } else if (sRoot.indexOf(‘file://C/’) != −1 || sRoot.indexOf(‘file://c/’)
!= −1) {
        sPath = ‘C://’ + (sRoot.indexOf(‘file://C/’) != −1 ? sRoot.
split(‘file://C/’)[1] : sRoot.split(‘file://c/’)[1]);
    } else if (sRoot.indexOf(‘file://D/’) != −1 || sRoot.indexOf(‘file://d/’)
!= −1) {
        sPath = ‘D://’ + (sRoot.indexOf(‘file://D/’) != −1 ? sRoot.
split(‘file://D/’)[1] : sRoot.split(‘file://d/’)[1]);
    } else {
        sPath = sRoot;
    }
        return sPath+linkString;
}

Main.css

*
{
    padding: 0;
    margin: 0;
    border: 0;
}

/* Layout */
body
{
    width: 1280px;
    height: 720px;
    overflow: hidden;
}

#scene_main{
    display: inline-block;
    width: 1280px;
    height: 720px;
    background : url(“../../images/bg_main.jpg”) no-repeat;
}

#header {
    height: 65px;
}

#header .slogan{
    float: left;
}

#header .appName{
    float: right;
}

#category {
    float: left;
    width: 235px;
    position: absolute;
    top: 87px;
}
#category ul{
    list-style: none;
}

#category ul li{
    width: 235px;
    height: 50px;
    color: #fff;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
}

#category.focus ul li.focus{
    color: #fff;
    background: url(“../../images/btn_menu.png”) top;
}

#category.focus ul li.selected{
    color: #c62ad3;
    background: url(“../../images/btn_menu.png”) bottom;
}

#content{
    float: right;
    position: absolute;
    left: 313px;
    top: 92px;
    width: 900px;
}

#content > div{
    width: 100%;
    display: none;
}

#content > div > div.title{
    display: inline-block;
    width: 380px;
    height: 23px;
}

#content.focus > div{
    color: red;
}

#content ul {
    list-style: none;
    position: relative;
    top: 35px;
}

#content ul li{
    float: left;
    width: 450px;
}

#content ul li img{
    width: 394px;
    height: 219px;
}

#content.focus ul li.focus img{
    border: 6px solid #c409d2;
}

#content ul li label{
    font-size: 24px;

    color: #fff;
    position: relative;
    display: block;
    top: 10px;
}

#content ul li label p{
    font-size: 18px;
    color: #acacac;
}

#scene_info{
    width: 1280px;
    height: 650px;
    background: #242424;
    position: absolute;
    top: 70px;
}

#scene_info img{
    position: relative;
    top: 50px;
    left: 15px;
}

#player_container {
    position: absolute;
    width: 1280px;
    height: 720px;
    opacity: 0;
     left: 0;
     top: 0;
}

#player_container.show {
    opacity: 1;
}

Hands Frame Advanced Version

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
        <title>HG_Layout</title>

        <!-- TODO : Style sheets code -->
        <link rel=“stylesheet” href=“app/stylesheets/Main.css” type=“text/
css”>

        <!-- TODO: Plugins -->

    </head>

    <body onload=“Main.onLoad();” onunload=“Main.onUnload();”>

        <!-- Main Scene element -->
        <div id=“scene_main” style=“display: block;”>
            <div id=“convergence_help”>Connecting to a Mobile Device…</div>
            <div id=“header”>
                <div class=“login”> ID : <input type=“text” id=“login_form”
maxlength=“5” onkeydown=“Main.login.keyDown();”/></div>
            </div>
            <div id=“category”>
                <ul>
                    <li class=“work”>Work</li>
                    <li class=“people”>People</li>
                    <li class=“dream”>Dream</li>
                </ul>
            </div>
                        <div id=“content”>
                <div class=“work”>
                   <img alt=“” src=“./images/img_title_work.png” class=“title”/>
                   <ul>

                       <li>
                            <img alt=“” src=“./images/1_1.png” class=“title”/>
                            <label>What is killer contents? <p>2012.06</p></
label>
                       </li>
                       <li>
                            <img alt=“” src=“./images/1_2.png” class=“title”/>
                            <label>Handmade application <p>2012.05</p></label>
                       </li>
                   </ul>
                </div>
                <div class=“people”>
                    <img alt=“” src=“./images/img_title_people.png”
class=“title”/>
                    <ul>
                        <li>
                            <img alt=“” src=“./images/2_1.png” class=“title”/>
                            <label>2012 Moments to Remember! <p>2013.01</p></
label>
                        </li>
                        <li>
                            <img alt=“” src=“./images/2_2.png” class=“title”/>
                            <label>People<p>2011.01</p></label>
                        </li>
                    </ul>
                </div>
                <div class=“dream”>
                    <img alt=“” src=“./images/img_title_dream.png”
class=“title”/>
                    <ul>
                        <li>
                            <img alt=“” src=“./images/4_1.png” class=“title”/>
                            <label>What does your work mean to you? <p>2011.11</
p></label>
                        </li>
                        <li>
                             <img alt=“” src=“./images/4_2.png” class=“title”/>
                             <label>Workplace with true visions, is there one in
Korea? <p>2011.07</p></label>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- anchor as focus for key events -->
            <a href=“javascript:void(0);” id=“anchor_category” onkeydown=“Main.
category.keyDown();”></a>
            <a href=“javascript:void(0);” id=“anchor_content” onkeydown=“Main.
content.keyDown();”></a>
            <a href=“javascript:void(0);” id=“anchor_player” onkeydown=“Main.
player.keyDown();”></a>
             <a href=“javascript:void(0);” id=“anchor_info” onkeydown=“Main.
info.keyDown();”></a>
        </div>

        <!-- INFO Scene element -->
        <div id=“scene_info” style=“display: none;”>
            <img src=“./images/img_philosophy.png”>
        </div>

        <div id=“player_container”></div>
    </body>

    <!-- TODO : Common API -->
    <script type=“text/javascript” src=“$MANAGER_WIDGET/Common/API/TVKeyValue.
js”></script>
    <script type=“text/javascript” src=“$MANAGER_WIDGET/Common/API/Widget.
js”></script>
    <script type=“text/javascript” src=“$MANAGER_WIDGET/Common/API/Plugin.
js”></script>
    <script type=“text/javascript” src=“$MANAGER_WIDGET/Common/Plugin/Define.
js”></script>

    <!-- IME Module -->
    <script type=“text/javascript” language=‘javascript’ src=“$MANAGER_WIDGET/
Common/IME_XT9/ime.js”></script>
    <script type=“text/javascript” language=‘javascript’ src=“$MANAGER_WIDGET/
Common/IME_XT9/inputCommon/ime_input.js”></script>
    <script type=‘text/javascript’ language=‘javascript’ src=‘$MANAGER_WIDGET/
Common/jquery.js’></script>
    <script type=“text/javascript” language=“javascript” src=“$MANAGER_WIDGET/
Common/webapi/1.0/webapis.js”></script>

    <!-- TODO : Javascript code -->
    <script language=“javascript” type=“text/javascript” src=“app/javascript/
GetPath.js”></script>
    <script language=“javascript” type=“text/javascript” src=“app/javascript/
Main.js”></script>
</html>

Main.js

var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();

var Main = {
    category : {
        elem : jQuery(‘#category’),
        li     : jQuery(‘#category’).find(‘ul > li’),
        anchor : jQuery(‘#anchor_category’),
    },
    content : {
        elem : jQuery(‘#content’),
        div : jQuery(‘#content > div’),
        anchor : jQuery(‘#anchor_content’)
    },
    player : {
        anchor : jQuery(‘#anchor_player’)
    },
    info : {
        elem : jQuery(‘#scene_info’),
        anchor : jQuery(‘#anchor_info’)
    },
    login : {

        elem : jQuery(‘#header > .login’),
        form : jQuery(‘#login_form’)
    }
};

// declares an IME object
var oIME = null;

// toggles login status
var login_flag = false;


var index = 0;
var content_index = 0;
var focused_comp = ‘category’; // stores the currently focused element for
INFO Scene


// nested URL array indexed by Category and Contents
var url = [[getAbsPath(‘resource/1_1.mp4’), getAbsPath(‘resource/1_2.mp4’)],
           [getAbsPath(‘resource/2_1.mp4’), getAbsPath(‘resource/2_2.mp4’)],
           [getAbsPath(‘resource/3_1.mp4’), getAbsPath(‘resource/3_2.mp4’)]];

var Player = {
        init : function(){
            try{
               var playerInstance = webapis.avplay;
               playerInstance.getAVPlay(Player.onAVPlayObtained, Player.
onGetAVPlayError);

           }catch(e){
               alert(‘######getAVplay Exception :[‘ +e.code + ’] ’ + e.message);
           }
       },
       onAVPlayObtained : function(avplay){
           // callback function that initializes AVPlayer module
           Main.AVPlayer = avplay;
           Main.AVPlayer.init({zIndex : 2, containerID : ‘player_container’,
displayRect: {
               top: 0,
               left: 0,
               width: 1280,
               height: 720
           }, autoRatio: true });
       },
       onGetAVPlayError : function(){
           // error handling function for initializing AVPlayer module
           alert(‘######onGetAVPlayError: ‘ + error.message);
       },
       onError : function(){
           alert(‘######onError: ’);
       },
       onSuccess : function(){
           alert(‘######onSuccess: ’);
       },
       play: function() {
           try{
              alert(‘url[index][content_index] : !!!!!!!!!!’+url[index]
[content_index]);
              jQuery(‘#player_container’).addClass(‘show’);
              Main.AVPlayer.open(url[index][content_index]);
              Main.AVPlayer.play(Player.onSuccess, Player.onError);

           }catch(e){
               alert(e.message);
           }
       },
       stop: function() {
           jQuery(‘#player_container’).removeClass(‘show’);
           Main.AVPlayer.stop();
       }
    };

    Main.onLoad = function()
    {

        this.focus(); // assigns the initial focus
        widgetAPI.sendReadyEvent();
        Main.loadContent();   // loads View contents linked to the current Category
        Player.init(); // initializes Player module
    };

    Main.loadContent = function(){
        jQuery(‘#content’).find(‘div’).hide();
        jQuery(‘#content’).find(‘div’).eq(index).show();
    };

    // event handling function for the application exit event
    Main.onUnload = function()
    {
        if(oIME){
            oIME.onClose();
        }
    };
    Main.enableKeys = function()
    {

    };
    Main.focus = function(){
        Main.category.anchor.focus();
        Main.category.elem.addClass(‘focus’);
        Main.category.li.eq(index).addClass(‘focus’);

    };

    Main.category.keyDown = function()
    {
        var keyCode = event.keyCode;

        switch(keyCode)
        {
            case tvKey.KEY_RETURN:
                widgetAPI.sendReturnEvent();
                break;
            case tvKey.KEY_LEFT:
                break;
            case tvKey.KEY_RIGHT:
                Main.content.anchor.focus();
                Main.category.elem.removeClass(‘focus’);
                Main.content.elem.addClass(‘focus’);
                Main.content.div.eq(index).find(‘li’).eq(content_index).
     addClass(‘focus’);
                focused_comp = ‘content’;
                break;
            case tvKey.KEY_UP:
                if(index == 0){
                    if(!login_flag){
                        Main.login.form.focus();
                        Main.category.elem.removeClass(‘focus’);
                        Main.login.elem.addClass(‘focus’);
                    }
                }else{
                    Main.category.li.eq(index).removeClass(‘focus’);
                    Main.category.li.eq(--index).addClass(‘focus’);
                    Main.loadContent();
                }
                break;
            case tvKey.KEY_DOWN:
                if(index < Main.category.li.size() − 1){
                    Main.category.li.eq(index).removeClass(‘focus’);
                    Main.category.li.eq(++index).addClass(‘focus’);

                    Main.loadContent();
                }
                break;
            case tvKey.KEY_INFO :
                Main.info.elem.show();
                Main.info.anchor.focus();
                break;
            default:
                alert(“Unhandled key”);
                break;
        }
};

Main.content.keyDown = function()
{
    var keyCode = event.keyCode;

    switch(keyCode)
    {
        case tvKey.KEY_RETURN:
        case tvKey.KEY_PANEL_RETURN:
            widgetAPI.sendReturnEvent();
            break;
        case tvKey.KEY_LEFT:
            if(content_index == 1){
                Main.content.div.eq(index).find(‘li’).eq(content_index).
removeClass(‘focus’);
                Main.content.div.eq(index).find(‘li’).eq(--content_index).
addClass(‘focus’);
           }else{
               Main.category.anchor.focus();
               Main.content.elem.removeClass(‘focus’);
               Main.category.elem.addClass(‘focus’);
               focused_comp = ‘category’;
           }
           break;
        case tvKey.KEY_RIGHT:
           if(content_index == 0){
               Main.content.div.eq(index).find(‘li’).eq(content_index).
removeClass(‘focus’);
               Main.content.div.eq(index).find(‘li’).eq(++content_index).
addClass(‘focus’);
           }else{
               return false;
           }
           break;

            case tvKey.KEY_ENTER:
                Player.play();
                Main.player.anchor.focus();
                break;
            case tvKey.KEY_INFO :
                Main.info.elem.show();
                Main.info.anchor.focus();
                break;
            default:
                break;
        }
    };

    Main.player.keyDown = function()
    {
        var keyCode = event.keyCode;

        switch(keyCode)
        {
            case tvKey.KEY_RETURN:
                event.preventDefault();
                Player.stop();
                Main.content.anchor.focus();
                break;
            case tvKey.KEY_PLAY:
                Player.play();
                break;
            case tvKey.KEY_STOP:
                Player.stop();
                Main.content.anchor.focus();
                break;
            default:
                break;
        }
    };

    Main.info.keyDown = function()
    {
        var keyCode = event.keyCode;

        switch(keyCode)
        {
            case tvKey.KEY_RETURN:
                event.preventDefault();
                Main.info.elem.hide();
                if(focused_comp==‘category’){
                    Main.category.anchor.focus();
                }else if(focused_comp==‘content’){
                    Main.content.anchor.focus();
                }
                break;
            default:
                break;
        }
    };
    Main.login.keyDown = function(){
        var keyCode = event.keyCode;

        switch(keyCode)
        {
            case tvKey.KEY_RETURN:
                event.preventDefault();
                widgetAPI.sendReturnEvent();
            break;
            case tvKey.KEY_DOWN:
                Main.category.anchor.focus();
                Main.login.elem.removeClass(‘focus’);
                Main.category.elem.addClass(‘focus’);
                break;
            case tvKey.KEY_ENTER:
                focusIME();
                break;
            default:
                break;
        }
    };


    var focusIME = function() {
        oIME = new IMEShell_Common();
        oIME.inputboxID = “login_form”;
        oIME.onKeyPressFunc = function(nKeyCode) {
            switch(nKeyCode)
            {
                case tvKey.KEY_RETURN:
                    break;
                case tvKey.KEY_EXIT:
                    break;
                case tvKey.KEY_ENTER:
                    form_submit();
                    return false;
                    break;
            }
        };

        Main.login.form.focus();
        oIME.onShow();
    };

    var form_submit = function(){
        Main.login.elem.empty();
        Main.login.elem.text(‘Welcome ! ‘+Main.login.form.val() + ‘.’);

        login_flag = true; // toggles login status

        Main.category.anchor.focus();
        Main.login.elem.removeClass(‘focus’);
        Main.category.elem.addClass(‘focus’);
    };

    var Convergence = {
        api: window.webapis.customdevice || {},
        aDevice: [],
     init: function() {
         this.api.registerManagerCallback(Convergence.registerManager);
         this.api.getCustomDevices(Convergence.getCustomDevices);
     },
     registerManager: function(oManagerEvent) {
         var _this = Convergence;
         switch(oManagerEvent.eventType) {
             case _this.api.MGR_EVENT_DEV_CONNECT:
                 _this.api.getCustomDevices(Convergence.getCustomDevices);
                 break;
             case _this.api.MGR_EVENT_DEV_DISCONNECT:
                 _this.api.getCustomDevices(Convergence.getCustomDevices);
                 break;
             default:
                 break;
         }
     },
     getCustomDevices: function(aDevice) {
         var _this = Convergence;
         _this.aDevice = aDevice;

         for(var i = 0; i < aDevice.length; i++) {
             var sID = aDevice[i].getUniqueID();
             aDevice[i].registerDeviceCallback(function(oDeviceInfo) {
                 _this.registerDevice(sID, oDeviceInfo);
             });
         }
     },
     registerDevice: function(sID, oDeviceInfo) {
         var mobileKeyEvent = jQuery.parseJSON(oDeviceInfo.data.message1);
         handleMobileEvent(mobileKeyEvent.msg);
     },
     sendMessage: function(oDevice, sMessage) {
         return oDevice.sendMessage(sMessage);
     },
     broadcastMessage: function(sMessage) {
         return this.aDevice[0] && this.aDevice[0].broadcastMessage(sMessage);
     },
     uploadFile: function(sName) {
         // : image filename
         var sUrl = ‘http://127.0.0.1/ws/app/’ + curWidget.id + ‘/file/’ + sName;
         return ‘<img src=“’ + sUrl + ‘”/>’;
     }
};
Convergence.init();



// processes the requested event
var handleMobileEvent = function(event){
    switch(event) {
        case ‘msg_show’ :
            $(‘#convergence_help’).show();
            break;
        case ‘msg_hide’ :
            $(‘#convergence_help’).hide();
            break;
    }
};

GetPath.js

function getAbsPath(linkString) {

    var sPath = null;
    var sLocation = window.location.href;
    var sRoot = sLocation.substring(0, sLocation.lastIndexOf(‘/’) + 1);

    sLocation = unescape(sLocation);
    sRoot = unescape(sRoot);

    if (sRoot.indexOf(‘file://localhost/’) != −1 && (sLocation.indexOf(‘C:’) !=
−1 || sLocation.indexOf(‘D:’) != −1)) {
        sPath = sRoot.split(‘file://localhost/’)[1].replace(/\/g, ‘/’);
    } else if (sRoot.indexOf(‘file://localhost/’) != −1) {
        sPath = ‘/’ + sRoot.split(‘file://localhost/’)[1];
    } else if (sRoot.indexOf(‘file://C/’) != −1 || sRoot.indexOf(‘file://c/’)
!= −1) {
        sPath = ‘C://’ + (sRoot.indexOf(‘file://C/’) != −1 ? sRoot.
split(‘file://C/’)[1] : sRoot.split(‘file://c/’)[1]);
   } else if (sRoot.indexOf(‘file://D/’) != −1 || sRoot.indexOf(‘file://d/’)
!= −1) {
        sPath = ‘D://’ + (sRoot.indexOf(‘file://D/’) != −1 ? sRoot.
split(‘file://D/’)[1] : sRoot.split(‘file://d/’)[1]);
    } else {
        sPath = sRoot;
    }

    return sPath+linkString;
}

Main.css

*
{
    padding: 0;
    margin: 0;
    border: 0;
        }
/* Layout */
body
{
   width: 1280px;
   height: 720px;
   background-color: #fff;
   background : url(“../../images/bg_main.jpg”) no-repeat;
   overflow: hidden;
}

#scene_main{
    display: inline-block;
    width: 1280px;
    height: 720px;
}

#header {
    height: 65px;
}

#header .slogan{
    float: left;
}

#header .appName{
    float: right;
}

#category {
    float: left;
    width: 235px;
    position: absolute;
    top: 87px;
}

#category ul{
    list-style: none;
}

#category ul li{
    width: 235px;
    height: 50px;
    color: #fff;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
}

#category.focus ul li.focus{
    color: #fff;
    background: url(“../../images/btn_menu.png”) top;
}

#category.focus ul li.selected{
    color: #c62ad3;
    background: url(“../../images/btn_menu.png”) bottom;

}

#content{
    float: right;
    position: absolute;
    left: 313px;
    top: 92px;
    width: 900px;
}

#content > div{
    width: 100%;
    display: none;
}

#content > div > div.title{
    display: inline-block;
    width: 380px;
    height: 23px;
}

#content.focus > div{
    color: red;
}

#content ul {
    list-style: none;
    position: relative;
    top: 35px;
}

#content ul li{
    float: left;
    width: 450px;
}

#content ul li img{
    width: 394px;
    height: 219px;
}

#content.focus ul li.focus img{
    border: 6px solid #c409d2;
}

#content ul li label{
    font-size: 24px;

    color: #fff;
    position: relative;
    display: block;
    top: 10px;
}

#content ul li label p{
    font-size: 18px;
    color: #acacac;
}

#scene_info{
   width: 1280px;
   height: 650px;
   background: #242424;
   position: absolute;
   top: 70px;
}

#scene_info img{
   position: relative;
   top: 50px;
   left: 15px;
}

/*Advanced Functions*/
#header .login {
    position: absolute;
    top: 20px;
    left: 750px;
    color: #fff;
}

#header .login #login_form {
    height: 25px;
}

#header .login.focus #login_form{
    border: 6px solid #c409d2;
}

#convergence_help{
    position: absolute;
    top: 23px;
    left: 510px;
    color: #eee;
    display: none;
}

#player_container {
    position: absolute;
    width: 1280px;
    height: 720px;
    opacity: 0;
     left: 0;
     top: 0;
}

#player_container.show {
    opacity: 1;
}

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for Addendum: Hands Frame Source Code

Create new playlist

Sign In

Sign Up

Addendum

Hands Frame Source Code

Hands Frame Basic Version

Hands Frame Advanced Version

Table of Contents for
Addendum: Hands Frame Source Code