Visual Designer

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 well

`ALBUM COVER`, `ARTIST COVERSCHEDULING 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 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.

Visual Designer

About Visuals

Creating your first Visual

Available Layer Types

TEXT

SHAPE

MEDIA

DYNAMIC MEDIA

VIDEO MEDIA

ALBUM COVER, ARTIST COVERSCHEDULING MEDIA

HTML

VISUAL

SNIPPET

🆕 CONTAINER

🆕 STACK