The Ticker element allows you to add highly customized scrolling graphics to your Overlays. It is useful for news tickers, stock info, weather forecasts, and more.
The Ticker element is exclusive to Professional and Enterprise plans.
The Ticker lets you design different templates to display different items found in the data bound to it. This is the main difference with the Text Crawler, that only supports one template (or “Items Composition” setting).
Supported data
The Ticker must be bound to any Data Provider that delivers an array of data.
The Ticker does not support the binding of a list of strings for the elements
All elements in the data array must have:
An individual identifier, that must be unique to each element. This will allow you to have cycling controls, reporting to a Tally, or restarting the Crawler from the last item shown.
A template identifier, that can be shared across elements. This will be used to know which template to use for representing each element.
Other fields represent the actual payload that will be displayed. For example, text strings for news headlines, or numbers representing market variations.
For example, here is the payload of a Local JSON Data Connector:
Ticker's Templates
Templates are compositions that can be conditionally shown, depending on the value of an identifier field on each element of the data array.
These templates can be composed using Text, Image, and Container elements to achieve the desired designs.
Having multiple Templates allows you to visually differentiate the items that are shown, so you can build a single Crawler that displays regular news headlines, breaking news headlines, and weather info, each one with a different look and feel.
Here is an example of a "breaking news" headlines template and a “regular" headlines template, each with a slightly different design:
BREAKING NEWS
REGULAR
Creating a Ticker
You need to add a Ticker element to your Tree. To get the Ticker working are:
Setting up Templates
Bind the Crawler source to a valid data source
Set the template identifier field
Adding Templates
Select the field that will act as a “Template identifier”.
Bind the template ID, this will allow the Crawler to know what template it should use for displaying each element of the array.
Use the “Add” button to add as many templates as you need.
Click a template name to display the template settings popover.
To use that template, specify the value that the identifier field should be matched against.
Following our example, the “Headline” template will be used for all the array elements which “template_id” fields have the value of “HEADLINE”:
Setting up items' identifier field
Once the Source of the Ticker is bound to an array, you can specify which field of the array elements will be used as an item identifier.
Use the “Item identifier” field in the “Ticker Settings” section of the Ticker inspector panel to select the corresponding field.
Designing templates
The Ticker templates can be composed only using:
Containers
Texts
Images
To do so, simply drag those elements from the Building Blocks list into each Crawler Template:
Elements Tree and stacking order
The order of elements in the tree inside a Crawler Template behaves differently than those outside the Crawler.
While regular elements' order represents their visual depth —like layers—, allowing you to decide how they will overlap, the order of elements inside a Crawler Template is mapped to the horizontal left-to-right stacking order.
So, those elements listed above in the Template subtree will be shown to the left than those listed below. Play around with the elements’ order to compose which things are placed first and which ones last.
Elements' Contextual Properties
Containers, Texts, and Images inspector panels present a couple of different properties when used inside a Ticker, that respond to its “stacking” layout and allow you to fine-tune their design properties.
Position and Rotation properties are not configurable in the context of a Crawler Template, as these could be incompatible with the scrolling animation.
Container
Position, size, and rotation cannot be configured in this context.
Padding allows you to set the spacing between the borders of the Container and its content.
Text
Position, size, and rotation cannot be configured in this context.
Font size can be specified in pixels, and the regular “Font resizing” (fit in one line, fit in container, clip to lines) are not available.
Image
Position and rotation cannot be configured in this context.
Image size is set in pixels instead of percentages.
Crawler animation and behavior settings
Delay: In seconds, before the text starts to scroll.
Animation Type: As long as the Text Crawler is visible, it will loop through the items. That animation can behave in two ways:
Batch: The entire group of chained Crawler items will scroll until the last one exits before the first one appears again.
Continuous: Crawler items will loop continuously. The last one will be immediately followed by the first one, without space between them.
Speed: Sets the speed of the crawler animation. You can use a decimal value, but we recommend using integers for better frame accuracy at the output. This value stands for the number of pixels per frame to be displaced, on an ideal 60 fps output. Keep in mind that hardware specs and browser memory load impact the delivered fps.
Please note that the features 'Report current item to Tally' and 'Restart behavior' are only available with the enterprise plan.
Report current item to Tally: When enabled, it will send an API message with the ID of the item currently entering the scene, so you can keep track of which ones are being shown. Use this for custom auditing. For more information, read the Tally Support WebSocket article.
Restart behavior: Defines how the Crawler will behave when hidden and shown again (i.e.: when its parent Overlay goes OUT and then IN). You can choose to start again from the first item or to remember the last item shown and restart from that point onwards.
The 'Remember last shown item' can only be seen in action in the Output; in the Editor, it always starts from scratch.