XYZ_IMAGE_PARAM_JOYSTICK
Active element that displays an image that can be dragged with the mouse to control three parameters at the same time: one for the horizontal movements (x), one for the vertical movements (y), and one for a virtual 3rd dimension, controlled by the mouse wheel and '+' and '-' keys. The values of the parameters reflect the coordinates of the image in the widget.
Attributes brief detailed show all inherited
For attributes add a 'x_', 'y_' or 'z_' prefix for each dimension. Note that only one dimension is mandatory (you do not need to connect all parameters, you can use for example the x and y controls only).
You can use this element without images, use thumb_width and thumb_height to set the size of an invisible joystick.
Example
- <!-- demo params -->
- <PARAM id="x" min="0" max="500" default="0" />
- <PARAM id="y" min="0" max="200" default="0" />
- <PARAM id="z" min="-10" max="10" default="0" />
- <!-- widget to make a background and overlay layers -->
- <WIDGET background_color="#d9f0ff" layout_type="layer_stack">
- <!-- the joystick -->
- <XYZ_IMAGE_PARAM_JOYSTICK id="xyz_pad" width="500" height="200" thumb_image="/PNS/Scripts/20x20.png" x_param_id="x" y_param_id="y" y_reverse="true" x_fine_ratio="10" y_fine_ratio="10" z_param_id="z" />
- <!-- you can add another joystick in reverse x/y just for fun -->
- <!--
- <XYZ_IMAGE_PARAM_JOYSTICK id="xyz_pad2" width="500" height="200" thumb_image="/PNS/Scripts/60x60.png" x_param_id="x" y_param_id="y" x_reverse="true" x_fine_ratio="10" y_fine_ratio="10" z_param_id="z" />
- -->
- <!-- info line -->
- <COLUMN spacing="10">
- <ROW spacing="5">
- <TEXT value="mouse position (x/y):" />
- <PARAM_TEXT param_id="xyz_pad.mouse_position.x" />
- <PARAM_TEXT param_id="xyz_pad.mouse_position.y" />
- </ROW>
- <ROW spacing="10">
- <PARAM_TEXT_CONTROL param_id="x" content="x: {value}" />
- <PARAM_TEXT_CONTROL param_id="y" content="y: {value}" />
- <PARAM_TEXT_CONTROL param_id="z" content="z: {value}" />
- <PARAM_TEXT param_id="xyz_pad.mouse_down" value_format=".0" content="mouse_down: {value}" />
- <PARAM_TEXT param_id="xyz_pad.mouse_over" value_format=".0" content="mouse_over: {value}" />
- <PARAM_TEXT param_id="xyz_pad.focus" value_format=".0" content="focus: {value}" />
- </ROW>
- </COLUMN>
- </WIDGET>
You can use multiple JOYSTICKs on top of each other and add for example an XY_PARAM_PAD or XYZ_PARAM_CLICK_PAD underneath for catching multiple mouse events.