Juce Tutorial 04- The Slider & Rectangle Class

hey what's up everybody I'd like to welcome you to another juice tutorial and today we're going to be talking a little bit about the slider class and also about the rectangle class so this is carrying on from our last tutorial where we were talking about different components drawing different elements of your GUI and now we're going to get into actually putting a slider or a dial on the screen and discussing a little bit about how to properly position it and the best way to go about doing that so as always we're going to go ahead and open up the producer and we're going to do a new project this time we're going to do a GUI application because that's what we're working with today and I shall just call this dial test1 just put this in J's folder so as you can see as usual it creates our main.cpp which is just giving our basic juice functionality as well as our main component which is where we will start drawing our GUI dials and components so this is going to be a little bit different from the juice tutorials that you see online for get look and feel and customizing your knobs because when I downloaded the tutorial on that I saw that there were a couple different methods and things that were that were on there that I didn't I didn't quite get until I went up to a little bit more detail so what this tutorial is going to do is it's going to actually go into detail about what was downloaded from that tutorial and just going into it and discussing a little bit why the code is the way that it is and discussing the best way to kind of get your GUI situated and your dials and sliders into the right positions so we're going to go ahead and just open this up and Xcode as usual and here we go one of these days it'll open and here we are okay so we got that ESTs and here we go into so the first thing we're going to do is we're just going to go into our header file for our main component now normally if you were I would assume I'm just learning how to use juice myself but I would assume that if you have different sections like let's say that we're making a synthesizer and you had like an oscillator section maybe that would be like a separate component or like a filter section would be a whole a whole component of its own with a whole separate class of its own but since we're just going to be drawing one or two dials and doing just some basic kind of moves with that we're just going to keep this all within the main component header file and C++ file so if I just opened up quickly the the juice API and just just to show you where I'm getting these things from as always so if we go into the slider class which is right here okay and as as usual the the slot of all the different public methods that we have here are a little bit too expensive for me to cover in this tutorial so what I'm doing is I'm just kind of doing this to get us started getting some basic things up on the screen and getting some basic functionality out of it and then maybe at a later point I could come in and we could do like a more advanced tutorial but for now we're just going to do some very basic just just methods and getting things up on the screen okay so just to show you this is where we're getting all of the stuff from the slider class okay so if we go in here and since since the slider is part of one of one of the classes within the juice modules we can just call that up without having to include a whole different header file so I can just call this slider and we'll just call this dial one okay then we'll just go ahead into our C++ file okay we'll just get rid of all this hello world stuff okay we'll just do quickly a we'll just quickly do our background color here so two colors we'll just make it aquamarine and get rid of this so if you're not familiar with what's going on so far you may want to go back check my past tutorials to get caught up so I'm not going to really go over again and what all of this is about because that's already been covered okay so first thing that we need to do is since we have a component that's the since we have a slider that we've created dial one here what we're going to do now is we're just going to make that visible okay so I do dial one dot oh my bed and make okay but if I compiled that right now you wouldn't see anything because we need to specify a couple things first before it's able to actually be visible on the screen okay so so we just look into our class reference real quick just to see where we're at okay so one of the things that we need to specify is what sort of slide or style that we have okay so you can as you can see there are quite a different a few different options that we have here okay but we're just going to go with a rotary slider today okay so if we just scroll down here into and we see this method set slider style okay and then we just need a call slider slider style and then here are options Auto completing for us and we've got our rotary slider that we're going to create there okay now another method that we have here that we have is text a set text let me just run it set text okay so we have set back text box style so if we wanted to name the text box or if we wanted to have the value of what our dial is then we can go ahead and do that here so we could do that one set text box style okay and just to demonstrate for you what to do if we don't know what needs to go in here if I just go into text entry box positioned and I command present hold command click there then I can see all of my options here so we have no text box well it will do text box below for this one okay so we could do messed it up set text box style so we got slider text text box below okay so there's boolean if it's read-only okay if we set that if we set that the true then we can't actually type what the what value that we would like in the box so we're just going to set that to false okay so so if we wanted to if the the dial is at zero and I just wanted to type five and I wanted to and I wanted to the value to go right to five then I could do that okay so now the box with I'm just going to set it to 50 pixels the height I'll just set it to let's set it to 20 pixels okay so now we have our our text box style we have our slider style now we have to just set where we want the slider to be we have to set the bounds so here we could just do that so we got dial 1 set bounds okay and then we'll do get local downs okay and as we said before get local downs just looks at what we've set the size of our component to and we can see that it's 600 400 so if I compile here hopefully we should have a slider in the screen okay so it's just compiling forever okay linking man taking a long time okay here we go great so here's here's our dial okay and you can see as I move it then we see the value in the box below if I wanted to type let's say a type five then it goes right to five okay so as we can see the slider is is big because we've set the bounds to the dimensions of our main window and so what we're going to do now is we're just going to discuss exactly how we can get a really useful way of drawing the GUI and um this is what we're going to go in a little bit into the rectangle class and the reason that we could the reason that we're going to draw it using the rectangle class rather than just saying okay I want it to be you know at position 10 10 with a position with with a width of 20 pixels and a height of 20 pixels the reason that we're doing this the reason that we're doing it this way is so that let's say that we just build a synthesizer and it's you know a desktop VST that we would use in Ableton Doce at some later point we wanted to take it and make it adaptable for an iPad or for your mobile phone then what we could do is we could make this this would already be scalable so that we can scale it to any size and that everything will be will all your dials and your sliders and your GUI will remain relative to the size of the screen rather than setting kind of hard-coded positions okay so let's go ahead and close out of this so now we're going to create a rectangle object okay so if we go back into our API real quick and then go to rectangle okay and you know when one thing that I was wondering when I first started doing the juice framework was why do we have just a rectangle class while it wasn't there like an ellipse class or a triangle class and the reason that there's a rectangle class is because you know so many of these things we're doing when we're drawing a GUI or you know we're putting it into sections that are typically a rectangle okay so it allows us to just kind of section off different areas of our of our screen as kind of property of certain components okay so here's our rectangle object and once again we have a bunch of different methods here okay and we're just going to use a few of those okay so I hope I get this all right so we're going to create a rectangle object okay and the rectangle is going to be of type int and we'll just call this area and then we're going to set that to our local bounds so all we're doing is we're just creating a rectangle that's the same size as our main window and our as the window and our main component okay so now what we're going to do is we're going to start sectioning off the rectangle to create our dial size okay so we're going to create another rectangle object and we're just going to call this dial area okay so what we've got is we've got the rectangle that's the area of our main window 600 600 pixels by 400 pixels okay and now what we're going to do is we're going to start kind of sectioning that off into a relative size for our for our dial okay so we're going to do area dot and now what we're going to do is we're just going to section that off so I'm going to do remove from removed from bottom okay okay so so what we're going to do is we're going to just take this we're just going to take our rectangle that's the same size as our as our screen and we're just going to divide it in half for now okay so we're talking about the y-coordinate for now and what we're going to do is we're just going to divide that we're just going to divide that in half okay so we're going to do area dot get height divided by two okay and so all we've done here is we've just taken the rectangle that we're calling the area same size as our main as our as our main window which is 600 by 400 and we've just cut it in half on the y-axis okay and now let's just see what that does if I just change this now to dial area okay and we can see that that's actually set it at the bottom of this at the bottom of the screen okay because what we've done is if we've if if we just arm if we just comment this out for a second put it back to our original here this kind of takes a second to get your head around took me a second to get my head around it but but now I can see why this is just the logical way to go about drawing any sort of GUI so scalable for any size so what we did was we just get we just basically cut the screen in half okay and then what we did was we removed we removed the bottom half of our imaginary rectangle and then what happened was we had the it drew another druid dial that was half of the size and then since it got rid of the area from the bottom basically that that whole area dropped out and that's why you saw it on the bottom okay so if I do remove area from top rather than from bottom what we should see is the dial on the top half of the screen but in the middle okay and that's what we see okay so we removed the area we removed the area from the top okay so we've removed half half of the original rectangle from the top then we have the bottom so then we have the bottom half and the bottom half drew at zero zero and that's why we have our knob at the top half okay so when it removes it from the bottom it actually draw it actually kind of positions it up okay so so now okay so we got so we've got it we've got we've got it in the middle of the screen now let's just go ahead and take that dial and let's move it over here to the left okay so what we have to do is we have to if we're just thinking about what we need to do there we need to actually cut out the left-hand side of the screen so we're cutting the left-hand side of the screen so that this dial actually slides over to the left okay so in here we don't need to create another rectangle object what we could do is we could just take the area that we have and then we can just remove from left and then we're just removing we're removing half of our space on the x-axis okay so we would just one area dot get width / - okay and this should draw it on the left hand side of the screen okay what I do okay there we go okay and there we have it okay so that's so that's what's happened there okay so just to give you another just to give you another idea of exactly how this is drawn to the screen I'll just go ahead and I'll create a rectangle object within my paint component remember all of your remember all of your actual drawing and graphic stuff happens in your paint component okay so let's just create another rectangle object to rectangle objects that are the same size as what we have in our resized functions that we got so we got total so we'll create one called total area equals get local bounds so that's just that's a rectangle that's the same size as our component window that where as the component that we're within which is 600 400 okay and then we're going to create another one that's just going to be the area where we would prospectively want just the dial okay so we'll just call that section area equals get local bounds I'll wait so um that would be total area removed from top so we're taking or taking the top half okay and we're just removing it so we're just going to do area bucket height well they're complete can't keep up with me um little area oh that's because I'm out of scope here so turtle there we go screw we should be fine now okay and and and so let me just stop let me just comment this out okay then we'll just set the color okay and then we'll just draw our rectangle okay and here we just want to put in our rectangle object which is called section area okay so this is just to demonstrate exactly what's kind of sectioning what's what's kind of just sectioning off there so you can see that it's drawn a rectangle there and the top half half of the screen so it removed the removed the the top half of the rectangle and then it took that section then it took our section and it just moved it up okay so now let's just say that I wanted to remove this left-hand side okay so we'll just do just do that so let's see um so let's just do another rectangle object here call that section area 2 equals section area dot remove from left okay and then we're doing section area um top get with / - okay so all we're doing is we're just taking that we're just taking that section and we're dividing it in half on the x-axis and what should what we should what we should end up with is a rectangle that is just in the quarter the top left-hand corner of the screen okay and that's what we have there okay so we had one that was just half the screen and then we'll remove the left-hand side of it then that left-hand side then what happened was the right hand slide so I'd slid over and now we have the left now we have just that top left-hand corner left okay so I hope that makes sense okay cool so we can just remove all this from now and now let's just let's just do another little dial here and um just to get another just just to get into the workflow of just drawing these things to the screen so we'll just call this bow - okay and then what we need to do is we just need to just set set our parameters here so we're just going to set the slider style okay I haven't done this yet but let's just try making it a different well a lot I'll do it as a rotary one first suppose to slider and we're just doing our slider style we're just going to do rotary another burglary slider okay now how to we're just going to set our text box style now okay and then so it's slide our text so there's actually one of them here that's called no text box so that's if you didn't want one so we'll just we'll just do that real quick okay won't make that false there's no text box so the dimensions of the box itself will be zero zero so and now we've got dial two and just kind of make it visible let's see we got an error somewhere okay and dial - okay what about done here what's the saying off just forgot semicolon set P semicolon okay cool so now we just need to draw we just need our set set our bounds okay so let's do set set bounds okay now let's just let's just do area here for a second and see what happens okay I'm actually curious what's going to happen here should just yeah so just it just draws it on the lower half of the screen okay and that's because um that's because our hmm interesting it doesn't draw it over it doesn't draw it over the other slider which is quite interesting it must see that there's the that the other slider is there so it's so it doesn't draw it into the same area that's interesting so let me just want to just do this now if I comment this out now my feeling is that it would draw to the middle of the screen again so let's just oh and it's drawing it to the bottom of the screen yes okay then that's because we've actually removed the area from the top so so what's happening is that is that when we've removed we've we've removed the top half we've removed half of the area so that's why it's drawn to the bottom of the screen okay so yeah so so this means that this actually removes this actually removes that space from the area and once it does that okay cool so if I just do if I just set this now to dial area dot remove from right then we're just going to do the same just take it away the half the screen then it should it should draw it up on the top right hand side okay which it does and as you can see the slider is this this rotary is a little bit bigger because it doesn't have the text box under it so if you can imagine just a rectangle around it and then that's how it's deciding what the how big the rotary is going to be okay so we've got we could also do well let me demonstrate this real quick okay so just to show one reason why it's useful to do our gooeys this way so if I just set this size to 300 rather than 600 and then just recompile then what you see is that the sliders stay relative to their position okay is still covering the top quarter section of your GUI okay so no matter how big or how small I set the screen the size is relative okay so another thing that they did let me just let me just do this on the here see if see if I can is this so if we do if we do a constant int and then we just create a border let's just make that ten pixels okay and then in our in our set bounds what we could do is we can remove so what we're going to do is we're going to remove the area from the left then what we could do is we could actually set attempt Ixil border around the area that we've removed so what happens is that everything gets ten take so smaller in both in from the left hand so so basically your rectangle gets 10 pixels smaller in every direction so it's not just like ten pixels in the x-direction ten pixels in the y-direction is 10 pixels up from the left templates from the right from the top and from the bottom okay so if I just do I think it's reduced yeah so so we got reduced okay so this may look a little bit complicated if you're seeing this for the first time but let me just walk you through okay so we've got the rectangle which is the same area as our screen okay 300 400 okay we've removed the top half from that rectangle okay so what we have is just the bottom half of the rectangle okay because we divided it in two okay then so so then what we have is just one rectangle that would be residing in the top half of the screen because we review so we've removed the top half so the bottom slides up to the top okay now we removed we've removed half of the area from the width okay and we've removed it from the left so now the area so now you're down slides over to the left okay and now we've reduced it by 10 pixels on each side we've reduced that rectangle area by 10 pixels on each side okay with this method called reduced okay so what's going to happen is that it's just going to be it's just going to be a little bit smaller okay and that just gives you like a little bit that just gives you a little border okay around that around that okay so let's just try one more thing I haven't tried this let's just create one more okay and we'll just do we'll do it we'll do it as a slider okay see how see how good I can work on the fly here without having prepared first let's just call this lighter one okay and then we're just going to set our parameters here so slider one set slider style okay and once again just demonstrate for you if we wanted to find out what slider styles we have available to us I could just command click in there and we got this list of sliders here okay so we'll just do linear horizontal okay I'll just copy that here okay so we'll just do slider slider style linear horizontal okay then we'll do slattern oh forgot my semicolon again now let's just do slider 1 dot set textbox style okay and then we'll just call this a slider text box we'll just do it below again okay I'm gonna make this fault and we'll make this false again so we would be able to recalculate the value just by pressing a number into the screen if we wanted to and we'll just make it this let's just do 50 pixels about 20 pixels again okay and now we just need to set the bounds okay so we got slider one set pounds okay and then um I'll just if I think I think if I do area if I just do about the area then it should just draw it in the middle on the bottom of the screen okay so I haven't done this before but oh I need to actually draw it to the screen okay so we do it add and make visible slider one let's just see what happens here apologies if you can hear my French Bulldog snoring in the background okay great so it's just a horizontal slider there and it's done it um and it's got the text box below okay so that's where I'm going to go ahead and in this tutorial and um yeah if you have any questions or if you feel confused by the way that I've done that GUI or I haven't explained it well enough just drop a comment below and I'll try to explain it a little bit better and then for our next tutorial we'll just go into more of the customization of the sliders how to make them different colors how to just kind of set them to different set different values for them and that's where we're going to end be sure to like it and subscribe and all that business if you like the video okay and I'll see you next time take care but

Channel: The Audio Programmer

Views: 10,086

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: viR1Z7byTYw

Length: 35min 39sec (2139 seconds)

Published: Thu Jul 06 2017