Where can I find the code behind this?


#1

Hello,

I’m trying to create a simple master volume slider for an interface I’m building. I’m not really a coder so I have my issues!

When I use this:

s.volume.gui

It does exactly what I need. I’d just like to integrate it into my interface rather than have it be its own window. If I could see the code behind it perhaps I’d be able to integrate it a bit easier, at least thats my thinking.

Thanks for any help

Greg


#2

Hi Greg,

You could pass a parent window/view as the first argument, like this:

w = Window().front; // Your parent window
s.volume.gui(w);

You could also take a look at the help file for the Volume if you want to customize the controller further (set volume range, mute etc)


#3

Right. I checked out the Volume help and am a bit confused by it. It says one of the instance methods is

volume = aVolume
set the volume (in db)

Im unsure of how to set the volume in db.

I’m also trying to bake this into an EZSlider but haven’t figured out how to do so correctly. I know the issue is in the action parameter.

Heres what I have:

masterVol = EZSlider(w, Rect(400, 20, 30, 365), " Vol ", \db.asSpec.step_(0.01),
{ v = s.volume;

	v.volume = rrand(-90, 8); //this makes volume jump around when using the slider
	v.setVolumeRange(-90, 8);

},

unitWidth:30, numberWidth:60,layout:\vert, margin: m);

masterVol.setColors(Color.fromHexString("#336666"), Color.white, Color.fromHexString("#20222C"), Color.grey, Color.white,Color.yellow, nil, nil, Color.grey(0.7));

masterVol.font_(Font(“Menlo”,10));

Clear as mud im sure


#4

Could something like this work? The action function takes the slider as the first argument, and then we take the .value from the slider to set the volume.

And also, move v.setVolumeRange out of the action function. It’s only needed once.

var w = Window().front;
var masterVol = EZSlider(w, Rect(400, 20, 30, 365), " Vol ", \db.asSpec.step_(0.01),
{ |slider|
		var v = Server.default.volume; // Just a preference - use Server.default instead of s (feels a bit safer)
		v.volume = slider.value; //This sets the volume to EZSlider value
}, unitWidth:30, numberWidth:60,layout:\vert, margin: m);
v.setVolumeRange(-90, 8);

#5

The construction of EZ components is done in a somewhat old style, so it can be a bit fiddly to use it with other UI (not always EZ…). You’re roughly correct regarding the action:

e = EZSlider(
	bounds: 50@200,
	label:  " Vol ", 
	controlSpec: \db, 
	action: { 
		|slider|
		slider.value.postln;
		Server.default.volume = slider.value; 
	},
	layout: \vert
);

The first argument to the action function you provide is the slider itself - you can get the value (in dB) via slider.value - this is where you would set it on the server.

In terms of layout, you probably want to add a blank view as the parent, and then insert that into whatever your larger window is. Also a hacky trick to get the number view to work - it seems buggy when you re-parent it?:

~slider = EZSlider(
	parent: ~view = View(), // give it a parent, otherwise it creates it's own parent...
	bounds: 50@200,
	label:  " Vol ", 
	controlSpec: \db, 
	action: { 
		|slider|
		slider.value.postln;
		Server.default.volume = slider.value; 
	},
	layout: \vert
);

// Fix numberView resizing, otherwise there's a bug where it doesn't display right...
~slider.numberView.resize = 0;

~window = View(bounds:100@300).layout_(HLayout(
    ~view,
	LevelIndicator().value_(0.5),
)).front;