Tutorial: Nodes

Navigation:  Widget Designer > Nodes >

Tutorial: Nodes

prev main next

Navigation:  Widget Designer > Nodes >

Tutorial: Nodes

prev main next

Please wait. Due to its content this page might take a while to load...

Please see here a little example of 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 also moving the layer left / right / up or down.

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


Create three different types of nodes:

- one Mouse Input Node ([ALT+N] > Input > Devices > Mouse),

- two Range Filter Nodes (one for the translation of the X position, one for the translation of the Y position) ([ALT+N] > Filter > Range),

- one Layer Control Output Node.


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 (at the right border e.g. 1023 is shown, this depends on your screen resolution).




Now, we have a look at the Preview window of Pandoras Box Software. Here Layer 2 (the scaled black and white image) is moved to the left side, the X position value for this position is - 5.8 (according to this, when the layer is moved to the right side, the X Position value is +5.8. If you prefer to have the center of the image at the screens border, use -/+ 8 as 16 generic units correspond to one screen width.

The 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 "Mouse 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 in Pandoras Box.
For Output Min enter the value -5.8 (value is read out of Pandoras Box Layer 2 X Position, when the layer is moved to the left side of the screen) and for Output Max enter +5.8 (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 767 (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 4.2, Y position on bottom of the screen is -4.2.



The 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]).