Как написать программу для телевизора

Подводные грабли разработки приложений для SmartTV

Программирование для webOS, инструменты разработки, документация, обмен опытом
Сообщений: 2 • Страница 1 из 1

Подводные грабли разработки приложений для SmartTV

comrat » 19 сен 2018, 22:11

Подводные грабли разработки приложений для SmartTV
iy2opoxjxlendozajpei-1xwvnc.png (108.87 КБ) Просмотров: 10259

Примечание
Данная статья является по сути копией соответствующей статьи на хабре и публикуется самим автором оригинальной статьи. В данной статье описывается полезный инструмент для разработки для SmartTV в целом и для webOS в частности.

Вступление
Привет, webOS Forum!
Уже давно была идея написать статью о проблемах SmartTV разработки, но по ходу погружения в эту область, мы изобрели свой велосипед, который помогал нам эти проблемы решать. Поэтому, в данной статье, мы не только осветим некоторые проблемные моменты SmartTV разработки, но и расскажем о том как их решить с помощью нового фреймворка PureQML.

Как добавить Плей Лист для Televizo

Зоопарк
Начнем с того, что в природе существует множество SmartTV платформ и многие из них заточены для запуска web приложений. Отсюда может появиться иллюзия, что достаточно один раз написать код и использовать его на всех платформах. Но на деле все платформы имеют некоторые отличия, которые приходится учитывать. Среди таких особенностей можно выделить следующие:

  • Обработка нажатий кнопок дистанционного пульта . Не все производители используют одинаковые кейкоды для одних и тех же кнопок пульта. В качестве примера, можно сравнить кей коды для платформы orsay и webos. Для tizen же надо явно регистрировать некоторые кнопки для дальнейшего использования.
  • Видеоплеер . Во многих платформах поддерживается html5 video плеер, но, к примеру, для tizen используется AVPlay, а для orsay используется собственное API для работы с нативным плеером.
  • Информация о девайсе . Получение информации об устройстве в каждой платформе также реализовано по разному, в NetCast создается специальный объект со особым id-шником, в других случаях используются специфические для каждой платформы методы.
  • Фокус .SmartTV приложение в первую очередь ориентировано на управление пультом, а следовательно UI/UX должны быть реализованы с учетом использования навигационных кнопок: вверх, вниз, вправо, влево, ОК и назад, при этом важно не терять фокус и явно обозначать, где он сейчас находится.

Установка
Опять же из-за многообразия платформ, процесс установки приложений на сами устройства для отладки также отличается. К примеру, для AndroidTV можно воспользоваться adb, на tizen есть свой аналог — sdb, для webOS специальные CLI скрипты и т. д. Каждый из этих инструментов нужно устанавливать и настраивать. Сюда же можно добавить проблему интенсивного обновления платформ, с сопутствующим обновлением SDK и IDE. В качестве примера такой проблемы можно привести случай с Tizen Studio. Скачав самую последнюю версию, вы сможете устанавливать приложения только на телевизоры TV-samsung tv4, при этом нет простого способа установить приложение на более ранние версии телевизоров, коих в природе сейчас значительно больше (если вдруг столкнулись с этой проблемой см. ссылку) и даже после успешного танца с бубном, IDE теряет возможность устанавливать приложения на телевизоры TV-samsung tv4 ¯_ (ツ) _/¯

Модерация
Для публикации приложения необходимо пройти модерацию у соответствующего производителя, и у каждого из них свои правила и особенности. В данном случае необходимо набраться терпения, т. к. приложения могут держать на проверке не одну неделю и это следует учитывать при планировании сроков, т. е. приложение нужно публикова заблаговременно до релиза (если вдруг переживаете, что приложения появится раньше каких-либо маркетинговых мероприятий — не бойтесь, при отправке на модерацию есть пункт, в котором вы можете указать дату, раньше которой публиковать приложение не будут).
Также надо быть готовым к тому, что причиной отказа может оказаться любая мелочь, например, ошибочный ответ в self чеклисте (список вопросов, на которые должен ответить разработчик перед отправкой приложения, например: “содержит ли Ваше приложение вирусы” и т. п.) или из-за недопонимания в описании UX приложения. Может дойти и до курьезных ситуаций, например, был случай, когда завернули приложение со стримингом телеканалов, из-за того, что приняли бегущую строку в эфире одного из каналов за артефакт графики, приняв ее за часть OSD.

AndroidTV /* код обработчика */ >

  • Видеоплеер . Для работы с плеером есть специальная компонента VideoPlayer, которая описывает интерфейс для работы с видео, а платформенная реализация выбирается для целевой платформы на этапе сборки. Ниже приведен пример использования: проигрывание зацикленного видео по ссылке на весь экран:
    Код: Выделить всё VideoPlayer width: 100%;
    height: 100%;
    autoPlay: true;
    source: «http://media.w3.org/2010/05/bunny/movie.mp4»;
    >
  • Информация о девайсе . Для того чтобы получить сведения об устройстве достаточно использовать контрол Device, по аналогии с плеером он описывает интерфейс, а реализация берется для собираемой платформы. Ниже приведен пример кода для отображения текста с ID устройства на экране:
    Код: Выделить всё Device
  • КАК ОТПРАВИТЬ ФАЙЛ НА СМАРТ ТВ БОКС СО СМАРТФОНА И ОБРАТНО. ОДИН ИЗ САМЫХ ПРОСТЫХ МЕТОДОВ

    onBackPressed: if (osd.active)
    osd.toggleActive ()
    else
    _globals.closeApp ()
    >

    В данном коде добавили обработку нажатия кнопок «Select» и «Back», при нажатии первой включаем/выключаем OSD (тот, что с картой и точкой местоположения станции) при нажатии «Back», если открыт OSD закрываем его, если он закрыт, то закрываем само приложение.
    Конечный результат можно увидеть на видео:

    Читайте также:
    Программа которая скачивает фильмы на Айфон

    Заключение
    В итоге PureQML неплохо показал себя в качестве инструмента для разработки SmartTV приложений, мы и сами интенсивно пользуемся им для этих целей.
    Если у вас появились вопросы или хотите больше статей про SmartTV разработку или PureQML — пишите в комментариях или на телеграм канал, постараемся на все ответить.
    Спасибо за внимание! =)

    Источник: webos-forums.ru

    Создаем пульт для телевизора при помощи Python и смартфона

    Обложка: Создаем пульт для телевизора при помощи Python и смартфона

    Вряд ли кто-то вспоминает о Python, когда речь заходит о мобильной разработке. И очень зря, у нас даже есть статья, посвященная этому вопросу: для Python тоже существуют инструменты, способные преобразовать ваш код для работы под iOS, Android или Windows Phone.

    В этом руководстве я покажу вам, как создать простой пульт (роль пульта будет выполнять iPhone) для телевизоров Panasonic Viera.

    • Xcode, так как мы пишем для iPhone, но пульт также можно сделать и для Android, об этом мы поговорим в конце;
    • Желательно Python 3.5;
    • Телевизор Panasonic Viera с возможностью подключения к сети.

    Создаем проект

    Загружаем себе Briefcase — инструмент для конвертирования проект на Python в нативные приложения. Сделать это можно следующим образом: pip install briefcase . Далее создаем новую папку для нашего проекта mkdir tv_remote , внутри нее создаем папку Remote с файлами __init__.py и app.py . __init__.py может быть пустым, а вот в app.py нужно написать следующее:

    import toga def button_handler(widget): print(«hello») def build(app): box = toga.Box() button = toga.Button(‘Hello world’, on_press=button_handler) button.style.set(margin=50) box.add(button) return box if __name__ == ‘__main__’: app = toga.App(‘First App’, ‘org.pybee.helloworld’, startup=build) app.main_loop()

    Теперь создадим файл setup.py . В нем мы будем описывать для какой платформы создается приложение. Обозначим pip пакеты, которые мы будем использовать. Нам понадобятся библиотека toga UI и библиотека для управления телевизором — PyViera.

    После этого ваша директория должна выглядеть следующим образом:

    python android briefcase

    Теперь внутри папки tv_remote запускаем команду python setup.py ios , которая загрузит необходимые компоненты и создаст xcode проект.

    python android briefcase

    Запустим проект. Создастся симулятор iPhone и наше приложение.

    python android briefcase

    Создаем пульт

    Давайте добавим кнопку (цифра 5) для переключения канала.

    import toga from pyviera import Viera tvs = Viera.discover() def channel_5(widget): global tvs if len(tvs) == 0: tvs = Viera.discover() tvs[0].num(5) def build(app): box = toga.Box() button = toga.Button(‘5’, on_press=channel_5) button.style.set(margin=50) box.add(button) return box if __name__ == ‘__main__’: app = toga.App(‘TV Remote’, ‘org.tv.remote’, startup=build) app.main_loop()

    Перезапустим приложение. Если все работает, вы должны увидеть следующее сообщение:

    python android briefcase

    Теперь включаем телевизор и пробуем нажать цифру 5!

    Создаем остальные кнопки

    Так как Toga позволяет применять CSS стили для выравнивания, мы создадим 5 рядов кнопок и расположим их как на реальном пульте от телевизора.

    import toga from colosseum import CSS from pyviera import Viera tvs = Viera.discover() def set_channel(widget): global tvs channel = int(widget.label) print(«Changing to channel «.format(channel)) tvs[0].num(channel) def mute(widget): global tvs tvs[0].mute() def build(app): row_c = toga.Box() row_c.add(toga.Button(‘mute’, on_press=mute)) row_c.style.set(flex_direction=’row’, margin=5, padding_left=60) row_0 = toga.Box() row_0.add(toga.Button(‘1’, on_press=set_channel)) row_0.add(toga.Button(‘2’, on_press=set_channel)) row_0.add(toga.Button(‘3′, on_press=set_channel)) row_0.style.set(flex_direction=’row’, margin=5) row_1 = toga.Box() row_1.add(toga.Button(‘4’, on_press=set_channel)) row_1.add(toga.Button(‘5’, on_press=set_channel)) row_1.add(toga.Button(‘6′, on_press=set_channel)) row_1.style.set(flex_direction=’row’, margin=5) row_2 = toga.Box() row_2.add(toga.Button(‘7’, on_press=set_channel)) row_2.add(toga.Button(‘8’, on_press=set_channel)) row_2.add(toga.Button(‘9′, on_press=set_channel)) row_2.style.set(flex_direction=’row’, margin=5) row_3 = toga.Box() row_3.add(toga.Button(‘0′, on_press=set_channel)) row_3.style.set(flex_direction=’row’, margin=5, padding_left=60) box = toga.Box() box.style.set(flex_direction=’column’, padding_top=60, padding_left=100) box.add(row_c) box.add(row_0) box.add(row_1) box.add(row_2) box.add(row_3) return box if __name__ == ‘__main__’: app = toga.App(‘TV Remote’, ‘org.tv.remote’, startup=build) app.main_loop()

    Перезапустим приложение и — вуаля — работающий пульт для телевизора!

    python android briefcase

    Что делать, если у вас Android?

    Вернемся к моменту, когда мы работали с setup.py , и теперь вместо python setup.py ios запустим python setup.py android . После этого briefcase создаст для вас Android проект.

    Источник: tproger.ru

    Знакомимся с особенностями разработки под Smart TV и учимся делать приложение для телевизора

    Разговоры про Smart TV в последнее время участились, продаются умные телевизоры чаще, чем обычные, их аудитория постоянно растет, но вот магазины приложений пустуют. Почему так? Ведь, казалось бы, разработка под Smart TV не отличается от front-end’а: привычные JavaScript, HTML, CSS и браузер. Все дело в том, что кодинг под Smart TV имеет свои специфические особенности, о которых лучше знать еще при проектировании приложения.

    Что такое Smart TV и зачем нужны приложения в телевизорах?

    Представь, что ты заходишь на кухню. Холодильник сообщает, что можно приготовить из имеющихся продуктов, а затем перекидывает выбранный рецепт на мультиварку. Безумие? Таким же безумием казались приложения в телевизорах еще лет двадцать назад.

    Что же такое Smart TV? Это интернет и интерактивные сервисы в телевизоре или телевизионном ресивере, или, вкратце, компьютер в форм-факторе «зомбоящика». Первую попытку реализовать подобие Smart TV предприняла компания Microsoft в далеком 1997 году, но идея провалилась из-за dial-up-соединения и CRT-телевизоров.

    Позднее возник другой способ сделать телевизор «умным»: в 2000 году стали появляться устройства Set Top Box (STB) различных производителей, расширяющие функционал стандартного (кабельного, спутникового) ТВ. STB — это обычная телевизионная приставка, принимающая сигнал цифрового телевидения, декодирующая и преобразующая его в аналоговый сигнал для вывода через разъемы RCA или SCART либо выводящая сигнал через разъем HDMI на телевизор. Но с ростом скорости соединения и новыми технологиями экранов стали появляться телевизоры со встроенным функционалом Smart TV, и с 2009 года началась сертификация таких устройств. В настоящий момент технология Smart TV внедряется в различные устройства: телевизоры, ресиверы цифрового телевидения, Blu-ray-проигрыватели, игровые консоли и аналогичные им девайсы.

    Приложения умного ТВ позволяют просматривать различный видеоконтент: фильмы, сериалы, записи и трансляции передач и спортивных событий, музыкальные клипы, видеоролики; дают возможность читать новости, просматривать социальные сети и общаться по Skype или другому VoIP. Существуют развивающие приложения для детей и игры.

    Читайте также:
    Как проводить платежи в программе 1с

    AuraInt 3

    Если ты знаком с front-end-разработкой, то уже можешь приступать к созданию приложения, ничего нового учить не придется. Правда, необходимо учитывать особенности телевизоров:

    • Если планируешь разработку для моделей 2011 года и старше, то не рассчитывай на помощь CSS3. Вспоминай, как делать спрайты, и приготовься к интересным особенностям CSS, которые не встречаются в браузерах на компьютере и редко поддаются логичному объяснению.
    • Мощность вычислительного модуля телевизора в разы слабее компьютера, не удивляйся, что анимации в старых моделях будут отнюдь не плавными, а при измерении скорости исполнения кода окажется, что он в десятки и сотни раз медленнее, чем в браузере.
    • Слабая документация у некоторых производителей, а иногда и полное ее отсутствие могут привести тебя в отчаяние и заставят проводить часы на форумах разработчиков.
    • Для тестирования придется использовать реальные телевизоры. Эмуляторы не повторяют полного функционала устройств и часто содержат свои собственные, не возникающие на реальных устройствах баги.
    • В телевизорах полностью отсутствуют средства отладки, придется использовать свои «велосипеды» при разработке.
    • Непривычное взаимодействие пользователя с приложением. Учитывай, что, скорее всего, передвигаться по приложению тебе придется с помощью одного пальца руки, нажимая на кнопки пульта управления (правда, можно еще управлять голосом, жестами и гироскопическим пультом, как, например, у LG, но такое встречается далеко не во всех моделях и не у каждого производителя). На этапе проектирования приложения необходимо учитывать не только навигацию внутри приложения, но и ввод данных в инпуты.
    • Необходимо прорабатывать ситуацию потери соединения. Небольшая подсказка: тестировщики Samsung в процессе премодерации для своего магазина любят при проигрывании видео отключить сетевой кабель из разъема и смотреть, как эта ситуация отрабатывается в приложении :).
    • Разнообразие JavaScript API платформ усложнит кросс-платформенную разработку в разы, каждый производитель предоставляет свой API для взаимодействия с внутренним функционалом (проигрывание видео, отображение клавиатуры и прочее).

    Ниже краткое описание популярных платформ, чтобы ты знал, с чем придется работать.

    Samsung

    Samsung сейчас занимает наибольшую долю среди всех телевизоров с поддержкой технологии Smart TV. В моделях 2010 и 2011 года в качестве движка браузера используется MAPLE — сильно измененная версия Gecko, который был в Firefox 3.0. К счастью разработчиков, компания отказалась продолжать изобретать свой велосипед и с 2012 года в телевизорах Samsung Smart TV используется WebKit.

    Помимо управления с пульта ДУ, в этой платформе можно использовать управление голосом и жестами (начиная с моделей 2012 года), а также подключать привычную мышь и клавиатуру.

    Для разработчиков Samsung предоставляет SDK с эмуляторами и своей средой разработки на базе Eclipse. На сайте есть документация с множеством примеров и возможность удаленного тестирования на реальных устройствах модельного ряда 2013-го и выпущенных позднее (очень полезная для тестирования возможность). Есть недокументированный функционал, поэтому ответ порой придется искать на форуме, к счастью русскоязычном.

    Ключевые возможности API: управление звуком из приложения, получение данных сети и модели, широкие возможности управления плеером.

    samsung

    LG

    Отличительная черта этой платформы — возможность использовать Magic Remote, гироскопический анатомический пульт управления. Движение пульта в пространстве сопровождается движением курсора на экране, что очень сильно упрощает навигацию внутри приложений.

    Из других способов управления — многокнопочный пульт и распознавание голоса. Во всех моделях LG Smart TV используется WebKit, что значительно сокращает количество «специфичных» багов.

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

    Компания LG является учредителем Smart TV Alliance — это проект, созданный в 2012 году совместными усилиями с TP Vision (компанией, производящей телевизоры под брендом Philips) в целях создания унифицированной платформы приложений для умных телевизоров.

    untitled

    Philips

    Достаточно своеобразная платформа. Вторая по объемам продаж в России, но, несмотря на это, разработка для Philips конкретно прокачивает навыки логического мышления, так как документация невероятно скудная :).

    Вот что известно про эту платформу:

    • До моделей 2012 года вместо HTML необходимо было использовать CE-HTML (специально разработанный стандарт для телевизоров и мобильных устройств на основе XHTML).
    • Нет структурированной документации, зато есть примеры и немного статей, из которых можно крупицами собирать информацию.
    • Очень плохой эмулятор и отсутствие возможности запустить приложение полноценно в телевизоре. Для тестирования приходится открывать приложение во встроенном в устройство браузере.

    40PFL8007T_12_smarty+

    Разработка кросс-платформенного приложения при помощи Smartbox

    Как ты понял, в разработке приложения для Smart TV очень много особенностей. Недолго думая, мы с командой решили создать библиотеку, основываясь на опыте кросс-платформенной разработки для умных телевизоров. Вот список того, чем наши наработки могут упростить тебе жизнь:

    • возможность написать абстрактный код, основываясь на API библиотеки, а не каждого TV или приставки;
    • добавление новой поддерживаемой платформы без изменения кода самого приложения;
    • плагин навигации, позволяющий переключать фокус внутри приложения без лишних проблем;
    • инпуты и виртуальная мультиязычная клавиатура;
    • плагин для использования возможности управления голосом;
    • плагин легенды (подсказки по клавишам внизу экрана);
    • абстракция LocalStorage — хранение данных на конечных устройствах;
    • абстракция над функциями плеера;
    • удобная замена console.log в телевизоре.

    На данный момент библиотека позволяет запускать приложение на трех мажорных платформах:

    Кроме того, Smartbox без проблем запускается и на приставке STB Mag 200/250.

    INFO

    Добавить новую платформу в Smartbox не составит труда, в репозитории ты сможешь найти документацию, как это сделать. Код библиотеки мы выложили на GitHub.

    Читайте также:
    Программа для разбивки pkg

    LET’S GO!

    Но довольно теории, давай попробуем написать кросс-платформенное приложение для ТВ, используя Smartbox. Наше приложение будет иметь меню, список видео из внешнего файла, демонстрацию навигации и примеры полей ввода с виртуальной клавиатурой. Приложение будет в трендовом Flat-дизайне.

    demo

    Накидаем HTML для меню:

    Самое важное, что стоит тут отметить, — атрибуты data-* и класс nav-item . Атрибут data-nav_type=»vbox» служит для оптимизации навигации, при его использовании фокус начинает перемещаться от одного sibling-элемента к другому. Атрибут data-nav_loop=»true» позволяет зацикливать навигацию в рамках своего элемента. Все видимые элементы с классом nav-item могут получить на себя фокус и позже инициировать события (focus, click, etc). Атрибут data-content будем использовать для отображения сцен приложения.

    Добавим HTML для сцен.

    Теперь HTML нашего приложения готов, приступим к написанию главного JS-файла приложения app.js. После инициализации самого Smartbox происходит старт приложения.

    // SB() — главная функция Smartbox, вызывается после инициализации всех плагинов и запуска платформы SB(function()< App.initialize(); >);

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

    App.initialize = function () < this.$wrap = $(‘.wrap’); // Показываем легенду $$legend.show(); this.setEvents(); // Запускаем навигацию (в фокусе будет первый видимый элемент с классом nav-item) $$nav.on(); >; App.setEvents = function () < var self = this; // Отображаем сцену при клике на элементе меню $(‘.menu’).on(‘click’, ‘.menu-item’, function ( e ) < // Именно здесь и нужен атрибут data-content var scene = e.currentTarget.getAttribute(‘data-content’); self.showContent(scene); >); $(document.body).on(< // Скрываем/отображаем интерфейс при клике по синей кнопке пульта или клавише D на клавиатуре ‘nav_key:blue’: function() < self.toggleView(); >, // remote events ‘nav_key:stop’: function () < Player.stop(); >, ‘nav_key:pause’: function () < Player.togglePause(); >, ‘nav_key:exit’: function() < SB.exit(); >>); >;

    Метод showContent будет скрывать текущую сцену и отображать новую. Каждая сцена будет иметь три метода — init для разовой инициализации и show / hide для управления отображением. Реализация методов отображения будет одинаковой во всех сценах:

    show: function () < if (!_inited) < // Отложенная инициализация сцены this.init(); _inited = true; >this.$el.show(); >, hide: function ()

    Ну а теперь приступаем к реализации сцен, я буду приводить код без методов show/hide. Но для начала вынесем список видео в отдельный файл:

    window.App.videos = [ < title: ‘Elephants Dream’, url: ‘https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4’, type: ‘vod’ >, < title: ‘Redbull’, url: ‘http://live.iphone.redbull.de.edgesuite.net/webtvHD.m3u8’, type: ‘hls’ >, //. ];

    Можно приступать к реализации сцены со списком видео.

    Сцена со списком видео

    Другие статьи в выпуске:

    Хакер #184. Современный фронтенд

    • Содержание выпуска
    • Подписка на «Хакер» -60%

    init: function () < // В this.$el сохраняем элемент сцены this.$el = $(‘.js-scene-video’); // Устанавливаем обработчик для клика по элементу списка this.$el.on(‘click’, ‘.video-item’, this.onItemClick); this.renderItems(App.videos); >, // Генерация списка видео renderItems: function (items) < var html = », itemHtml = _.template(‘>’); // console.log(items, itemHtml.toString()) for ( var i = 0, len = items.length; i < len; i++ ) < html += itemHtml(items[i]); >this.$el .empty() .html(html); >, // Обработчик клика по элементу onItemClick: function (e) < var index=$(e.currentTarget).index(); // window.Player — плагин Smartbox. Видео запускается передачей объекта c URL и type в метод play Player.play(App.videos[index]); >,

    Сцена со списком готова, можно запускать видео и добавлять новые элементы. Создадим возможность использовать инпуты в Smart TV, в методе init сцены с полями ввода впишем код:

    init: function () < this.$el = $(‘.js-scene-input’); var $valueText = this.$el.find(‘.js-input-1-val’); this.$el.find(‘.js-input-1’) // text_change — событие плагина SBInput, вызывается при изменении текста инпута .on(‘text_change’,function () < $valueText.html(this.value); >) // Плагин SBInput — обычный плагин jQuery .SBInput( < keyboard: < // Для первого инпута клавиатура будет русская с возможностью отображения цифр type: ‘fulltext_ru_nums’ >>); this.$el.find(‘.js-input-2′).SBInput( < keyboard: < // Специальный layout клавиатуры для ввода электронной почты type: ’email’ >>); this.$el.find(‘.js-input-3’).SBInput(< keyboard: < // layout только с девятью цифрами type: ‘num’ >, // Максимальное количество символов в инпуте max: 4 >); >

    input

    Теперь можно вводить данные в поля ввода, отображать и скрывать клавиатуру. Остается добавить код для сцены с примером навигации. На элементе с классом nav-item вызывается событие nav_focus при попадании фокуса на него и nav_blur при потере фокуса. Добавим обработчики для этих событий в сцене.

    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(»); >>); >

    Сцена с примером навигации

    Основной код для сцен готов, приложение функционирует, остается только добавить подсказки для клавиш в плагине легенды. Все возможные кнопки в легенде представлены на рис. 1, а пользоваться клавишами несложно:

    $(‘.menu-item’).on(< ‘nav_focus’: function () < // Отображаем в легенде Enter $$legend.keys.enter(‘Show content’) >, ‘nav_blur’: function () < // Скрываем Enter из легенды $$legend.keys.enter(») >>);

    Рис. 1. Возможные подсказки плагина легенды

    Готовый код приложения ты можешь найти тут. Также можешь посмотреть на приложение в действии. В браузере навигация осуществляется с помощью мыши или стрелок клавиатуры, а кнопки пульта RED, YELLOW, GREEN, BLUE заменяются на клавиши A, B, C, D.

    Заключение

    Теперь ты подготовлен к встрече со Smart TV в боевых условиях разработки. Надеюсь, наша библиотека поможет избежать хождения по граблям и ты сможешь быстро разработать и выложить свое творение в магазин приложений на телевизорах.

    Если хочешь поучаствовать в разработке Smartbox — мы всегда рады pull request’ам на GitHub. А если возникли вопросы по разработке под Smart TV — пиши мне.

    Хороших идей и отличных приложений!

    Источник: xakep.ru

    Рейтинг
    ( Пока оценок нет )
    Загрузка ...
    EFT-Soft.ru