Samsung Smart TV 開發 – 2 範例

安裝完開發工具之後,最好是可以有個範例程式可以下載來讓我們看看是怎麼去開始整個專案的麻,遠本在官網上可以下載這個範例,不過後來好像因為官網改版,所以連結被移除或是改路徑了,可以到這邊下載:Flash_SWF_Sample_1.04

解壓縮之後可以看到目錄結構如下:

tv08

檔案說明:

檔案/資料夾 內容
Javascript 包含 Javascript 檔案, 在頁面中初始化及設定程式使用(Main.js)
thumbnail 包含在 Samsung TV 中使用到的縮圖, 這些檔案及路徑都設定在 config.xml 中
config.xml 包含 Application 的資訊以及設定
index.html 應用程式主頁面, 當開啟Application時就相當於開啟此頁面
sample.fla 範例檔案的原始碼, 可產出sample.swf
sample.swf Flash 檔案, 嵌在 index.html 上

 

config.xml可以說是最重要的設定檔案,一個不小心設定錯了,就會讓程式運作不正常,下面這個就是Flash專案的設定檔:

<?xml version="1.0" encoding = "UTF-8" ?>
<widget>
    <widgetname>Flash Widget Sample1.04</widgetname>
    <type>user</type>
    <fullwidget>y</fullwidget>
    <srcctl>y</srcctl>
    <dcont>y</dcont>
    <flashplayer>y</flashplayer>
    <category>others</category>
    <ver>1.04</ver>
    <ThumbIcon>./thumbnail/CL_kids_106.png</ThumbIcon>
    <BigThumbIcon>./thumbnail/CL_kids_115.png</BigThumbIcon>
    <ListIcon>./thumbnail/CL_kids_85.png</ListIcon>
    <BigListIcon>./thumbnail/CL_kids_95.png</BigListIcon>
    <description>
        Contents for Flash Widget Sample
    </description>
    <width>960</width>
    <height>540</height>
    <author>
        <name></name>
        <email></email>
        <link></link>
        <organization></organization>
    </author>
</widget>

其中要注意的tag說明如下:

<!--讓 Application 開啟時就是全螢幕模式-->
<fullApplication>y</fullApplication>

<!--Application 在 Samsung TV Apps 中的分類-->
<category>others</category>

<!--tag for automatic transition of source ( From TV, media and so on to Application)-->
<srcctl>y</srcctl>

<!--註明此 Application 的類型為 Adobe Flash-->
<flashplayer>y</flashplayer>

<!--縮圖, 另外還有<BigThumbIcon>,<ListIcon>,<BigListIcon>這些tag在Samsung TV中都需要被設定-->
<ThumbIcon>./thumbnail/CL_kids_106.png</ThumbIcon>

在 index.html 中,預設的版面如下,其中有一些說明,因為建立的專案為Flash,所以其中只會有一個Flash Object,其他的版面元素皆為空的:

<html>
    <head>
        <title>Flash Sample Widget</title>
    </head>
    <body onload="Main.onLoad();" marginwidth="0" marginheight="0"
          topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
        <!-- Flash -->
        <object type="application/x-shockwave-flash" id="sample" width="960" height="540">
            <param name="movie" value="./sample.swf">

            <!--這個參數一定要設置, 設定 Flash 的 render 類型-->
            <param name="wmode" value="transparent">
        </object>

        <!-- Plugins -->
        <!-- Smart TV的Plugin, 可使用電視機的功能 -->
        <object id="pluginObjectNNavi" border="0" classid="clsid:SAMSUNG-INFOLINK-NNAVI"></object>
        <object id="pluginObjectTVMW" border=0 classid="clsid:SAMSUNG-INFOLINK-TVMW"></object>

        <!-- Common widget API -->
        <!-- Samsung TV 的 Javascript API, 用以獲取遙控器輸入的按鍵及其他功能 -->
        <script type='text/javascript' language='javascript' src='$MANAGER_WIDGET/Common/API/Plugin.js'></script>
        <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>

        <!-- Widget code -->
        <script language="javascript" type="text/javascript" src="Javascript/Main.js"></script>
    </body>
</html>

Main.js,為Javascript主程式:

var widgetAPI = new Common.API.Widget();
var pluginAPI = new Common.API.Plugin();

var Main =
{
}

Main.onLoad = function()
{
    widgetAPI.sendReadyEvent();
    // onShow時才去做一些初始化的動作
    window.onShow = Main.initKeys;
}

Main.initKeys = function()
{
    //get Nav plugin
    var NNaviPlugin = document.getElementById("pluginObjectNNavi");

    pluginAPI.SetBannerState(1);
    NNaviPlugin.SetBannerState(2);
    pluginAPI.unregistKey(7);  //unregister volume up button
    pluginAPI.unregistKey(11); //unregister volume down button
    pluginAPI.unregistKey(27); //unregister mute button 
    pluginAPI.unregistKey(262); //unregister MENU key
    pluginAPI.unregistKey(147); //unregister INFO.L key
    pluginAPI.unregistKey(45);  //unregister EXIT key    
}

在Flash中,只是單純的去偵聽KeyboardEvent,然後讓圖像去做移動:

import flash.external.ExternalInterface;

var loop = 0;

//set focus to this flash content
ExternalInterface.call("document.getElementById(\"sample\").focus");

Selection.setFocus("playBtn");

var eventListener = new Object();
eventListener.onKeyDown = function() {
    switch(Key.getCode())
    {
        case Key.END:
            TXT.text = "Return";
            _root.moving_circle.stop();
            ExternalInterface.call("document.getElementById(\"sample\").Exit");
            break;
        case Key.ENTER:
            checkPressedButtom();
            break;
    }
}

Key.addListener(eventListener);

checkPressedButtom = function() {
    if(Selection.getFocus() == "_level0.playBtn")
    {
        TXT.text = "Play";
        _root.moving_circle.play();
    }else if(Selection.getFocus() == "_level0.stopBtn")
    {
        TXT.text = "Stop";
        _root.moving_circle.stop();
    }else if(Selection.getFocus() == "_level0.returnBtn")
    {
        TXT.text = "Return";
        _root.moving_circle.stop();
        ExternalInterface.call("document.getElementById(\"sample\").Exit");
    }else{
        TXT.text = "Press Buttom";
    }
}

這個範例的程式碼是由 actionscript 2.0 寫成, 2.0與3.0的轉換可以參考 [http://www.actionscript.com.cn/help/migration.html Adobe官網]

由此範例可看出有兩種操作模式:
1. 使用focus, 將焦點移動至選取的按鈕上, Enter
2. 直接點選遙控器上的數字鍵或其他功能鍵去 trigger 按鈕

這邊要注意的地方就是:

ExternalInterface.call("document.getElementById(\"sample\").focus");

在ActionScript中呼叫了JavaScript的方法,叫頁面把focus放在這個swf上面,這段是一定要加,不然的話會無法真聽到KeyboardEvent,這段程式放在JavaScript中也可以。

範例執行結果:

tv10    tv11

tv12    tv13

Samsung Smart TV 開發 – 1 如何開始

看完上一篇之後,對Samsung Smart TV應該有個大略的認識了,接下來來談談要如何開始進行開發呢?首先先到 http://www.samsungdforum.com 註冊一個開發人員帳號,註冊的流程就不詳述了,照步驟一步一步來就可以了。

註冊好之後,到上方工具列的 DEV TOOLS -> SDK Download,去下載新版的SDK,本文撰寫時最新版是4.0 Beta,是建議最好不要下載Beta版,下載最新的穩定版本較好,所以就下載SDK 3.5.2,如下圖所示,可以看到兩個下載連結:

tv05

 

經試用過後的結果,最好還是下載Samsung IDE,不要下載Eclipse的版本,用起來有很多奇怪的問題,另外注意也要下載DirectX與JRE(或JDK),如下圖:

tv06

 

安裝順序為:

1. 安裝DirectX End-User Runtime Web
2. 安裝Apache Server => 可安裝SDK附載的版本或是自行下載安裝
3. 安裝Samsung TV SDK 3.5.2
4. 安裝字型:
    [SDK_INSTALL_DIR]/Emulator/Emulator2012_v3.5/bin
    shadow_us.ttf
    shadow_eu.ttf
    shadow_ko.ttf
    shadow_s_cn.ttf
    shadow_t_cn.ttf
    shadow_jp.ttf

 

安裝完之後,在桌面上會看到IDE與模擬器的啟動捷徑,可以試著點開進去摸摸看。

tv07

tv04

 

接著可以到官網上 http://www.samsungdforum.com ,找到一些教學文件以及API的說明文件,如果有不懂的地方,官網上還有論壇可以詢問,不過人氣很低迷,並且最好是到英文論壇發問,比較會有人回覆。