Juce Tutorial 06- Customizing Dials and Sliders Using The Look And Feel Class (Pt 1 of 2)

hey what's up everybody I'd like to welcome you to another juice tutorial and today we're going to talk about the look and feel class the look and feel class allows us to customize colors and behaviors of our dials buttons and sliders and so what we're going to do is we're going to create two sliders today start customizing some of the features some of the color features of those with one of the two sliders to be different colors there are different ways that we could do that if we wanted them to have multiple custom colors that there's another way that we need to do that okay now this follows roughly from the get look-and-feel customization tutorial that you find on the DRI's website so I recommend that you go there check that out and let's jump into it okay so we're going to just create a new project as always we're going to create a GUI application okay because we're working with a GUI we'll just call this look and feel demo and throw that in our development folder okay and as always that creates our main.cpp which is giving us our main juice functionality and then our content our component content component cpp and header files which are where we're going to do all of our GUI customization okay so we're just going to open this up in Xcode by the way I'm going to make this into two parts because I don't want the tutorials to be too long so we'll just do one part today and then we'll do some other aspects so they get looking field class another for the next tutorial okay so we ran xcode down and we're just going to jump into our component component and just erase this default text okay so just a rehash on what we did last two tutorials we're just going to go ahead and create two slider objects what we're going to do is we're going to create two sliders or dials rather and then we're going to make them both one aspect we're going to make one aspect of both the dials the same color and then we're going to kind of look into okay what if we wanted those those colors to be two different colors and then what if we wanted to do multiple customizations on one dial if we wanted to set the thumb color ID and then the background to another color and so on and so forth and the way that we would go about doing that okay so let's just start from the beginning I'm just going to create two two dials okay so the slider class is inheriting directly from from juice so we don't have to add any other sort of head barrels to to create these sliders okay so now we're just going to go into our constructor make those visible so add them and make them visible that one okay I'll - I'm going to go a little bit faster on this because this is stuff that's been covered on other tutorials but I've wanted to just kind of rehash over it again just so we just get into that workflow as usual so so that we have dial 1 now we just need to set the slider style okay so so cut slider slider style we're just going to make these rotary rotary dials okay same thing for doubt to not the lighter spider cutter humor for you okay I'll do text boxes as well so it's just two down one set text because it's text box style okay and we'll do a slider text we'll do text box below okay we'll just make it read only and make it maybe 100 pixels by 25 pixels maybe the same thing for dial to okay text box below read only then your do 100 this is good for me too because as I've said in the past I'm learning geez myself so this just helps me kind of get into the flow of things okay so we've added it we've set the style we've um we've given it a text box okay cool so let's go ahead and define how big we want these dials to be okay so let's do let's see we're going to set them side-by-side okay so let's just do like a border around okay and then it doesn't like that look at that oh I didn't initialize it to 20 we're just going to set it 20 okay now let's do um let's just set the size of these of these of these dials okay so we'll just do Dow with I hope I can get this right the first time around so so we want each one of them to take up approximately half the screen but just have a little bit of room for so so they're not on top of each other so so we'll set it to get width divided by two minus the border and then we'll do the dial height equals get height minus the border let's just say it was just give it a little bit of room just say - another hundred pixels so come back and adjust that if we need to okay so now let's go ahead and then and this is I think this is I think this is a good way of going about things because this allows us if we wanted to go and change all of the size of our dials this would make it a little bit more scalable I think rather than just sending static positions I think this would allow us to make it a little bit more dynamic so hopefully about it hopefully this will work so down one set downs okay and we'll go first one will go in ten then in another down 10 okay and then here we should just be able to put da whiz and Dow height okay so I just try that see if that see how that that works okay so we just go compile quick and at first that first compiling takes forever doesn't it okay so what do we have give me something not seeing anything what have I done oh there it is okay cool all right so that that looks all right so hopefully we can get this other one to mirror this exactly and if not I'm gonna have to start again okay so um so what we need to do is just set this to get with plus the border then uh then it just this will just be down the same so it's just border and then down with the height have okay let's just do this so bad Oh what did I do oh it's going off the screen isn't it these to begin with / - okay third time's the turn let's do this ah there we go um okay this is just a little bit too far to the right okay I'm going to be really picky here and I'm just going to take this off because I think that will make us put us where we need to do and there we go okay great so we're all so we have two dials and they're just kind of your standard colors okay so let's go ahead and start getting into how to customize these so the the look and feel class is actually inherited formally it's inherited from the juice modules so what we can do is we can actually say look and feel it was a gift look and feel I don't know yeah good-looking feel dot set color okay now in here it wants color ID okay now you might be wondering okay what does that actually what does that actually mean okay so if I go into the slider class okay in the API and then if we just go down here we can see this section that's marked color IDs and now we have a whole bunch of different things that we can customize okay and I'm just going to do some color ID since I know that that works and that's I feel comfortable with that so we might get a little bit more come more adventurous in the future so we just need to identify what class we're talking about okay so talk about the slider from color ID okay now we're going to go colors let's make it I don't know purple maybe okay so what we've done here is we've we've gotten the get look and feel we've used to get look and feel methods and this comes from the look and feel class okay then we did we used the function set color okay and then within set color that asks for the ID what what color ID that we wanted because it needs to know what exactly we want to change doesn't it okay so we want to change the thumb color okay and we're going to change it to purple now what this does is this changes all of the dials to purple okay all of the thumb colors the purple of all of the sliders okay and that's how that's what you see here okay that goes purple okay so that's how that's how that works so let's let's just do it do another customization here too all of the all of the slide all of the dials rather so let's do slider okay and then let's pull up our API see what other things we can do here so we've got rotary slider fill color ID rotary flower slider fill color ID brood or re slider let's do this outline one and then let's look for an adventuress color here observe I'm not sure what that is but let's go for it okay then just compile it okay and there we are it's kind of this white serve kind of color okay cool okay but what if we wanted one of these valves to be a different color than the other dial okay what we can do in that case is we can actually create another look and feel object okay so that's what we'll do now so the look and feel okay now this is something that I had to kind of look into when when we go in here there's an autocomplete here and you see there's a couple different options you have v1 v2 v3 before I had to have a look at this okay if we go into our API and then just go into look and feel okay let's not go into v4 okay and then I'd look at the inheritance diagram okay I can see that v4 is inheriting from v3 that's inheriting from v2 so on and so forth so what I'm assuming is that Maya my impression is that there is that this is being updated but for one reason or another to make sure that all of the past editions of juice are able to keep functioning I guess they needed to kind of layer on top of it I mean I don't know if that's the reason or not but this is just kind of what my assumption would be so so what we need to here is we need the v4 and if I'm if I'm wrong about that let me know I'm kind of curious actually I should probably go into the forum and actually have a look okay so so we've created another it doesn't like okay cool all right I thought I did something wrong there okay so we've just created another look and feel object okay other look and feel okay so now what we can do is we can do other look and feel dot set color okay and then we can just do the same kind of customization here okay so we could say slider then let's just go back to some color ID okay let's do this colors let's go for beige okay now now what do we need to do okay well it doesn't know which dial we want to set it to okay so we just need to tell it we need to point it towards which now we want it to UM to to work with okay so look yeah good lucky today okay and as you can see here and once a pointer so we just point it towards other look until okay so let's see if that works I don't know if it'll work because of oh yeah it does okay so that's how we have two different thumb color ID colors okay now let's take it a step further and say what if we wanted to make multiple customizations on one of those on one of the sliders make it completely different from the other slider okay well we just do keep doing other looking field that set colors well when we're when we're starting to repeat code then it's probably better for us to make a class out of it okay so let's just go ahead get rid of all this okay and let's just make a little class for our that's going to hold our slider colors okay so we have class we're going to call this class we'll just get rid of this here call this look we'll call this other looking field look and feel we're going to inherit all of our functionality from look-and-feel v4 okay why are we inheriting why are we inheriting some of you might ask well because if we don't if we don't inherit from the look in field class how is it going to know what it needs to do how are we going to be able to create the functionality that it needs to create to set the custom colors okay so that's the reason that we're inheriting from the look and feel v4 class okay we're going to set the access to public okay so we can use it within our component and then we're going to do set color oh we need to build the constructor iPad so we're going to do other look-and-feel we're just going to do a little constructor here or syntax consistent so we're going to do set color okay and then we're going to do slider let's find another let's find another thing that we can that we can mess with there slider okay so we're just going to go down to our color IDs okay so we've got rotaries did we do that one yeah let's do that one again rotary slider outline color ID rotary brutally slider outline color ID okay now let's do colors and then let's set let's set it to this is continue going down yeah okay great set to chocolate great okay um then we can just do like set color then we'll just do another one let's do slider let's do the some color idea again just so we just for speed colors so set it to black maybe okay and then let's just suppose just do one more went up slider let's go for rotary slider fill color ID rotary splatter fill at color ID root three slider fill color ID okay the colors let's go for let's go from brown then let's not go for brown and the other ones brown colors prison okay let's go for blend Chetta almond that sounds like a great color cool great okay so now what I could do is I can just say we've created our other look and feel class now we just need to create an object other what can feel I'll just call it other look and feel okay so now if we go in here we should just say we should just be able to stay down one set look and feel just wants a pointer other look and feel okay if I did all this right should should work okay and there we are okay so we have the slider the some color ideas black its chocolate the men as the values go up the the fill the fill color is that planchette almond okay so that's where I'm going to go ahead and end things today just not to make things too long and next next time we're going to go into a little bit more of the changing the what am I going to do I'm going to do customizing the drawing and AH and some slider customization actually looking into changing some of the behaviors of the actual slider itself using this get look infield class so I hope you enjoyed this tutorial and until next time see you later

Channel: The Audio Programmer

Views: 10,121

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

Length: 23min 15sec (1395 seconds)

Published: Thu Jul 20 2017