JUCE 6 Tutorial 05 - The Slider Class

hey what's up everybody i'd like to welcome you to another juice tutorial and in this tutorial we're going to talk about the slider class slider class is a type of component that you can use to control uh just about anything in your audio app or plugin and this is a good place for us to start because this is one of the bread and butter objects that you will need to use when creating any sort of juice app or plug-in so let's go ahead and create a new project and i will just call this test project for now i'm just going to make this a ui app because we aren't going to be producing sounds today i will just save this to the desktop and now we have our source files our main component and our main and then we're just going to save and open this in our ide so if you've been checking out the previous juice tutorials you'll see that we were talking about the component class and how this is the base class for just about anything visual that you see in juice and the slider class if we just go to our juice api and we will put a link to the actual documentation uh in the description and if i just search for slider we will find our slider class and i prefer to do this because this is a great way just to show people that are just getting started how everything kind of works from the ground up so what we could do is we could see that looking up here at our inheritance diagram that slider inherits from the component class so we covered what the component class does in our last two tutorials and so essentially what that means is that anything that a slider can do a component can do okay because a slider is a type of component okay and so now what we're going to do is we're going to start creating a slider so what we'll do is we'll just go into our private section of our main component class and we can just declare a slider by using the juice namespace and just calling it juice slider and i'll just call this slider one so now if we take a look here we see that we have three different types of constructors that we can call on uh when we actually create this slider okay so we can call a constructor where we don't give it any sort of arguments we can give it a component name if we wish to refer to it later we could also give the slider a slider style and i'll show you more about that in a moment and the text box entry position when we actually create the slider itself so we'll actually walk through that a little bit later in this tutorial so going over to our main component constructor and we want to start thinking about some of the things that we want to do with this slider so for instance there are different slider styles so we have rotary sliders we have linear sliders and there are a couple different types of sliders that we can create we also would like to think about what type of range that we'd want the slider to have so the slider would need to have some sort of beginning value some sort of end value and we could also give it a default value where we actually say where we want the slider to start upon startup so the natural place for us to actually give the slider these values would be in the main component class in the constructor because the constructor calls when the app is first initialized so when you first hit the button to actually create the app that calls the constructor and the constructor just sets up everything for you and that constructor only gets called once so we don't need to create the slider again and again we only need to create the slider once and it'll be there for us throughout the lifetime of the application so now what we can do is we can call on some of the methods and we will see that there are various methods that we can call here so we can see that we have set slider style we can set the rotary parameters there's actually loads uh there are loads of methods that you can call on here and so i'll just show you a couple of the basic ones here so the first one as i was saying before is setting the slider style so we've got slider one and then we can call set slider style we see that this takes a slider style object so many times i know when i was first starting out with using juice i thought slider style i don't know what that means okay so sometimes what you can do is you can go back to the juice api i'm not sure if it's in here because it's it's part of the slider as part of the slider class so if we scroll all the way back up we see that we have this enum called slider style so we see that we have linear horizontal style linear vertical and so on and so forth so this tells you what sort of slider style that you want to use so what we'll do is we will just call this a linear horizontal slider so once again we for any juice objects we need to use the juice namespace and then we have juice and this this class called slider style is within the slider class so we've got juice slider then slider style and we will just make this a linear horizontal slider okay so for people that are just starting off this may look a little bit daunting okay so let's just walk through that so this is a juice object so we need to uh we need to pre-seed any juice objects with the juice name space that lets it know hey we want to instantiate a something that's within the juice api and then the next thing is slider because we're doing a we're going into the slider class and then we're going into slider style and slider style is within slider so we'll show you how that works here so we have class slider then we have the enum slider style that is within the slider class okay and then within that you have these different enums and this one is linear horizontal okay and i'll show you that in code really quick as well so if we command click on mac and then go to jump to definition we'll see this in code okay and i know that some people that are a little bit more experienced they know these things but uh this is these are things that took me so long to actually figure out myself so uh so i'm going to go through them so we see that we have this class it's called slider and then within slider we have this enum don't want to don't want to do that we have the xenom called slider style and then we have all of these values okay so it's good to get to know how to actually read uh the read through the code base as you uh as you're doing this okay so that's how we're coming up to that that line of code so now we have slider one and we can set a range and here we have a minimum so we'll just make the minimum 0.1 i can make sure that this stays as a float by putting a little f there and i could make the maximum 1.0 i'll put an f there i'll make the minimum zero one thing that you'll notice here is if we command click into set range what we'll see is that actually it'll probably be easier if i show you in here so set range what we see here is that we can do uh we can call set range with a minimum a maximum and we see here that there's an optional third argument and this is something that's helpful for a lot of people uh where when you see this equals zero as uh as an argument what that means is that that is optional so i can just leave it with the double the new minimum the new maximum and just leave it at that or i could give it an interval and an interval is when you're increasing or decreasing the slider how much are you actually increasing or decreasing by so in this particular pl in this particular situation it'd probably be good for us to do uh in increments of 0.1 okay so if you don't do that then what'll happen is when you get your slider range it'll actually have four or five decimal places it'll have four or five digits to the right of the decimal place and a lot of people don't want that they just want to say okay 1.1 1.2 you know so on and so forth another thing that we could do is we can uh there's a text box that we can where it actually displays the value and we can decide where we want the text box to be so i can say slider 1 set text box style and what we could do is once again this is a this is part of the slider class so we do juice slider text box and you can actually go directly to this we'll do text box below okay so we'll put the display of the value below the actual slider you can make it read only or you can make it where you can actually click in and actually modify the value actually type in the value we'll just make it read only for now so that'll be true then here we will set the box entry width in pixels so we'll make this let's say 50 pixels uh wide and we'll make it 25 pixels high so we've set this we've set the slider style we've set the text box style we've set the range now we might want to give it a default value to start off with so we can say slider one set value and we can enter the value that we want this to default with when it starts so we'll put this at 0.5 and the last thing that we want to do is since slider is a type of component we need to actually add it and make it visible to the parent component okay so think of the parent component this main component that we're in right now this is the kind of the canvas and so we need to actually add the slider to the canvas so we do that using the command atomic visible which is a component method and now we just put slider 1 in there okay now we'll go down to our paint method here we'll just get rid of all this stuff and we'll do a we'll just make the screen black so once again juice colors black and now all we need to do is we need to set the actual slider on the canvas which is our main component so we can do that using the set bounds method and what i will do is i'll try to put this in the middle of the screen so let's let's do git width divided by 2 minus uh let's see 300. now actually let's do 200 okay and then get height divided by two minus 100 and we'll make the width 400 and the height 200. so this should pop up in the middle of the screen so we will try to build now and hopefully we'll have a slider that will be on the screen so while we're doing this just wanted to remind you about the audio programmer community so if you're looking to learn more stuff about code you have questions and want to connect with other other audio developers be sure to join our community over at the audio programmer dot com forward slash community and that will give you access to our discord server so here we go so here's our slider and we can see that it gave us a default value of 0.5 and we can go left and the minimum is 0 and the maximum is 1.0 okay so that's that's what we'll do there and now what we could do is we can actually change this slider style so let's do rotary horizontal vertical drag that's another one that's quite popular and we will build again and we will see that we will have a rotary slider now and once again default value is 0.5 and it goes from 0 to 1. okay and that's really how you do it so those are the basics so for now we're just showing the basics let me show you one more thing let me take off this third optional argument here and let's just build that again and you'll see that the actual display of the slider is now 0.5000 and it has a little dot dot to show you it continues on and see here that we have more granularity in our decimal places okay so uh so you can see that um that we've used that third argument to actually kind of truncate the values to point uh to 0.1 so that's really it for this tutorial so once again this is just the basics i hope you enjoyed this tutorial and that it was helpful for you be sure to give it a like and subscribe if you found it helpful and i will see you next time

Channel: The Audio Programmer

Views: 1,929

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, slider class

Id: JieJUxFcAXk

Length: 15min 53sec (953 seconds)

Published: Thu Sep 24 2020