Введение в программирование для плееров SpinetiX

У плееров SpinetiX есть одна привлекательная черта, которая незаслуженно остается в тени. Речь о возможности использования JavaScript для создания контента.
Введение в программирование для плееров SpinetiX
Благодаря архитектуре плееров при помощи JavaScript можно импортировать данные из других систем, управлять медиа-контентом, создавать на лету элементы, менять их свойства и многое другое.

Плееры SpinetiX поддерживают стандарт ECMAScript 5 (начиная с версии прошивки 3.0.0) — не самый современный, но и не очень старый. Жить можно.

Поддерживается ограниченное число библиотек и API — полноценные современные веб-приложения не сделать, но их достаточно для большинства задач, на которые рассчитан плеер.

Основная библиотека, которая есть в каждом проекте — это jSignage, включающая функции из jQuery (библиотека портирована для SpinetiX OS). Кроме того, можно использовать ограниченный набор модулей из Node API: buffer, events, net, stream и dgram.

Что потребуется для работы

Плеер SpinetiX HMP400
Подойдут и более ранние модели
Программа Elementi
Для создания больших проектов желательно использовать версию X, которая включает встроенные средства отладки. Но на начальном этапе для освоения и создания первых проектов можно обойтись версией S
Текстовый редактор для редактирования js файлов
Знание JavaScript и умение работать в графической оболочке Elementi для создания контента

Создаем Hello World!

Cоздадим проект, который выводит текст «Hello World». Это позволит понять базовые принципы добавления скриптов в проект и работы с ними.

Несмотря на достаточно большие возможности по программированию, процесс добавления скриптов не так очевиден. Elementi не предлагает функций управления скриптами через GUI и добавлять скрипты в проект придется вручную.
Хорошая новость
Делать это нужно только один раз, при добавлении нового скрипта.

Поехали!

Зайдите в Elementi и создайте проект Hello World. Сразу создайте в проекте папку «scripts», в которой будут храниться скрипты.
В каждом проекте есть index. svg файл, в котором хранится вся структура проекта — описание всех элементов и их атрибутов. В этот же файл мы будем добавлять информацию об используемых скриптах.
Проект SpinetiX — это папка, и мы можем посмотреть ее содержание, используя Проводник.
Решение на базе SpinetiX для сети гипермаркетов "Лента"
Мы видим созданную пустую папку scripts и файл index.svg. Svg — это текстовый файл.  Откройте его в текстовом редакторе и увидите структуру проекта. Нас интересует только блок загрузки скриптов.
 Введение в программирование для плееров SpinetiX
Скрипт 1: это загрузка основной библиотеки jSignage.
Скрипт 2: начальная инициализация слоев.

Тут стоит сказать пару слов о конструкции.
  $(function(){
    // ...
  });
Она эквивалентна:
  $('svg').ready(function(){
    // ...
  });
Так понятнее: $('svg') — получение корневого элемента структуры проекта, а. ready () вызывает наш callback, когда завершается строительство DOM.

Если не использовать эту обертку, то к моменту вызова нашего скрипта DOM — структура еще не будет готова и мы не сможем производить с ней операции. Иногда это не нужно, например, если скрипт делает внутреннюю инициализацию или обращается за внешними данными и не обращается к DOM.
Три способа добавления скриптов
Использовать xlink:href (можно загружать внешние и локальные скрипты). Так, например, загружается скрипт 1 в примере выше
Использовать inline-скрипты в svg. Пример 2
Использовать функцию .include в inline-скрипте
Второй способ добавления скриптов законный, но крайне неудобный с точки зрения создания и поддержки кода. Поэтому мы его рассматривать не будем. Первый и третий вариант — это то, что нам нужно.

В первом случае скрипт не имеет обертки и поэтому в момент запуска мы не можем использовать обращения к DOM. Ничто не запрещает сделать обертку с .ready в нашем скрипте — речь об этом пойдет ниже.

При использовании .include в inline-скрипте можно сразу обернуть его вызов и дождаться окончания строительства DOM. Это упростит жизнь. Поэтому в первом примере мы будем использовать .include.

В папке scripts создаем файл hello.js:
alert('Hello World');
Откройте в текстовом редакторе файл index.svg и добавьте импорт нашего файла внутри callback’а:
<script><![CDATA[
   $(function(){
    $.include('scripts/hello.js');
   });
 ]]></script>
Должно получиться так:
Введение в программирование для плееров SpinetiX
Теперь, если вы перезагрузите проект в Elementi (двойное нажатие мышкой на index.svg), откроется сообщение Hello World. Наш скрипт загружается и запускается. Первая версия программы готова.
ВОПРОС
Мы добавили загрузку скрипта непосредственно в index.svg. Что будет, если редактировать проект в Elementi?

Если добавить элемент в GUI, то index.svg будет перезаписан. Что будет с добавленным скриптом?

Хорошая новость — все, что вы добавляете как скрипты, сохраняется в проекте. Добавили один раз — больше ничего не нужно делать. Сам скрипт при этом редактировать можно.

Hello World с созданием слоя на лету

В предыдущем примере мы научились загружать скрипты. Теперь давайте добавим отображение надписи Hello World! рендером плеера, а не функцией alert. Для этого модифицируем наш hello.js:
$('svg').add($.textArea({
  left: 240,
  top: 60,
  width: 800,
  height: 600,
  frame: { frameColor: 'white', frameSize: 2 },
  fill: '#ff0000',
  fontSize: 120
}).text( 'Hello World!' ));
Если вы все сделали правильно, получится:
Мы на лету создали текстовый элемент и вывели его на экран.

Hello World — меняем текст в элементе

Иногда удобнее не создавать элементы на лету, а менять свойства существующих элементов.
Пример, когда это удобно
Мы можем разместить элемент в нужном месте и задать его свойства в редакторе, а не указывать их при создании.
Давайте посмотрим в чем разница с загрузкой скрипта с использованием xlink:href. Удаляем строчки из index.svg:
<script><![CDATA[
   $(function(){
    $.include('scripts/hello.js');
   });
 ]]></script>
И добавляем:
<script xlink:href="scripts/hello.js"/>
Наш пример продолжает работать. Добавьте новый текстовый слой в GUI — мы хотим изменить его текст в нашем коде. Задайте расположение и свойства, затем в разделе свойств Расширенные замените id на hello (этого можно не делать, но удобнее работать с понятным id).

Меняем наш hello.js:
$('#hello').text('Hello World!');
Здесь $('#hello') возвращает нам наш элемент, а text ('Hello World!') меняет значение текста.
Запускаем проект и… ничего не происходит.

Напомним — при использовании метода загрузки через xlink:href, структура DOM не готова в момент запуска скрипта. Поэтому ничего не вышло.

Модифицируем наш hello.js:
$(function(){
  $('#hello').ready(function(){
    $('#hello').text('Hello World!');
  });
});
Мы обернули вызов нашей инициализации в сразу два callback’а — первый дожидается, когда будет готова структура 'svg'. А второй дожидается, когда в нее будет добавлен наш элемент hello (для адресации по id элемента мы используем символ #).

Можно упростить код:
  $(function(){
    $('#hello').text('Hello World!');
  });
Для этого нам нужно переместить вызов нашего скрипта после скрипта инициализации 2 — скрипты вызываются последовательно и callback’и будут вызываться в той же очередности.

Запускаем проект... все работает.
Решение на базе SpinetiX для сети гипермаркетов "Лента"

Вместо заключения

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

Полезные ссылки:

Контакты:

Текст:
Александр Пивоваров, pivovarov@gmail.com
ПЛЕЕРЫ
СОФТ
Смотреть далее
ГОТОВЫЙ КОНТЕНТ