Control panel - Widget types | Pixotope Help Center

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)
Interactive	When disabled, the widget can only be viewed and is not interactive	`Boolean`

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)

Screenshot 2022-03-16 at 11.16.28.png — ON and OFF state

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

Button grid

Sends predefined values and/or event triggers when clicked, while showing all options.

The list of options can be manually set up, imported from a List property of an engine object or populated using specific system actions.

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
Highlight last selected	Whether to show the last selected	`Boolean`
Highlight Color	Set the last selected color	`Color`
Cache Value	Whether to cache selected value	`Boolean`
Selected	The value of the currently selected tab	`String`
Text value	The display name of the currently selected tab	`String`
Options	Available options	`List/Enum`
Populate	Populate options using predefined queries	Action
Font Size	Text size	`Boolean` (Auto) /`Number`
Columns	Number of columns	`Number`
Scroll	Allow scrolling	`Boolean`
Enable Rows	Whether to use a fixed set of rows	`Boolean`
Rows	Number of rows	`Number`

User Action	Handler Event	Trigger Event	Default source
Click on button	CLICK	CLICK	`tabs.Selected`
Click on Button 1	BUTTON 1 CLICK	BUTTON 1 CLICK
Click on Button 2	BUTTON 2 CLICK	BUTTON 2 CLICK
…

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	CHANGE	`colorPick.Color`

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`
Text value	The display name of the currently selected tab	`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`

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`

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

Remote Call

Enables communication with the Pixotope Gateway API, allowing for external triggering of Control Panel actions via HTTP requests.

Learn more about Remote control the control panel

You can use it to

trigger control panel widgets/actions from third party applications

Property	Description	Property Type
Methods	Available options	`List/Enum`
Data	Whether timer is active	`Boolean` (Read-only)

User Action	Handler Event	Trigger Event	Default source
	METHOD1	METHOD1
…

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 of the videoIO pipeline from a specific machine.

Capturing images from the VideoIO service has a performance impact.

The smaller the requested image scale the less impact it has on VideoIO
The larger the interval the less impact it has on the network load

Test this thoroughly before using it in production!

Setup

Right click the widget and click on the … of the Node property
In the VideoIO Node selection select the inputs or outputs you want to capture
- Optionally click "Show all sources" for all intermediary states
Set the scale and update interval

Can be used to

build a multi-viewer

Property	Description	Property Type
Auto Start	Starts the interval immediately	`Boolean`
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)

Trigger	Description
Resume	Starts the interval
Stop	Stops the interval
Fetch	Fetches image data once
Download	Downloads the latest image data

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

Tabs

Sends predefined values and/or event triggers when clicked, while showing all options.

The list of options can be manually set up, imported from a List property of an engine object or populated using specific system actions.

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	The value of the currently selected tab	`String`
Text value	The display name of the 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