Top

Articles in this section

Ticker items

Avatar
Alexander Bashlykov
  • Updated

Tickers present text and graphics information as scrolling lines. You can use simple text, text files, RSS feeds as sources for tickers.

Default XML description of ticker looks like:

<cg-item group-type='ticker' id='ticker-000'>
    <graphics type='rect' color='white(120)/mll(180)'/>
    <ticker type='crawl' speed='-2.0' gapless-crawl='no' distance='1.0' line-height='1.0'>
        <background type='rect' color='white(120)/mll(180)'/>
        <default-text bold='true' size='1.0' style='uppercase'/>
    </ticker>
    <cg-props pos-x='0' pos-y='413' width='720' height='24' show='yes' move-type='accel-both' alpha='255' bg-color='Black(0)' pixel-ar='0.' play-mode='loop' interlace='auto' scale='fit-ar' align='top-left' pause='no' edges-smooth='0'>
        <indent left='0' right='0' top='0' bottom='0' use-for-bg='no'/>
        <group-indent left='0' right='0' top='0' bottom='0'/>
    </cg-props>
    <internal/>
</cg-item>

And ticker looks like:

CharGen_TickerDefault.png

Ticker properties are nested in <ticker> node. The <ticker> node contains parameters of the ticker and child nodes: <background> that describes ticker background area and <default-text> that is for ticker text content.

Ticker is kind of group of items: graphics and text are combined into the ticker. <background> node is duplicated in <graphics> node (see example above) - you can modify background of ticker like common graphics item within <background> node. <default-text> may contain all the attributes that are possible for a text item. Note please that you should set default text properties before adding text content.

You can use an image as a background for the ticker by setting in XML description:

<background path='c:\myTickerBackground.png'/>

To add a new ticker to your Character Generator configuration you should create an XML description of your required ticker and use TickerAddNew method.

string tickerItemXML= @"<cg-item> 
                            <ticker type='crawl'/> 
                            <graphics color='ML(180)-White(180)'/> 
                            <default-text bold='true' size='20' /> 
                        </cg-item>";
string tickerName = "ticker-item";
double posX = 0.05;
double posY = 0.05;
double sizeX = 0.0;
double sizeY = 0.0;
int isRelative = 1;
int isDisplay = 1; 
m_objCharGen.TickerAddNew(tickerItemXML, posX, posY, sizeX, sizeY, isRelative, isDisplay, ref tickerName);

To add content to the ticker you should call TickerAddContent method:

string tickerID = "ticker-item";
string tickerContent = "Sample Text";
string tickerAddType = "remove-all"; 
m_objCharGen.TickerAddContent(tickerID, tickerContent, tickerAddType);

Ticker Types

There are several types of ticker items in Character Generator. Each type has its specific behavior, format, and parameters.

 Ticker type  Description  Parameters  Example
crawl a line of text crawling horizontally speed - speed of text flow. Sign of value indicates a duration of content flow.
gapless-crawl - indicates whether the crawl is displayed without gaps
distance - a distance between rows or ticker content items
line-height - relative height of text line		 <ticker type='crawl' speed='-2.0' gapless-crawl='no' distance='1.0' line-height='1.0'>
CharGen_TickerCrawl.png
roll multiline roll of text scrolling vertically speed - speed of text flow. Sign of value indicates a duration of content flow.
distance - distance between rows or ticker content items
line-width - relative width of a text line		 <ticker type='roll' speed='-2.0' distance='0.2' line-width='0.9'>
CharGen_TickerRoll.png
ticker-horz-XX horizontal appearance of ticker lines. XX means number of lines lines - a number of lines
start-time - time delay before content starts to flow
show-time - time interval for which item is displayed
line-width - relative line width
line-height - relative line-height
distance - distance between rows or ticker content items
intro-time - time for item appearance
exit-time - time for item hiding
group-show - set of effects for item appearance
group-hide - set of effects for item hiding
line-intro-delay - the delay between lines appearance
line-exit-delay - the delay between lines hiding		 <ticker type='ticker-horz-3' lines='3' start-time='0.5' show-time='1.0' line-width='0.9' line-height='1.0' distance='0.2' intro-time='0.4' exit-time='0.4' group-show='right, blur-x' group-hide='left, blur-x'>
CharGen_TickerHorz.png
ticker-vert-XX vertical appearance of ticker lines. XX means a number of lines. lines - a number of lines
start-time - time delay before content starts to flow
show-time - time interval for which item is displayed
line-width - relative line width
line-height - relative line-height
distance - distance between rows or ticker content items
intro-time - time for item appearance
exit-time - time for item hiding
group-show - set of effects for item appearance
group-hide - set of effects for item hiding
line-intro-delay - the delay between lines appearance
line-exit-delay - the delay between lines hiding		 <ticker type='ticker-vert-3' lines='3' start-time='0.5' show-time='1.0' line-width='0.9' line-height='1.0' distance='0.2' intro-time='0.2' exit-time='0.2' group-show='bottom, blur-y' group-hide='top, blur-y'>
CharGen_TickerVert.png

Content Management

You can use different types of ticker content: you can set text manually, load it from a text file, load it from RSS feed and create your own tickers with images.

Any type of ticker content is loaded with the TickerAddContent method:

string tickerID = "ticker-item";
string tickerContent = "Sample Text";
string tickerAddType = "remove-all"; 
m_objCharGen.TickerAddContent(tickerID, tickerContent, tickerAddType);

tickerAddType may take the following values:

  • "remove-all" - clears ticker content and adds new content to the ticker
  • "remove-first" - removes the only 1st item in the ticker and adds new content to the end
  • an empty string ("") - adds new content to the end of existed one

Also, you can add "multiline" attribute to tickerAddType value (even to an empty string) to make each line of your ticker content as separated ticker item.

Simple text content

Default text settings for ticker content (font, color etc.) are set in <default-text> ticker node in XML description. You can specify ticker text when you add content. To do it you should use XML description for <text> item:

string tickerID = "ticker-item";
string tickerContent = "<text font='Times New Roman Italic' color='Black'>Modified Sample Text</text>";
string tickerAddType = "remove-all"; 
m_objCharGen.TickerAddContent(tickerID, tickerContent, tickerAddType);

CharGen_TickerText.png

You can specify several <text> entries in a single content item.

Content from files

To load a file as ticker content you should use a path to the file as ticker content:

string tickerID = "ticker-item";
string tickerContent = @"c:\myTicker.txt";
string tickerAddType = "remove-all"; 
m_objCharGen.TickerAddContent(tickerID, tickerContent, tickerAddType);

You can format your text in the file by using <text> entries. For example, the content of the file looks like:

Sample Ticker From file 
Multiline Text test 
<text color='Red'>Text formatting</text>

and the result looks like:

CharGen_TickerFile.png

You can add images as ticker content in the same way:

string tickerID = "ticker-item";
string tickerContent = @"c:\myPhoto.png";
string tickerAddType = ""; 
m_objCharGen.TickerAddContent(tickerID, tickerContent, tickerAddType);

By default, the images are scaled to fill text line parameters (width or height). To specify properties of any item that is used in ticker you should get the item from the ticker group.

XML structure for the ticker, in this case, looks like:

<cg-item group-type='ticker' id='ticker-000'>
    <graphics type='rect' color='white(120)/mll(180)'/>
    <ticker type='crawl' speed='-2.0' gapless-crawl='no' distance='1.0' line-height='1.0'>
        <background type='rect' color='white(120)/mll(180)'/>
        <default-text bold='true' size='1.0' style='uppercase'/>
        <content>
            <content-item path='C:\Users\Alexander\Downloads\TickerText.txt' track-file='yes' modification-time='0x01D0E2777A7592DF'/>
        </content>
    </ticker>
    <cg-props pos-x='0' pos-y='413' width='720' height='24' show='yes' move-type='accel-both' alpha='255' bg-color='Black(0)' pixel-ar='0.' play-mode='loop' interlace='auto' scale='fit-ar' align='top-left' pause='no' edges-smooth='0'>
        <indent left='0' right='0' top='0' bottom='0' use-for-bg='no'/>
        <group-indent left='0' right='0' top='0' bottom='0'/>
    </cg-props>
    <internal ignore-ticker='no'/>
</cg-item>

You can specify whether Character Generator updates ticker content from a file when you make changes with it or not. To do it you should specify 'track-file' attribute for <content-item> node. Possible values are 'yes' and 'no'.

In the file that you use as ticker source you can add images with this structure:

[[IMG_1:pathToImage]]Comments

where IMG_1 is an identifier of an image, so check that you use unique IDs (e.g. IMG_1, IMG_2 etc), pathToImage is a path to your file, Comments are used in case of the image doesn't exist.

RSS feeds

You can use RSS feeds as ticker content. RSS is set the same way as text files:

string tickerID = "ticker-item";
string tickerContent = @"http://newsrss.bbc.co.uk/rss/sportonline_world_edition/front_page/rss.xml";
string tickerAddType = ""; 
m_objCharGen.TickerAddContent(tickerID, tickerContent, tickerAddType);

It takes a time to load RSS content (depends on network connection) so it is recommended to load RSS feeds before to show the ticker.

Result for roll ticker looks like:

CharGen_TickerRSS.png

After loading an RSS XML configuration looks like:

<cg-item group-type='ticker' id='ticker-000'>
    <graphics type='rect' color='white(120)/mll(180)'/>
    <ticker type='roll' speed='-2.0' distance='0.2' line-width='0.9'>
        <background type='rect' color='white(120)/mll(180)'/>
        <rss ttl-update='true' rewind-update='true'>
            <rss-header><image width='20%' indent='2,2,6,6' border='2' effects='shadow,3'/><block><title bg-color='white(100)' style='uppercase' color='ml'/><description style='normal' word-break='true'/></block></rss-header>
            <rss-item><image width='20%' indent='2,2,6,6' border='2' effects='shadow,3'/><block><title indent='10,2' style='uppercase' color='ml'/><description style='normal' word-break='true'/></block></rss-item>
        </rss>
        <default-text bold='true' size='1.0'/>
        <content>
            <content-item path='http://newsrss.bbc.co.uk/rss/sportonline_world_edition/front_page/rss.xml' track-file='yes'/>
        </content>
    </ticker>
    <cg-props pos-x='36' pos-y='49' width='648' height='389' show='yes' move-type='accel-both' alpha='255' bg-color='Black(0)' pixel-ar='0.' play-mode='loop' interlace='auto' scale='fit-ar' align='top-left' pause='no' edges-smooth='0'>
        <indent left='0' right='0' top='0' bottom='0' use-for-bg='no'/>
        <group-indent left='0' right='0' top='0' bottom='0'/>
    </cg-props>
    <internal ignore-ticker='no'/>
    <rss ttl-end='130853414296398899'/>
</cg-item>

It contains a specific <rss> node that defines the visual appearance of RSS items.

The head node - <rss> - contains following attributes:

  • ttl-update - indicates whether the title of the RSS is updated when RSS feed is refreshed. Possible values: 'true', 'false'.
  • rewind-update - rewinds ticker on an update of RSS feed. Possible values: 'true', 'false'.

Child nodes define behavior for RSS-entries - headers (<rss-header> node) and items bodies (<rss-item> node). Each of these nodes contains separated nodes for images where you can specify its position (indent, width, height) and effects (effects) and text: <title> describes items' titles appearance and <description> describes items' bodies text formatting.

Was this article helpful?
1 out of 1 found this helpful
Return to top

Related articles