The Visual Designer is a powerful tool to design animated graphics with dynamic content. This documentation covers everything you need to know to get started with Visuals in Visual Radio Assist.
About Visuals
Creating your first Visual
You can start your design by creating a new Visual on https://visualradio.cloud/outputs/designer
To save a Visual you need to provide a name and add at least one layer to the design. After youβve saved the Visual, the item is available in the complete VRA Cloud.
Playback
In the Output Editor you get the option to select the fresh Visual for playback, this requires you to set a fixed duration for the Visual playback time.
Available Layer Types
Instead of the default plain layers you create in your existing design software, the Visual Designer gives you a lot of power by choosing one of the following Visual Radio specialized layer types:
TEXT
The text layer is one of the most used elements in the Visual Designer. The element gives you the ability to display your own input and style it with all the well-known text properties
Refer to Visual Designer for the usage of dynamic data in your text elements. With dynamic data you are able to show for example Nowplaying or Scheduling information in the Visual.
Tip: Use the Text Sized Box option in the properties panel in combination with setting a background color to create a βtext blockβ which automatically sizes according to the text length
SHAPE
The shape Layer enables you to create a simple creative layer containing a background and/or border
MEDIA
With the Media Layer you can select still-image from your Media Assets list. The Visual Player in the Outputs will automatically load the correctly sized version of this image and will make sure that the Visual transition can only be started after the media is loaded.
DYNAMIC MEDIA
Dynamic Media layer allows you to use an external still-image URL in the Visual. This image URL can be fixed or dynamic using data from one of your configured Output Variables or AutomationLink artist information. The Dynamic Media field expects you to use the exact same format as the Text Layerβ dynamic data, instead for the Dynamic Media the content should always resolve to a accessible URL.
Refer to Visual Designer for the different ways to utilize dynamic data for these urls.
VIDEO MEDIA
To show video like you are used to in the Output Player, but within a Visual (PiP), you can utilize the Video Media Layer. The Visual Player will make sure the video is buffered correctly in the highest available quality. The Video Media Layer properties also gives you options to play back public
HLS
streams or other video files that are available on an external url. These properties also allow you to link a Output Variable value to the Video player in the Visuals.In a future update
WebM VP9
encoded Alpha videos are supported as wellALBUM COVER
, ARTIST COVER
SCHEDULING MEDIA
These three layers refer to the respective live data in the VRA system. Album and Artist Cover layers will refer to the selected playing item from the AutomationLink Data.
The Scheduling Media is particularly useful when wanting to display the currently attached media in the Scheduling information.
Fallback Media
When one of the previously selected live data items is not available (for example when no now playing is available or scheduling is offair) the fallback media will be used.
HTML
The HTML Layer gives you the ability to embed your own HTML code 1:1 in the designer. The HTML will render in the
div
sized and positioned by the Layerβ properties. Refer to Develop with VRA for even more ways to customize your Visuals. VISUAL
The Visual Layer makes it possible to create PiP links between existing Visuals. The Visual that gets selected is directly embedded in the layer, which makes it easy to re-use certain elements.
Did you know that you can also utilize the Visual Designer in HTML layers? This enables you to automatically populate the custom HTML with all the available dynamic data in the system.
Also check Output Settings for re-using certain elements (like a station logo) in every Visual automatically.
Because the HTML layer is rendered dynamically on every relevant data change injecting custom
JS
this way is not supported and the code will not be executed. Take a look at the Output Settings and Develop with VRA for these Custom JS
use cases.SNIPPET
Make use of the developed Snippets from Output Settings. The selected snippet is sized and positioned relatively to the size of the layer.
πΒ CONTAINER
Create a βwrapperβ to wrap multiple other layers. You can later use this Container Layer to add extra CSS styling or make animations clip from a direction.
πΒ STACK
Stack Layers are very useful when you want to
π‘Β Tip: by using percentage based layer sizing the Stacking effect will work the best, because layers will take for example 50% of their parent Stack Layer.
Missing some graphic functionality or layer in the Visual Designer? Let us know via the Feature Request option on https://cloud.visualradioassist.live/support
Resolution and Dimensions
The Visual Designer provides a canvas with the virtual dimensions 1280x720 to make it easy to calculate sizing and positions of 16:9 graphics. But the output of the Visual is automatically scaled to every 16:9 you want to use. For example, the graphic will look identical on Full HD and 4K outputs.
Using live/dynamic data
Multiple Layer types support the use of dynamic data to create a display the various data elements that are already available and live-updated in the system. To make use of this data you use βcurly bracketsβ characters to define the data element you want to use.
Every data element starts with
{{
and ends with }}
. Between these curly brackets you type the data selector: always starting with vra.
following the path to the specific data you want to live-display. Here are a couple examples:yaml# NP Music Artist + Title {{ vra.np.music.artist }} {{ vra.np.music.title }} # Scheduling Onair Program Title {{ vra.schedule.onair.title }}
Refer to the Data Context documentation to browse all the fields, available by default in your VRA set-up.
Lists
When data is in an array format (list like) you can access the indexed data by the using a number in the data path:
json# data structure: { "vra": { "variables": { "field": { "list": ["item1", "item2", "item3"] } } } }
To get
item2
you should use the following path:yaml{{ vra.variables.field.list.[2] }} # outputs: item2
Non-standard fields
A note on non-standard fields with special characters in the field name, other than
_
(for example content:encoded
):yaml{{ vra.variables.api_x.field.deep-123.1.content:encoded }} # does not work {{ vra.variables.api_x.field.[deep-123].[1].[content:encoded] }} # works
You need to configure / have access to the different modules (Scheduling/AutomationLink) of VRA to use data from them.
All the selected data via the braces is automatically updated and in-sync with your Visual Radio setup.
More on Literal Segments: https://handlebarsjs.com/guide/expressions.html#literal-segments
Link Data in Text Layers
In Text Layers you can type β/β to use a popup to browse the available data elements. You can also press the icon on the Text Editor.
Output Variables
β
Display encoded/unserialized HTML
To make sure the HTML from your Variables for example is rendered as HTML and not serialized HTML you must use extra wrapping bars to confirm this dangerous step:
yaml# Before {{ vra.variables.html_content }} # After: renders html content {{{ vra.variables.html_content }}}
Condition based text and other helpers
To make even more use of the powers of the templating language of the Visuals, you can check the following documentation. For example to create condition based templates with
#if
conditions.Built-in Helpers | Handlebars
You can use the if helper to conditionally render a block. If its argument returns false, undefined, null, "",
0, or [], Handlebars will not render the block.
https://handlebarsjs.com/guide/builtin-helpers.html#if
Auto- height and width
With the Text Sized box option from update Introduction of the Media Server you could get more creative by automatically sizing the background box in text layer.
Weβve added this functionality to a more generic level, enabling more layer types to make use of auto sizing, which wraps the layer size boundaries around the layerβs content. Even if this content changes.
Transitions
Visuals will automatically transition in when being played in an Output. When the playback is done or the Visual is paused/stopped the Visual is automatically transitioned out.
To learn more about the Visual Transition Lifecycle and customize it to your own liking, check the documentation at Layer Transition Lifecycle
Layer Conditions
β
π Locking Visuals for other users
Preventing other users from saving edits of layers of-/the entire Visual is possible by using the lock functionality in the Editor. Learn more at Lock Resources
In a future update the Visual can also be locked for simultaneously editing the same Visual by different users, preventing conflicts.