Создание кроссплатформенного Smart TV приложения на базе библиотеки SmartBox для Samsung, LG, Philips и других

Для запуска приложения в последней версии эмулятора вам необходимы: сам эмулятор, который является образом для VirtualBox и доступен для скачивания на странице SDK. После импорта образа, вам необходимо указать путь до директории с Вашими проектами и запустить виртуальную машину. Главное что не стоит забывать — название директории в виртуальной машине должно быть Apps с соблюдением регистра. На скриншотах вы найдёте пояснения.

(картинки кликабельны)

Если вы разрабатываете приложение с помощью официального SDK, то проблем быть попросту не может, там есть большая кнопка запуска. В случае, когда вы хотите просто запустить приложение, вам необходимо поместить проект в директорию приложений SDK и запустить эмулятор, выбрав нужное приложение. На картинках видно как это сделать.

(картинки кликабельны)

После запуска эмулятора, который устанавливается вместе с SDK, и фактически является виртуальной машиной с OS телевизора, Вы сможете указать URL вашего приложения (да приложение должно быть доступно по http, это может быть и локальный сервис на apache/denwer/nginx). Картинки демонстрируют последовательность действий.
(картинки кликабельны)

>

Пожалуй, самое «чудесное», что могло случиться с разработчиками GUI, это получить при запуске эмулятора консоль. Не буду ничего говорить, смотрите сами

(картинки кликабельны)

(картинки кликабельны)

10-12 платформы:

1. Пользователь производит вход в аккаунт (кнопка А на пульте)
2. Набирает в поле Уч.зап. Samsung: develop
3. В поле пароль: 123456 (любой другой тоже должен подходить)
4. Выбирает «Вход»
5. Нажимает на ПДУ кнопку «Enter»
6. Вход осуществлён
7. Нажимает на ПДУ кнопку D (в некоторых моделей телевизоров кнопка TOOLS)
8. Выбирает «Разработка»
9. Нажимает на ПДУ кнопку «Enter»
10. Выбирает «Настройка IP-адреса серв.»
11. Нажимает на ПДУ кнопку «Enter»
12. Набирает IP-адрес: 82.146.41.200
13. Нажимает на ПДУ return
14. Выбирает «Синхронизация приложений пользователя»
15. Нажимает на ПДУ кнопку «Enter»
16. Происходит обновление приложения

13 платформа:

1. Нажать на кнопку Smart Hub
2. Выполнить вход в учётную запись develop (Menu — Smart Features -> Samsung Account — > Login (name: develop; password: sso1029dev! )
3. На экране Smart Hub существует вкладка «More apps» внизу, нужно нажать на неё
4. Выбрать Options в верхнем правом углу экрана
5. Выбрать IP Settings из выпадающего меню
6. Набрать IP 82.146.41.200
7. Ещё раз выбрать Options в верхем правом углу
8. Выбрать App Sync из выпадающего списка

* В ряде случаев для TV требуется разрешение на установку сторонних приложений, что обеспечивается ключём разработчика, который можно получить обратившись в RND Samsung (http://samsungdforum.com/) Сделано вендером для пресечения нелегального распространения приложений

1. Скопировать архив http://paunin.com/content/lg_drm.zip на USB-flash
2. Распаковать архив, так чтобы путь до файлов был: Корень usb-flash/lgapps/installed/ и т.д.
3. Вставить USB-flash в USB разъём телевизора
4. Включить телевизор (Power On на Пульте Дистанционного Управления)
5. Нажать Home на ПДУ – произойдёт переход в Smart TV LG
6. Нажать на красную кнопку на ПДУ – появится форма для входа в аккаунт
7. Набрать в поле login: %свой логин% (если нет логина — зарегистрироваться, в телевизоре есть средства)
8. Набрать в поле пароля %свой пароль%
9. Нажать Ок – произойдёт вход в аккаунт и переход обратно в Smart TV LG
10. Выбрать «Мои приложения» в правом нижнем углу
11. Нажать Page down (кнопка переключения каналов вниз) на ПДУ — произойдёт переход на Мои приложения на USB
12. Запустить приложение

Для запуска приложений на телевизорах Philips с функцией SmartTV, откройте в браузере TV ссылку http://goo.gl/o93keD

1. Пользователь производит вход в аккаунт (кнопка А на пульте)
2. Набирает в поле Уч.зап. Samsung: develop
3. В поле пароль: 123456 (любой другой тоже должен подходить)
4. Выбирает «Вход»
5. Нажимает на ПДУ кнопку «Enter»
6. Вход осуществлён
7. Нажимает на ПДУ кнопку D (в некоторых моделей телевизоров кнопка TOOLS)
8. Выбирает «Разработка»
9. Нажимает на ПДУ кнопку «Enter»
10. Выбирает «Настройка IP-адреса серв.»
11. Нажимает на ПДУ кнопку «Enter»
12. Набирает IP-адрес: 82.146.41.200
13. Нажимает на ПДУ return
14. Выбирает «Синхронизация приложений пользователя»
15. Нажимает на ПДУ кнопку «Enter»
16. Происходит обновление приложения

1. Нажать на кнопку Smart Hub
2. Выполнить вход в учётную запись develop (Menu — Smart Features -> Samsung Account — > Login (name: develop; password: sso1029dev! )
3. На экране Smart Hub существует вкладка «More apps» внизу, нужно нажать на неё
4. Выбрать Options в верхнем правом углу экрана
5. Выбрать IP Settings из выпадающего меню
6. Набрать IP 82.146.41.200
7. Ещё раз выбрать Options в верхем правом углу
8. Выбрать App Sync из выпадающего списка

(Картинки кликабельны)

1. Скопировать архив http://paunin.com/content/lg_drm.zip на USB-flash
2. Распаковать архив, так чтобы путь до файлов был: Корень usb-flash/lgapps/installed/ и т.д.
3. Вставить USB-flash в USB разъём телевизора
4. Включить телевизор (Power On на Пульте Дистанционного Управления)
5. Нажать Home на ПДУ – произойдёт переход в Smart TV LG
6. Нажать на красную кнопку на ПДУ – появится форма для входа в аккаунт
7. Набрать в поле login: %свой логин% (если нет логина — зарегистрироваться, в телевизоре есть средства)
8. Набрать в поле пароля %свой пароль%
9. Нажать Ок – произойдёт вход в аккаунт и переход обратно в Smart TV LG
10. Выбрать «Мои приложения» в правом нижнем углу
11. Нажать Page down (кнопка переключения каналов вниз) на ПДУ — произойдёт переход на Мои приложения на USB
12. Запустить приложение

Это обычный текстовый файл с говорящими за себя параметрами, где интересный нам параметр — это Screen Resolution, который определяет разрешение для которого написано ваше приложение, рекомендуемый на текущий момент это HD 1280x720. Допустимы: SD 960x540 и FullHD 1920x1080

Use Alpha Blending = Yes
Screen Resolution = 1280x720

Полная дока

<?xml version="1.0" encoding="UTF-8"?>
<widget>
	<voice>y</voice> <!-- Использовать ли управление голосом -->
	<mouse>y</mouse> <!-- Использовать ли управление жестами или мышь -->
	<previewjs itemtype="string"></previewjs>
	<preicon itemtype="string"></preicon>
	<cpname itemtype="string"></cpname>
	<cplogo itemtype="string"></cplogo>
	<cpauthjs itemtype="string"></cpauthjs>
	<ver itemtype="string">0.1</ver> <!-- Версия сборки -->
	<mgrver itemtype="string"></mgrver>
	<fullwidget itemtype="boolean">y</fullwidget>
	<srcctl itemtype="boolean">y</srcctl>
	<ticker itemtype="boolean">n</ticker>
	<childlock itemtype="boolean">n</childlock> 
	<audiomute itemtype="boolean">y</audiomute> <!-- разрешить на фоне играть музыку от сигнала с антены или других -->
	<videomute itemtype="boolean">y</videomute> <!-- разрешить на фоне видео от сигнала с антены или других -->
	<dcont itemtype="boolean">y</dcont>
	<widgetname itemtype="string">SmartBox DemoApp</widgetname> <!-- Имя виджета/приложения, показывается в телевизоре после инсталляции -->
	<description itemtype="string"></description> <!-- Описание виджета/приложения -->
	<width itemtype="number">1280</width> <!-- разрешение виджета - ширина -->
	<height itemtype="number">720</height> <!-- разрешение виджета - высота -->
	<author itemtype="group"> <!-- Описание автора -->
		<name itemtype="string">Smart</name>
		<email itemtype="string">info@example.com</email>
		<link itemtype="string">https://github.com/immosmart/smartbox</link>
		<organization itemtype="string">Smart</organization>
	</author>
	<!-- блок путей до иконок (размеры видны из имён файлов), показывается в телевизоре в разных местах после инсталляции  -->
    <ThumbIcon itemtype="string">icon/sb_demo_115x95.png</ThumbIcon>
    <BigThumbIcon itemtype="string">icon/sb_demo_115x95.png</BigThumbIcon>
    <BigListIcon itemtype="string">icon/sb_demo_95x78.png</BigListIcon>
    <ListIcon itemtype="string">icon/sb_demo_85x70.png</ListIcon>
</widget>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8"/>
    <title>Smartbox demo</title>
    <!--Стили для отдельных сцен-->
    <link rel="stylesheet" href="css/input.css"/>
    <link rel="stylesheet" href="css/keyboard.css"/>
    <link rel="stylesheet" href="css/legend.css"/>

    <!--Общие стили-->
    <link rel="stylesheet" href="css/style.css"/>

    <!--Библиотеки требуемые Smartbox-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>

    <!--Сама библиотека Smartbox-->
    <script type="text/javascript" src="js/lib/smartbox.js"></script>

    <!--Главный объект приложения-->
    <script type="text/javascript" src="js/app.js"></script>

    <!--Подгрузка модели для сцены с видео-->
    <script type="text/javascript" src="videos.js"></script>

    <!--Сцены-->
    <script type="text/javascript" src="js/scenes/videos.js"></script>
    <script type="text/javascript" src="js/scenes/navigation.js"></script>
    <script type="text/javascript" src="js/scenes/input.js"></script>

    <!--Тригеры для обработки событий и отрисовки легенды в подвале экрана-->
    <script type="text/javascript" src="js/legendTriggers.js"></script>
</head>
<body>

<!--for better view in browser-->
<div class="bg"></div>

<div class="wrap">
    <!--Боковое меню с логотипом-->
    <div class="menu">
        <div class="logo"></div>
        <ul class="menu-items" data-nav_type="vbox" data-nav_loop="true">
            <li data-content='video' class="menu-item menu-item_green nav-item">Videos</li>
            <li data-content='input' class="menu-item menu-item_blue nav-item">Inputs</li>
            <li data-content='navigation' class="menu-item menu-item_red nav-item">Navigation</li>
        </ul>
    </div>
    <!--//Боковое меню с логотипом-->

    <!--Сцены-->
    <div class="scenes-wrapper">
        <!--Сцена демонстрации видео (контент подгрузится при инициализации сцены scenes/videos.js )-->
        <div class="scene scene_video js-scene-video" data-nav_type="vbox" data-nav_loop="true">
                <!--<div data-url="http://smartimmo.ru/uploaded/big_buck_bunny_480p_h264.mp4" data-type="vod" class="video-item nav-item">Big Buck Bunny</div>
                <div data-url="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4" data-type="vod" class="video-item nav-item">Elephants Dream</div>
                <div data-url="http://europaplus.cdnvideo.ru/europaplus-live/eptv_main.sdp/playlist.m3u8" data-type="hls" class="video-item nav-item">HLS test</div>
                <div data-url="http://phone.pik-tv.com/live/mp4:piktv3pik3tv/playlist.m3u8" data-type="hls" class="video-item nav-item">HLS test 2</div>
                <div data-url="http://live.iphone.redbull.de.edgesuite.net/webtvHD.m3u8" data-type="hls" class="video-item nav-item focus">HLS test 3</div>-->
        </div>

        <!--//Сцена демонстрации видео-->

        <!--Сцена демонстрации input'ов-->
        <div class="scene scene_input js-scene-input">
            <div class="input-example">
                <h2>Standart input</h2>
                <input class="input-item js-input-1 nav-item"/>

                <div class="input-val">
                    Input value: <span class="js-input-1-val"></span>
                </div>
            </div>

            <div class="input-example">
                <h2>Input with email keyboard</h2>
                <input class="input-item js-input-2 nav-item"/>
            </div>

            <div class="input-example">
                <h2>Input with num keyboard and maximum 4 signs</h2>
                <input class="input-item js-input-3 nav-item"/>
            </div>
        </div>
        <!--//Сцена демонстрации input'ов-->

        <!--Сцена демонстрации навигации-->
        <div class="scene js-scene-navigation">
            <ul class="navigation-items">
                <li class="navigation-item nav-item">1</li>
                <li class="navigation-item nav-item">2</li>
                <li class="navigation-item nav-item">3</li>
                <li class="navigation-item nav-item">4</li>
                <li class="navigation-item nav-item">5</li>
                <li class="navigation-item nav-item">6</li>
                <li class="navigation-item nav-item">7</li>
                <li class="navigation-item nav-item">8</li>
            </ul>
            <p class="navigation-info"></p>
        </div>
        <!--//Сцена демонстрации навигации-->

    </div>
    <!--//Сцены-->
</div>


</body>
</html>

Навешивание событий по клику на элементы меню:

//js/app.js
$('.menu').on('click', '.menu-item', function ( e ) {
        var scene = e.currentTarget.getAttribute('data-content');
        self.showContent(scene);
      });)

Метод инициирующий отображение сцен:

//js/app.js
showContent: function ( scene ) {
      var cur = this.currentScene,
        newScene = this.scenes[scene];

      if ( cur !== newScene ) {
        if ( !newScene ) {
          $$error('Scene ' + scene + ' doesn't exist');
        } else {
          if ( cur ) {
            cur.hide();
          }
          newScene.show();
          this.currentScene = newScene;
        }
      }
    }

Например, следующий код отобразит клавиатуру для ввода email на поле с классом js-input-2, естественно, после события click:

//js/scene/input.js
this.$el.find('.js-input-2').SBInput({
    keyboard: {
        type: 'email'
    }
});

//js/scene/navigation.js
init: function () {
      var $info;

      this.$el = $('.js-scene-navigation');

      $info = this.$el.find('.navigation-info');

      this.$el
        .find('.navigation-item')
          .on(
          {
            'nav_focus': function () {
              $info.html('Item with text "' + this.innerHTML + '" focused');
            },
            'nav_blur': function () {
              $info.html('');
            }
          });

      _inited = true;
    }