Skip to content

UI Builder - Classes

Button

inherits ContentControl

Checkbox

inherits InputControl

Property Type Description
text string The label text for the checkbox

Clock

inherits InputControl

Property Type Description
format string Specifies the format in which the time should be displayed in the clock.
canSetDirection boolean Indicates whether the clock should have a direction field.
canStop boolean Indicates whether the clock should have a stop time field.

ColorPicker

inherits InputControl

Property Type Description
showText boolean Indicates whether to show the text input for the color value
resetValue string The reset value for the color picker (Optional)
placement string The position of the color picker

ContainerControl

inherits Control

Property Type Description
children [read-only] Control[]
Function Returns Description
add(...controls: Control[]) this Add control(s) to content

ContentControl

inherits Control

Property Type Description
text string

ControlBody

Base class for all control types

Property Type Description
name [read-only] string The name of the control.
elementType [read-only] ElementType The element type
disabled boolean Determines whether the control is disabled or not.
left number The left position of the control in pixels.
top number The top position of the control in pixels.
width number The width of the control in pixels.
height number The height of the control in pixels.
minWidth number The minimum width of the control in pixels. Optional.
minHeight number The minimum height of the control in pixels. Optional.
maxWidth number The maximum width of the control in pixels. Optional.
maxHeight number The maximum height of the control in pixels. Optional.
anchors Anchor[] The UI anchors of the control.
visible boolean !!! note
shorthand for style.visibility, setting true / false will affect style.visibility to visible / collapse
returns true only if the control and all of it's parents are visibile

style|Properties|The styles of the control as CSS properties.

Function Returns Description
setPointerCapture(pointerId: number) void Method to set pointer capture, given a specific pointer ID.
releasePointerCapture(pointerId: number) void Method to release a captured pointer, given a specific pointer ID.
emit(event: string, args: Record<string, any>) this emit an event

ControlEvents

Property Type Description
click event Event handler for the 'click' event.
doubleClick event Event handler for the 'doubleClick' event.
mouseDown event Event handler for the 'mouseDown' event.
mouseMove event Event handler for the 'mouseMove' event.
mouseUp event Event handler for the 'mouseUp' event.
wheel event Event handler for the 'wheel' event.
pointerDown event Event handler for the 'pointerDown' event.
pointerMove event Event handler for the 'pointerMove' event.
pointerUp event Event handler for the 'pointerUp' event.
Function Returns Description
on(event: string, listener: (...args: any[]) => void) this Method to add a listener for a specified event. 'event' parameter is the name of the event and 'listener' is the callback function to be invoked when the event is emitted.
off(event: string, listener: (...args: any[]) => void) this Method to remove a listener for a specified event. 'event' parameter is the name of the event and 'listener' is the callback function to be removed.
removeAllListeners(event: string) this Method to remove all listeners for a specified event. 'event' parameter is the name of the event.

DataService

Function Returns Description
query(source: string, query: string, ...args: (string | number | boolean)[]) Promise Executes a query on a data source with the specified parameters
feed(path: string) Promise Executes a feed query

DateTimePicker

inherits InputControl

Note

DateTimePicker

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.000Z

Property Type Description
mode DateTimePickerMode Determines the mode of the DateTimePicker. For example, it could allow for picking dates, times, or both.
format string Specifies the format in which the date/time should be displayed in the DateTimePicker.
hint string A hint that is displayed to the user in the DateTimePicker when it is empty. This could be a placeholder text guiding the user on the expected input format.
resetValue number The resetValue is the value that the DateTimePicker will revert to when a reset action is performed. It is represented as a numeric value (for instance, a timestamp).
Function Returns Description
toString(format: string) void Function displays date, parsing format as string

DialBody

inherits Control

Property Type Description
value number The current value of the input control
resetValue number The value that will be set when a reset action is performed.
precision number Specifies the precision of the dial, i.e., the number of decimal places the dial value should have.
min number The minimum value allowed
max number The maximum value allowed
step number The increment/decrement step

DialEvents

Property Type Description
change event

inherits ItemsControl

Property Type Description
showSearch boolean Allows users to filter the options.
allowClear boolean Allows users tp clear selected value
loading boolean Show an indication that data is being loaded

File

Function Returns Description
read(filename: string, encoding: string) Promise Method to read the content of a file. 'filename' parameter specifies the file to read and 'encoding' parameter defines the character encoding of the file. Returns a promise that resolves to the content of the file.
write(filename: string, data: any, encoding: string) Promise Method to write data to a file. 'filename' parameter specifies the file to write to, 'data' parameter is the content to write, and 'encoding' parameter defines the character encoding of the file. Returns a promise that resolves when the writing process is complete.
list(directory: string) Promise Method to list all files in a directory. 'directory' parameter specifies the directory to list files from. Returns a promise that resolves to an array of filenames in the directory.

GlobalVariables

Function Returns Description
exists(key: string) Promise Checks if key exsits
get(key: string) Promise Gets a GlobalVariable value
set(key: string, value: any) Promise Sets a GlobalVariable value, null will remove the key
remove(key: string) Promise Deletes a GlobalVariable
keys() Promise Gets a list of all keys
subscribe(key: string) this Subscribe for key notifications, not specifing a key will register to all keys changes
unsubscribe(key: string) this Unsubscribe for key notifications, not specifing a key will unregister from all key changes
on(key: string, listener: function) this Listen to a specific key for all type of event (Created / Updated / Removed).
once(key: string, listener: function) this Adds a one-time listener function for the key value change. The next time key is triggered, this listener is invoked and then removed.
off(key: string, listener: function) this Removes a specific key callback, not specifing a callback will remove all callbacks to this key.

IAlertMessage

IAlertService

Function Returns Description
success(text: string, duration: number) IAlertMessage Shows a success message, duration (in seconds) will keep message shown
success(message: IAlertMessage, text: string, duration: number) IAlertMessage Update a message to a success message, duration (in seconds) will keep message shown
warning(text: string, duration: number) IAlertMessage Shows a warning message, duration (in seconds) will keep message shown
warning(message: IAlertMessage, text: string, duration: number) IAlertMessage Update a message to a warning message, duration (in seconds) will keep message shown
error(text: string, duration: number) IAlertMessage Shows an error message, duration (in seconds) will keep message shown
error(message: IAlertMessage, text: string, duration: number) IAlertMessage Update a message to an error message, duration (in seconds) will keep message shown
info(text: string, duration: number) IAlertMessage Shows a info message, duration (in seconds) will keep message shown
info(message: IAlertMessage, text: string, duration: number) IAlertMessage Update a message to an info message, duration (in seconds) will keep message shown
loading(text: string, duration: number) IAlertMessage Shows a loading message, duration (in seconds) will keep message shown
loading(message: IAlertMessage, text: string, duration: number) IAlertMessage Update a message to a loading message, duration (in seconds) will keep message shown
destroy(message: IAlertMessage) void Destroy a specific message or all shown messages

IAngleDeltaChangeEvent

inherits IDeltaChangeEvent

Property Type Description
angle number

IChangeEvent

inherits IEvent

Property Type Description
value TValue The new value associated with the change event

IClockValue

Property Type Description
mode ClockMode The mode value of the clock
start number The start value of the clock
stop number The stop value of the clock
direction ClockDirection The direction value of the clock

Icon

inherits Control

Property Type Description
icon IconName Specifies the name of the icon to be displayed. This should correspond to a name in an icon set.
spin boolean Determines whether the icon should spin. A true value results in continuous 360-degree rotation.
flip horizontal|vertical|both Controls the direction of the icon flip. It can be 'horizontal', 'vertical', or 'both'.
rotation 90 | 180 | 270 Sets the degree of rotation for the icon. Valid values are 90, 180, or 270.

IContextApi

Property Type Description
engine (engine: string) => IEngineApi Method to set or retrieve the current engine context. Takes an engine name as parameter.
engines IEngineDataApi[] A list of APIs for all available engines.
page IPageApi Provides the API for the current page context.
playlist IPlaylistApi Provides the API for managing playlists.
profile IProfileApi & ((profile?: string) => IProfileTargetApi) & ((profile: string, channel: string) => IProfileChannelTargetApi) Provides the API for managing profiles. It also contains two methods: one for targeting a specific profile and another for targeting a specific channel in a specific profile.
profiles IProfileDataApi[] A list of APIs for all available profiles.
log ILogApi API to add to the log
gpio IGpio GPIO API

IDeltaChangeEvent

inherits IChangeEvent

Property Type Description
delta TValue

IEngineApi

Function Returns Description
sendCommand(command: object | string) void Method to send a command to the engine. The command parameter can either be an object or a string, depending on the engine's API.
clear(layer: string) void Method to clear a specific layer in the engine. If no layer is specified, it defaults to clearing all layers.
cleanup() void Method to cleanup the engine, usually used to remove unused assets or data.
cache(asset: string, verify: boolean) void Overloaded method to cache an asset in the engine for faster access. The asset parameter is a string representing a single asset.
cache(assets: string[], verify: boolean) void Overloaded method to cache multiple assets in the engine for faster access. The assets parameter is an array of strings, where each string represents an asset.

IEngineDataApi

inherits IEngineApi

Property Type Description
_id string Unique identifier for the engine.
system string System name the engine belongs to.
name string Name of the engine.
address string Network address where the engine can be accessed.
port number Network port where the engine can be accessed. Optional.
type 'OUTPUT' | 'SNAPSHOT' Indicates the type of the engine. It can be either 'OUTPUT' or 'SNAPSHOT'.
agent boolean Flag indicating if the engine is an agent. Optional.
connected boolean Flag indicating if the engine is currently connected. Optional.

IEvent

Property Type Description
event string The name or type of the event
sender TControl The control that triggered the event
Function Returns Description
stopPropagation() void Stops the propagation of the event

IExportsObject

Function Returns Description
onResize(e: IResizeEvent) void Event handler for the resize event
onRead(e: IPageEvent) void Event handler for the read event of a page
onPageChange(e: IPageEvent) void Event handler to payload change (with a 300ms debounce)
onPageChangeRaw(e: IPageEvent) void Event handler to payload change
onTakeIn(e: IPageEvent) void Event handler for the take in event of a playlist item
onTakeOut(e: IPageEvent) void Event handler for the take out event of a playlist item
onContinue(e: IPageEvent) void Event handler for the continue event of a playlist item
onTrigger(e: IPageActionEvent) void Event handler for the continue event of a playlist item
onPreviewIn(e: IPageEvent) void Event handler for the preview in event of a playlist item
onPreviewOut(e: IPageEvent) void Event handler for the preview out event of a playlist item
onPreviewContinue(e: IPageEvent) void Event handler for the preview continue event of a playlist item
onPreviewTrigger(e: IPageActionEvent) void Event handler for the preview trigger action event of a playlist item
onShortcut(e: IShortcutEvent) void Event handler for the shortcut event, this will be triggered when a user uses a keyboard shortcut
onGlobalVariableCreated(e: IGlobalVariableEvent) void Event handler when a global variable is created
onGlobalVariableUpdated(e: IGlobalVariableEvent) void Event handler when a global variable is updated
onGlobalVariableRemoved(e: IGlobalVariableEvent) void Event handler when a global variable is removed

IGlobalVariableEvent

inherits IEvent

Property Type Description
key string The key of the global variable event
value any The value of the global variable event (optional)

IGpio

Function Returns Description
simulate(device: string | number, input: number) Promise Simulate a gpio trigger
write(device: string | number, input: number, value: boolean) Promise

IInputEvent

inherits IEvent

Property Type Description
altKey boolean Indicates whether the 'Alt' key was pressed during the input event
ctrlKey boolean Indicates whether the 'Ctrl' key was pressed during the input event
metaKey boolean Indicates whether the 'Meta' key (Command key on Mac) was pressed during the input event
shiftKey boolean Indicates whether the 'Shift' key was pressed during the input event

IInputModalOptions

Property Type Description
title string
description string
number false
value string
placeholder string

IKeboardShortcutDefinition

Property Type Description
key string
altKey boolean
ctrlKey boolean
metaKey boolean
shiftKey boolean

IKeyboardEvent

inherits IInputEvent

Property Type Description
key string The key value associated with the keyboard event
code string The physical key code associated with the keyboard event
repeat boolean Indicates whether the key is being held down in a repeating manner

ILogApi

Function Returns Description
error(message: string, meta: any) void
warn(message: string, meta: any) void
info(message: string, meta: any) void
trace(message: string, meta: any) void
debug(message: string, meta: any) void
verbose(message: string, meta: any) void
detailed(message: string, meta: any) void

IMediaHubAsset

Property Type Description
name string The name of the media asset
type FILE|FOLDER The type of the media asset (file or folder)
mediaType MediaType The media type of the asset
size number The size of the asset in bytes
tags string[] The tags associated with the asset
meta IMediaMetaDataRule[] The meta associated with the asset
contentType string Mime type, e.g. image/png, video/mp4, ...
width number The width of the asset (for images)
height number The height of the asset (for images)
hasAlpha boolean Has alpha channel (Image Only)
duration number Duration in seconds (Audio / Video)
fps number Frame per second (Video only)
frames number Number of frames (Sequence Only)
videoCodec string The video codec used by the asset
videoFormat string The video format of the asset
audioChannels number The number of audio channels (for audio)
audioCodec string The audio codec used by the asset

IMediaHubOpenOptions

Property Type Description
value string
type MediaType The type of media being browsed
root string Limit user selection to only assets in a specific MediaHub folder
tags string[] Limit user selection to only assets with a spcific MediaHub tags
meta IMediaMetaDataRule[] Limit user selection to only assets with a spcific MediaHub meta
extensions string[] Limit user selection to only asseet with a specific file extension

IMediaHubSearchOptions

Property Type Description
tags string[] The tags to filter the search results by
types MediaType[] The media types to filter the search results by
limit number The maximum number of search results to return

IMediaMetaDataRule

Property Type Description
field string The field of metadata to show filtered assets
operator string The operator of metadata to show filtered assets
value string | number The value of metadata to show filtered assets

IMessageBoxAction

Property Type Description
title string
type MessageBoxActionType

IMessageEvent

inherits IEvent

Property Type Description
origin string The origin of the message event
data any The data associated with the message event

IMouseEvent

inherits IInputEvent

Property Type Description
button number The button that was pressed during the mouse event (0: left, 1: middle, 2: right)
buttons number The buttons currently pressed during the mouse event (bitwise combination)
clientX number The horizontal coordinate of the mouse pointer relative to the client area of the browser window
clientY number The vertical coordinate of the mouse pointer relative to the client area of the browser window
movementX number The horizontal distance moved by the mouse pointer since the last mouse event
movementY number The vertical distance moved by the mouse pointer since the last mouse event
pageX number The horizontal coordinate of the mouse pointer relative to the whole document
pageY number The vertical coordinate of the mouse pointer relative to the whole document
screenX number The horizontal coordinate of the mouse pointer relative to the screen
screenY number The vertical coordinate of the mouse pointer relative to the screen
relativeX number The horizontal distance between the mouse pointer and the control's origin
relativeY number The vertical distance between the mouse pointer and the control's origin
relativeXNormalized number The normalized horizontal distance between the mouse pointer and the control's origin
relativeYNormalized number The normalized vertical distance between the mouse pointer and the control's origin

InputControlBody

inherits Control

Property Type Description
value TValue The current value of the input control
resetValue TValue The initial/reset value of the input control
Function Returns Description
focus() void Sets the input control as the focused element
blur() void Removes focus from the input control

InputControlEvents

Property Type Description
change event Event handler for the change event
focus event Event handler for the focus event
blur event Event handler for the blur event
keyDown event Event handler for the keyDown event
keyPress event Event handler for the keyPress event
keyUp event Event handler for the keyUp event
copy event Event handler for the copy event
cut event Event handler for the cut event
paste event Event handler for the paste event

InputModal

Function Returns Description
show(options: IInputModalOptions) Promise The InputModal.input function is designed to display a modal dialog that prompts the user for input.
show(options: INumberInputModalOptions) Promise The InputModal.input function is designed to display a modal dialog that prompts the user for input.

INumberInputModalOptions

Property Type Description
title string
description string
number true
value number
placeholder string

IPageActionEvent

inherits IPageEvent

Property Type Description
action string The action

IPageApi

Property Type Description
payload [read-only] any
storage [read-only] IPageStorageApi
name string The name of the page
description string The description of the page
num string the page id (digits) of the page
Function Returns Description
save(pageNum: string, name: string, overwrite: boolean) void Saves the current page with an optional page number and name
saveAs(pageNum: string, name: string, overwrite: boolean) void Saves the current page as a new page with an optional page number and name
getFieldValue(field: string) any Retrieves the value of a specific field on the page
setFieldValue(field: string, value: any) void Sets the value of a specific field on the page
setFieldsValue(value: Record<string, any>) void Sets multiple field values on the page using a key-value mapping

IPageEvent

inherits IEvent

Property Type Description
payload any The page payload

IPageStorageApi

Property Type Description
value Record get current page storage object, set will overwrite all data
Function Returns Description
get(key: string) any Retrieves the Key from the storage
set(key: string, value: any) IPageStorageApi Sets the Key and store it to the page
set(object: Record<string, any>) IPageStorageApi Sets the Key and store it to the page. if the key exist, it will add the new keys and not overwrite the whole object
remove(key: string) IPageStorageApi Removes a key from the Storage
clear() IPageStorageApi Clear all storage objects from the page
keys() string[] Get all available keys in page storage

IPlaylistApi

Function Returns Description
readPage(page: string | number) void
readPrev() void
readNext() void

IPointerEvent

inherits IMouseEvent

Property Type Description
pointerId number The ID of the pointer associated with the event
pressure number The pressure applied to the input device (e.g., pen pressure)
pointerType mouse|pen|touch The type of pointer (mouse, pen, or touch)
isPrimary boolean Indicates whether the pointer is the primary pointer

IProfileApi

inherits IProfileTargetApi

Property Type Description
preview [read-only] IProfileChannelTargetApi The target API for the preview channel (read-only)
program [read-only] IProfileChannelTargetApi The target API for the program channel (read-only)

IProfileChannelDataApi

inherits IProfileChannelTargetApi

Property Type Description
name string
type ChannelType
engines IEngineDataApi[]

IProfileChannelTargetApi

inherits IProfileTargetApi

Function Returns Description
updateChannel(type: string, name: string) void Updates the channel with the specified type and name
setChannelType(type: string) void Sets the channel type to the specified value
setChannelName(name: string) void Sets the channel name to the specified value
setAsProgram() void Sets the channel as the program channel
setAsPreview() void Sets the channel as the preview channel
setAsRegularChannel() void Sets the channel as a regular channel

IProfileDataApi

inherits IProfileApi

Property Type Description
_id string
name string
channels IProfileChannelDataApi[]

IProfileTargetApi

Function Returns Description
channel(channel: string) IProfileChannelTargetApi Retrieves the target API for a specific channel
takeIn(pageNum: string | number) void Performs a 'take in' action on the target channel with an optional page number
takeIn(payload: object) void Performs a 'take in' action on the target channel with a payload object
takeOut(pageNum: string | number) void Performs a 'take out' action on the target channel with an optional page number
takeOut(payload: object) void Performs a 'take out' action on the target channel with a payload object
update(pageNum: string | number) void Performs an 'update' action on the target channel with an optional page number
update(payload: object) void Performs an 'update' action on the target channel with a payload object
continue(pageNum: string | number) void Performs a 'continue' action on the target channel with an optional page number
continue(payload: object) void Performs a 'continue' action on the target channel with a payload object
trigger(action: string, pageNum: string | number) void Triggers a specific action on the target channel with an optional page number
trigger(action: string, payload: object) void Triggers a specific action on the target channel with a payload object
previewIn(pageNum: string | number) void Performs a 'preview in' action on the target channel with an optional page number
previewIn(payload: object) void Performs a 'preview in' action on the target channel with a payload object
previewOut(pageNum: string | number) void Performs a 'preview out' action on the target channel with an optional page number
previewOut(payload: object) void Performs a 'preview out' action on the target channel with a payload object
previewUpdate(pageNum: string | number) void Performs a 'preview update' action on the target channel with an optional page number
previewUpdate(payload: object) void
previewContinue(pageNum: string | number) void Performs a 'preview update' action on the target channel with a payload object
previewContinue(payload: object) void Performs a 'preview continue' action on the target channel with an optional page number
previewTrigger(action: string, pageNum: string | number) void Triggers a specific action in preview mode on the target channel with an optional page number
previewTrigger(action: string, payload: object) void Triggers a specific action in preview mode on the target channel with a payload object
setState(state: 'in' | 'out', pageNum: string | number) void Set currently selected or a specific page as in/out
setState(state: 'in' | 'out', payload: object) void Sets payload as in/out
sendCommand(system: 'VIZRT' | 'CASPAR_CG', command: string) void Sends a Viz Engine command to a channel
sendCommand(system: 'VIZRT' | 'CASPAR_CG', commands: string[]) void Sends a Viz Engine commands to a channel
sendCommand(system: 'UE' | 'PIXOTOPE', command: { action: 'SET', payload: object, cache?: boolean }) void Sends an Unreal Engine data payload to a channel
sendCommand(system: 'UE' | 'PIXOTOPE', command: { action: 'LAUNCH', project: string, level: string, preview?: boolean, verifyCache?: boolean }) void Sends a command to launch Unreal Engine to a channel
sendCommand(system: 'SINGULAR', command: { method: 'get'|'post'|'put'|'delete', url: string, body?: any }) void Sends a Singular.Live api command
sendCommand(system: 'OSC', command: { parameter: string, value: boolean|number|string }) void Sends an OSC command a channel to set a parameter value
sendCommand(system: 'OSC', command: { parameter: string, values: (boolean|number|string)[] }) void Sends a OSC command a channel to set a parameter values
clear(layer: string) void Clears the content of a specific layer
cleanup() void Performs a cleanup operation
cache(asset: string, verify: boolean) void Caches a specific asset with an optional verification flag
cache(assets: string[], verify: boolean) void Caches multiple assets with an optional verification flag

IResizeEvent

inherits IEvent

Property Type Description
width number The width of the resize event
height number The height of the resize event

IShortcutEvent

inherits IKeyboardEvent

Property Type Description
shortcut string The shortcut key combination associated with the shortcut event

IStorageChangeEvent

Property Type Description
key string
value string

ItemsControl

inherits InputControl

Property Type Description
items [read-only] readonly ItemsControlItem The array of items in the control (read-only)
selectedIndex ItemType The value of the currently selected item
Function Returns Description
clear() void Clears the items in the control
addItem(value: ItemType, title: string) number Adds an item to the control with the specified value and title, returns the index of the added item
removeItem(value: ItemType) void Removes the item with the specified value from the control
removeItemAt(index: number) void Removes the item at the specified index from the control
updateItem(index: number, value: ItemType, title: string) void Updates the item at the specified index with the specified value and title

ItemsControlItem

Property Type Description
value ItemType The value associated with the item
title string The title or label of the item (optional)

IVertex

Property Type Description
x number The x-coordinate of the vertex
y number The y-coordinate of the vertex
z number The z-coordinate of the vertex. Optional

JoystickBody

inherits Control

Property Type Description
value IVertex Current value
min IVertex Minimum allowed value
max IVertex Maximum allowed value
step number The increment/decrement step
horizontal 'x' | 'y' | 'z' | null Defines which axis the horizontal movement of the joystick will control
vertical 'x' | 'y' | 'z' | null Defines which axis the vertical movement of the joystick will control

JoystickEvents

Property Type Description
change event

KeyboardShortcuts

Function Returns Description
on(key: string | IKeboardShortcutDefinition, listener: function) this Listen to a specific keyboard shortcut.
once(key: string | IKeboardShortcutDefinition, listener: function) this Adds a one-time listener function for a keyboard shortcut. The next time key is triggered, this listener is invoked and then removed.
off(key: string | IKeboardShortcutDefinition, listener: function) this Removes a keyboard shortcut callback, not specifing a callback will remove all callbacks to this shortcut.

Knob

inherits Dial

Label

inherits ContentControl

ListBody

inherits ItemsControl

Property Type Description
allowReorder boolean Indicates whether items in the list can be reordered
loading boolean Show an indication that data is being loaded

ListEvents

Property Type Description
itemsReorder event Event handler for the items reorder event

Media

inherits Control

Property Type Description
value string
initial string
fit MediaFit
controls boolean Show video controls
loop boolean Loop video
muted boolean Mute video

MediaBody

inherits Media

Property Type Description
canCrop boolean Allow user to crop image
source MediaSource The source of the media being browsed
type MediaType The type of media being browsed
root string Limit user selection to only assets in a specific MediaHub folder
tags string[] Limit user selection to only assets with a spcific MediaHub tags
meta IMediaMetaDataRule[] Limit user selection to only assets with a spcific MediaHub meta
extensions string[] Limit user selection to only asseet with a specific file extension

MediaEvents

Property Type Description
change event

MediaHub

Function Returns Description
info(asset: string) Promise Retrieves information about a specific media asset
files(folder: string) Promise Retrieves the files within a specified folder
folders(folder: string) Promise Retrieves the folders within a specified folder
open(options: IMediaHubOpenOptions) Promise Open MH modal
search(query: string, options: IMediaHubSearchOptions) Promise Searches for media assets using the specified query and options

MessageBox

Function Returns Description
show(message: string, title: string, buttons: MessageBoxButtons | IMessageBoxAction[], type: MessageBoxType) Promise

Notification

inherits Control

Property Type Description
type error|warning|success|info
title string
message string
showIcon boolean
closable boolean

NumberInput

inherits NumericalInputType

Property Type Description
precision number The number of decimal places to display for the number input

NumericalInputType

inherits InputControl

Property Type Description
min T The minimum value allowed for the numerical input
max T The maximum value allowed for the numerical input
step T The increment/decrement step for the numerical input

RadioGroup

inherits ItemsControl

Property Type Description
direction horizontal|vertical The direction of the radio group layout (horizontal or vertical)
radioStyle radio|button The style of the radio buttons (standard radio or button-like appearance)

Slider

inherits NumericalInputType

Property Type Description
vertical boolean Indicates whether the slider should be rendered vertically
reverse boolean Indicates whether the slider is in reverse order
showText boolean Indicates whether to show the label, true: Always, false: Never, null: On Drag

Storage

Storage can be used to store data across different components of Erizos Studio.

Property Type Description
length [read-only] number Returns the number of key/value pairs currently present in the list associated with the object.
Function Returns Description
clear() void Empties the list associated with the object of all key/value pairs, if there are any.
getItem(key: string) string | null Returns the current value associated with the given key, or null if the given key does not exist in the list associated with the object.
key(index: number) string | null Returns the name of the nth key in the list, or null if n is greater than or equal to the number of key/value pairs in the object.
removeItem(key: string) this Removes the key/value pair with the given key from the list associated with the object, if a key/value pair with the given key exists.
setItem(key: string, value: string) this Sets the value of the pair identified by key to value, creating a new key/value pair if none existed for key previously.
on(key: string, listener: function) this Listen to a specific key-value change in storage.
once(key: string, listener: function) this Adds a one-time listener function for the key value change. The next time key is triggered, this listener is invoked and then removed.
off(key: string, listener: function) this Removes a value change callback, not specifing a callback will remove all callbacks to this key.

StudioContext

Function Returns Description
get() Promise @deprecated please use getInfo()
getInfo() Promise Returns the data of the current Show context, Show, User, Profiles etc...
setPageName(name: string) Promise Set the name of the current page
setPageDescription(description: string) Promise Set the description of the current page

Switch

inherits InputControl

Property Type Description
checkedText string The label text for checked value
uncheckedText string The label text for unchecked value

Table

inherits Control

Function Returns Description
getValue(row: number, column: number | string) any Retrieves the value at the specified row and column in the table
setValue(row: number, column: number | string, value: any) void Sets the value at the specified row and column in the table

TabsBody

inherits InputControl

Property Type Description
headerTabsPosition TabsPlacement The position of tab
Function Returns Description
getTabDisabled(tab: number | string) boolean Returns if tab disabled state
setTabDisabled(tab: number | string, disabled: boolean) void Sets tab disabled state
add(tab: number | string, ...controls: Control[]) void Add a control(s) to a tab item

TextInput

inherits InputControl

Property Type Description
maxCharacters number The maximum number of characters allowed in the text input
hint string The hint or placeholder text for the text input
multiline boolean Indicates whether the text input is multiline
readOnly boolean Indicates whether the text input is readonly

VertexInput

inherits NumericalInputType

Property Type Description
get value() IVertex Current value
get min() IVertex Minimum allowed value
get max() IVertex Maximum allowed value
get step() IVertex The increment/decrement step
precision number The number of decimal places to display for the vertex input
linked boolean Indicates whether the vertex input is linked to other vertices
dimensions number Indicates whether the type of the vertex input is 2D/3D
Function Returns Description
set value(value: IVertex | number) Current value
set min(value: IVertex | number) Minimum value allowed
set max(value: IVertex | number) Maximum allowed value
set step(value: IVertex | number) The increment/decrement step

WebPageBody

inherits Control

Property Type Description
url string The URL of the web page
Function Returns Description
postMessage(data: any) void Sends a message to the web page

WebPageEvents

Property Type Description
message event Event handler for the message event

Global

Global functions & properties

Function Returns Description
globalStorage Storage Global storage for all user interfaces, on this machine
localStorage Storage Unique storage for this specific user interface, on this machine
sessionStorage Storage Session Storage - save data across multiple pages or templates for this instance. data is not persistent, will be lost on restart or new tab
GlobalVariables GlobalVariables
KeyboardShortcuts KeyboardShortcuts
InputModal InputModal
MediaHub MediaHub
DataService DataService
File File
Alert IAlertService
MessageBox MessageBox
StudioContext StudioContext
exports IExportsObject the Exports object
Api IContextApi