Two EnvelopeViews on one window

Questions
#1

I’m a little confused as to how I might plot two editable EnvelopeViews onto a single window so they can be edited together. I figure this is possible but the Qt GUI system has always been a challenge.

Here’s the code I’ve been playing with:

w = Window("EnvelopeView", Rect(150 , Window.screenBounds.height - 250, 1000, 500)).front;
w.view.decorator = FlowLayout(w.view.bounds);

b = EnvelopeView(w, Rect(0, 0, 995, 490))
.value_([Array.fill(10, {|i| i = i + rrand(0.01, 0.1)}).normalize,Array.fill(10, {rrand(0.001, 1.0)}).normalize ])
.grid_(Point(0.1, 0.1))
.gridOn_(true)
.drawLines_(true)
.selectionColor_(Color.red)
.drawRects_(true)
.step_(0.005)
.action_({arg b; [b.index, b.value].postln})
.thumbSize_(10)
.keepHorizontalOrder_(true);

c = EnvelopeView(w, Rect(0, 0, 995, 490))
.value_([Array.fill(10, {|i| i = i + rrand(0.01, 0.1)}).normalize,Array.fill(10, {rrand(0.001, 1.0)}).normalize ])
.grid_(Point(0.1, 0.1))
.gridOn_(true)
.drawLines_(true)
.selectionColor_(Color.red)
.drawRects_(true)
.step_(0.005)
.action_({arg b; [b.index, b.value].postln})
.thumbSize_(10)
.keepHorizontalOrder_(true);

w.front;

I basically want both b and c on the same window. What’s the best way to go about this?

#2

The height of each EnvelopeView should be less than half the height of the window. I adjusted your code making the EnvelopeViews height 240 to show both EnvelopeViews:

(
w = Window("EnvelopeView", Rect(0 , 0, 1000, 500)).front;
w.view.decorator = FlowLayout(w.view.bounds);

b = EnvelopeView(w, Rect(0, 0, 995, 240))
.value_([Array.fill(10, {|i| i = i + rrand(0.01, 0.1)}).normalize,Array.fill(10, {rrand(0.001, 1.0)}).normalize ])
.grid_(Point(0.1, 0.1))
.gridOn_(true)
.drawLines_(true)
.selectionColor_(Color.red)
.drawRects_(true)
.step_(0.005)
.action_({arg b; [b.index, b.value].postln})
.thumbSize_(10)
.keepHorizontalOrder_(true);

c = EnvelopeView(w, Rect(0, 0, 995, 240))
.value_([Array.fill(10, {|i| i = i + rrand(0.01, 0.1)}).normalize,Array.fill(10, {rrand(0.001, 1.0)}).normalize ])
.grid_(Point(0.1, 0.1))
.gridOn_(true)
.drawLines_(true)
.selectionColor_(Color.red)
.drawRects_(true)
.step_(0.005)
.action_({arg b; [b.index, b.value].postln})
.thumbSize_(10)
.keepHorizontalOrder_(true);

w.front;
)

Best,
Paul

1 Like
#3

Hello,

Regarding QT, it can be misleading, but unless you want something to have a fixed size, you should avoid specifying sizes.

The idea is that you have a layout system implemented that handles views resizing automagically, allowing you to gain time while having a responsive software.

The underlying idea is that the width and height parameters of a View should never be set manually, except for the main Window. If you want to set a fixed size, or a constrain, for a view, you should modify minWidth and maxWidth (same with the height). Then, the layout system is supposed to deduce every view’s size and position from the main window size.

I think this is what you want :

(
var win = Window("", Rect(0, 0, 200, 200));

var envView1 = EnvelopeView()
.value_([Array.fill(10, {|i| i = i + rrand(0.01, 0.1)}).normalize,Array.fill(10, {rrand(0.001, 1.0)}).normalize ])
.grid_(Point(0.1, 0.1))
.gridOn_(true)
.drawLines_(true)
.selectionColor_(Color.red)
.drawRects_(true)
.step_(0.005)
.action_({arg b; [b.index, b.value].postln})
.thumbSize_(10)
.keepHorizontalOrder_(true);

var envView2 = EnvelopeView()
.value_([Array.fill(10, {|i| i = i + rrand(0.01, 0.1)}).normalize,Array.fill(10, {rrand(0.001, 1.0)}).normalize ])
.grid_(Point(0.1, 0.1))
.gridOn_(true)
.drawLines_(true)
.selectionColor_(Color.red)
.drawRects_(true)
.step_(0.005)
.action_({arg b; [b.index, b.value].postln})
.thumbSize_(10)
.keepHorizontalOrder_(true);

win.layout_(
	VLayout(
		envView1,
		envView2
	)
);

win.front
)

If you want views to have different sizes, you can specify their ratios using the stretch keyword :

win.layout_(
	VLayout(
		[envView1, stretch: 2],
		[envView2, stretch: 1]
	)
);
1 Like