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
Attributedata (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));
}
{
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.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.
{
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
newSliderValuethe new slider value