Nodes Tutorial

Navigation:  Widget Designer > Nodes >

Nodes Tutorial

prev main next

Navigation:  Widget Designer > Nodes >

Nodes Tutorial

prev main next


This tutorial shows how to map the X and Y position of a layer in Pandoras Box to a mouse cursor. Moving the mouse cursor to the left /right /upper or lower screen side should result in an according movement of the layer.

At first please make sure that the PB Network Configuration of your Widget Designer is set up correctly to control Pandoras Box.

wd_nodes-tutorial_setup_zoom63First, please create the depicted node chain. You may refer to the last chapter " Creating and Setting up Nodes" for more help with that. You need three different types of nodes:
1. One Mouse Input Node: Input > Devices Mouse.
2. Two Range Filter Nodes: Filter > Range. One for the translation of the X position, one for the translation of the Y position.
3. Two Label Output Nodes: Output > Widgets > Label. One for displaying the converted X position, one for the converted Y position.
4. One Layer Control Output Node: Output > Pandoras Box > Layer Control.


Whilst being in the edit / move mode [F9], connect the nodes as depicted.

The range nodes will be the translators between the mouse cursor X and Y position data and the X and Y Position values in Pandoras Box. Now, we need to find out what input range needs to converted to what output range.

Double-click on the Mouse Node to open the Node Configuration. Now the cursor positions are shown.

When your mouse cursor is at the left border of your screen, the mouse X Position shows 0. The Y Position depends on your screen resolution. When you are working with HD resolution, the value range is 0 to 1080px.

wd_nodes-tutorial_pb_zoom50Now, we have a look at the Preview window of Pandoras Box Software. As the image shows, when Layer 1 of Site 2 is moved to the left side, the X position value for this position is -599Px. According to this, when the layer is moved to the right side, the X Position value is 599Px. If you prefer to have the center of the image at the screens border, use -/+ 960Px.

Before returning to WD, please check one thing in the Configuration tab. Per default Pandoras Box starts in Pixel Mode. If you would like to send pixel values, tick the check box "Interpret Automation Param Input as Pixel Values (Input of Type Double only)" under PB Configuration > Unit Management. Otherwise sent data will be interpreted as Generic Units as explained in the Unit Management chapter.

Now, we can go back to WD and take care of the Range node. Range Filter Nodes allow to map the mouse position data to Pandoras Box Layer Position data.

We start with the first Range Node that we set up to map the X position. Please double-click on the first Range Node.

Choose "X Pos" from the list as Input.
The Input Min and Input Max text fields are related to your mouse cursor X position.
For Input Min enter the min mouse X position value (keeps the value 0), assign the max mouse X position value for Input Max (read it from mouse input node properties, when your mouse cursor is moved to the right side of your screen).
Output Min and Max are related to Layer 2.1 in Pandoras Box.
For Output Min enter the value -960 (value is read out of Pandoras Box Layer 2.1 X Position, when the layer is moved to the left side of the screen) and for Output Max enter +960 (layers X position value at the right side of the screen). Press Apply / OK. The filter node properties should look like the left example.

After preparing the translation of X position, the second range filter node needs to be set up for translation of Y position.
The mouse cursor at top of the screen delivers Y position value 0, at the bottom of the screen it delivers Y position value 1080 (according to your screen size).
The Layer in Pandoras Box gets the following values in this example: Y position on top of the screen is -540, Y position on bottom of the screen is 540.

wd_nodes_output_layer-control01_zoom66The last thing to do is setting up the Layer Control Output Node. Right-click on it and choose "Item Properties".

Enter the Layer ID on top of the dialog. In the first text field enter the site ID, in the second text field enter the layer ID.
Tick the check box next to X Pos and choose the Range Output from the list, that is set up for the X position.
Tick the check box next to Y Pos and choose the Range Output from the list, that is set up for the Y position.
Press Apply / OK.

Move your mouse cursor and the layer now will be mapped to it (make sure you are in the run mode [F8]).

Lastly, to monitor the calculated pixel position, create two Labels next to the Label nodes. Open the Widgets menu and choose "Label". In the move/edit mode, the small ID in the Label shows its ID. If you have not created Labels before, they should have ID 1 and 2. Enter these IDs in the Label output nodes and choose the same values from the Range node as above. The Labels now display the same data that is sent to PB.


wd_nodes-tutorial_range-for-aeon-example_zoom50For more advanced programming e.g. to control other parameters in PB like effects, particles, lights, etc. you can use the Parameter Control Output Node, please see, Parameter Control.

The last part of the example shows the translation from the Mouse cursors position X and Y to Red and Blue value [0-255] of the RGB Multiply effect which was added to Layer 2.1. Please refer to the chapter "Adding FX" for more help with that.

The values for the Range nodes should be as depicted.

wd_nodes-tutorial_pb2_zoom40Finally, we have a look at the Preview window of Pandoras Box. The mouse cursor is located at the bottom right corner, the X Position is 1288Px and the Y Position is 964Px. The color result is orange, because the converted red value is 171 and blue: 27.