Введение в программирование для плееров 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». Это позволит понять базовые принципы добавления скриптов в проект и работы с ними.

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

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

Зайдите в Elementi и создайте проект Hello World. Сразу создайте в проекте папку «scripts», в которой будут храниться скрипты.

В каждом проекте есть index. svg файл, в котором хранится вся структура проекта — описание всех элементов и их атрибутов. В этот же файл мы будем добавлять информацию об используемых скриптах.
Проект SpinetiX — это папка, и мы можем посмотреть ее содержание, используя Проводник.

Мы видим созданную пустую папку scripts и файл index.svg. Svg — это текстовый файл. Откройте его в текстовом редакторе и увидите структуру проекта. Нас интересует только блок загрузки скриптов.

Скрипт 1: это загрузка основной библиотеки jSignage.
Скрипт 2: начальная инициализация слоев.

Тут стоит сказать пару слов о конструкции.

Она эквивалентна:

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

Если не использовать эту обертку, то к моменту вызова нашего скрипта DOM — структура еще не будет готова и мы не сможем производить с ней операции. Иногда это не нужно, например, если скрипт делает внутреннюю инициализацию или обращается за внешними данными и не обращается к DOM.

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

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

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

В папке scripts создаем файл hello.js:

Откройте в текстовом редакторе файл index.svg и добавьте импорт нашего файла внутри callback’а:

Должно получиться так:

Теперь, если вы перезагрузите проект в Elementi (двойное нажатие мышкой на index.svg), откроется сообщение Hello World. Наш скрипт загружается и запускается. Первая версия программы готова.

Мы добавили загрузку скрипта непосредственно в index.svg. Что будет, если редактировать проект в Elementi?

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

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

В предыдущем примере мы научились загружать скрипты. Теперь давайте добавим отображение надписи Hello World! рендером плеера, а не функцией alert. Для этого модифицируем наш hello.js:

Если вы все сделали правильно, получится:

Мы на лету создали текстовый элемент и вывели его на экран.

Иногда удобнее не создавать элементы на лету, а менять свойства существующих элементов.

Пример, когда это удобно
Мы можем разместить элемент в нужном месте и задать его свойства в редакторе, а не указывать их при создании.

Давайте посмотрим в чем разница с загрузкой скрипта с использованием xlink:href. Удаляем строчки из index.svg:

И добавляем:

Наш пример продолжает работать. Добавьте новый текстовый слой в GUI — мы хотим изменить его текст в нашем коде. Задайте расположение и свойства, затем в разделе свойств Расширенные замените id на hello (этого можно не делать, но удобнее работать с понятным id).

Меняем наш hello.js:

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

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

Модифицируем наш hello.js:

Мы обернули вызов нашей инициализации в сразу два callback’а — первый дожидается, когда будет готова структура 'svg'. А второй дожидается, когда в нее будет добавлен наш элемент hello (для адресации по id элемента мы используем символ #).

Можно упростить код:

Для этого нам нужно переместить вызов нашего скрипта после скрипта инициализации 2 — скрипты вызываются последовательно и callback’и будут вызываться в той же очередности.

Запускаем проект... все работает.

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

Введение про jSignage

jSignage tutorials

jSignage API

Александр Пивоваров, pivovarov@gmail.com