SliderWidget Class Reference

The SliderWidget JavaScript class. A vertical or horizontal slider. More...

Signals
void	valueChanged (float newSliderValue)
	Signal notifying the user that the slider value was modified by the Transform Tool. More...
Signals inherited from WidgetBase
void	dragStarted (QScriptValue dragContext)
	signal called on mouse down when picking this widget with the Transform tool More...
void	drag (QScriptValue dragContext)
	signal called when this widget is dragged with the Transform tool More...
void	dragEnded ()
	signal called on mouse up after having manipulated this widget with the Transform tool More...

Additional Inherited Members
Public Slots inherited from WidgetBase
Attribute *	data (int index=0)

Detailed Description

The SliderWidget JavaScript class. A vertical or horizontal slider.

Slider widgets provide to the user a vertical or horizontal slider Camera view control. Its handle can be slided and dragged by using the Transform tool. The slider value goes from a user defined minimum value to a user defined maximum value. The user defined values can be specified at the widget construction. The slider can also be translated by having the user pick and drag its frame.

If no attribute is given at the construction of this object, the object will generate one of the proper type.

The following properties are supported by the widget:

Property	Type	Default Value	Description
data	String	-	The name of the automatically generated double floating point attribute (if none is provided). The value will range from min to max.
data	Attribute	-	An attribute of double (floating point) type that can be shared with another widget or node.
length	float	0.5	The length of the slider in fields.
radius	float	0.03	The radius of the slider handle in fields.
drop_shadow	bool	false	Paint a shadow under the slider.
horizontal	bool	false	Make the slider appears horizontal. Vertical if false.
min	float	0	Minimum value of the slider.
max	float	100	Maximum value of the slider.
slider_color	ColorRGBA	white	The colour of the handle of the slider.
contour_color	ColorRGBA	dark gray	The colour of the circle highlighting the handle of the slider.
slider_selection_color	ColorRGBA	125,125,255	The colour of the handle of the slider when selected.
frame_color	ColorRGBA	200,200,200	The colour of the frame of the slider.
frame_selection_color	ColorRGBA	125,125,255	The colour of the frame of the slider when selected.
position	Point2d	0.,0.	Default position of the slider frame bottom left corner. In fields.
screen_space	bool	false	When set to true, the slider position becomes relative to the screen rather than the scene.

The following components are used for the slider handle.

Slider Components	Type
attribute	DOUBLE
drag_manipulator	SLIDER
painter	SLIDER
picker	MONO
local_transformation	TRANSLATION_XYZ

The following components are used for the slider frame.

Slider frame Components	Type
attribute	POSITION_3D
drag_manipulator	POSITION_3D
painter	SLIDER_FRAME
picker	MULTI
local_transformation	TRANSLATION_XYZ

Connect to this scriptWidget valueChanged signal to be notified when a modification has been applied to the widget. In the callback function, transfer the widget value into an action (like modifying a peg attribute value).

// Helper function to get the slider value from a Peg value. Completely arbitrary.
function getSliderValueFromPeg()
{
  // slider max slider value * (peg position x + 1 (field)) * 2 (fields)
  return 100 * ( (node.getAttr("Top/MyPeg_A", frame.current(), "POSITION.X").doubleValue() + 1) / 2 + min slider value (0));
}

Controller.onShowControl = function()
{
  var sliderWidget = new SliderWidget(
  {
    data : "Slider",
    position : Point2d(-2.0,1.0),
    length : 5.0,
    radius : 0.3,
    frame_color : ColorRGBA(120,80,120, 200),
    slider_color : ColorRGBA(170,135,0, 200),
    slider_selection_color : ColorRGBA(150, 150, 150, 150),
    frame_selection_color : ColorRGBA(150, 150, 150, 150),
    screen_space : false
  } );

  // Initialize the slider attribute from the controlled Peg position.
  var initialValue = getSliderValueFromPeg();
  sliderWidget.data().setValue(initialValue); // initialValue is a float

  // Register a callback for when a transformation tool changes the value of the slider.
  sliderWidget.valueChanged.connect(mySliderValueChanged);

  // Register the widget to the Controller.
  Controller.controls = [];
  Controller.controls.push(sliderWidget);
}

The previous example demonstrates how to instantiate a new widget and register it in the Controller global object.

// Callback when the slider value has changed
function mySliderValueChanged(newSliderValue) 
{ 
  // Offset the 2 pegs, one in x and one in y.
  // Compute the percentage as (newSliderValue - min) / max
  var percentage = (newSliderValue - 0) / 100.0;
  var newXValue = percentage * 2 - 1; 
  var newYValue = percentage * 2;

  node.setTextAttr("Top/MyPeg_A", "POSITION.X", frame.current(),  newXValue);
  node.setTextAttr("Top/MyPeg_B", "POSITION.Y", frame.current(),  newYValue);
}

This example shows how to apply a new slider value to a peg.

// Keep a global copy of the controller as it isn't available in callbacks.
var myController = Controller;

// Called when the current frame of the application changes.
Controller.onFrameChanged = function()
{  
  var initialValue = getSliderValueFromPeg();
  myController.controls[0].data().setValue(initialValue);
}

This example shows how to update the slider widget value when the current frame changes.

Member Function Documentation

valueChanged

void SliderWidget::valueChanged ( float  newSliderValue )

signal

Signal notifying the user that the slider value was modified by the Transform Tool.

Parameters

newSliderValue

the new slider value