Control panel - Widget types

General

Property	Description	Property Type
Name	Name of the widget	`String`
X	X-axis position	`Number`
Y	Y-axis position	`Number`
W	Width	`Number`
H	Height	`Number`
Color	Main color of the widget	`Color`
Show Label	Toggle for displaying label	`Boolean`
Label	Text displayed as widget label	`String`
Label Size	Size of label text	`Boolean` (Auto) /`Number`
Label Color	Color of label text	`Color`
Label Position	Placement of the label	`Enum` (Top-Left \| Top-Center \| Top-Right \| Middle-Left \| Middle-Right \| Bottom-Left \| Bottom-Center \| Bottom-Right)

2D Pad

Sends an x and y Number (float or integer) between a min and a max value, allowing to adjust the snap and grid size.

You can use it to

control any 2 number values you want to have interactive control over

Property	Description	Property Type
Relative	Use relative positioning	`Boolean`
X	X coordinate	`Number`
Min X	Minimum X value	`Number`
Max X	Maximum X value	`Number`
Decimal X	X decimal places	`Number`
Step X	X increment step	`Number`
Grid X	X grid divisions	`Number`
Show Label X	Show X label	`Boolean`
Y	Y coordinate	`Number`
Min Y	Minimum Y value	`Number`
Max Y	Maximum Y value	`Number`
Decimal Y	Y decimal places	`Number`
Step Y	Y increment step	`Number`
Grid Y	Y grid divisions	`Number`
Show Label Y	Show Y label	`Boolean`

User Action	Handler Event	Trigger Event	Default source
Click or click and drag	onChange	CHANGE	`TwoDPad.Value`

Button (Trigger)

Sends predefined variables and/or event triggers when clicked. You can use it to

Trigger Blueprint events
- Virtual camera moves
- Actions/States
Trigger video keyer presets
Set
- Actor transform
- Actor parameters

Property	Description	Property Type
Text	Button text	`String`
Text Color	Color of button text	`Color`
Font Size	Size of button text	`Boolean` (Auto) /`Number`
Toggle	Whether button toggles. See Button (Toggle)	`Boolean`

User Action	Handler Event	Trigger Event	Default source
Click on button	CLICK	CLICK	-

Button (Toggle)

Sends predefined values and/or event triggers when clicked, while showing the current state.

You can use it

as a 2-state trigger
for on/off actions
- Light switches
- A to B transitions
- Visibility toggles
- Any boolean

Property	Description	Property Type
Same as Button (Trigger), but with Toggle enabled.
Value	Current toggle state	`Boolean`
On Label	Text when toggled on	`String`
Off Label	Text when toggled off	`String`
On Value	Value when toggled on	`String`
Off Value	Value when toggled off	`String`
Off Text Color	Color when off	`Color`
Off Color	Background when off	`Color`

User Action	Handler Event	Trigger Event	Default source
Click on button	CLICK	CLICK	`button.Value`
Click on ON	ON	ON
Click on OFF	OFF	OFF

Color picker

Opens a color picker and while making changes it sends updates

if confirmed, the color is kept
if cancelled, the original color is sent again

You can use it to

control light colors

Property	Description	Property Type
Color	Selected color	`Color`
Details	Color format display	`Enum` (RGB \| HEX \| NONE)

User Action

Handler Event

Trigger Event

Default source

Change color

Click on Confirm keeps new color value
Click on Cancel reverts to previous color value

CHANGE

colorPick.Color

Switches between predefined values and/or event triggers when clicked, while showing the active option.

Use it the same way as the Tab widget.

Property	Description	Property Type
Selected	Currently selected option	`String`
Options	Available options	`List/Enum`
Populate	Populate options using predefined queries	Action
Cache Value	Whether to cache selected value	`Boolean`
Text Color	Text color	`Color`
Font Size	Text size	`Number`

User Action	Handler Event	Trigger Event	Default source
Click on an option in the dropdown	CHANGE	CHANGE	`dropdown.Selected`

Frame

Embed another website into the control panel.

You can use it to

load other control panels
load help center articles
load external graphics

Property	Description	Property Type
URL	Web page to display	`String` (URL)
Display	Visibility setting	`Boolean`/`Enum`
Active	Whether it is an active listener	`Boolean`

User Action	Handler Event	Trigger Event	Default source
-	LISTENER	LISTENER	-

Group

Visually group widgets together.

You can use it

to organize your control panel
as a modal dialog

Click the header to move all widgets within the group
Double click the header to select all widgets and scale the group

Property	Description	Property Type
Modal	Shows the group as modal dialog	`Boolean`

Trigger	Description
ShowModal	Opens the modal dialog
CloseModal	Closes the modal dialog

Image

Passive: image source can be controlled by an action on another widget
Active: can actively listen to changes

Double click the image to bring up the resources library
- Upload or choose an existing image

Resources are stored in [Project folder]/ControlPanel/[Control panel folder]

Learn more about how to send images to the engine

You can use it to

display images
- from url
- from local file system
send image URLs to the URLImageActor
organize your control panel

Property	Description	Property Type
URL/Src	Image source	`String` (Path/ID)
Display	Visibility setting	`Boolean`/`Enum`
Stretch	How image fits frame	`Enum` (Contain \| Cover \| Fill \| None)
Active	Whether it is an active listener	`Boolean`

User Action	Handler Event	Trigger Event	Default source
-	LISTENER	LISTENER	`image.Src`

Label

Shows a text or JSON view.

Passive: can be controlled by an action on another widget
Active: can actively listen to changes

You can use it to

have an independent label text with optional background color
display values as text or JSON
organize your control panel
select and copy values

Property	Description	Property Type
Text	Label text	`String`
Render	Rendering method	`Enum` (Label \| Json)
Background	Background color	`Color`
Selectable	Whether text is selectable	`Boolean`
Active	Whether label is active	`Boolean`

User Action	Handler Event	Trigger Event	Default source
-	LISTENER	LISTENER	`label.Text`

Listener

Listens to changes of the Source property.

You can use it to

listen to the change of any property

User Action	Handler Event	Trigger Event	Default source
-	LISTENER	LISTENER	-

Number

Sends a Number (float or integer)

You can use it to

update numeric values
- Scoreboards
- Statistics
- Data
trigger Blueprint events that take a numeric parameter

Property	Description	Property Type
Min	Minimum value	`Number`
Max	Maximum value	`Number`
Value	Current value	`Number`
Unit	Unit of measurement	`String`
Precision	Decimal places	`Number`
Font Size	Text size	`Number`

Trigger	Description
Focus	Focuses the input field

User Action	Handler Event	Trigger Event	Default source
Click `Enter` after changing number Click the arrows Scroll (when field has focus)	CHANGE	CHANGE	`number.Value`

Playlist

Executes actions in a sequence triggered manually or based on time.

You can use it to

control actions in a sequence

Property	Description	Property Type
Play on startup	Auto-play setting	`Boolean`
Controls	Show playback controls	`Boolean`

Getter	Description
CurrentActionIndex	Get current action index
CurrentActionName	Get name of current action
CurrentActionDuration	Get duration of current action
CurrentActionProgress	Get progress of current action
CurrentActionTime	Get time of current action
NextIndex	Get next action index
NextName	Get name of next action
OverallTimeElapsed	Get total elapsed time
GetCount	Get total number of actions

Trigger	Description
NextAction	Trigger next action
StopAction	Stop playlist and reset playhead
StartFrom	Go to `index` and start
Pause	Go to `index` and pause
Resume	Resume playlist
Delay	Delay next action
Pause	Pause playlist

Slider

Sends a Number (float or integer) between a min and a max value.

You can use it to

control virtual lights
control physical lights
- via DMX
control X/Y/Z dimensions of transforms
control color channels
control any states you want to fade between
control any number value you want to have interactive control over

Property	Description	Property Type
Min	Minimum value	`Number`
Max	Maximum value	`Number`
Value	Current value	`Number`
Step	Step increment	`Number`
Decimal	Decimal places	`Number`
Middle	Show middle marker	`Boolean`
Orientation	Slider direction	`Enum` (Auto \| Horizontal \| Vertical)

User Action	Handler Event	Trigger Event	Default source
Click or click and drag	onChange	CHANGE	`slider.Value`

Snapshot

Captures an image from a selected node inside the videoIO service of a machine. Set the

scale and update interval

You can use it to

build a multi-viewer

Property	Description	Property Type
Node	Select which videoIO node the image should be captured from	`String`
Interval	Capture frequency	`Number` (seconds)
Scale	Image scale	`Number`
Requests Sent	Count of sent requests	`Counter`
Frames Received	Count of received frames	`Counter`
Process Time	Time to generate the frame	`Number`
Image	Output	`Base64`
Display	Visibility setting	`Boolean`
Stretch	How image fits frame	`Enum` (Contain \| Cover \| Fill \| None)

User Action	Handler Event	Trigger Event	Default source
-	RECEIVED	RECEIVED	-

Tabs

Sends predefined values and/or event triggers when clicked, while showing the current state. The list of options can be manually set up or imported from a List property of an engine object.

Learn more about how to Populate Options for Tab and Dropdown widget

You can use it to

switch between predefined values (Number, String)
- Infographics
- Name fields
- Title bars

Property	Description	Property Type
Cache Value	Whether to cache selected value	`Boolean`
Selected	Currently selected tab	`String`
Options	Available options	`List/Enum`
Populate	Populate options using predefined queries	Action
Scroll	Allow scrolling	`Boolean`
Font Size	Text size	`Boolean` (Auto) /`Number`
Orientation	Tab orientation	`Enum`

User Action	Handler Event	Trigger Event	Default source
Click on tab	CLICK	CLICK	`tabs.Selected`
Click on Tab 1	TAB 1 CLICK	TAB 1 CLICK
Click on Tab 2	TAB 2 CLICK	TAB 2 CLICK
…

Text

Sends a String. The text can be typed or pasted in.

You can use it to

update text and number values
- News tickers
- Infographics
- Name fields
- Title bars
- Scoreboards
trigger Blueprint events that take a text OR numeric parameter

Property	Description	Property Type
Text	Input text	`String`

Trigger	Description
Enter	Submits/Sends the string
Focus	Focuses the input field

User Action	Handler Event	Trigger Event	Default source
Press `Enter` after changing text	CHANGE	CHANGE	`input.Text`

Text (multiline)

Sends a String (including line breaks).

Text can be typed or pasted.

Use it the same way as the Text widget.

Property	Description	Property Type
Text	Content of text area	`String`
Confirm	Text of confirmation button	`String`
Button Color	Button background color	`Color`

Trigger	Description
Focus	Focuses the input field

User Action	Handler Event	Trigger Event	Default source
Press `Ctrl+Enter` or Click “Confirm" after changing text	CHANGE	CHANGE	`text.Text`

Timer

Triggers the actions with a constant interval.

You can use it to

set up triggers with a constant interval

Property	Description	Property Type
Interval	Time between triggers	`Number` (ms)
Auto Start	Start interval when going live	`Boolean`
Enabled	Whether timer is active	`Boolean` (Read-only)

Trigger	Description
Start	Starts the timer
Stop	Stops the timer

User Action	Handler Event	Trigger Event	Default source
-	INTERVAL	INTERVAL	-

Vector input (1D, 2D, 3D, 4D)

Sends a Vector (1D, 2D, 3D, 4D)

You can use it to

update vector values
- Location
- Rotation
- Scale
- Color

Property	Description	Property Type
Axis Labels	Show axis labels	`Boolean`
Min	Minimum value	`Boolean`/`Number`
Max	Maximum value	`Boolean`/`Number`
Value	Vector value	`String`
Use X	Toggle X axis	`Boolean`
Label X	X axis label	`String`
Value X	X axis value	`Number`
Use Y	Toggle Y axis	`Boolean`
Label Y	Y axis label	`String`
Value Y	Y axis value	`Number`
Use Z	Toggle Z axis	`Boolean`
Label Z	Z axis label	`String`
Value Z	Z axis value	`Number`
Use W	Toggle W axis	`Boolean`
Label W	W axis label	`String`
Value W	W axis value	`Number`
Precision	Decimal places	`Number`
Font Size	Text size	`Number`

User Action	Handler Event	Trigger Event	Default source
Click `Enter` after changing number Click the arrows Scroll (when field has focus)	CHANGE	CHANGE	`vector.Value` `vectorX.Value` `vectorY.Value` `vectorZ.Value`

System actions

Learn more about System actions