Ticker and Layout

General

The Ticker and Layout nodes are so called Arrange Controller that can be bound to the Control property of an Arrange node. They override and extend the Arrange nodes default behavior in how child nodes are positioned, oriented and so on to fit a variable amount of data to a limited amount of space.

The Ticker node in turn inserts each child at one end of the ticker area, moves it across and removes it again once it has left the area. As soon as one child has completely entered the ticker area, the next one is inserted behind the previous one to create a constant stream of information. The Layout node arranges items horizontally up to the layout width and then creates a line break to position excessive items in the next line.

Arrange Controllers can be used to either present the information contained in the Arrange nodes children or to use the child nodes as mere vessels to present dynamically changing information. Such information is passed to the controller via the Data property.

Non-Dynamic Data

Same as without an Arrange Controller, the Arrange node will treat each of its children (and the subtree originating from them) as a separate entity. By setting the DataMode property to None, an Arrange Controller will only control the position, orientation and scale of each of those entities but not change any of the properties of the nodes themselves.

Layout

The Layout node in None-DataMode arranges items automatically based on their size and content. This is very useful for text blocks or images embedded in text. Paragraphs could be separated in several single text elements which are layouted automatically. Changing the size of any element of the layout will re-arrange them immediately. This makes the Layout node very interesting for text elements containing dynamic images (smileys, logos, etc).

The Width property of the Layout controller defines the available area to layout the elements where the ChainOffsetX is inserted between every element. If a line exceeds the available Width a line-break is inserted and the next line will start with an Y offset defined in ChainOffsetY.

Ticker

The Ticker in None-DataMode can be used to scroll elements through a visible area that is not large enough to fit them at the same time. Invisible elements are automatically blocked and therefore not rendered which saves rendering performance. In addition, changing the order or number of elements becomes easier compared to having manually positioned the elements via Axis nodes.

The Direction property of the Ticker is used to specify whether the elements underneath the Arrange node are moved as a crawl (X), roll (Y) or as a depth-flight (Z). The Alignment property of the Arrange node corresponding to the direction will be ignored but all other alignments remain valid.

The Width property defines the range where elements are shown and tickered in and out. A new element is inserted at the beginning of that range and moved until the last part of its bounding box clears the range. As soon as one element has completely entered the range, the next item will be inserted. By using the ChainOffset property of the Arrange node, additional spacing can be inserted between consecutive elements.

Elements are always rendered in the order they appear in the hierarchy. For some tickers (i.e. depth-ticker) the order has to be adjusted to maintain transparencies. The Sort property enables the position based sorting.

If SpeedMode is set to TimeBased the Speed property defines the speed of the movements in units per second. A value of 1 defines that the elements are moved by the amount of 1 in one second. In FrameBased speed mode the ticker moves the elements by a 10th of the Speed value every rendered frame. If the renderer skips a frame the ticker will stop in this mode and continues exactly at the next position, where TimeBased tickers skip some positions to keep in-sync with the global timing.

Dynamic Data

The amount of data and its specific content may not be known during design time of a scene. For such situations, the Arrange Controllers can be used in a different manner: Instead of storing the information in the child nodes, it is dynamically passed to the controller as XML via the Data property. When the DataMode property is different from None, the controller will pick one of its children for each piece of information it wants to present and simply overwrites property values (for example the string shown by a text label).

To make this work, the string passed to Data has to be formatted by an XML-like markup. Only XML elements and attributes are used, all other XML markup - including the values (text) of elements - is ignored. When a new piece of information is to be shown, the Arrange Controller will look for a direct child whose name matches the name of the XML element. On this node, it checks for properties which matche the name of one of the XML attributes and assigns the corresponding value.

In general, one will use a Hierarchy Containers, assign it a name and expose properties to be addressed by the Arrange Controller. For example, an element for displaying a stock quote in a crawl could expose properties such as Name, LastTrade and Change. The internal logic of that quote container could manage the display of a colored arrow for positive and negative Change values. The container itself could simply be named "QUOTE". Setting Data to

<QUOTE Name="MSFT" LastTrade="123.25" Change="4.125"/>

would use a child node of name QUOTE, set Name to MSFT, LastTrade to 123.25 and Change to 4.125.

If the scene requires displaying multiple elements of the same type at the same time (a stock crawl usually displays multiple quotes within one line), multiple copies of the element have to be created and added as children of the arrange node. The Arrange Controller keeps track of which nodes are currently already in use and uses the child nodes as a pool from which it can temporarily acquire elements.

The name of the Container could be understood as the type of element. All instances of a type should provide exactly the same visual content as well as the same properties and functionality. A very comfortable way of maintaining copies of typed container is the usage of the Interface technology of Ventuz.

There's no control about which element is actually addressed. The Layout and Ticker nodes simply use the next available element. For the Ticker this means an available element which is not visible on screen (not already used).

Multiple elements are address by multiple XML elements in one XML text.

<QUOTE Name="MSFT" LastTrade="123.25" Change="4.125"/>
<QUOTE Name="AAPL" LastTrade="67.75" Change="2.125"/>
<SPONSOR Image="MySponsor.jpg"/>

Layout

Setting the Data property of the Layout node makes all elements available first, then the XML elements are parsed, elements are selected, reordered and configured.

The following XML Data selects two QUOTE elements followed by one SPONSOR element. All other (unused) elements will be blocked internally (hidden). The remaining (visible) elements will be positioned on screen following the setting of the Arrange and Layout nodes.

<QUOTE Name="MSFT" LastTrade="123.25" Change="4.125"/>
<QUOTE Name="AAPL" LastTrade="67.75" Change="2.125"/>
<SPONSOR Image="MySponsor.jpg"/>

Ticker

Setting the Data property of the Ticker node will parse the data and append so called TickerItems to the internal queue. This queue can hold an unlimited amount of TickerItems.

If DataMode is set to Single the ticker processes the TickerItems in the queue. If a graphics element is done (out) the related TickerItems is removed from queue.

If DataMode is set to Loop the TickerItems of the last Data is repeated if the ticker runs Empty. This mode is usually used for static crawls which repeat their content over and over. The data is usually send only once, containing the entire set of elements to be repeated.

Ticker Control

The ticker has some reserved element and attribute names to control the ticker. It also provides two methods (Continue and Reset) and a few output properties and events to control the data feed or other logic.

Queue Control

To control the queue of TickerItems the Ticker provides the following members:

Method	Reset	Clears the entire queue and removes all visible elements. The Empty flag will be raised.
Input	Threshold	If the QueuedItems output property runs below the specified value, the Underrun event is fired.
Output	Empty	Indicates if the queue is empty. An empty ticker does not fire Underrun events! Use this flag to start a new ticker from its empty state.
Output	QueuedItems	Number of items in the queue. If this value is runs below the Threshold value the Underrun event is fired.
Event	Underrun	Fired if the QueuedItems changes and its value is below the Threshold. Empty queues does not fire this event - they raise the Empty flag instead!

Special Data Elements

PAUSE

The PAUSE reserved element name is used to pause the Ticker. Optional attributes controls additional parameter for it.

• DURATION or D
  Optional parameter defining the duration of the pause in seconds. Default is 0.0 (infinite pause).
• MODE or M
  Optional parameter defining the operation mode of the pause. Three different modes are supported:
  • IN or I (default)
    The ticker will stop as soon the pause TickerItem comes into the visible range.
  • OUT or O
    The ticker will stop as soon the pause TickerItem moves out of the visible range.
  • CENTER or C
    The ticker will stop as soon the pause TickerItem reached the center of the visible range.

Examples:

<PAUSE/>
<pause duration="1.0"/>
<pause duration="2.0" m="center"/>
<Pause D="1.5" M="c"/>

A paused ticker continues to run if either the Continue method is invoked or the duration (if specified) expires.

FILL

If a ticker must start with elements filling the visible area instead of moving in the FILL item is used. After resetting the Ticker by invoking the Reset method, send the FILL element as the very first element of the XML data. The ticker fills up and the first real element will start at the out position.

<FILL/>
<QUOTE Name="MSFT" LastTrade="123.25" Change="4.125"/>
<QUOTE Name="AAPL" LastTrade="67.75" Change="2.125"/>
<SPONSOR Image="MySponsor.jpg"/>

Element Notification

There are reserved names used to notify addressed element containers if the Ticker moves it into or out of the visible range. The Container must expose a Method named like the notification type in order to be called by the Ticker.

TickerIn	Called if the element moves into the visible area
TickerFirstIn	Called if the element is the very first element moves into the visible area.
TickerOut	Called if the element moves out of the visible area.
TickerLastOut	Called if the container is the last element moved out of the visible area.

Using these notification may help to trigger special logic or animation related to the notified element. If a global notification is required (like TickerLastOut) to control the entire graphics, it is recommended to create a special END container handling such events. It could expose events to notify the global animation to fade out the ticker. The data should be terminated with that special element to ensure that notification. Such control element can be containers without any graphic nodes!

Custom Spacing

Sometimes it is necessary to adjust the spacing between element within a Ticker. The ChainOffset property of the Arrange node is a constant offset inserted between all elements. If an individual spacing is required a Volume node can do that task. The node could be used directly or inside a container. It renders no graphics but defines a size (or a volume) which is honored by the Ticker node. The size could be adjusted as a property in the XML data.

Copyright 2011 Ventuz Technology Group