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

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

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"

Interface overview
  • Header (top)

    • Select which engine to read from, and which to send to. Make sure a level is running to gather its engine content and properties

    • The play button toggles between Edit and Preview Live mode

  • Properties & Variables (right)

    • Engine: See all actors in a level and their exposed properties

    • Widgets: See all the widgets placed on your canvas, edit their properties, add widget labels, and set values

    • Variables: Add and manage global variables

  • Shortcuts bar (left)

    • Quick access to some features and general help

  • Action List (bottom)

    • Left side: Shows all possible action states for all widgets on the canvas. Selecting one from here (or double clicking the widget on the canvas) will show the widgets action on the right side

    • Right side: Allows you to drag & drop a source and target from the Properties & Variables drawer
      OR double click the source field to edit the value directly

  • Canvas

    • The working area where widgets are drawn. The entire canvas is usable in Edit mode; in Preview Live mode, the canvas will be fixed on the main viewport (the darker portion of the canvas)

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

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

  • 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

Property type

Source

Boolean

false | true as text string

Number

any float or integer number

String

any text string

List (Enum, Array, …)

any String

Transform

individual Numbers for

  • Position XYZ

  • Rotation XYZ

  • Scale XYZ

Function (Blueprint)

custom properties with their respective property types

Vector (2D,3D,4D)

Vector (2D,3D,4D)

Color

Color

JSON

JSON

Shortcuts

Action

Shortcut

Toggle edit/preview live mode

R

Toggle properties and action drawer

P

Center canvas in edit mode

C

Toggle draw/select mode

V

Select all

Ctrl+A

Cut/Copy/Paste widget(s)

Ctrl+X/Ctrl+C/Ctrl+V

Group/Ungroup selection

Ctrl+G/Ctrl+Shift+G

Delete widget(s)

Del

Save control panel

Ctrl+S

Open control panel

Ctrl+O

Pan canvas

Spacebar + Drag mouse

Focus the action list of the clicked widget

Double click widget in canvas