Create variables in graphics – Help Center

When you customize graphics in the Designer you can create variables for design layers which allows manual entry or data sources to display custom information in a graphic, including variables for text, colors, gradients, images/videos and live video sources. You can also create variables for data-driven design layers, including polls, scoreboards, data graphs, and more.

In Titler Live's playout interface, open a project (if a project isn't already open) and select a graphic layer in the Layer's workspace.

Tip: Want to create a new graphic? Open the Graphics Library panel and drag a design from the library to the Layers workspace.
Click the Edit Graphic button in the Preview panel. The selected graphic opens in the Designer. All variables enabled within a graphic will appear in Properties > Global > Variables.

Tip: To change the order of variables, click and hold the reorder button and drag the variable up and down to a new position. This variable order will be reflected in your Layer Properties panel from the playout interface.
If you haven't already created and customized the design layers for which you want to create variables, do so now. For details, see the articles in the Customize text, objects, and scenes section of our help center.
See the following sections to create variables. When you're finished, you can view the variables in the Properties > Global > Variables tab of the Designer and in the Layer Properties tab of the playout interface.

Important! Click the green checkmark at the bottom of the Timeline panel to confirm any changes done from the Designer so those updates are applied to the graphic layer being used for your project.

Create color, gradient, image, and pre-recorded video variables

Select an object in the Title Designer's workspace or timeline.
Click the Attributes > Object > Style tab.
Select the Color, Gradient, or Image/Video option within a style element in the Style Settings.
Mark the Variable checkbox within the style element.
If you plan to connect the variable to a data source, select a data source from the first drop-down list below the Variable checkbox. Otherwise, if you plan to manually link the data for the variable, select None or leave the selection blank.
In the drop-down list below and to the right of the Variable checkbox select a name for the variable or enter your own.

Tip: If your graphic is already connected to a data source from your Layer's workspace in the playout interface, then the drop down on the left will show that data source and the right drop down will show all variable names available for that data source.
Image/video variables only: If the Image/Video option is selected and you want to control how an image or video fits within the design layer's bounding box, select one of the following options from the drop-down list below the variable drop downs.
- Fill: The image fills all of the available space in the design layer's bounding box and maintains its proportions.
- Fit: The image fits inside the design layer's dimensions without cropping and retains its aspect ratio, which means the image may not fill the entire design layer's area.
- Stretch: The entire image resizes to fit in the entire design layer's area, but may not maintain its aspect ratio.

After you finish customizing and enabling variables on your graphic click the green check mark from the Designer, to connect your design to a data source and drive data to a variable, see one of the articles in the Connect data to graphics section of our help center.

Back to list of variables

Translate color, image/video variables

Note: Gradient variables cannot be translated.

Create a variable if you haven't already, as described in the Create color, gradient, image/video variables section.
In the Properties > Layers > Style tab, mark the Variable Translation checkbox in the 3D or 2D style layer section.
Double-click the field in the Value In column and enter the incoming value that you want to replace.
Double-click the field in the Value Out column and enter the value that you want to display in the graphic.
Repeat the previous two steps for each value that you want to translate.

Back to list of variables

Create text variables

Text variables can be names, subtitles, or any other alphanumeric information.

Select text layer in the Designer's timeline workspace.
Click the Properties > Layer > Motion & Data tab.
Mark the Text Variable checkbox in the Variable Settings section.

Note: This checkbox is already marked if you added this text object as a text variable, as described in Add and modify text layers.
If you plan to connect the text variable to a data source, select a data source from the drop-down list below the Text Variable checkbox and on the left. Otherwise, if you plan to manually enter data for the text variable, select None or leave the selection blank.
In the drop-down list below and to the right of the Text Variable checkbox select a name for the variable.

Tip: To create a new variable name, double-click the name that is already selected in the drop-down list, enter a name, and press TAB to save the new name.

Later, after you finish customizing the graphic and close the Designer. If you want to connect your graphic to a data source and drive data to the text variable, see one of the articles in the Connect data to graphics section of our help center.

Tips

To translate data in text variables (for example, to display 1st in a graphic when 1 is entered in the variable), see the Translate text variables section.
To create a variable for the text's color or other style attributes, see the Create color, gradient, image, and pre-recorded video variables section.

Back to list of variables

Translate text variables

Titler Live can read incoming data and display alternate text in a graphic. For example, if you create a scoreboard for a hockey game, which includes three periods and an intermission after the first and second periods, most scoreboard controllers represent the first intermission as a value of 1.5 and the second intermission as a value of 2.5. With the text translation variable, you can enter a value that you want to appear in the graphic for certain incoming data.

Create a text variable if you haven't already, as described in the Create text variables section.
In the Properties > Layer > Motion & Data tab, mark the Text Variable Translation checkbox in the Variable Settings section.
Double-click the field in the Value In column and enter the incoming value that you want to replace.
Double-click the field in the Value Out column and enter the text that you want to display in the graphic.
Repeat the previous two steps for each value that you want to translate.

The following illustration shows the Period variable's incoming data is 1.5 which is translated to 1st INT in the graphic.

Back to list of variables

Create data graph variables

Use data graph variables with text or shape layers to show a percentage or quantity that changes dynamically based on incoming data.

In the Title Designer's workspace or timeline, select an object that you want to represent data, or create a new object. The object must include a starting animation effect, transition, or keyframe. If the object doesn't include one of those attributes, the data graph variable will reflect the correct values, but will remain static.

Note: If you don't connect the object to a data source that is sending numeric values, or if you will connect the object to a data source other than a Facebook comment or reaction poll, the data graph variable can only be used to represent percentages by text or image.
With an object selected in the design, click the Properties > Layer > Motion & Data tab.
Mark the Data Graph Variable checkbox in the NTX Playback Features section.
If you plan to connect the data graph variable to a data source, select a data source from the drop-down list below the Data Graph Variable checkbox and on the left. Otherwise, if you plan to manually enter data for the data graph variable, select None or leave the selection blank.
In the drop-down list below and to the right of the Data Graph Variable checkbox, select a name for the data graph variable.

Tip: To create a new variable name, double-click the name that is already selected in the drop-down list, enter a name, and press TAB to save the new name.
Repeat the previous steps in this section to create additional data graph variables in your design.

Later, after you finish customizing the design and close the Designer, if you want to connect your graphic to a data source and drive data to the data graph variables, see one of the articles in the Connect data to graphics section of our help center.

Back to list of variables

Create live video variables

Live video variables are objects that link to a webcam or NDI-enabled camera.

Select a layer in the Designer's canvas or timeline workspace.
Confirm the selected layer's dimensions match the aspect ratio of the live video source and, if necessary, resize the layer.

Note: If the layer's dimensions don't match the aspect ratio of the video source, the live video will cropped to the layer's dimensions but retain the aspect ratio of the video source.
Click the Properties > Layer > Motion & Data tab.
Mark the Live Video Variable checkbox in the NTX Playback Features section.
Enter a name for the variable in the available field.

Later, after you finish customizing the design click the green checkmark at the bottom of the Timeline workspace panel, you can select a video source for the graphic's live video variable from within the playout interface from the Layer Properties panel. See Update variables in live graphics for details.

Back to list of variables

Create visibility variables

A visibility variable is a layer that appears in a graphic only when data is present for that layer. When data is not present, a visibility variable layer is hidden.

Select an object in the Designer's canvas or timeline workspace.
Click the Properties > Layer > Motion & Data tab.
Mark the Visibility Variables checkbox in the Variable Settings section.
If you plan to connect the visibility variable to a data source, select a data source from the drop-down list below the Visibility Variables checkbox and on the left. Otherwise, if you plan to manually enter data for the data graph variable, select None or leave the selection blank.
In the drop-down list below and to the right of the Visibility Variables checkbox select a name for the variable.

Tip: To create a new variable name, double-click the name that is already selected in the drop-down list, enter a name, and press TAB to save the new name.

Later, after you finish customizing the graphic and close the Designer, if you want to connect your graphic to a data source and drive data to the visibility variable, see one of the articles in the Connect data to graphics section of our help center.

Back to list of variables