17: Data Usage in Graphics Editor – Chyron

Overview

Once the configuration of Data Streams is complete, it is time to apply those streams to Objects in the Graphics Editor. There are two primary methods:

Data Plugin + COM usage, defined by Data Objects.
XML-Based Data usage, defined by XPath.

A Data Object in the Graphics Editor is the method by which information from Data Plugins, devices (such as game controllers) or user-entered-data appears in a graphic media button. The data can appear as Text, as an Image, or as an Animation. These three objects behave as their non-data counterparts with regards to view and formatting; however, they will automatically update with the latest information as it is received.

There are four types of Data Object:

Manual Data
Dynamic Data
Dynamic Image
Dynamic Animation

The visual properties of the Dynamic Data and Manual Data objects are exactly the same as those of Text Objects: you can change properties such as font, font size, text alignment, etc.

An important control inside the Character Tool is Optimize for Real-Time data. This control dedicates some resource to maintaining objects such as Game Clocks.

Another useful property is SHRINK TO FIT. This option is found in the Character tool. Because incoming data could potentially contain text of various sizes, the SHRINK TO FIT option ensures that text is not clipped if there are too many characters for the object size. For example: player names: names vary in size and it is likely that players with long names will cause text characters to be clipped if SHRINK TO FIT is not selected.

Note: The SHRINK TO FIT option adjusts only the width of the text. It does not affect the height of the text

The Dynamic Image and Dynamic Animation objects also share the same basic formatting controls as their Non-Dynamic counterparts.

Note: In the Image and Animation toolbars, the AUTO SIZE control allows the Object to change its size on the Canvas based on the current image/animation file’s parameters. If an object must maintain its size to fit in the graphic, then the Auto Size control must be unchecked.

A Manual Data Object can be updated in real-time from the Media Page of your Click Effects PRIME Workflow. In essence, it is a placeholder for future data that is not bound to a data source such as a stats provider.

Enter a description in the Manual Data Object name field and click OK to close the Data Object Wizard.

When you right-click a Media Button that contains a Manual Data Object, there is the option to UPDATE MANUAL DATA. The Edit Data Fields window displays, and allows you to change Manual Data Object when the Media Button is Idle, In Preview, or In Program.

The description entered for each Manual Data Object identifies which object you are updating. Select the Manual Data Object to change, and then modify the text in the VALUE panel. As soon as you click APPLY in the editor window the data changes take effect.

A Dynamic Data Object is automatically updated when its data source changes. The source can be a stats provider, a data provider, or data from an external feed such as a scoreboard controller.

After choosing the Data Object option:

Select the Data Provider.
The Category dropdown populates with options based on the Provider selected.
Select the Category.
The Data Field dropdown populates with options based on the Category Selected.
Select the Data Object, and then click OK.
The Data Object is added as a Text-type object to the Graphics Editor Canvas.

Dynamic Data Objects are completely automated and do not require intervention from the user to perform data updates. When data updates inside the Data Provider, that data is automatically refreshed in all graphics.

A Dynamic Image Object is an Image on the Canvas that automatically changes based on the value of a specified data field. Each Dynamic Image contains a default image and a list of value-image pairs.

NOTE: The Dynamic Animation Object follows the same setup and result as the Dynamic Image, only with value-to-animation file, instead of value-to-image file. This instructional section refers to Dynamic Images to simplify the text.

The Dynamic Image allows the user to create templates in which specific data values cause specific images to appear. Examples:

Tie a different sponsor image to each Inning number, so that when the inning number from the game controller specifies 1, then the Sponsor 1 image is displayed.
A player headshot/data template, in which a player-select tool can be used to pick a player, and based on the jersey number, then relevant data and a headshot for that player displays.

You can select a previously created Dynamic Image Object and add it to the Canvas of the Graphics Editor, or you can create a new Dynamic Image Object. When you choose to create a new Dynamic Image Object, the Dynamic Image Wizard opens.

Dynamic image/animation wizard

When a new Dynamic Image or Animation Object is added, the appropriate Wizard displays.

Note: These instructions are the same for Image and Animation objects. For these instructions, only Image is mentioned.

To configure Dynamic Image Object:

Enter a name and description on the first page of the Dynamic Image Wizard.
Click NEXT.
The name entered will be used in the Graphics Editor to identify Dynamic Image Objects.
Select the Data Provider, Category and Data Field on which to base this Dynamic Image. You are setting up a collection of images that will be linked to data values, so you will want to select the data field that contains these data values. Click NEXT when you have selected a data field.

Add expected data values to the Values field by clicking ADD. The system will display a list of currently known values, but new values can be added.

Assign an Image file to the value by selecting it and then clicking the ellipses button to the right of the Image field. Select an image to associate with the selected Value.

The Default Image is displayed when none of the values match the Data Field’s current value. Click the ellipsis button to the right of the Default Image field, and then select an image.

You can also perform any of the following editing functions:

To clear all assignments, click CLEAR ALL.
To delete a value, select it in the list and click DELETE.
To edit a value, select the value in the list and click EDIT.
Click CLOSE to apply the settings to the selected Image object.

To edit existing Dynamic Data Image Objects outside of the Graphics Editor:

From the main screen select Settings –> Image Settings –> Dynamic Images.
Inside the Dynamic Image Management window, select the Dynamic Image Object and click EDIT. This opens the Dynamic Image wizard, where value assignments can be changed.

Dynamic data image: Batch import

In the final screen of the Dynamic Data Image Wizard, you can batch import image files to automatically link them to data values. To enable this function, you must have a list of images with the same name that have an _[data].[image extension] at the end. [data] is the value to be associated with the imFimportage that has that value.

A list of properly formatted files will look like this:

AndruwJones_25.tga
TonyAbreu_13.tga
RafaelFurcal_15.tga

The first entry in the list ties the jersey number 25 to the image
The Dynamic Image automatically creates value-to-image assignments for all files that use this syntax.

Note: Dynamic Animations can also be Batch-Entered, with the same settings, except that the file extensions will match the video file extension.

After you have added a Data Object to the Canvas of the Graphics Editor, changes can be made to the properties or assigned data field that is used for this Data Object.

To change settings, right-click a Data object and select Options. The Data Options toolbar displays.

Change data object assignments

To change the assignment of a Data Object:

Select the new Data Provider, Category, and Data Field. This ensures the Data Object is now assigned to the newly selected data field. Any time that its data field is updated, the Data Object will hold the new value.

No data value and error value fields

On non-event days, your Click Effects PRIME Workflow might be offline and not be receiving any data or stats from external stats feeds or stats providers. Data Objects inside your graphics will display as empty text objects. This makes it difficult to make visual changes to graphics.

The No Data Value field on the Source tab of the Data Options Tool Window can be used to assign a temporary value to a Data Object field in case there is no data available. The No Data value will then be displayed as text for a Data Object or will set the Dynamic Image/Animation.
The Error Value field allows you to enter a text string to be displayed if bad or garbled data is present in the data feed.

You will need to set your own value/image pair in order to display a specific Image or Animation when No Data or Error occurs.

Configure data objects with multiple rows of data

Value Selection Option

There are two types of data fields: single value and multiple values in a table format.

A Data Object using a single-value data field can be, e.g., an inning number, today’s attendance, or the venue name of the current event.
A Data Object using a multiple-value data field acts like a data table in a database. For example, a table that holds player information such as name, jersey number, position, etc., will contain multiple entries for each column inside the table. The Value Selection tab can be used to specify the data to be displayed in the graphic.

Within the Value Selection tab, there are two selection types available: a built-in Data Controller or Manual configuration, which is the advanced option.

The Data Controller is a list of specific built-in tools that know exactly how to select rows of data from a stats feed. One use of this type of controller is a Data Object that rotates through a table, such as Out-of-Town scores. Another example is the Player Select Controller. which offers a lineup or roster of players from which to choose.
Set Manually is an advanced feature that requires a great understanding of the external data or stats feed. Troubleshooting a manually configured Dynamic Data Object field might be difficult.

To set the row number of the Data Object field, simply click the + and – buttons or type the index number in the index field. You will notice that as you change the index number, the Data Object field changes values. These values are drawn from the data in the table selected on the source tab.

This control could be used with multiple Data Objects to display the data as a table in the graphic. With the first Data Object set to Record 1, the second Object set to Record 2, etc.

In addition, if the data allows, the Name/Value option can be used. This list populates the upper dropdown, and then changes the second dropdown based on that selection. For example, if you choose a Player name in the top control, then the bottom control lists all of the fields in the table, such as Jersey Number, Position, etc.

Configure for Rotating Data Values

If a data field is set to rotate at a certain time interval controlled by an out-of-town controller, then the initial indices of each rotating data field must be selected so that the out-of-town controller knows how to address each rotating field.

To set the initial index on a field:

Go to the Value Selection tab in the Data Options Tool window and set the index manually.
Set the Value Selection back to Use Data Controller. Note that the Out-of-Town Controller name is mentioned.

For more information about Out-of-Town and Data Controllers, see the "Plugin Based Data Controllers" section.

Define update options and delays

In the Update Options tab, you can optionally define when the system should refrain from performing data updates, and how long to delay a data update from the moment a data change was detected.

To delay a data update, configure the following settings:

Delay: Enter the delay in milliseconds (from 0 – 3000ms). This also delays any data effects assigned to the data object(s) in question.
Update When: Check or uncheck the fields under Update When to define when the system should update data objects after detecting a data change.

For example, you can set the system not to update a graphic while it is in Program, because the goal is to wait for and “freeze” the data while the graphic is in Preview.

The Click Effects workflow supports a subset of Chyron Intelligent Interface commands. To start using Intelligent Interface, first enable the Intelligent Interface in the Integrated Data plug-in screen.

If you have selected a text field, image object, or animation object that has been enabled for use with the Intelligent Interface, then the object will assume the value of the Template Field as it is sent to your Click Effects PRIME machine via the Intelligent Interface. The Template Index value determines to what Template Field value the text field or image object will be set.

To enable or disable a text field, image object, or animation object for use with the Intelligent Interface:

Check or uncheck the ENABLE II UPDATE check box in the II Options tab.

Intelligent Interface templates are identified by a template index number. To link the graphic to a template index number, change the Reference Code of the Media Button.

The system can automatically and periodically request for value updates via the Intelligent Interface. To enable this option, select the AUTO-UPDATE option. This is useful for real-time fields that are automatically re-sent by the Intelligent Interface data server.

When Intelligent Interface is active, the Workflow continually collects Intelligent Interface commands and stores them for further use. To add fields:

Add the appropriate Object to the canvas.
With the object selected, select Intelligent Interface from the Window menu, or click the toolbar button at the top of the editor.
Enter Template ID, choose the update options, and assign a Template Field Number for the selected Object.

Note: Selecting a Template ID from the Intelligent Interface Tool Window automatically sets the Reference Code of the media button. If the Reference Code was previously set to a different code, then it will be replaced by the newly selected code.

Text objects: Oveview

Text Objects, Image Objects and Animation Objects are the three objects that can use XML Data. Please note that these are the Standard Objects and NOT the Data Objects. Data Objects use Plugin and/or COM data.

Note: For Image and Animation Objects, XML data governs which image appears, based on a Key-Value list which is covered in the next chapter. This section covers how to add the Objects to the graphic and set them up to use the Key-Value function.

Display XML data-based text in graphic

To display XML data-based text in the graphic:

Add a Text Object to the canvas. If possible, edit the text with the same number of characters as your XML data.
Verify that the Text Object is selected on the Canvas.
Open the Data Sheet Toolbar and select the data source you would like to use.

Note: Regardless of the XML type selected, your selection will appear as XPath in the Data Sheet toolbar and can be copied or edited however needed.

For a Data View source, use the dropdown to select one of the Columns displayed. These columns are defined within the Data View itself.
- Description automatically generated [ broken link ]
For all other XML sources, you can use the dropdown to select data, but it is preferred to click the ellipsis button to open the XML XPath Wizard.![A screenshot of a cell phone

Use the XML XPath wizard

Within this tool, you can click any data value designated by the icon. This adds an XPath that points to that data point.

If the data point is not visible, then you can click the expander button which moves to the next level down.

Description automatically generated [ broken lnik ]

You can navigate through the XML data, and when the desired data point is selected, note that the XPath for that datapoint is listed at the bottom.

Clicking OK returns to the Data Sheet Toolbar with that data point selected.

The Text Object should now reflect the data selected.

The XML XPath Wizard can be used for XML Sources, JSON Sources, Serial Sources and Time Sources.

At this point, the Text Object should reflect a data point from an XML source and a data point from the selected column of a Data View source.

See Section 10.4.3 for information on using Data View based Objects with a Controller.

Note: If the Text Object has not updated with the latest data, then open the Graphics Editor Window menu and select: Refresh Data Fields to update the data.

Image and animation objects

Image and animation objects are configured in the same way as a text object, but at the end of the process, no text is displayed, just the Image or Animation that was present when the object was created.

Another step is required to create a dynamic relationship between the Image/Animation Object and the XML data. Key/Value Lists are required and are explained in the next section.

Click Effects allows you to set up generic Key/Value Lists that can be used to convert data from any incoming source (data providers, XPath, Intelligent Interface, game controllers, etc.) to more meaningful information that is ready for display. This allows you to convert the source text value to custom text or to file paths that can be used for Image objects or Animation objects. Examples of conversions are:

TEN > Tennessee Titans for a Text Field
TEN > Titans.png for an Image Object
TEN > Titans.mov for an Animation Object
1 > 1st Down for a Text Field

Much like the information defined for Dynamic Image Objects and Dynamic Animation Objects, Key/Value Lists are reusable and can be assigned to multiple objects across multiple graphics.

Create a key/value list

The process of creating a Key/Value List is very similar to setting up a Dynamic Image Object or a Dynamic Animation Object.

Go to Settings > Key-Value List Settings > Key-Value Lists.
Click NEW. The Key-Value List Editor displays.
Fill out the name of the Key/Value List. Make sure to select a name that is easily identifiable, and perhaps descriptive (e.g. “Team Name List”, “Team Logo List”, “Player Animation List”).

Assign values to keys

Based on the type of graphics object to which the Key/Value List is assigned, you will either define text values for keys (for a text/data field) or file paths for keys (for an image or an animation).

First, you can define how the incoming source value is parsed prior to determining the key’s value:

Lookup:
Trim Key: Removes any leading or trailing white spaces from the incoming value.
Ignore Case: Performs a case insensitive lookup.

Default value

Use Key: Uses the incoming value if the list does not contain a match.

If you have not selected Use Key, then you can define the default value:
If defining the default value for a text field, then type in the default text value.
If defining the default value for an image/animation, then use the Select dropdown to browse for a default image/animation file.

Add list entries

To add a key/value pair to the list, you can either enter the information manually by clicking the Add button, or you can Batch import a list if you are adding file paths.

After clicking the Add button you will be presented with a screen that allows you to enter the key and the value. If you are adding a file path, the value section allows you to browse to a file path.

Add a batch of list entries

Clicking the Batch dropdown allows you to import a Key-Value List from a Directory or from a File. When batch importing from a directory, the system automatically uses the filenames in a given directory that match the pattern of filenames ending in ‘_[value].[extension]’.

The file path m:\AndruwJones_25.mov results in the following key/value association:

Key: 25

Value: m:\AndruwJones_25.mov

When batch importing from a file,you can supply the system with a prebuilt key/value pair file in XML or CSV. The system automatically parses this list and adds key/value entries based on the information found in the selected file.

Assign a Key/Value list to a Canvas object

To assign a Key/Value List to a canvas object:

Open the Graphics Editor, and then right-click the object of choice. Make sure this object is either a Text/Data field, an Image, or an Animation.
From the right-click menu, select Key/Value List Options, and then select Browse to select a Key/Value List.
From this right-click menu, you can optionally create a new Key/Value List, edit the assigned Key/Value List, or delete the assignment of the Key/Value List.

Note: Deleting the Key/Value List assignment does not delete the Key/Value List from the system.

Both Plugin-based and XML Data use the same method to open Data Controllers.

From the Main Toolbar, click the Select Controllers button. This opens the Select Controllers window and allows you to choose which Controller to show. Controllers added from either Plugin or XML sources will both appear in the list.

In general, there are two types of Controllers: Rotator and Selector.

The Rotator Controller uses information from a table and displays data, one row at a time. Example: An Out-of-Town scores graphic.
The Selector Controller presents the user with a similar table of data, but allows for a row of data to be selected. Example: Use a Player Template, where the graphic is populated based on the player selected in the controller.

Controllers based on Plugin sources have pre-generated controllers that appear when the corresponding plugin is installed. A common set of controllers is explained below.

Player Select Controller

The Player Select controller provides the ability to select a player from a lineup or roster of players. This allows creation of one template graphic with Data Objects that can serve as a player headshot slate that covers the entire team roster. Once a player is selected in the Player Select Controller, all applicable Data Objects update to reflect the selection of this player. On the right side, a list of Graphic buttons that will be updated appears, displaying their current Program/Preview state.

Out-of-Town Rotator Controller

The Out-of-Town Rotator Controller offers a valuable functionality in that it controls data fields that are marked as Rotating fields. Take, for instance, a grid of Major League Baseball scores. You can choose to display one set of scores at a time that are rotated, or you can rotate multiple scores.

To set up Data Objects for control by the Out-of-Town Rotator Controller see 7.5.7 Configuring for Rotating Data Values.

The Out-of-Town Rotator Controller has two modes of operation.

Automatic: The default mode of operation is automatic, in which it rotates Data Objects on a time-based interval.
Manual: You can also choose to manually operate the rotation of Data Objects by clicking the STOP button, followed by NEXT or PREVIOUS. The STOP button cancels the automatic rotation.

To set the interval used for automatic rotation of Data Objects, change the value in the Rotate Interval field on the Out-of-Town Controller.

Graphics in Preview or Program that contain Data Objects associated with this controller will be displayed in the Affected Graphics panel.

The end result of the controller selection is that Data Objects, Dynamic Image Objects and Dynamic Animation Objects will update with the appropriate item to match the selection.

Similar to the Plugin-Based Data Controllers, XML sources also use Selector and Rotator Controllers. However, these controllers offer more customization as they are based directly on XML data and are not pre-formatted.

When Configuring an XML-based object, there are two steps to make that object responsive to a controller change.

The Object must be assigned to the same Data View to which the Controller is assigned.
The Object has been tied to the Controller being used via the Data Update Options toolbar.

To assign a Controller to an XML Based object:

Select the Object on the Canvas and then inside the Data Update Options toolbar.
Use the dropdown to select the desired Controller.

Description automatically generated [ broken link ]

If desired, then set Delay, and Update When. The update options allow the user to control when updated data is displayed.

Note: Remember that the XML-based object must be assigned to a Data View source for a Controller to be available.

Use the Select Data Controller window to select your Data View Selector Controller. Data can be selected in the list by clicking the row you would like displayed. You can also use the Prev/Next buttons to scroll through the list and you can type a value in the locate window. Type the value in and press Enter and the selector will move to that row.

Note: XML-Based Rotator Objects do NOT have a Data Controller window. Their configuration is handled inside the Graphics Editor. When the graphic is clicked, then it will start rotating. If you don’t want it to start rotating until you send it to Program, there is a checkbox in the Editor-Controller that specifies not to update until entry to Program.