466 lines
13 KiB
Text
466 lines
13 KiB
Text
CLASS:: MultiSliderView
|
|
summary:: A view displaying an array of sliders
|
|
categories:: GUI>Views
|
|
|
|
DESCRIPTION::
|
|
|
|
MultiSliderView displays a collection of values, each represented by the position of one of the sliders placed side by side.
|
|
|
|
When clicking into the view, the value of the slider under the mouse pointer will be set. Whenever the mouse is moved with a mouse button pressed, the slider currently under the mouse pointer will be adjusted.
|
|
|
|
The last slider modified is considered to be the strong::current:: one, i.e. the link::#-index:: method will return its index, and link::#-currentValue:: relates to its value.
|
|
|
|
The current slider is also considered to be the strong::selected:: one. Selection can be extended to more than one slider by modifying link::#-selectionSize::. Whenever a different slider becomes the current one, the selection size shrinks back to 1. Note that the selection will only be visually indicated if link::#-showIndex:: is code::true::.
|
|
|
|
|
|
CLASSMETHODS::
|
|
|
|
PRIVATE:: key
|
|
|
|
METHOD:: new
|
|
|
|
|
|
A new MultiSliderView is created empty, without any columns. link::#-size:: or link::#-value:: has to be set in order to create some columns.
|
|
|
|
So if you want a specific number of sliders, then it is best to specify the link::#-size:: and set link::#-elasticMode:: to 1. Then you will get a MultiSliderView which distributes link::#-size:: amount of sliders over code::bounds.width::, where the slider widths are at maximum link::#-indexThumbSize:: (default 12) and the link::#-gap:: is adjusted accordingly.
|
|
|
|
|
|
|
|
INSTANCEMETHODS::
|
|
|
|
SUBSECTION:: Data
|
|
|
|
METHOD:: size
|
|
The amount of sliders.
|
|
|
|
When setting -size, if the new amount is larger then the current, new sliders will be added with the value of 0. In the opposite case, the value of sliders up to the new amount will be preserved, and the rest of the sliders will be removed.
|
|
|
|
note:: strong:: In Cocoa and SwingOSC GUIs: ::
|
|
|
|
Changing -size after the view has been drawn or after the link::#-value:: array has been set will lead to unexpected results. Instead, you should change the link::#-value::, if you need to change the contents of the view.
|
|
|
|
::
|
|
|
|
argument::
|
|
An Integer.
|
|
|
|
METHOD:: value
|
|
|
|
Sets the values of the sliders to those of the elements of the argument.
|
|
|
|
note::
|
|
If the amount of elements in the argument does not match link::#-size::, then makes link::#-size:: match before applying the new values.
|
|
::
|
|
|
|
argument::
|
|
An array of Floats.
|
|
|
|
METHOD:: valueAction
|
|
|
|
Sets link::#-value:: and triggers link::#-action::.
|
|
|
|
METHOD:: reference
|
|
|
|
The reference values in relation to which the values will be visually represented. The default for each slider is 0.
|
|
|
|
argument::
|
|
An array of Floats.
|
|
|
|
METHOD:: index
|
|
|
|
The index of the current slider, i.e. the first one in the selection.
|
|
|
|
argument::
|
|
An Integer.
|
|
|
|
METHOD:: selectionSize
|
|
|
|
The amount of sliders in the selection (starting at link::#-index::).
|
|
|
|
METHOD:: currentvalue
|
|
|
|
The value of the slider at link::#-index::
|
|
|
|
argument::
|
|
A Float.
|
|
|
|
|
|
|
|
SUBSECTION:: Display
|
|
|
|
METHOD:: indexIsHorizontal
|
|
|
|
The orientation of the view: if true, the sliders are displayed in a horizontal order, otherwise in a vertical order.
|
|
|
|
argument::
|
|
A Boolean.
|
|
|
|
METHOD:: elasticMode
|
|
|
|
If enabled (set to 1), the sliders from link::#-startIndex:: to the last one will be distributed so as to occupy the whole area of the view. The link::#-gap:: variable will be ignored. The size of each slider in the direction of index will be maximally link::#-indexThumbSize::, or smaller in order for all the sliders to fit into the view.
|
|
|
|
argument::
|
|
0 (disabled) or 1 (enabled).
|
|
|
|
METHOD:: gap
|
|
|
|
The gap between the sliders in pixels when link::#-elasticMode:: is disabled.
|
|
|
|
argument::
|
|
An Integer.
|
|
|
|
METHOD:: indexThumbSize
|
|
|
|
The size of the sliders in the direction of index in pixels . If link::#-elasticMode:: is enabled, this will be the maximum size, but the actual size might be smaller in order for all the sliders to fit into the view.
|
|
|
|
argument::
|
|
An Integer.
|
|
|
|
METHOD:: valueThumbSize
|
|
|
|
The size of the slider handles in the direction of value in pixels (if drawn).
|
|
|
|
argument::
|
|
An Integer.
|
|
|
|
METHOD:: thumbSize
|
|
|
|
Sets both link::#-indexThumbSize:: and link::#-valueThumbSize:: to the argument.
|
|
|
|
METHOD:: startIndex
|
|
|
|
The index of the slider displayed at the left or top edge of the view (depending on whether link::#-indexIsHorizontal:: is true or false, respectively). Sliders with lower index than this will not be visible.
|
|
|
|
argument::
|
|
An Integer.
|
|
|
|
|
|
SUBSECTION:: Appearance
|
|
|
|
METHOD:: showIndex
|
|
|
|
Whether the slider selection is visually indicated.
|
|
|
|
argument::
|
|
A Boolean.
|
|
|
|
METHOD:: drawRects
|
|
|
|
Whether to draw the sliders.
|
|
|
|
argument::
|
|
A Boolean.
|
|
|
|
METHOD:: drawLines
|
|
|
|
Whether to draw a line connecting the points that represent the link::#-value#values:: of the sliders, and a line connecting the points that represent the link::#-reference#references::.
|
|
|
|
argument::
|
|
A Boolean.
|
|
|
|
METHOD:: isFilled
|
|
|
|
If true, the sliders will have their area between the link::#-reference:: and the link::#-value:: colored, and the area bounded by the lines connecting the reference and the value points will be colored as well.
|
|
|
|
argument::
|
|
A Boolean.
|
|
|
|
METHOD:: strokeColor
|
|
|
|
The color used to draw the lines described in link::#-drawLines::.
|
|
|
|
argument::
|
|
A Color.
|
|
|
|
METHOD:: fillColor
|
|
|
|
The color used to visualize the areas described in link::#-isFilled::.
|
|
|
|
argument::
|
|
A Color.
|
|
|
|
METHOD:: colors
|
|
|
|
Sets link::#-strokeColor:: and link::#-fillColor:: to the two arguments, respectively.
|
|
|
|
|
|
|
|
SUBSECTION:: Interaction
|
|
|
|
METHOD:: editable
|
|
|
|
Whether the values can be edited using mouse or keyboard.
|
|
|
|
argument::
|
|
A Boolean.
|
|
|
|
METHOD:: readOnly
|
|
|
|
The opposite if link::#-editable::.
|
|
|
|
argument::
|
|
A Boolean.
|
|
|
|
METHOD:: step
|
|
|
|
If the argument is larger than 0, makes the MultiSliderView keep the values quantized to the nearest multiple of the argument.
|
|
|
|
|
|
|
|
SUBSECTION:: Actions
|
|
|
|
|
|
METHOD:: action
|
|
The action object evaluated whenever the user changes the value of a slider.
|
|
|
|
METHOD:: metaAction
|
|
The action object evaluated whenever the user changes the value of a slider while the Ctrl key is pressed.
|
|
|
|
METHOD:: defaultKeyDownAction
|
|
|
|
Implements the default effects of key presses as follows:
|
|
|
|
table::
|
|
## strong::Key:: || strong::Effect::
|
|
## up arrow || increment -currentValue by -step
|
|
## down arrow || decrement -currentValue by -step
|
|
## right arrow || increment -index by 1
|
|
## left arrow || decrement -index by 1
|
|
::
|
|
|
|
|
|
|
|
SUBSECTION:: Drag and drop
|
|
|
|
METHOD:: defaultGetDrag
|
|
returns::
|
|
a) If link::#-selectionSize:: is 0, returns link::#-value::.
|
|
|
|
b) If link::#-selectionSize:: > 1, returns an Array with the values at the indexes in the selection.
|
|
|
|
If link::#-reference:: is not nil, returns an Array containing (a) or (b), and an Array of the corresponding reference values: code:: [[values], [references]] ::.
|
|
|
|
METHOD:: defaultCanReceiveDrag
|
|
returns::
|
|
True for any drag data, but the data should either be an Array of values ( code:: [values] :: ), or an Array containg an Array of values and an Array of corresponding reference values ( code:: [[values], [references]] :: ).
|
|
|
|
METHOD:: defaultReceiveDrag
|
|
If the drag data is in one of the acceptable forms (see link::#-defaultCanReceiveDrag:: above), sets link::#-value:: (and link::#-reference::) using that data.
|
|
|
|
|
|
|
|
EXAMPLES::
|
|
|
|
subsection:: Basic Examples
|
|
|
|
code::
|
|
(
|
|
n=20;
|
|
w = Window.new.front;
|
|
m = MultiSliderView(w,Rect(10,10,n*13+2,100)); //default thumbWidth is 13
|
|
m.value=Array.fill(n, {|v| v*0.05}); // size is set automatically when you set the value
|
|
m.action = { arg q;
|
|
q.value.postln;
|
|
};
|
|
)
|
|
::
|
|
|
|
Looks like a candlestick graph:
|
|
|
|
code::
|
|
(
|
|
var size;
|
|
size = 350 / 6;
|
|
w = Window.new;
|
|
w.view.decorator = FlowLayout(w.view.bounds);
|
|
m = MultiSliderView(w, Rect(0, 0, 350, 100));
|
|
m.value_(Array.fill(size, {0.01}));
|
|
m.isFilled_(true); // width in pixels of each stick
|
|
m.indexThumbSize_(2.0); // spacing on the value axis
|
|
m.gap_(4);
|
|
w.front;
|
|
)
|
|
|
|
// rotate the above graph
|
|
(
|
|
m.bounds_(Rect(0, 0, 100, 350));
|
|
m.indexIsHorizontal_(false);
|
|
)
|
|
::
|
|
|
|
|
|
subsection:: Interactive Example
|
|
|
|
A walk through all the graphic options:
|
|
|
|
code::
|
|
(
|
|
n=40;
|
|
|
|
w = Window("MultiSlider Options", Rect(200, Window.screenBounds.height-550, 600, 450));
|
|
f={
|
|
w.view.decorator = FlowLayout( w.view.bounds, 10@10, 10@2 );
|
|
m = MultiSliderView(w,Rect(0,0,580,200)); // default thumbWidth is 13
|
|
m.value=Array.fill(n, {|v| 0.5+((0.3*v).sin*0.25)});
|
|
m.action = { arg q;q.value.postln; };
|
|
|
|
StaticText(w,380@18).string_("indexThumbSize or thumbSize");
|
|
Slider(w,580@10).action_({arg sl; m.indexThumbSize=sl.value*24}).value_(0.5);
|
|
StaticText(w,380@18).string_("valueThumbSize");
|
|
Slider(w,580@10).action_({arg sl; m.valueThumbSize=sl.value*24}).value_(0.5);
|
|
StaticText(w,580@18).string_("xOffset or gap");
|
|
Slider(w,580@10).action_({arg sl; m.xOffset=sl.value*50});
|
|
StaticText(w,580@18).string_("startIndex");
|
|
Slider(w,580@10).action_({arg sl; m.startIndex = sl.value *m.size};);
|
|
|
|
CompositeView(w,580@10);//spacer
|
|
Button(w,100@20).states_([["RESET",Color.red]])
|
|
.action_({ w.view.removeAll; f.value; });
|
|
h=StaticText(w,450@18).string_("").stringColor_(Color.yellow);
|
|
Button(w,100@20).states_([["elasticMode = 0"],["elasticMode = 1",Color.white]])
|
|
.action_({|b| m.elasticMode = b.value});
|
|
Button(w,160@20).states_([["indexIsHorizontal = false"],["indexIsHorizontal = true",Color.white]])
|
|
.action_({|b| m.indexIsHorizontal = b.value.booleanValue}).value_(1);
|
|
Button(w,120@20).states_([["isFilled = false"],["isFilled = true",Color.white]])
|
|
.action_({|b| m.isFilled = b.value.booleanValue});
|
|
Button(w,120@20).states_([["drawRects = false"],["drawRects = true",Color.white]])
|
|
.action_({|b| m.drawRects = b.value.booleanValue}).valueAction_(1);
|
|
Button(w,100@20).states_([["drawLines = false"],["drawLines = true",Color.white]])
|
|
.action_({|b| m.drawLines = b.value.booleanValue});
|
|
Button(w,160@20).states_([["readOnly = false"],["readOnly = true",Color.white]])
|
|
.action_({|b| m.readOnly = b.value.booleanValue});
|
|
Button(w,120@20).states_([["showIndex = false"],["showIndex = true",Color.white]])
|
|
.action_({|b| m.showIndex = b.value.booleanValue});
|
|
Button(w,120@20).states_([["reference = nil"],["reference filled",Color.white],["reference random",Color.yellow]])
|
|
.action_({|b| b.value.booleanValue.if({
|
|
(b.value>1).if(
|
|
{m.reference=Array.fill(n, {1.0.rand})},
|
|
{m.reference=Array.fill(m.size, {0.5})});
|
|
},{ q=m.value;m.reference=[]; h.string="reference can't be returned to nil presently. please hit RESET."}
|
|
)
|
|
});
|
|
Button(w,180@20).states_([["fillColor = Color.rand"]]).action_({m.fillColor=Color.rand});
|
|
Button(w,180@20).states_([["strokeColor = Color.rand"]]).action_({m.strokeColor=Color.rand});
|
|
Button(w,180@20).states_([["background = Color.rand"]]).action_({m.background=Color.rand});
|
|
|
|
};
|
|
f.value;
|
|
w.front;
|
|
|
|
)
|
|
::
|
|
|
|
|
|
subsection:: Display a Sound File
|
|
|
|
code::
|
|
(
|
|
// press shift to extend the selection
|
|
// use as waveView: scrubbing over the view returns index
|
|
// if showIndex(false) the view is not refreshed (faster);
|
|
// otherwise you can make a selection with shift - drag.
|
|
var size, file, maxval, minval;
|
|
size = 640;
|
|
a = Window("test", Rect(200 , 140, 650, 150));
|
|
a.view.decorator = FlowLayout(a.view.bounds);
|
|
b = MultiSliderView(a, Rect(0, 0, size, 50));
|
|
b.readOnly_(true);
|
|
a.view.decorator.nextLine;
|
|
|
|
d = Array.new;
|
|
c = FloatArray.newClear(65493);
|
|
|
|
r = Slider( a, Rect(0, 0, size, 12));
|
|
r.action = {arg ex; b.gap = (ex.value * 4) + 1};
|
|
|
|
file = SoundFile.new;
|
|
file.openRead(Platform.resourceDir +/+ "sounds/a11wlk01.wav");
|
|
file.numFrames.postln;
|
|
file.readData(c);
|
|
// file.inspect;
|
|
file.close;
|
|
minval = 0;
|
|
maxval = 0;
|
|
f = Array.new;
|
|
d = Array.new;
|
|
c.do({arg fi, i;
|
|
if(fi < minval, {minval = fi});
|
|
if(fi > maxval, {maxval = fi});
|
|
|
|
//f.postln;
|
|
if(i % 256 == 0,{
|
|
d = d.add((1 + maxval ) * 0.5 );
|
|
f = f.add((1 + minval ) * 0.5 );
|
|
|
|
minval = 0;
|
|
maxval = 0;
|
|
});
|
|
});
|
|
|
|
b.reference_(d); // this is used to draw the upper part of the table
|
|
b.value_(f);
|
|
|
|
r = Slider( a, Rect(0, 0, size, 12));
|
|
r.action = {arg ex; b.startIndex = ex.value *f.size};
|
|
|
|
// b.enabled_(false);
|
|
b.action = {arg xb; ("index: " ++ xb.index).postln};
|
|
b.drawLines_(true);
|
|
b.drawRects_(false);
|
|
b.isFilled_(true);
|
|
b.selectionSize_(10);
|
|
b.index_(10);
|
|
b.thumbSize_(1);
|
|
b.gap_(0);
|
|
b.colors_(Color.black, Color.blue(1.0,1.0));
|
|
b.showIndex_(true);
|
|
a.front;
|
|
|
|
)
|
|
::
|
|
|
|
|
|
subsection:: Use as a Sequencer
|
|
|
|
code::
|
|
(
|
|
var size;
|
|
size = 12;
|
|
s.waitForBoot({
|
|
n={arg freq=330; SinOsc.ar(freq,0,0.2)}.play;
|
|
|
|
w = Window("test", Rect(200 , 450, 10 + (size * 17), 10 + (size * 17)));
|
|
w.view.decorator = FlowLayout(w.view.bounds);
|
|
b = MultiSliderView(w, Rect(0, 0, size * 17, size * 17));
|
|
b.value_( Array.fill(size,{|i| i/size}) );
|
|
b.background_(Color.rand);
|
|
b.action = {arg xb;
|
|
n.set(\freq, 330+(1100*xb.value.at(xb.index)));
|
|
("index: " ++ xb.index ++" value: " ++ xb.value.at(xb.index)).postln};
|
|
b.elasticMode_(1); // makes the squares fit evenly
|
|
b.showIndex = true; // cursor mode
|
|
b.readOnly=true;
|
|
w.front;
|
|
|
|
r = Routine({
|
|
0.1.wait;
|
|
30.do({ arg i;
|
|
b.index_(i%size);
|
|
|
|
b.doAction;
|
|
0.1.wait;
|
|
});
|
|
|
|
20.do({ arg i;
|
|
b.index_(b.size.rand);
|
|
b.doAction;
|
|
[0.1,0.2].choose.wait;
|
|
});
|
|
1.wait;
|
|
n.free;
|
|
{w.close}.defer;
|
|
});
|
|
AppClock.play(r);
|
|
});
|
|
)
|
|
::
|