Creating a control panel - New version (experimental)

This version is experimental and was not tested in a production setting!

Our original control panel worked well for simple use cases, but had certain limitations when it came to more advanced setups and ease of use.

With the new version, we have created a better base to solve all these issues. In this experimental release we have focused on:

• Making the control panel constantly in sync with the engine

• Allowing for more complex use cases

  • by setting separate Source and Target properties

  • by allowing widgets to be controlled

  • by changing to a more flexible layout

This is the first step and we know that we still have a way to go, especially when it comes to usability.

This is the first of several iterations and we have grand plans for its future. We welcome your input and thoughts. If you are interested in giving feedback, sharing your use cases or contributing in general, we would love to invite you to our Control Panel slack channel! Just send an email to design@pixotope.com

Academy Tutorial - User configurable control panel

• Introduction to our new control panel

Check out the example control panel

1. Download the ExampleControlPanel.pxpanel below and copy it into your project folder
   [Project folder]/Content/

2. Click “Rescan folders” from the Launch panel in Director

3. Open the control panel and launch the LVL_PixotopeARSample level to test the widgets

   • Note that some of the actions require the level to run in LIVE or Preview Live mode

Download ExampleControlPanel.pxpanel:

ExampleControlPanel.pxpanel

Create a new control panel

1. Go to PRODUCTION > Show > Launch

2. Click "Create new control panel"

3. Check "New version (experimental)" and give it a descriptive name

Learn more about where control panels are stored

Open a control panel in Director

1. Go to PRODUCTION > Show > Launch

2. Hover over the control panel you want to open and click "Edit in browser"

Add a widget

1. You should start in Edit mode (yellow borders), if this mode is not active, press R or the "Play" button in the top header to switch between Edit and Preview Live mode

2. Press T to open toolbox

3. Double click the widget
   OR select it and click "Confirm"

4. Click and drag onto the canvas to place/draw the widget

   • If necessary Press V to switch between Draw and Select mode

Edit a widget

1. Select the widget

   • on the canvas

   • OR in the "Widgets" tab in the "Properties and Variables" drawer

2. Change any of the properties in the properties section by clicking into its value field

Populate Options for Tab and Select widget

1. Select the Tab or Select widget, add values and labels respectively

2. Double click List of a Enum or Array property in the "Engine" tab of the "Properties and Variables" drawer

Arrange widgets

1. To group select widgets, go into Select mode by pressing V

2. Move, resize, cut, copy and paste the widgets

Add an action

• An action is attached to a specific widget which triggers it

• When triggered, it sends the Source value or property to the Target property

• Actions can use properties from running levels, as well as from other widgets on the canvas

1. Double click the widget on the canvas to focus its action list

2. Select a property from the respective tabs in the "Properties and Variables" drawer

3. Click and drag the red circle of the Target property onto the target drop zone (for functions drag FN)

   • This will automatically set the default value of the widget as the source
     

     

4. For the widget to read the target property when switching to Live mode, click on the arrow between source and target and set the direction of the action to "Bidirectional"

   • not available for Button (Trigger)
     

     

5. Optional: for the Source

   • Override the default Source property by dragging another property onto the source drop zone

   • OR set a constant value by double clicking into the source drop zone

Learn more about Supported target objects and properties below

Additional options

• The Button (Toggle) and Tab widgets support adding actions to their individual options
  

  

• To automatically trigger an action when switching to Live mode, enable the "STARTUP" toggle

• To remove a value or property, click the x to the right of the Source or Target field

• To remove the action, click the x all the way to the right of the action row

Go live

Remember to save the control panel using Ctrl+S or the Save icon in the shortcuts bar on the left.

Preview Live mode

This mode allows you to use the widgets while you can still edit their properties and actions.

1. Press R or the "Play" button in the header

   • The red border is removed

   • The canvas is centered

   • You cannot add move widgets

Live mode

This mode removes any ability to edit the control panel including switching between Edit and Preview Live mode

1. Click on "Launch panel" from the Launch panel in Director

Widget types

Button (Trigger)

Image
Behaviour	Sends values/properties or event triggers when clicked
Action	On click
Default source	None
Main purpose	Trigger Blueprint events Send values

Button (Toggle)

Same widget as Button, but with "Toggle" enabled.

Image
Behaviour	Sends values/properties or event triggers when clicked Button shows last clicked state
Action	On click On ON click On OFF click
Default source	button.Value
Main purpose	Send values

Tab

Image
Behaviour	Sends values (Number, String) Shows last clicked state List of options can be manually set up or imported from a List property of an engine object - See Populate Options for Tab and Select widget
Action	On click On individual option click
Default source	tab.Active
Main purpose	2-state toggle which needs separate ON OFF buttons Switch between predefined options (Number, String)

Select

Image
Behaviour	Sends values (Number, String) Shows last clicked state List of options can be manually set up or imported from a List property of an engine object - See Populate Options for Tab and Select widget
Action	On click On individual option click
Default source	select.Selected
Main purpose	Switch between predefined options (Number, String)

Slider

Image
Behaviour	Sends a Number (float or integer) between a min and a max value
Action	On click On change
Default source	slider.Value
Main purpose	Control virtual lights Control physical lights via DMX Control X/Y/Z dimensions of transforms Any states you want to fade between

Number input

Image
Behaviour	Sends a Number (float or integer) between a min and a max value
Action	On Enter key On Up/Down arrow click When in focus On Up/Down key On Scroll wheel
Default source	number.Value
Main purpose	Real-time updates of numeric values Scoreboards Statistics Data

Text input

Image
Behaviour	Sends a String when the Enter key is pressed
Action	On Enter key
Default source	input.Text
Main purpose	Real-time updates of text and numeric values News tickers Infographics Name fields Title bars Scoreboards

Multi-line text input

Image
Behaviour	Sends a String (including line breaks) when the Enter key is pressed
Action	On click (Confirm button)
Default source	text.Text
Main purpose	Real-time updates of text and numeric values News tickers Infographics Name fields Title bars Scoreboards

Label

Image
Behaviour	Display static text/numbers or as Target for String/Number values
Action	None
Default source	label.Text
Main purpose	Displaying of values Control panel organization

Image

Image
Behaviour	Display image URLs
Action	None
Default source	image.Src
Main purpose	Displaying of images Control panel organization

Listener

Image
Behaviour	Listens to changes of the Source property
Action	On change of the Source property
Default source	None
Main purpose	Listens to changes of other properties and updates targets in tandem

Supported target objects

• Engine tab - Lists all objects in the running level

  • Any exposed engine property - Learn more about how to Expose properties for remote control

• Widget tab - Lists all widgets of the control panel

  • Any exposed widget property

• Variables tab - Lists all global variables of the control panel

  • Any global variables

• Exposed tab

  • Any exposed widget property

Supported target properties

Shortcuts