Введение в программирование для плееров SpinetiX
У плееров SpinetiX есть одна привлекательная черта, которая незаслуженно остается в тени. Речь о возможности использования JavaScript для создания контента.
Благодаря архитектуре плееров при помощи JavaScript можно импортировать данные из других систем, управлять медиа-контентом, создавать на лету элементы, менять их свойства и многое другое.
Плееры SpinetiX поддерживают стандарт ECMAScript 5 (начиная с версии прошивки 3.0.0) — не самый современный, но и не очень старый. Жить можно.
Поддерживается ограниченное число библиотек и API — полноценные современные веб-приложения не сделать, но их достаточно для большинства задач, на которые рассчитан плеер.
Основная библиотека, которая есть в каждом проекте — это jSignage, включающая функции из jQuery (библиотека портирована для SpinetiX OS). Кроме того, можно использовать ограниченный набор модулей из Node API: buffer, events, net, stream и dgram.
Плееры SpinetiX поддерживают стандарт ECMAScript 5 (начиная с версии прошивки 3.0.0) — не самый современный, но и не очень старый. Жить можно.
Поддерживается ограниченное число библиотек и API — полноценные современные веб-приложения не сделать, но их достаточно для большинства задач, на которые рассчитан плеер.
Основная библиотека, которая есть в каждом проекте — это jSignage, включающая функции из jQuery (библиотека портирована для SpinetiX OS). Кроме того, можно использовать ограниченный набор модулей из Node API: buffer, events, net, stream и dgram.
Что потребуется для работы
Плеер SpinetiX HMP400
Подойдут и более ранние модели
Подойдут и более ранние модели
Программа Elementi
Для создания больших проектов желательно использовать версию X, которая включает встроенные средства отладки. Но на начальном этапе для освоения и создания первых проектов можно обойтись версией S
Для создания больших проектов желательно использовать версию X, которая включает встроенные средства отладки. Но на начальном этапе для освоения и создания первых проектов можно обойтись версией S
Текстовый редактор для редактирования js файлов
Знание JavaScript и умение работать в графической оболочке Elementi для создания контента
Создаем Hello World!
Cоздадим проект, который выводит текст «Hello World». Это позволит понять базовые принципы добавления скриптов в проект и работы с ними.
Несмотря на достаточно большие возможности по программированию, процесс добавления скриптов не так очевиден. Elementi не предлагает функций управления скриптами через GUI и добавлять скрипты в проект придется вручную.
Несмотря на достаточно большие возможности по программированию, процесс добавления скриптов не так очевиден. Elementi не предлагает функций управления скриптами через GUI и добавлять скрипты в проект придется вручную.
Хорошая новость
Делать это нужно только один раз, при добавлении нового скрипта.
Делать это нужно только один раз, при добавлении нового скрипта.
Поехали!
Зайдите в Elementi и создайте проект Hello World. Сразу создайте в проекте папку «scripts», в которой будут храниться скрипты.
В каждом проекте есть index. svg файл, в котором хранится вся структура проекта — описание всех элементов и их атрибутов. В этот же файл мы будем добавлять информацию об используемых скриптах.
Проект SpinetiX — это папка, и мы можем посмотреть ее содержание, используя Проводник.
Проект SpinetiX — это папка, и мы можем посмотреть ее содержание, используя Проводник.
Мы видим созданную пустую папку scripts и файл index.svg. Svg — это текстовый файл. Откройте его в текстовом редакторе и увидите структуру проекта. Нас интересует только блок загрузки скриптов.
Скрипт 1: это загрузка основной библиотеки jSignage.
Скрипт 2: начальная инициализация слоев.
Тут стоит сказать пару слов о конструкции.
Скрипт 2: начальная инициализация слоев.
Тут стоит сказать пару слов о конструкции.
$(function(){
// ...
});
Она эквивалентна:
$('svg').ready(function(){
// ...
});
Так понятнее: $('svg') — получение корневого элемента структуры проекта, а. ready () вызывает наш callback, когда завершается строительство DOM.
Если не использовать эту обертку, то к моменту вызова нашего скрипта DOM — структура еще не будет готова и мы не сможем производить с ней операции. Иногда это не нужно, например, если скрипт делает внутреннюю инициализацию или обращается за внешними данными и не обращается к DOM.
Если не использовать эту обертку, то к моменту вызова нашего скрипта DOM — структура еще не будет готова и мы не сможем производить с ней операции. Иногда это не нужно, например, если скрипт делает внутреннюю инициализацию или обращается за внешними данными и не обращается к DOM.
Три способа добавления скриптов
- Использовать xlink:href (можно загружать внешние и локальные скрипты). Так, например, загружается скрипт 1 в примере выше
- Использовать inline-скрипты в svg. Пример 2
- Использовать функцию .include в inline-скрипте
Второй способ добавления скриптов законный, но крайне неудобный с точки зрения создания и поддержки кода. Поэтому мы его рассматривать не будем. Первый и третий вариант — это то, что нам нужно.
В первом случае скрипт не имеет обертки и поэтому в момент запуска мы не можем использовать обращения к DOM. Ничто не запрещает сделать обертку с .ready в нашем скрипте — речь об этом пойдет ниже.
При использовании .include в inline-скрипте можно сразу обернуть его вызов и дождаться окончания строительства DOM. Это упростит жизнь. Поэтому в первом примере мы будем использовать .include.
В папке scripts создаем файл hello.js:
В первом случае скрипт не имеет обертки и поэтому в момент запуска мы не можем использовать обращения к DOM. Ничто не запрещает сделать обертку с .ready в нашем скрипте — речь об этом пойдет ниже.
При использовании .include в inline-скрипте можно сразу обернуть его вызов и дождаться окончания строительства DOM. Это упростит жизнь. Поэтому в первом примере мы будем использовать .include.
В папке scripts создаем файл hello.js:
alert('Hello World');
Откройте в текстовом редакторе файл index.svg и добавьте импорт нашего файла внутри callback’а:
<script><![CDATA[
$(function(){
$.include('scripts/hello.js');
});
]]></script>
Должно получиться так:
Теперь, если вы перезагрузите проект в Elementi (двойное нажатие мышкой на index.svg), откроется сообщение Hello World. Наш скрипт загружается и запускается. Первая версия программы готова.
ВОПРОС
Мы добавили загрузку скрипта непосредственно в index.svg. Что будет, если редактировать проект в Elementi?
Если добавить элемент в GUI, то index.svg будет перезаписан. Что будет с добавленным скриптом?
Хорошая новость — все, что вы добавляете как скрипты, сохраняется в проекте. Добавили один раз — больше ничего не нужно делать. Сам скрипт при этом редактировать можно.
Если добавить элемент в 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.js:
$('#hello').text('Hello World!');
Здесь $('#hello') возвращает нам наш элемент, а text ('Hello World!') меняет значение текста.
Запускаем проект и… ничего не происходит.
Напомним — при использовании метода загрузки через xlink:href, структура DOM не готова в момент запуска скрипта. Поэтому ничего не вышло.
Модифицируем наш hello.js:
Запускаем проект и… ничего не происходит.
Напомним — при использовании метода загрузки через xlink:href, структура DOM не готова в момент запуска скрипта. Поэтому ничего не вышло.
Модифицируем наш hello.js:
$(function(){
$('#hello').ready(function(){
$('#hello').text('Hello World!');
});
});
Мы обернули вызов нашей инициализации в сразу два callback’а — первый дожидается, когда будет готова структура 'svg'. А второй дожидается, когда в нее будет добавлен наш элемент hello (для адресации по id элемента мы используем символ #).
Можно упростить код:
Можно упростить код:
$(function(){
$('#hello').text('Hello World!');
});
Для этого нам нужно переместить вызов нашего скрипта после скрипта инициализации 2 — скрипты вызываются последовательно и callback’и будут вызываться в той же очередности.
Запускаем проект... все работает.
Запускаем проект... все работает.
Вместо заключения
Когда вы разобрались, как добавлять скрипты и понимаете базовые принципы, можно начинать экспериментировать и создавать классные решения. JavaScript дает колоссальную гибкость и открывает много возможностей. Фантазируйте!
Полезные ссылки:
Автор статьи:
Александр Пивоваров, pivovarov@gmail.com
