Вложенные композиции. Создание инфо-бара

Примечание: описание справедливо для версии 1.7.50 и выше

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

infobar-1.jpg

Для формирования подобных композиций применяется технология считывания данных из внешних источников: txt- или xml-файлов, либо RSS-ресурсов. Для отображения текста и символов в определенном порядке платформа SL NEO предусматривает использование технологии "вложенных композиций" - композиция с определенным элементом (блоком новостей, например) формируется отдельно, затем помещается в общую композицию инфо-бара. 

Базовые элементы инфо-бара

1. Подложка. Как правило, это предварительно созданный файл статической графики или 32-bit видео. Перед созданием композиции файл необходимо импортировать в медиа-базу сервера. Для нашего примера будет использован статичный png-файл, загрузить его можно по этой ссылке.

2. Информационные блоки. Композиция инфо-бара может содержать неограниченное количество информационных блоков, которые отображаются независимо друг от друга. В нашем примере их 5: News - блок новостей, Weather - блок отображения погоды, Currency - блок отображения курсов валют и две "бегущих строки" - Crawl 1 и Crawl 2.

infobar-2.jpg

3. Стандартные слои текста. В нашем примере их 3 - надписи NEWS, LIVE и www.skylark.tv
4. Часы и дата - текстовые объекты, формируемые в графическом редакторе и отображающие системное время сервера.

Создание общего дизайн-макета инфо-бара

Первоначально необходимо создать графическую композицию, содержащую все элементы инфо-бара, без какой-либо параметризации и эффектов. Для создания композиции необходимо воспользоваться встроенным графическим редактором приложения Air Manager, он открывается по правой кнопке мыши в окне Media Browser.

Поскольку длительность композиции определить невозможно, длительность устанавливается "бесконечной", для этого в в закладке General в поле Duration должно быть указано --:--:--:--. Параметр Lead Out устанавливаем в 00:00:00:00.

В закладке Elements необходимо создать определенное количество слоев. Для графической подложки необходимо использовать тип слоя PIP, практически для всех текстовых объектов, кроме бегущих строк - слои Text Area, для отображения текущей даты и времени необходимо выбрать тип Counter. Для "бегущих строк" Crawl 1 и Crawl 2 необходимо выбрать тип слоя Text Feed.

Тэги: управление цветом текста, вставка картинок в текст

infobar-4.jpgПО SL NO позволяет управлять цветом текста и фона в текстовой строке и вставлять в текстовые строчки статичные изображения. Для этого используются тэги. Тег представляет собой специальный "контейнер" для изменения параметров текста, например - текст, представленный на рисунке, набирается следующим образом:
<?Canada?> Canada Dollar 1.0187<?Up?><?fg:#00FF00?>+0.2352%
где Canada и Up - клипы в базе сервера с изображениями флага Канады и зеленой стрелки, fg:#00FF00 - параметр, задающий цвет текста, расположенного после тега, в формате RGB.

Как и в HTML, цвет текста задается цифрами в шестнадцатеричном коде, в виде #rrggbb, где r, g и b обозначают соответственно красную, зеленую и синюю составляющую. Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #.

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

Коллекцию статических и анимированных символов, отображающих информацию о погоде, можно загрузить по ссылке, после загрузки файлы следует импортировать в базу сервера.

По окончании редактирования, композиция должна выглядеть следующим образом (см. рисунок). Загрузить готовую композицию можно по ссылке, после загрузки файл необходимо импортировать в базу, для корректного отображения композиции, файл с подложкой и файлы с флагами, стрелками и погодными символами также должны находиться в БД сервера. 

Создание отдельных "рабочих" композиций для информационных блоков

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

Композиция для блока News

Определим концепцию блока News - он будет содержать заголовок (TOP WORLD STORIES в дизайн-макете), отображаемый в течение всего блока и 6 сменяющих друг друга предложений - новостей. Длительность каждого предложения - 5 секунд, длительность всего блока - 30 секунд. Далее, по этой же схеме должен отобразиться следующий 30-секундный блок, например - BUSINESS NEWS HEADLINES, за ним - TECH NEWS HEADLINES и так далее, количество блоков не ограничивается, по окончании воспроизведения последнего блока цикл должен повториться. Информация для каждого блока будет считываться из текстовых файлов по схеме - 1 блок - 1 txt-файл, сколько текстовых файлов в папке, столько будет и блоков. Поскольку концепция платформы SL NEO предусматривает считывание отдельных строк из txt-файла, разделенных пустыми строками, можно разместить весь текст блока новостей в одном txt-файле, включая заголовок (см. рисунок с номерами строк).

infobar-5.jpg

Для создания "рабочей" композиции для блока News можно поступить следующим образом: в окне Media Browser создать копию композиции с дизайн-макетом, переименовать новый клип в Main_News, например, перейти в режим редактирования и удалить из композиции Main_News все элементы, не относящиеся к блоку News - так сохранится дизайн и расположение текстовых элементов блока. После этой операции должно остаться 2 элемента - TOP WS Text (заголовок) и WS Text 1 (текст).

Далее необходимо установить типы переходов для элементов, скопировать элемент, содержащий текст (WS Text 1) 5 раз, установить длительность 5 секунд для каждого элемента, сдвинуть элементы друг относительно друга по времени и установить длительность всей композиции 30 секунд. Загрузить пример композиции для блока News и посмотреть настройки можно по этой ссылке, после загрузки файл следует импортировать в базу сервера.

Теперь можно переходить к настройке RSS - фида и настройкам параметризации для отображения текста для блока News.

Настройка RSS-сервера платформы SL NEO для отображения блока News

Процедура настройки модуля RSS Feeder осуществляется следующим образом:
 
ШАГ 1. Добавляем модуль RSS в систему. Останавливаем серверные компоненты командой Stop Server из панели задач, далее, по правой кнопке мыши на красном значке SkyLark NeoVid в трее выбираем пункт Configure Server Components. В окне настроек, из поля Available components добавляем в правое поле элемент RSS Feeder. Запускаем серверное ПО - по правой кнопке мыши на значке в SkyLark NeoVid в панели задач - команда Start Server.

infobar-6.jpgШАГ 2. Настраиваем RSS модуль. Настройки будут осуществляться из панели управления - Administrator Control Panel. Вход в консоль производится локально с сервера по правой кнопке мыши на синем значке SkyLark NeoVid в панели задач Windows), либо с любой машины в сети по адресу http://server_ip:7901. Следует выполнить вход в консоль управления от имени администратора.

После входа в консоль управления, в меню консоли выбираем Manage. Далее - выбираем закладку RSS Feeds, в окне Feed 1 выбираем Service Enabled. Далее выбираем Source folders - Add. В открывшемся окне Edit Source Folders необходимо выполнить настройки RSS ресурса.

Один из возможных вариантов реализации блока News - последовательное считывание текстовой информации из txt-файлов, находящихся в одной папке. Текст может считываться и отображаться "по кольцу", по мере ручного удаления txt-файлов из папки или добавления новых, информация на выходе RSS-фида будет обновляться. 

Выбираем тип ресурса - Type из списка. Варианты выбора:

Item List - создание одного RSS канала для одной папки с txt-файлами,
Channel List - для каждого txt-файла будет создан свой RSS-канал. Для блока новостей необходимо выбрать Channel List.

В поле Name в произвольной форме указываем имя ресурса, в поле Folder указываем путь к папке с txt-файлами, выбираем кодировку UTF-8, при этом все исходные txt-файлы должны иметь данную кодировку.

Параметр Scrolling необходим для того, чтобы txt-файлы удалялись после показа, для многократного циклического повторения текста его включать не следует. Channel Description - none.

Query type - параметр, позволяющий выбрать тип сканирования текста:

Whole File As Is - отображать весь текст в файле целиком, как есть, Empty Line Separated - отображать текст построчно, при этом строки в файле должны быть разделены пустой строкой (см рисунок с текстом), Regular Expression - использование регулярных выражений для извлечения фрагментов текста, правила задаются в полях Query, XPath - использование одноименной технологии для извлечения текста из xml-файлов.
  
Для отображения текста в блоке News выбираем Empty Line Separated, нажимаем ОК, далее, в верхней части окна консоли управления нажимаем Apply Changes. На этом настройка серверной части ПО для блока News закончена.

Настройки в графической композиции News для приема текста от модуля RSS

Возвращаемся к "рабочей композиции" для блока News и открываем ее в редакторе. Поскольку длительность композиции определена в 30 секунд, в поле Duration должно быть указано 00:00:30:00. Параметр Lead Out устанавливаем в 00:00:00:00. 

Для композиции необходимо указать источник RSS-данных, для этого в закладке General в поле Data Feeds необходимо указать адрес ресурса в формате http://server_ip:7901/rss/RSS_name, где RSS_name - наименование сервиса, заданное при настройке RSS сервера в консоли управления сервером (в нашем примере - RSS_1).
   
infobar-7.jpg
Для отображения RSS-текста будут использованы элементы (слои, объекты) графической композиции Text Area. Параметры каждого текстового объекта Text Area задаются в закладке Elements.

Рассмотрим настройку текстовых объектов, содержащихся в композиции. Загрузить пример композиции для блока News можно по этой ссылке.

Header - текстовый слой, содержащий заголовок для блока новостей. В полях Sh (Show) и Hd (Hide) значения равны 00:00:00:00 - это означает, что текст отображается в течение всей продолжительности композиции. В поле Scrolling можно установить тип прокрутки текста Tele - текст будет появляться телетайпом.

В поле Parametrisation необходимо настроить параметризацию текста: Type - тип параметризации текста:

Disable - параметризация отключена, будет отображаться текст, набранный в окне Preview text, External - режим параметризации текста из строк play-листа, RSS - режим параметризации из RSS-фида, именно его необходимо установить.

В поле Type: Feed: необходимо выбрать Feed_1 (в нашем примере именно он формирует RSS с текстами для блока новостей), в качестве источника данных, в поле Channel: Selector: установить Feed, в поле Item: Selector: выбрать Index со значением 0. Это означает, что для заголовка будет считываться самая первая строка из txt-файла (отсчет строк начинается с нуля).

Main Text 1 - текстовый слой, содержащий текст с новостью №1. В поле Sh (Show) значение равно 00:00:30:00, поскольку первая новость отображается с началом композиции, значение Hd (Hide) значение равно 00:00:06:00. В поле Scrolling можно установить тип прокрутки текста Tele - текст будет появляться телетайпом.

В поле Parametrisation необходимо настроить параметризацию текста, настройки аналогичны сделанным ранее для слоя Header, за исключением поля Item Selector - необходимо выбрать Index со значением 1. Это означает, что для данного объекта будет считываться вторая строка из txt-файла.

Аналогичным образом настраиваются объекты/слои Main Text 2...5 (см. пример композиции News). При необходимости, можно установить эффекты появления/убирания текста, используя ключевые точки (см. пример композиции News с эффектами).

По окончании редактирования, сохранение графического клипа производится по команде File/Save в Top-menu графического редактора Air Manager. После этого клип можно просмотреть в окне File Monitor и проверить прохождение текстовой информации из txt-файлов.

Настройка RSS-сервера платформы SL NEO для отображения блоков Weather, Currency, Crawl 1 и Crawl 2

Добавляем еще 4 модуля RSS в систему. Для этого останавливаем серверные компоненты командой Stop Server, выбираем пункт Configure Server Components, добавляем в правое поле 4 элемента RSS Feeder. Запускаем серверное ПО и настраиваем 4 элемента RSS Feeder из панели управления. 

Для блоков Weather и Currency настройки RSS Feeder будут аналогичны блоку News, для бегущих строк Crawl 1 и Crawl 2 выбираем тип ресурса - Channel List, режим отображения - Whole File As Is.

Проверка функционирования RSS сервера

Проверка осуществляется с помощью web-браузера (желательно использовать Mozilla Firefox). Необходимо ввести адрес в формате http://server_ip:7901/rss, нажать Enter - далее должен отобразиться список активных RSS ресурсов. Выбрав нужный ресурс, необходимо убедиться, что в нем присутствует необходимая текстовая информация.

infobar-11.jpg

Настройки в "рабочей" графической композиции Weather

infobar-8.jpg
В нашем примере будут использованы анимированные и статичные значки с погодными символами, импортированные в БД сервера. Определим, как будет считываться и отображаться информация о текущей погоде: 
фаза 1: параметризуемый погодный значок состояния атмосферы (солнце, облако и пр.) и параметризуемое значение температуры рядом с ним;
Фаза 2: параметризуемый погодный значок направления ветра и параметризуемое значение скорости ветра рядом с ним;
фаза 3: значок влажности (непараметризуемый) и соответствующее значение рядом с ним;
фаза 4: значок атмосферного давления (непараметризуемый) и соответствующее значение рядом с ним.
Фазы будут меняться миксами в цикле, общая длительность данной композиции - 20 секунд.

Один из вариантов параметризации - считывание данных из текстового файла (см. рисунок слева). Поскольку платформа SL NEO позволяет параметризовать не только текст, но и объекты PIP, в том числе и видео, в txt-файле можно указать наименования погодных символов, хранящихся в БД сервера и они будут отображены в композиции.

Первое слово Sun в txt-файле - это наименование (Title) 32-bit анимированного значка с изображением Солнца, +33 - текст, который будет показан рядом с ним, wind-dart-white-5 - наименование (Title) 32-bit значка со стрелкой, 18mph - текст, который будет показан рядом с ним. 60% и 760 mm - тексты, которые будут показаны рядом со значками влажности и давления.

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

Настройки в "рабочей" графической композиции Currency

В примере будут использованы статичные значки с символами валют, импортированные в БД сервера. Определим, как будет считываться и отображаться информация о курсах валют и биржевых котировках: в одну линию выстроены 4 поля, в которых одновременно отображаются данные. Длительность композиции определим равной 5 секундам - после отображения 4-х значений, цикл повторится и отобразит следующие 4 значения. 

infobar-9.jpg
Один из вариантов параметризации - считывание данных из текстовых файлов, (см. рисунок слева) по схеме - один файл = один блок, сколько txt-файлов в папке, столько и информационных блоков в цикле. В строке txt-файла вместе с текстом можно в виде тэгов указать наименования клипов - значков валют, хранящихся в БД сервера для их отображения вместе с текстом.

При использовании тэгов возможна работа только со статичными графическими объектами. Подробно приемы работы с тэгами описаны выше в разделе "Тэги: управление цветом текста, вставка картинок в текст".

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

Настройки в "рабочих" композициях Crawl 1 и Crawl2

Для отображения RSS-текста "бегущей" строки используется элемент (слой) графической композиции Text Feed. В дополнение к обычным параметрам, задающим свойства любого текстового слоя (шрифт, размер, цвет и т.д.), элемент Text Feed имеет параметры, задающие время отображения текстового сообщения, интервалы и паузы между сообщениями. 

Пример композиции Crawl1 можно загрузить по этой ссылке, после загрузки файл необходимо импортировать в медиа-базу сервера. Композиция Crawl2 создается по аналогии с Crawl1.

Заключительный этап: помещение "рабочих композиций" в финальную композицию инфо-бара

В окне Media Browser создаем копию композиции с дизайном, переименовываем новый клип в Info_Bar_Main_1, например, переходим в режим редактирования и удаляем из композиции Info_Bar_Main_1 все элементы, для которых необходима параметризация. Далее помещаем в финальную композицию все настроенные ранее "рабочие" композиции. Сделать это можно 2-мя путями - перетащить клип в редактор из окна Media Browser или нажать кнопку слоя PIP в редакторе и последовательно добавить все "рабочие композиции".

Пример финальной композиции инфо-бара можно загрузить по ссылке.

Поскольку в финальную композицию при перемещении загружается только наименование (Title) "рабочей композиций" и ее длительность, после каждого редактирования "рабочей", процедура повторной вставки ее в финальную композицию не требуется (если после редактирования сохранилась длительность "рабочей" композиции).

infobar-10.jpg

По окончании редактирования, сохранение графического клипа производится по команде File/Save в Top-menu графического редактора Air Manager. После этого клип можно просмотреть в окне File Monitor и поставить в строку play-листа соответствующего окна Broadcast, формирующего графический слой, либо включить в список вторичных событий, либо настроить воспроизведение в слое Graphics Clip Layer (см. описание).

Примечание: В настройках всех графических композиций, предлагаемых для загрузки, в закладке General указан IP-адрес локального RSS-сервера - 127.0.0.1. Для просмотра RSS-данных в композициях на сетевых рабочих станциях, в поле Data Feeds следует указать фактический IP-адрес сервера, на котором функционирует источник RSS-данных.