Skip to content

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

color picker

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

date time

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

    date time

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

    date time

  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.

    date time

  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.

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

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.

dropdown

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:

example

This is how the dropdown list would look like:

dropdownExample

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

console2

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

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.

Joystick

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.

Knob

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

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:

List

Reorder disabled:

List

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:

example

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

dropdownExample

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

console

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 - media hub, 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

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

    info

  2. Success: green notification with green

    success

  3. Warning: yellow notification with yellow

    warning

  4. Error: red notification with red

    error

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 typed in, by clicking the arrows next to the value or by 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 ).

number

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: allow 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: allow 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: let 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 reorder.

tabs

Text input

Parent class: Input Control

Property Type Description
maxCharacters number Set the maximum amount of character 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 its empty
  3. Multiline: tick to enable creating 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 digit the 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.