logo

Designer

The ContentAssist Visual Designer provides an easy and user-friendly experience with the Photoshop module to create Visual Radio content.

Image without caption
ContentAssist overview

8 Steps to design Visual Content

  1. Create a Visual via ContentAssist -> VisualDesigner.
  1. Create a name for the Visual and Check labels in the general properties.
  1. Add multiple elements to fill in your Visual. Think about dynamic ticker texts (with RSS feed integration), the weather forecast or a Cover that is connected directly to the preferred track from the AutomationLink (NPCoverAssist).
  1. You can edit the size by clicking on an added element within the black area.
  1. Do you want to add media (images) to the Visual? Go to Media Management and upload your content. Reload the ContentAssist Designer to insert the image in your Media element and change the size.
  1. Make sure the layers with an element are in the same order in order to show your audience the right layer.
  1. Sidenote: when you save the Visual for the first time, the Visual will be added as a dynamic scene in OBS. We discourage you to edit this scene in OBS, because VisualRadioAssist overwrites this scene automatically.
  1. Choose the Visual as a TriggerItem for your MICAssist, ItemAssist, TriggerPresets and more!
Do you want to know more about designing Visual Content? Read the technical documentation of the ContentAssist or Read the technical documentation of the Visual designer

Properties

Property
Description
Name
Identification of the Visual.
Server
The Visual could be visible at the chosen Server and uses all data (AutomationLink, NPCoverAssist and Sources) that belong to this Server.

Elements

The VisualDesigner gives the opportunity to compile content of your Visual, based on different elements.

Text

One of the most important goals you want to achieve with the Visuals is informing and engaging the viewer using specific text. Therefore, we created Text Element. You can add text easily that connects to different modules and makes them available. Every Text Element has its own style, color and functionalities. A Text Element consists of one of more Sub Elements:
Sub Element
Description
Raw
Simple text
Date/time
Pick a date/time format and enter the current time.
RSS
Load a RSS feed
URL
Load the raw text content of an URL. For an exmaple, a text file of your own website.
AutomationLink
Link your current or upcoming track to the AutomationLink track data (Title, Artist, other inputs of your radio automation).
ScheduleAssist | Link to your LIVE-program consisting of information about the program and program makers. |

Media

Upload media to your ContentAssist overview. The next step is to add these media in the Visual.

Color

Add an element to fill up the background with a color of your choice.

NPCoverAssist

Show the NPCover image of the playing track or the 4 upcoming track(s).

Visual

Link a PiP (Picture-in-Picture) directly to another Visual that you created before. This is useful when you create a Ticker Visual with a long text file and you want to put this long text file in every Visual. To make this happen, you choose the โ€œTickerโ€ Visual and create the element with the size of the main Visual (using the โ€œfillingโ€ button).

Source OBS-only

Use a hardware Source of OBS. Examples of a hardware Source:
  • Connected camera
  • Large OBS Media Source (used for .mov videos)
  • Specific Audio Sources
When adding the element to a Visual, select one of the available Sources. The Source Element is marked as a transparaent red screen within the VisualDesigner. In the Visual Output the element is invisible and will be overwriten automatically by the Source of OBS.
{info} For server/systeembeheerders: Create a new Source within OBS with the name SOURCES.

Your element

Do you still miss an element you would like to use in the Visual Designer? Let us know via support@visualradioassist.live.

Iframe

Create a frame of another website that you want to show directly 1:1 in your Visual. More information about iFrames

Layers

A visual consists of multiple layers. Every layer consists of an element. You can move the layers up/down to determine which elements should be visible.
{info} Tutorial is coming soonโ€ฆ Still fire burning questions about this part of the software? [Please, get in touch with us.] (/{{version}}/support/contact)