Juce Tutorial 05- The Slider, Slider Listener & Label Classes

hey what's up everybody I'd like to welcome you to another juice tutorial and in this tutorial we're going to go a little bit deeper into the slider class and also the slider listener class which allows us to broadcast changes that we make in slider values to maybe other sliders or to any other parameters that we want to be affected when we're actually moving a slider or moving a dial we're also going to talk a little bit about the label class which allows us to put titles to our sliders and we're just going to combine all three of those things and just get into it okay so as always we're going to just start up a new project just open up our producer and once again we're going to be doing a GUI application because we're working with the GUI I'll just call this slider tutorial one just throw this in the development folder and here we are back in juice again this derives from the juice tutorial that you'll find on the website covering this latter class so I encourage you to go and check that out if here if you haven't already so we're just going to go ahead and open this up in the Xcode I'm going to be referring to the API quite a bit for this one because rather than just trying to rather than just go through the functions and I'm just showing you kind of what I've done for practice I think it'd be a little bit better if we just kind of go through it step by step and really just think about well why are we adding these things and just really thinking the process through that's what I find to be most helpful so here we have our main CPP which just gives us our base juice basic juice functionality and then our main component which manages our GUI so here we're just going to create a couple sliders okay and we're going to be using that doing that using the slider class so I'll just call this slider and we're going to create one it's going to be called the frequency for frequency so we'll call it the frequency slider then we're going to create a duration slider for time and what we'll be doing a little bit later is we're going to basically link these two up so so when you move one dial it controls what the other dial what the other's ladder is doing okay so um one thing that I've maybe I knew it but I didn't kind of consciously realize it is that for a component to be a child component of you know like in this case our main component you don't have to necessarily set up your own class in order for that to happen okay so we'll see that as we as we go into it here in that arm now we're just going to add this child component to this ladder as a child component to our our main content component okay so we'll just do our add and make visible function here and we'll do a frequency slider okay and now we're going to do we're going to use a couple arm functions within the slider class okay so frequency slider if we're thinking if we're thinking about the what we need that those numbers to look like let me just go into the slider class here okay so we need to set we don't we don't know what the maximum and minimum numbers are for the slider that we have at the moment so we need to go ahead and set those okay so let's go to this function that we have called set range okay so we're just setting the new you slide a range okay so we got frequency sliders that set range okay we go from 50 to 5,000 okay so we've just taken the slider there and we've just set the range from 50 to 5,000 okay and then we can do frequency slider complete come on man text blank clip I don't have to start again so let's let's see how we can add set set text value suffix okay so that means that we can set it to set a string to define what the value of our numbers is in this case it'll be Hertz okay so text by you suffix okay that's just a string as you can see here okay we'll just set that to Hertz okay nothing nothing really mind-blowing going on just yet okay um I'm just gonna move all this stuff get rid of it okay then now I don't want to get rid of that okay we'll just set the bounds on this real quick so that frequency slider set bounds okay what I'll do is I'll actually make a border here so this is just like kind of roughly following from the tutorial that we have on the g's website so constant border equals 120 so we'll just set that so it's 120 pixels and and what am i done there oh yeah just once some numbers here so we've got border set it 20 so it's 120 pixels on x-axis 20 pixels on the y-axis and we'll do get width - order for the how far it's going to go then just 20 again okay let's see if let's see if it shows up so we're just going to compile here it's working it's working I would edit these but you know I'd like to go straight through so we you know so we can just like kind of follow along you know see the points where we're just kind of kind of getting stuck and work our way through it so there we have our slider okay so as you can see it has our range from 50 Hertz to 5000 Hertz and this is our this is our slider okay great so now we have another class that we can use - wouldn't it be nice if we could just put a string next to it that says frequency I think that would be nice so what we could do is we can use what's called the label class for this so if I go to the label class okay so here we got let's go down and let's see what we so we're going to need this function attached to component okay we'll come back to that in just a minute so we want one more we're going to set the actual text okay was it at the top set text okay so first we need a label object okay so just to keep things neat we'll put this here we've got label we'll just call this frequency label okay then while we're here we'll just set a label for the duration as well when we come back and we create that a little bit later okay so now we want we need to add it make it visible so frequency label okay then let's go back to our API see what we need so we've got set text so frequency label set text ok just once a string down so we'll just call this frequency okay now notification type what this means is if when if you were making like a change in this string during while you were running the app would you want it to send a notification to you know maybe somewhere else don't let it know hey I've changed what these letters are okay if we look in here we can see our options okay have a couple different ones here what we want is don't send notification we don't need it to send a notification because we're not going to be changing that that string okay okay so now we got so now we have the slider itself we have a label but now we need to attach the slider to the label okay it doesn't know where it needs to be drawn that yeah okay so we do that using the attached to label function so we got frequency label attached to component okay and so as you can see it's looking for a pointer here so we're just going to point it towards the frequency slider okay okay boolean on left okay so if I if this is true then the string will appear to the left of the of the box if it's false then it'll appear above the box and so we want this to be true okay so if we recompile now see what happens okay so here we go so now we have nice little label here for our frequency okay so let's go ahead and do that again same thing for the duration that we've created okay just save same type of stuff so do add and make visible okay duration slider okay slider set range I need to do this I'm just going to oh yes yes that's right because um okay so so frequency equals 1 over the duration okay so basically if we just input that formula in here I'll go and I'll explain this a little bit further once we get it all set up okay so okay so what what we're saying here is we we have a formula which is frequency equals 1 over the duration okay and so what we're going to do once we link once once we link these two sliders up is we want one to control the other so when when we're controlling the frequency it will be showing how long the duration of that wave would be if that wave were to just play which would be like hundreds or possibly thousands of a second long okay so be so short you you wouldn't even register it probably so so what we're doing here is we're just a we're just taking that formula we're just applying that here are in our range okay so we're going to do one one over for good Zee slider dot get minimum so we're just taking that formula with that we know and we're just using that too so that later on we can go we can leave those two sliders up and want to control the other and you can see that you know if a if our frequency is 500 Hertz well we'll be able to see how long that that wave would actually play if if we were just going to play it which would be like hundreds of a second possibly thousands of a second long okay okay great so so now we just need to place it on our GUI so we got duration slider set the bounds okay we're just going to go to with the border again okay we'll put it 50 pixels down got get with Oh - border then 50 pixels down again okay and while we're while we're here we should just do the rest of our do the rest of our stuff let's not skip around day so we got duration slider set text so we're just going to set the seconds so we'll just put an S there okay and then we're going to go ahead and make our label as well so we've got so we've already created our label object called duration label okay we're just going to make that visible now and now we just need to define some parameters for that okay so for the label set text and this would be duration and what have I done wrong here that we're good we're good okay and we're going to just attach it to or duration component okay so so we got attached to component okay once wants us to point it towards something here so we're just going to point it towards the duration slider okay and we want it to the left of the slot of the box itself so we're just going to set this to true again okay now if we compile then we should have we should have the both sliders okay but we haven't okay oh that's because I've said frequency label here instead of duration label okay so it's overwritten it's written duration over top of our frequency so we just need to change this to duration break okay so okay so here we go so now we have two sliders we have our frequency slider ever duration slider okay but when I'm moving one it's not affecting the other okay so we need to change we need to change that okay so the way that we change this and this is where things might get a little bit kind of confusing to wrap your head around a little bit but just follow me and listen to a couple times if you if you get confused so we have another class okay it's called slider listener okay and so what this does is this allows us when we're making changes to one of the sliders and we need another slider or a parameter to react to the changes that are being made in the slider we need this class so we need to be able to add this functionality into our into into our class okay so the way that we're going to do that we're just going to put comma here and we're just adding slider slider listener as another base class okay so that's just a system another base class just going to give us the functionality within our main content component okay so now we have that now if we go into our slider listener class okay not really a whole lot here okay now what we see is we see a virtual function okay and we see that it says equals zero okay what this means is that it's a pure virtual function which means that we need to in order for this to work we need to over write we need to do an override and define what what we want to happen when the slider value is changed okay so anytime that you see this equals zero that means it's a pure virtual function of an abstract class so like if I just tried to let's just say that I just tried to run this right now okay so it says failed okay so it's allocating an object of abstract class type okay and what that means is that we've got an abstract class which is this slider listener okay saying that something hasn't been defined there's a pure virtual function that needs to be defined in here okay so we're just going to do that now okay and we'll just use void slider value changed void slider value changed unfortunately it doesn't auto correct when we're doing this okay and now we just needed to define what happens when the when we move one slider will what's going to happen what's going to actually what's going to actually change so if we go if slider equals and so as you can see we need a pointer to a slider here so we're going to go and frequency slider okay then what we want what we want to happen is we want when we change the frequency slider we want the duration to be changed okay with it okay so we've got so we're going to get a duration slider dot set value okay and we're just making that the reciprocal of the of the frequency so so the duration slider is just one over so the frequency so the duration slider is one over the frequency sliders value okay so we need the value of that so we're just going to do get value okay but if we move the duration slider we need the frequency slider to change okay so we need an else--if here slider equals ampersand duration slider that we just need to do the same kind of thing but just for the frequency slider so frequency slider set value 1.0 over duration slider okay value okay so we're just kidding we're just getting the value of the duration slider of the frequency slider and we're using that to define where the where the other slider is going to be okay now we see this little kind of warning sign here okay the reason that that's a warning side is because okay so we're so we're overriding a pure virtual function that's coming from the slider listener class so we just need to actually put that there so we just need to override it'll still compile but it's just good practice to have the override there so that's just letting that's just letting anybody that's reading the code know hey we're overriding a class we're overriding a function from one of the classes that were adding the functionality from okay so we've we've created our function we've created our function now so now what we need to do is we need to actually we need to actually tell the we need to tell the component of the the content component to listen for any changes that are happening in either one of our sliders okay and so what we're going to do here if we go back into our our slider listener class where am I here well I think it's actually from the splatter class so let's get a slider okay here we are [Music] okay and we need I think it's called adlistener yeah so so what we need to do is we need to add a listen we need to add what's called a listener to our component okay because what's happening is that our arm our slider is going to be changing value but how does it how does it know um how does one thing know when the other thing is changing the value okay so I believe it we're going to go frequency slider add listener and then this okay this meaning the main content component okay the main console with any time that we're making a change in the frequency slider that is registering to the main content component okay that's what we made by this okay and we're just going to do the same thing here for duration slider okay man I hope this works if not I'm in trouble okay succeeded good news so far okay ah there we go so when I'm making changes in the frequency slider it is making the changes in the duration slider as well and vice versa okay don't we see a couple things we see a couple things that we need to kind of fix to make this a little bit more usable okay first thing if you look at when I first open up the program you'll see that both values are at zero or both values are at their minimum should I say and then when I click on this it jumps up to that value okay so let's just let's just try to kind of do something about that okay so we can just set an initial value for the frequencies for the frequency slider so we can do frequency slider that set value let's just make it 500 let's see if that fixes things okay yeah and you can see that that that fixed it so both of those so the frequency the frequency slider jump to 500 and then the duration jumped to immediately to its corresponding value once once we once the program opened okay but one thing that we'll see as well is that okay if if for all my audio people here if you look at this slider for frequency okay let's just imagine that this is like a like a filter let's say and anybody that's designed to filter before it is that normally when you design one arm you want the values to be logarithmic okay so for example if I just go to 500 okay look at how far look at how far along the slider I am just very like I've just made a very small change and I'm at five about 500 Hertz already okay anybody that's done any sort of production does that you're going to makin a lot of frequency changes between like you know 20 Hertz and 500 so we need the we need this range to be a little bit more usable we need it to be a logarithmic range okay so we can use that we could do that using arm so I believe it's a frequency slider set it's called sets Q so we're skewing the value okay so sets Q value sets Q factor from midpoint okay what that means is we're going to we're going to basically skew the values of the slider to make it a little bit more logarithmic by setting a value that's going to be the midpoint of our slider okay so in this case we'll just make five hundred five hundred our our midpoint should make it like a floating point value so let's just do that quick okay so so now we have five hundred so now this value between the minimum value and the midpoint of the slider is now five hundred is now five hundred Hertz and five hundred hurt five hundred Hertz to five thousand Hertz is covered by the latter half of the slider okay so that makes it a little bit more intuitive for you know any producer sound engineer so on and so forth we're making like a filter basically okay so we're just going to do the same thing for the duration here because as you can see you know the duration is a very intuitive either okay so I've got I've got this range that's so now we're like about sixty percent through but look at how look at how crazy how minimal our value is in the duration okay and then it just kind of we need that to be a little bit more intuitive so we'll just do the same thing for the duration for the duration slider set okay and we'll just set that to zero point zero zero two okay I'm just getting the numbers from the tutorial from the from the juice website you know obviously if we were doing this a little bit you know if we were doing this on the fly I would take this obviously a little bit longer to get you know the best numbers for this okay and so as we can see now now the slide is a very intuitive when I'm getting to the maximum value on the first slider second slider is getting towards the minimum and then vice versa okay and then we'll just do one other one here that is on the tutorial which was setting the textbox style so we can actually if we just if we just recompile quickly here we'll see that these values it's actually not that bad but we can if you look at the duration right now that's a really long number there but that we just got like this little dot dot dot showing okay while the numbers that we have are too big for our text for our text box here so we're just going to try to fix that so we got so we'll just do frequency set text box style of frequency splatter set Xbox tile okay so first first thing is where we want the actual text box to be so it will do slider left I think it's text box left yeah so if it's read-only yeah so um so that's if we wanted to be able to actually just input text into the box itself if we jump straight to that value so let's just make that false okay then we just need the text box with we'll just put 120 text box height we can just make it the same as what it is as the default value so we've got a frequency slider get text box height okay just do the same thing for the duration slider text box style so do the slider text box left we've got this false so we can just type values in there from 1 to 120 pixels long then we've got a duration slider then we're just going to get the text box height again okay let's just see how that looks for us okay so that's let's see what happens here yeah so it shows the whole value rather than having that little dot dot dot there so if we wanted to get the exact value okay so ah that's the end of this tutorial and I hope you enjoyed if you enjoyed it please do what you got to do like subscribe all that stuff and I'll see you the next tutorial thanks for listening

Channel: The Audio Programmer

Views: 10,496

Keywords: audio programming, creative coding, audio coding, creative programming, digital signal processing, dsp, plugins, vst, software development, ableton, max msp, c++, sample rate, bit depth, nyquist theorem, juce framework, tutorial, beginner, easy, games development, games programming, basics, openFrameworks, open Frameworks, ofx, Maxim, Maximilian

Id: pTJYowGub6o

Length: 34min 30sec (2070 seconds)

Published: Thu Jul 13 2017