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

fieldId|string|The control field id 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

Dropdown

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.
templates	ITemplateApi	An api to interact with the templates of the show
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

ITemplateApi

Function	Returns	Description
load(system: string, path: string, layer: string)	void	Creates a page in memory from template

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
setRow(row: number, values: Record<string, any> | any[])	void	Sets multiple columns of a specific row
setRow(row: number, values: string|number|boolean)	void	Sets a single column table row with a value
getRow(row: number)	any	Gets all columns of a specific row
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
swap(index1: number, index2: number)	boolean	Swaps the locations two rows
clear()	void	Clears the items in the table
addRow(index: number, values: any)	number	Adds an item to the table with an optional index and values
removeRow(index: number, count: number)	boolean	Replace two rows location

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