Embedded Сompositions. Creating an Info-Bar

Note: the description is valid for versions 1.7.50 and higher

 

An info-bar is a multilayer graphic composition used for displaying a lot of text and symbol information: exchange rates, weather forecasts. news lines, etc. The typical example of the info-bar is described at the picture.

 

infobar-1.jpg

 

To form such compositions, we use the technology of reading off the data from external sources: txt- or xml-files, or RSS-resources. For displaying text and symbols in the certain order, SL NEO platform provides using the technology of “embedded compositions” - a composition with a certain element (e.g. a news block) is formed separately and then is placed to the general composition of the info-bar. 

Basic Elements of Info-Bar:

1. Backing. As a rule, it is a previously created file of static graphics or 32-bit video. Before creating a composition, you should import the file to the server media-base. For our example we will use a static png-file, you can download it by this link.

 

2. Informational blocks. The info-bar composition may contain unlimited number of informational blocks, which are displayed independently from each other. There are five blocks in our example: News - the news block, Weather - the block for displaying the weather, Currency - the block for displaying the exchange rates and two tickers - Crawl 1 and Crawl 2.

 

infobar-2.jpg

 

3. Standard layers of text. We have three of them in our example - the inscriptions NEWS, LIVE и www.skylark.tv

4. The clock and the date are the text objects formed in the graphics editor and displaying the system time of the server.

Creating a General Design-Model of Info-Bar

First you should create a graphic composition containing all elements of an info-bar, with no parameterization and effects. For creating a composition you should use the built-in graphics editor in the application Air Manager (you can open it by the right click in the window Media Browser).

 

As it's impossible to define the duration of the composition, duration is set up as "infinite", so you should enter "--:--:--:--" into the field Duration. The parameter Lead Out should be set as 00:00:00:00.

 

You should create the necessary number of layers in the tab Elements. You should use the layer type PIP for the graphic backing, and the layers Text Area almost for all text objects, except tickers. For displaying the current date and time you should choose the type Counter. Choose the layer type Text Feed for the tickers Crawl 1 and Crawl 2.

Tags: control of text color, insertion of pictures into the text

infobar-4.jpgSL NEO software allows controlling the color of text and background in a text line and insertion of static images into the text lines. Tags are used for that. A tag is a special “container” for changing the text parameters, for example - the text, displayed on this picture, is typed in the following way:

<?Canada?> Canada Dollar 1.0187<?Up?><?fg:#00FF00?>+0.2352%

Where Canada and Up are the clips in the server database with the images of the Canada flag and a green arrow, fg:#00FF00 is the parameter that sets the color of text placed after the tag, in RGB format.

 

Like in HTML, the text color is set in HEX (hexadecimal) code numbers - #rrggbb, where r, g and b mean red, green and blue components respectively. You should set a HEX value from 00 to FF for every color - it conforms the range from 0 to 255 in decimal notation. Then all these values are united into one number that follows the symbol #.

 

Static pictures inserted to the text by means of tags are scaled automatically, according to the font size. You shouldn’t use images of a big size for the insertion to the text. You can download the collection of static files with flags and currency icons by this link - after downloading, import the files into the server media-base.

 

You can download the collection of static and animated symbols displaying information about the weather by this link. When you download the file, you should import it to the server database.



After the end of editing, the composition should look in the following way (see the picture): You can download a ready composition by this link, after downloading you should import the file to the base. For correct displaying the composition, the file with the backing and the weather icons should be also present in the server database. 

 

/support/gr_editor_objects/gr_editor_0.jpg

Creating Separate “Work" Compositions for Informational Blocks

As far as the style of displaying is individual for every informational block, the most easy and convenient way is creating a separate composition for every block. Every text element in the so-called “work” composition should be completely worked over - duration, effects for the beginning and the end of the element - after this the “work” composition will be inserted to the main composition of the info-bar.

Composition for the Block News

Let’s define the concept of the block News - it will contain the title (TOP WORLD STORIES in the design-model) displayed during the whole block, and six sentences-news, changing each other. Duration of every sentence is five seconds, duration of the whole block is thirty seconds. The next 30-second block (for example, BUSINESS NEWS HEADLINES) should be displayed by the same scheme, then the next one - TECH NEWS HEADLINES, etc. The number of blocks is not limited, at the end of playout of the last block the cycle should be repeated. Information for every block will be read off from the text files by the scheme: one block - one txt-file, the number of blocks will be equal to the number of text files in the folder. As far as the concept of SL NEO platform provides reading off from a text file the selected lines separated by empty lines, you can place the whole text of the news block in one txt-file, including the title (see the picture with the numbers of lines).

 

infobar-5.jpg

 

To create a work composition for the block News, you can implement the following: in the window Media Browser create a copy of the composition with the design-model, rename the new clip to, for example, Main_News, go to the editing mode and delete from the composition Main_News all the elements that do not belong to the block News - in this way you will save the design and positions of the text elements in the block. Two elements should stay after this operation - TOP WS Text (title) and WS Text 1 (text).

 

Then you need to set the types of transitions for the elements, copy the element containing the text (WS Text 1) five times, set the duration as five seconds for every element, move the elements in time relative to each other and set the duration of the whole composition as thirty seconds. You can download an example of the composition for the block News and see the settings by this link. After downloading, you should import the file to the server base.

 

Now we can pass on to the adjustment of RSS-feed and configuring parametrization for displaying text for the block News.

Configuring the RSS-server of SL NEO Platform for Displaying the Block News

The procedure of configuring the module RSS Feeder is implemented in the following way:

 

Step 1. Add the RSS module to the system.  Stop the server components by the command Stop Server from the task bar, then right click on the blue icon SkyLark NeoVid in tray and choose the item Configure Server Components. Find the field Available components in the configuring window and add the element RSS Feeder into the right field. Launch the server software - right click on the icon SkyLark NeoVid in the task bar and choose Start Server.

 

infobar-6.jpgStep 2.Configure the RSS module. The adjustments will be implemented from the control panel - Administrator Control Panel. Login to the console is implemented locally from the server by the right click on the blue icon SkyLark NeoVid in the Windows taskbar, or from any computer in the network by the address http://ip address:7901. You should login to the control console as an administrator.

 

After the login to the control console, choose Manage at the console menu. Then find the item RSS Feeds and choose Service Enabled in the window Feed 1. Then choose Source folders - Add. Now you should configure the RSS resource in the opened window Edit Source Folders.

 

One of the possible variants of executing the block News is consecutive reading off the text information from the txt-files stored in one folder. The text may be read off and displayed “in circle”, after the manual deletion of txt-files or adding new ones, the information at the output of the RSS-feed will being updated. 

 

Choose the type of resource - Type from the list. Variants of choice:

 

Item List - creating one RSS-channel for one folder with txt-files.

Channel List - creating a separate RSS-channel for every txt-file. Choose Channel List for the block of news.

 

In the field Name enter a random name for the resource, in the field Folder set the path to the folder with txt-files, choose the coding UTF-8 (in this case all initial txt-files should have this type of coding).

 

The parameter Scrolling is used for deletion of all files after displaying, you shouldn't turn it on for cyclic repetition of text. Channel Description - none.

 

Query type - the parameter allows the user to choose the type of scanning for the text:

 

Whole File As Is - display the whole text in the file like it is, Empty Line Separated - display the text line by line, herewith, the lines in the txt-file should be separated by an empty line (see the picture with text), Regular Expression - using regular expressions for extraction of text fragments, the rules are set in the fields Query, XPath - using the technology of the same name for extracting the text from xml-files.

  

Choose Empty Line Separated for displaying the text in the block News, press OK, then press Apply Changes in the upper section of the control console window. Configuring the server part of software for the block News is finished.

Settings in the Graphic Composition for Receiving Data from the RSS Module

Let’s get back to the “work composition” for the block News and open it in the editor. As the duration of the composition is defined as thirty seconds, you should set "00:00:30:00" in the field Duration. The parameter Lead Out should be set as 00:00:00:00. 

 

You should specify a source of RSS data for the composition: find the field Data Feeds in the section General and specify the resource address in the format http://server_ip:7901/rss/RSS_name, where RSS_name is the service name set up during the adjustment of the RSS server in the control console of the server (in our case, it's RSS_1).

   

infobar-7.jpgThe elements (layers, objects) of the graphic composition with the type Text Area will be used for displaying RSS-text. You can set up the parameters for every text object Text Area in the tab Elements.

 

Let’s consider the adjustment of text objects contained in the composition. You can download an example of the composition for the block News by this link.



Header - the text layer containing the title for the block of news. The values in the fields Sh (Show) and Hd (Hide) are equal 00:00:00:00 - it means that the text is being displayed during the whole duration of the composition. In the field Scrolling you can choose the type of scrolling for the text Tele - the text will be appearing as teletype.

 

In the field Parametrisation you should configure parameterization of text. Type - the type of text parameterization:

 

Disable means that parameterization is turned off - the server will display the text from the window Preview text. External is the type of text parameterization from the playlist lines. RSS is the mode of parameterization from an RSS-feed, you should choose this one.

 

In the field Type: Feed: you should choose Feed_1 (in our example it forms RSS with the texts for the news block) as a source. Set Feed in the field Channel Selector, choose Index with a value "0" (zero) in the field Item Selector. It means that for the title the server will read off the very first line from the txt-file (the counting of lines starts from zero).

 

Main Text 1 - the text layer containing the text with the piece of news #1. The value in the field Sh (Show) is equal 00:00:30:00, because the first piece of news is displayed with the beginning of the composition, the value Hd (Hide) is equal 00:00:06:00. In the field Scrolling you can choose the type of scrolling for the text Tele - the text will be appearing as teletype.

 

In the field Parametrisation you should configure parameterization of text, the settings are identical to the previously applied settings for the layer Header, except the field Item Selector - you should choose Index with the value 1. It means that the second line will be read off from the txt-file for this object.

 

Use the same scheme to configure the objects/layers Main Text 2...5 (see the example of the composition News). If needed, you may set the effects of appearance/disappearance of text by using key points (see the example of the News composition with effects).

 

At the end of editing, save the graphic clip by the command File/Save in the Top-menu of the Air Manager graphics editor. After this, you can view the clip in the window File Monitor and check the propagation of text information from the txt-files.

Configuring the RSS-server of SL NEO Platform for Displaying the Blocks Weather, Currency, Crawl 1 и Crawl 2

Add four more RSS modules to the system. To implement this, stop the server components by the command Stop Server, choose the item Configure Server Components, add four elements RSS Feeder to the right field. Launch SL NEO server software and configure the four elements RSS Feeder from the control panel. 

 

For the blocks Weather and Currency the settings of RSS Feeder will be identical to the block News, for the tickers Crawl 1 и Crawl 2 choose the type of resource Channel List, the displaying mode - Whole File As Is.

Check of the RSS-Server Functioning

Checking is implemented by means of the web browser (it's desirable to use Mozilla Firefox). You should enter the address in the format http://server_ip:7901/rss and press Enter. Now, the list of active RSS resources should be displayed at the monitor. After choosing the necessary resource, you should make sure that it contains the needed text information.

 

infobar-11.jpg

Settings in the “Work” Graphic Composition Weather

infobar-8.jpgIn our example we will use animated and static icons with weather symbols, imported to the server database. Let’s define, how the information about the current weather will be read off and displayed: 

Phase 1: the parameterisable weather icon of the atmosphere condition (sun, cloud etc) and the parameterisable value of temperature near it.

Phase 2: the parameterisable weather icon of the wind direction and the parameterisable value of the wind speed near it.

Phase 3: the icon of humidity (non-parameterisable) and the corresponding value near it.

Phase 4: the icon of atmosphere pressure (non-parameterisable) and the corresponding value near it.

Phases will being mixed in cycle, general duration of the given composition is twenty seconds.

 

One of the variants of parameterization - reading off data from a text file (see the picture on the left). As far as SL NEO platform allows the user to parameterize not only the text, but also the PIP objects (including video), you can enter to the txt-file the titles of the weather icons stored in the server database, and they will be displayed in the composition.

 

The first word Sun in the txt-file is the title of the animated icon with the image of Sun, “+33” is the text that will be displayed near it, wind-dart-white-5 is the title of the 32-bit icon with an arrow, 18mph - the text that will be displayed near it. 60% and 760 mm - the texts that will be displayed near the icons of humidity and pressure.

 

You can download an example of the Weather composition by this link - after downloading, import the file to the server media-base. In the example we have implemented settings of transitions, parameterization of text and weather icons.

Settings in the “Work” Graphic Composition Currency

In our example we will use static icons with currency symbols imported to the server database. Let’s define how the information about the exchange rates and market quotations will be read off and displayed: four fields simultaneously displaying information are placed in a single line. Let’s define duration of the composition as five seconds - after displaying four values. the cycle will be repeated and will display the next four values. 

 

infobar-9.jpgOne of the variants of parameterization is reading off data from text files (see the picture on the left) by the scheme “one file = one block” - the number of informational blocks in the cycle is equal to the number of txt-files in the folder. For displaying along with the text the currency icons stored in the server database, you can enter their names as tags to the line of the txt-file.



When using tags, you can work only with static graphic objects. The detailed information about working with tags is described earlier, in the section “Tags: control of text color, insertion of pictures into the text”.

 

You can download an example of the Currency composition by this link - after downloading, import the file to the server media-base. In the example we have implemented settings of transitions and parameterization of text.

Settings in the “Work” Compositions Crawl 1 and Crawl 2

The element (layer) Text Feed of the graphic composition implements displaying the RSS-text of the ticker. In addition to the regular parameters that set the properties for any text layer (font, size, color etc), the element Text Feed has the parameters that set the time of displaying the text message, intervals and pauses between the messages. 

 

You can download an example of the composition Crawl1 by this link - after downloading, import the file to the server media-base. The composition Crawl2 is created by the analogy with Crawl1.

The final step: placing the “work compositions" to the final composition of the info-bar

In the window Media Browser create a copy of the composition with design, rename the new clip, for example, to Info_Bar_Main_1, pass on to the editing mode and delete from the composition Info_Bar_Main_1 all elements that need parameterization. Then place to the final composition all previously configured “work” compositions. You can implement this in two ways: drag the clip to the editor from the window Media Browser, or press the button of the PIP layer in the editor and sequentially add all “work compositions”.

 

You can download an example of the final composition of the info-bar by the link.

 

After adding, only the title and duration of the work composition are uploaded to the final composition. That’s why, you don’t need to insert it to the final composition every time after editing (if the duration of the work composition is not changed after editing).

 

infobar-10.jpg

 

At the end of editing, save the graphic clip by the command File/Save in the Top-menu of the Air Manager graphics editor. After this, you can view the clip in the window File Monitor and put it into the playlist line of the corresponding window Broadcast that forms the graphic layer, or include it to the list of secondary events, or configure playback in the layer Graphics Clip Layer (see the description).

 

Note: Settings of all graphic compositions offered for downloading have the set IP address of the local RSS-server 127.0.0.1 in the tab General. For viewing RSS-data in the compositions on the network work stations, in the field Data Feeds you should specify the actual IP address of the server that has the functioning source of RSS-data.