Components

Button

Parent Class: Content Control

Button component is a clickable component. When adding a button (as well as most other components) you can change the text that appear on it by typing the desired name under Common → text.

Tip

You should set the button name to a descriptive name that fits Javascript naming conventions. The button text does not need to fit the conventions.

Check box

Parent Class: Input Control

Property	Type	Description
Value	Boolean	set the starting value to true or false

Checkbox components are boolean components that can be used to set boolean values.
When adding a checkbox you will find a new field under “Common” called - value, which can be switched for true or false.

Color picker

Parent Class: Input Control

Property	Type	Description
showText	Boolean	If set to true, the text value of the color is visible

Color picker components can be used for changing colors during run time.
The color picker is made of the following elements:

1. Preview of the selected color
2. UV map of the color hues
3. Colors array - effect the colors in the UV map
4. Color opacity
5. Option to enter a color in an hex color code

Date time picker

Parent Class: Input Control

Property	Type	Description
mode	DateTimePickerMode	The mode of the picker (Time/Date/Date Time/Week/Month/Year).
format	String	The format of the value.
hint	String	Text that appears on the component when it is empty to hint the user of its use.

Info

When mode is set to TIME, value is in seconds
e.g. 00:01:02.35 → 1 minute, 2 seconds, 350 ms → 62.35
When mode is not set to TIME, value is the milliseconds since 1970, in UTC e.g. 0 => 1/1/1970 00:00:00 UTC
To get date use new Date(value).toISOString() → 2020-06-01T10:30:00.000

DateTime picker component can be used to change dates and set timers during run time. When dragging and dropping a Datetime Picker you can find under the Properties → common a “Mode” value, which can be used to set the kind of picker:

1. Time picker: can fill in a time by HH:MM:SS.000 format.
   Supports up to 3 numbers after the decimal

   

2. Date picker: let you select a date from a calendar view

   

3. Date and time picker: let you select a date from a calendar view and select a time by picking for HH:MM:SS format.

   Warning

   date and time picker does not support milliseconds.

   

4. Week picker: let you select a week from a calendar view.

5. Month picker: let you pick a month from a grid view.

6. Year picker: let you pick a year from a grid view.

Dial

Parent Class: Numerical Input

Dial component let's users emulate a dial. users have the freedom to set the limit of it's values and the visual look of the dial.

Property	Type	Description
Start Angle	number	the Angle in which the thumb should start
Hole	number	The size of the inside radius.
Length	number	The length of the dial path.
Min/Max	number	Set the minimum and maximum values of the Dial.
Step	number	The speed to achieve the maximum value.

Dropdown

Parent Class: Items Control

Property	Type	Description
showSearch	Boolean	If set to true, the user can search the dropdown list

Dropdown component lets you create your own dropdown selector with fillable options that is usable during run time.
When dragging and dropping a dropdown component you can find under properties → common, an “items” value. You can fill in the dropdown options under value, each option separated with a new line.
By checking the “Show search” option you will be able to fill in search words for the drop down options during preview mode or live show.

Key Value Pair (KVP)

The Dropdown component (as well as the list component) lets you assign a Key Value Pair (KVP) for each item in the list.
This can be achieved by entering the Key and Value, seperated with a '|', in the Items property of the component.

Example: Key Value Pair definition in the UI Properties window:

This is how the dropdown list would look like:

Getting the value from the list

When you retrieve the value, whether via code, or by assigning the component to a control field, the key will now be the returned value.

For example, running the following code in the example above, when selecting "Canada", "CA" will be returned.

Script Window

dropdown.onChange = () => {
  console.log(dropdown.value)
 }

Console Window

Group

Parent Class: Control

Group components let you control the layout of your UI by grouping other components under it.
When dragging and dropping a group component you will get a border, which you can resize. You then can drag and drop other components into that border and arrange them as you like inside.

moving the bordered box of the group will move all the element inside with it.

Icon

Parent Class: Control

Icon Component let you add Icons to your UI.

Property	Type	Description
Spin	boolean	Turn on/off the spinning of the icon
Flip	Horizontal/Vertical/Both	flips the Icon on the direction
Rotation	None/180/270/360	Rotates the Icon in the specified angle

Joystick

Parent Class: Control

Joystick component let you emulate a joystick in your UI. Check Draggable Locator for an example of the use of this component.

Property	Type	Description
Horizontal	axis	Assign the axis for the horizontal movement of the Joystick.
Vertical	axis	Assign the axis for the vertical movement of the Joystick.
Step	number	The speed to achieve the maximum value.
Min and max	vector	Set the minimum and maximum values of the Joystick.
Inner Color	Color Picker	The color of the Joystick Thumb.
Outer Color	Color Picker	The color of the Joystick Pad.
Disabled	boolean	Set if the Joystick is enabled/disabled by default.

Knob

Parent Class: Numerical Input

Knob component lets you emulate a Knob in your UI.

Property	Type	Description
Min/Max	number	Set the minimum and maximum values of the Knob.
Step	number	The speed to achieve the maximum value.
Range	number	The range of value for every rotation of the Knob stick.
Start Angle	number	The Angle in which the thumb should start.
Hole	number	The size of the inside radius.

Label

Parent Class: Content Control

Label components let you add fixed text into your UI , labels are used to make headings and create easy to understand UI.

List

Parent Class: Items Control

Property	Type	Description
allowReorder	boolean	Turns on and off the ability to rearrange the list while in preview / on air.

Member Procedures

Event	Description
onItemReorder	Triggered when an item is moved inside the list.

List components let you create a list of options and select a value for the list from its options.

When dragging and dropping a list component you can find under properties → common, an “items” value, you can fill in the list options under value, each option separated with a new line.

You can set the default value of the list under Value, and you can make the list arrangeable during run time by ticking “Allow reorder”.

Reorder enabled:

Reorder disabled:

Key Value Pair (KVP)

The List component (as well as the Dropdown component) lets you assign a Key Value Pair (KVP) for each item in the list.
This can be achieved by entering the Key and Value, seperated with a '|', in the Items property of the component.

Example: Key Value Pair definition in the UI Properties window:

This is how the list would look like (when choosing the 3rd item):

Getting the value from the list

When you retrieve the value, whether via code, or by assigning the component to a control field, the key will now be the returned value.

For example, running the following code of the example above, when selecting "Openning Clip", "C093546I" will be returned in the console.

Script Window

list.onChange = () => {
  console.log(list.value)
 }

Console Window

Media

Parent Class: Control

Property	Type	Description
value	string	The path to the media file (using mediaHub, Studio storage or computer Pass).
initial	string	The path to the media file visual hint (a more in depth explanation below).
fit	mediaFit	Set play mode for the media: keep ratio / keep ratio and scale down / stretch.
controls	boolean	Show or hide media control.
loop	boolean	Turn on and off playing in loop.
muted	boolean	Mute or play sound.

Member Procedures

Event	Description
onChange	Triggered when new media item is loaded

Media components allow you to send media files (images and videos) from your machine to the rendering engine via Erizos Studio.
Under properties → common you will find the following fields:

1. Initial: allow you to choose a media file that will be presented to the operator, but will not be sent to the engine. The initial field should be used to give the operator a visual hint or as a placeholder.
2. Value: this is the media file that will be sent to the engine on take-in. The Value of the Media can be:
   1. Mediahub Asset
   2. Hosted media asset URL (http)
   3. Local asset (by using path:// or file://)
3. Fit: single select option. Choose from: keep ratio and size, keep ratio and scale down, or stretch to fit.
4. Videos: each icon is a toggle button: show controls, play in loop and mute.
5. Root folder: when opening media file selection - which folder will open as the starting point. If left empty the root folder will be the project root folder.

Tip

The media value can be changed during runtime using scripting. For example the media file can be changed based on a value of a List component.

When using Local Assets as your media value, make sure Erizos Studio can access the path you specified. You can check more details regarding permissions in this link.

Media Browser

Parent Class: Media

Property	Type	Description
source	MediaSource	Select media handle option - MediaHub, storage or via path.
type	MediaType	Select type from: image/video, image, video, audio or sequence.

Media browser components are very similar to Media components, but in addition to the media components functionality the media browser allows the operator to click on the media browser component and select files from the machine while in preview / on air.

Under properties → common there are few new fields:

1. Source: MediaHub, storage or a path. Default will use the project default setting for media files.
2. Type: choose what kind of media will be used.
3. Can crop: whether Erizos Studio can crop the media to fit.

Notification

Parent Class: Control

Property	Type	Description
type	Enum	Error, warning, success, info.
title	string	Header of the notification.
message	string	The main body of the notification.
showIcon	boolean	Show or hide the notification icon.
closable	boolean	Turn on or off the ability to close the notification.

Notification components work like an ad-hoc label. The notification can be used to notify the user with some pre-made stylization and functions.

Under properties → common you will find a Type drop down under which you can choose the type of notification with it premade style form:

1. Info: blue notification with blue

   

2. Success: green notification with green

   

3. Warning: yellow notification with yellow

   

4. Error: red notification with red

   

You can change the notification title and add a message if you would like.

Tip

By ticking the closable option you are allowing the user to close the notification by clicking on , as seen in the Success notification example.

Number Input

Parent Class: Numerical Input

Property	Type	Description
precision	int	Set how many digit the save after to decimal (up to 4).

Number input components lets you set a float value. The value can be set by typing it in, clicking the arrows next to the value, or holding and dragging the component left or right while in preview/on air.

Under properties → common you can set default value, set the min and max values for the float, change the step size (for clickable and draggable) and the value precision (up to 4 digits after the decimal).

Radio

Parent Class: Items Control

Property	Type	Description
direction	Enum	Horizontal , vertical.
radioStyle	Enum	Radio, button.

Radio components are another way of creating a list, using buttons. Under properties → common you will find the following fields:

1. Value: default value.
2. Items: here you can fill in the different options, separated by a new line.
3. Direction: allows you to control whether the buttons are stacked horizontally or vertically.
4. Style: using default button style, or more stylized buttons.

Slider

Parent Class: Numerical Input

Property	Type	Description
vertical	boolean	Set the slider orientation horizontally of vertically .
reverse	boolean	Set if the slider start from the right or left.

Slider components are used to set a numerical value that is controlled by a slider. Under properties → common you will find the following fields:

1. Value: default value.
2. Min and max: set the minimum and maximum values of the slider.
3. Step: the size of change dragging the slider makes. Support up to 4 digits after the decimal.
4. Vertical&Reverse: allows you to adjust the sliders to you needs - horizontal or vertical slider, and which side is the start.

Switch

Parent Class: Input Control

Switch components are used to control boolean values.
Under properties → common you can set the default value to true or false, and set text that will appear on the switch for each.

Tabs

Parent Class: Input Control

Tab components are another variation of ordering components.
By dragging and dropping a Tab component you will create a space that can have many facades, based on the tab you are on.
Under properties → common you will find the following fields:

1. Position: lets you select to which border the tabs will be docked.
2. Tabs: by pressing the + icon you can add new tabs. Each tab can be renamed, and reordered.

Text input

Parent class: Input Control

Property	Type	Description
maxCharacters	number	Set the maximum amount of characters for the text input.
hint	string	Set text that will be shown when the text field is empty.

Text input components are used to set text values and send strings to the engine.
Under properties → common you will find the following fields:

1. Value: default text value.
2. Hint: text that will appear in the text input field when it's empty.
3. Multiline: tick to enable creating a new line in string.
4. Limit: fill in an int value to limit how many characters are allowed as input.
5. Read only: makes the text input uneditable.

Vertex Input

Parent Class: Numerical Input

Property	Type	Description
precision	number	Set how many digits to save after the decimal (up to 3).
linked	boolean	Set all the vector values to duplicate each other.

Vertex input components are used to fill in vector components and send vectors to the engine. Under properties → common you will find the following fields:

1. Type: you can choose between 2 dimensional vector, and 3 dimensional vector.
2. Value: the default values of the vector.
3. Min and max: set the min and max value for the vector.
4. Precision: set how many digits after the decimal are available, support up to 3 digits.
5. Linked: tick to keep the proportions between the vector values.
6. Step: the speed to achieve the maximum value.

Error

Value of 0 in a vector value will cause a problem, if you need any dimension to by flat we suggest using 0.001.

Web Page

Parent Class: Control

Property	Type	Description
URL	link	The Link of the Page to be displayed.

Web Page component can be used to display Web Pages on your UI. It can also be used to send or receive data from UI Builder to the attached Web Page and vice versa. Check Webpage Component for an example of the use of this component.