Skip to main content
Visuals are just like graphics you create in Illustrator, Photoshop or animate in After Effects. But instead of developing complex transitions and data integrations yourself, Visual Radio Assist already provides a full radio experience to kickoff your Visual Radio Graphics.Looking for taking a extra step in a technical direction (working with CSS or JS)? Check the Develop Visual Graphics docs.
Visual Templates

​
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 Using live/dynamic data 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.
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 Hub 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 Using live/dynamic data 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 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 Using live/dynamic data in HTML layers? This enables you to automatically populate the custom HTML with all the available dynamic data in the system.
Also check Base Layers 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 Visual Snippets. 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.

​
BODYMOVIN

Bodymovin / Lottie Animation 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: 
# NP Music Artist + Title
{{ vra.np.music.artist }}
{{ vra.np.music.title }}

# Scheduling Onair Program Title
{{ vra.schedule.onair.title }}
Refer to the VRA Data 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: 
# data structure:
{
  "vra": {
    "variables": {
      "field": {
        "list": ["item1", "item2", "item3"]
      }
    }
  }
}
To get item2 you should use the following path: 
{{ 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): 
{{ 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: 
# 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.

​
Auto- height and width

With the Text Sized box option from update Trick: box with color, text sized with padding 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 for CSS

​
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.