Build a Drawing App with Swift3 & iOS10 | Sandra L | Skillshare

Build a Drawing App with Swift3 & iOS10

Sandra L, Front Development

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (1h 43m)
    • 1. 1 INTRO

      0:25
    • 2. Drawing Pad

      6:48
    • 3. Adding Colors

      8:28
    • 4. Crayons Actions

      4:10
    • 5. TouchesBegan, touchesMoved, touchesEnded

      5:25
    • 6. Drawing Lines

      12:19
    • 7. Adding Colors

      6:47
    • 8. Toolbar Options

      7:53
    • 9. Drawing Settings

      10:31
    • 10. Programming Settings

      7:15
    • 11. Previewing Settings

      3:52
    • 12. Adjusting Settings

      16:45
    • 13. Saving Settings

      7:21
    • 14. Erasing Function

      5:19

About This Class

In this class, you will build a Drawing App with different color options and settings. You will build everything from scratch using elements like : stackview, toolbar, bar button items

  • stackview
  • toolbar
  • bar button items
  • sliders

02737c24

Prerequisites & Requirements:

You will need access to a Mac computer running OS X 10.10 or later No prior programming experience is required. The course has been specially designed for beginners. The first chapters will walk you through the download and install process of the XCode 8 Application (to build iPhone Apps).

Transcripts

1. 1 INTRO: In this video tutorial, Siri's. You can learn to build a simple drink up and you'll see that this is fairly easy. In the process, you will learn to draw lines and stroke with multiple colors using RGB so red, green and blue we're gonna said the brush right and also create another view to update and save settings. So let's get started to build a drunk out. So let's get started to build a simple during up. 2. Drawing Pad: I guess the now, let's begin with our drawing up. So that's gonna be a single of your application. So I'm gonna call it drawing bad. We're gonna start with building the drawing fat. So that's gonna be the space where we gonna draw. So we're gonna have the image you, which is gonna be used to draw so some arts using crayons. So I'm gonna add one image view objects right here, and this one is gonna cover, like, the entire width. And this one is going to cover the entire with until here. We're gonna leave some space for the stack view and also a toolbar. So let's go to adding constraints. So that's gonna be zero, um, all of the three, except for the bottom. So that's gonna be to one of 200 to make it drones. Then add constraints. And it's just missing one to the top. So I think I had put it, which is gonna be zero. No, no. Okay. And then update frames. Okay, then we're gonna have also tool burns. So we're gonna at this one, and this one is going to be used to have, like, options. So the options to reset to also a raise and finally go to settings. So we're gonna have one setting, so we're gonna be able to then so we're gonna be able to change the size of the brush and also change colors. That's gonna be for the setting spay judge. So it's constraints. It's gonna be zero. So there's gonna be so that's gonna be flushed to the bottom. So that's gonna be available at the bottom. And then we're gonna set the with 2 44 Then we're gonna add a stock view, and this one is gonna hold to our collection off creams, so that's gonna be eight total. So let's leave this one. So, like this pronounce. So we're just gonna Actually, what I'm gonna do is just apply constraints for the top and bottom, which is gonna be zero. So that's gonna be zero So related Lee to the image you and then zero is also related. Lee to the toolbar. Okay, so that's a date that for now, I think it's gonna be fine. Yeah, it's just waiting, actually, for the space, which is required, actually. So regarding the leading and trailing, but it's gonna be sets actually. So for the with and everything. So when it's gonna hold the Koreans, which are gonna be buttons, actually, because they're gonna be actually controls, allowing us to select one color. Let's go to document up line. So you're going to see now we have a stuck view that includes a bottom, okay. And we'll hold you as well is adding so like a constraints for the leading to make it more clear. And for now, so we have three constraints for the stock of you. So let's review that. So we've got the leading the bottom, and that's up, and we're going to leave it to the number of items that this type of you is gonna include in order to then stretch to imply the width of this one. So we're gonna have eight buttons inside Total. Let's confirm that deed frames here ago. So that's the first button, and I'm gonna plan constraints to it later. It's had another one. So as soon as you see this, like right here, you're gonna root stock you actually showing at the bottom as a tool tip. This is going to tell you that you're about to include another item inside the stuck you here ago. We have to. So we need a tunnel. So that's three for six, seven and eight. So and what we're gonna do, some gonna add to add constraints of those buttons. So what I want is to have them, like, 40 for the with and 100 75 for the heights, which I think is about, like it's gonna be implied anyway, So let's not I'm just gonna put like with and it's gonna be 00 for the left leading on the top because the height is gonna be implied anyway, so it looks like the height is calculated as being 100 56. That we could confirm. Let's see how it works anyway. Still, without confirming it. There you go. So that's fine. So we're gonna do the same for the others and we're drink that to include the Korean. So just to remind use of why we're adding button so those are gonna be cramps. Okay, so it's OK hair ago, so that should be fine. So that seems fine. So what I'm gonna do now is for now, we've got nothing to really look at. So we've got some assets available here, and we're gonna include them in our projects. So let's select them all to add them. Dry care ago. Gone Quick. Finish. So here we have. So are Koreans. I'm gonna create a group that's gonna be cramps. Year ago. I'm going to drag them over just to keep things organized. You can also, if you'd like. So select XY assets here. That's the equivalent selector. Your folder with the assets and then drank them over here to your assets, which comes down to the same. Okay, okay, so that's continues. And now what we're gonna do is go back to our here and we're gonna add one first grand. So we're gonna go to the attributes, inspector, and you gonna find this section. So here. So this menu, which is gonna give you the options here, there's an image attribute for every button, so we're gonna go foreign. So the ones that we have just added and first, I'm gonna put the red care ago with my red button and a prove around, So we're going to see how it looks. And here goes So it looks like we've got a recurrence set up so I'm gonna let you do the rest. Although we're gonna do it together in the next videos, we're gonna add all the rest off the collection of buttons. 3. Adding Colors: So now let's continue so you can put them in the order that you'd like. But just bear in mind that you're going to need you, then connected these buttons to one action which is going to select a color recording me. So you need to keep that in mind. So anyway, I'm gonna walk you through. So for the second button So what I've picked is to apply the purple one. That's fine. Purple here ago. Then the 3rd 1 is then the 3rd 1 is gonna be yellow. Then I have also green. No, it's not orange. I wanted to put in that location. So the green one Next, we've got blue, but then we have orange. Then we have grown, and we also have great. And I am missing one. And realizing there was also want. So how many is 12345678 And we actually have nine. So that me and another one, let's see how it fits. There goes. I'm gonna need to make some adjustments here. Sorry. So and it's gonna be, um, the Black War Black color. Here you go. So and then we're gonna sense I'm gonna sit constraints. Well, that's gonna be 00 for the with, so I don't remember the with. So that's 46. So that is 46 for the with Looks like it's not actually being included. And my stock view OK, minus 39 here. So that's adjust it. Put zero to see how it works. So what I'll do all together, it's just to remove, like, the constraints and what I'll do just because, like, I've missed one. I'm sorry. So what I'll do is allowing you to get, like, once started project, including so the drink packets. So you're gonna be able to start from this if you'd like. So anywhere. What matters is like the rest off the demo is gonna be concentrating on, like working on the programming parts. But you have the choice also to have, like, a started project. So I'm gonna make that available for you. Do you don't have, like to go through like applying the constraints. Of course you can have a look at the different set up and everything, but just to allow you to have, like, a good start. So what I'll do is just go to stop you and then remove all my constraints because I have to start over. So that's the trick in front sometime when you to adjust. So the stuff you should be like, it's gonna be just so what we'll do is we're gonna do some math and resize each button. So if we said I could decide you were going to see that we've got a with which is calculated, we've got a with which is calculated as being 414 So I'll take that into account and then divide. So we've got nine batons divided by nine, which adds up to which comes down to 46. Although it's nuts and I'm gonna do so. That's for one for minus 46 because looks like I've got one extra so that he's actually 3 68 divided by nine. So I should have like, 40 or 41 for each of them. Let's adjust that to leave some space for the black here, so I'm gonna put 40. At least they're old visible. So now it's a matter of allowing everything to be set up correctly in regards to the hotel EOS You certainly did, and now so I'm going to select the stack view, go back to my constraints. You see how crazy this number is? So we're gonna set. We want to take this one at zero, so the height is gonna be implied. Zimmer for the left, zero for the top and then 15. So we have, like, a little gap for the side on the rights. I think it's back to. Okay. Sorry. Matches missed its. OK, let's go back. So that's gonna be zero here ago. So that's 3 64 The with. Let's make this one bigger. Okay, so I just have to confirm something like who the space looks like, but for the rest, OK, Looks like it's spina. So what it did is calculating the with based on the the items that it contains, Although I think that it would like to be confirmed to be like, Okay, so that's all good anyway, So, as I said, so I'm gonna make one final available. So including so the drawing pad already set up, and then we're gonna be good to go. So we're going to continue and start so setting up the drawing part. So we're going to start to do some drawing, although something that I am not a saying is that now. So we're missing the toolbar. So, actually, so the collection of current is covering completely the toolbar, so it's not visible anymore. So what we'll do is we're gonna leave some space by reducing so the size of the image you So we see that this is 200 between. So the image you and the super view, So I'm gonna add some space, so that's gonna be in gonna increase by 50 pixels a year ago and then the other thing that I'm gonna do, so if we check the tubers of the constraints, we can see that now the bottom off the toolbar is aligned with the bottom of the stack view . So that's not correct, because we want to allow. So the stab you to be flushed to the top of the tool bars. I'm going to start by removing these constraints and then what we want. So just because, like the order of the View, Look, I'd like to make it similar to what I see right here. So I'm gonna place the toolbar right here, right here. Okay. May make more sense. Okay, and then for the Tech and then for this type you. So what I'll do is from here from the document outline, make sure that I can targets. So that's a bar. So that's gonna be here stack view, and I'm gonna set it like vertical spacing. No, it's not correct. I'm gonna do Come in. See, I'm gonna do vertical spacing. And here you see that these values not correct. So we're gonna set it has. So I'm going to do I'm going to select here the stack of you going to target the toolbar, you know, did to set up like I'm gonna try with bottom here ago. And that seems to do the trick. So, as I said, So I'm gonna provide with a start of project. So now we've got old set up. That wasn't easy, because unfortunately so I had missed 21 Koreans. Here's I'm gonna make the starter projects available too, including the drawing pad. So you don't need to bother with all like this set up off these. Well, you can start from fresh is just like whenever. Sometimes you mess up, you need to start from stretch. Okay, so let's continue So we're going to start with drawing lines. We're going to set up their stroke, This chalk with. So the brush with we're gonna use also multiple colors as we have set up here. So we're going to do that with RGB, so we're gonna start, so we're gonna see that starting in the next video. 4. Crayons Actions: So now we're gonna continue. Um, we're gonna create outlets. So let's see how it looks to begin with a year ago. So we have our set of current, So this is not set up yet, and we've got our toolbar, which is visible Perfect. So next what we're gonna do. So I'm gonna use the assistant editor to create outlets. So we're gonna start with the image view, so this one is gonna be the pad image of you. So this is where we're gonna draw. Then we're gonna have also an outlet for the toolbar. We're gonna see why later, we're gonna have different options for this toolbar. So that's it for now for the outlets. So now I'm gonna move to we're gonna go back to it because we're gonna need to also create actions for these buttons. So we're gonna move to creating so the different variables that we're gonna use to draw the lines so we're gonna have one, which is gonna be the last points, and this is what's gonna allow us to keep track off the touch. So when we put our finger down on the screen, so we're gonna keep track off the location where we put the finger on the screen to draw the nine. And this one is gonna be equal to see point C 2.0 to begin with. And we're gonna have also like, an action And we're gonna have all still variable that we're gonna call swiped and this one is gonna be a 1,000,000,000 And this one is gonna be used to track the movement of the finger So we're gonna set It's either to false. So when we begin Teoh touch the screen with our finger And this is only when we start moving that we're going to start keeping track off the action of drawing and we're gonna set it to truth. Next, we're gonna have so our colors So that's gonna be read and we're gonna be using Suji float . So just like the way that we set up color So using RGB so at first is gonna be cool to zero for all of them. Then we have green also stg float and then we've got Luke also besieging Look So the first thing that we're gonna do is setting up the actions which is gonna allow to track like the movements of the fingers. The 1st 1 we touch this screen with our fingers, so that's gonna be with touches. Begin. And then when we start to move so that's gonna be with touches moved and finally, with touches ended. So, like mushing endings we're gonna track when we finish doing the movement. And so the last point. So the current point is gonna become the last plants that we have set up right here. So we're gonna use that to always keep track off the first and last movement to draw the lines accordingly. So we're going to start with that. So what I'd like to do also is setting of the actions for the Crans you see right here that we have, like, older cranes. So we're going to start with that. So let's say like the 1st 1 and we're going to start and we're gonna create an action based on that, and I'm gonna name this one. So call it Pekar action, actually, and that's gonna be of type your white button, and that's gonna be the only actions for all of them. That's gonna be pretty simple. And basically what we're gonna do is just select this one against which for now is just connected to one Korean, and we're gonna point to the other ones in order to attach the same actions to all off the cranes. And we're going to use one single action to pick the color. Okay, so that is the first step. So now what we would like to set up is the action of keeping track off the movements that we do with our finger entered it to start drawing lines. So we're going to do that next, with touches begin and touches moved and also touches ended. 5. TouchesBegan, touchesMoved, touchesEnded: So now we're going to start keeping drugs off where we put our finger on this crane. So with the built in functions which are touches, begin touches moved and also touch as and also touches ended. So let's start with that. So you're just gonna type touches, begin, like so? And we're gonna add also the other one. So this is touches moved. And last one he's gonna be touches ended and all the ones and all of them was gonna have, like, a connection like something in common, which is like, we're gonna keep track off first, the swipe actions of this one and so the last point. So let's start with touches began. So what we're gonna do is first getting like the first location. So where you put your finger? So that's gonna be with this perimeter right here that we're gonna use. So we're gonna right a flat touch, so touches and get the 1st 1 So that's gonna be like the first location where you put your finger and basically so here. So what we're gonna do is then assigns so the last points. So this one right here at the top, which is gonna become like so that's gonna be touch location. So this one, what we want to get is the location on the scream. So we put our finger, which is gonna be self you. So what we want is to get the coordinates x and Y off where we put our fingers So it's not gonna be zero anymore, and that is gonna be converted into a siege. Itpoint. You see, we're going to get back SCG points, which is gonna be, like the coordinates of where, Without a finger. And that's when I become the last point. And also, we're gonna need to keep track off if we actually start drawing its gonna be set to fools because we haven't moved yet. So that is just the first starting points. So next we're gonna go to then the touches moved faction, and this time, So we're gonna also keep track off if we're moving on out. So I'm gonna set it to true this time because we're going to start moving the finger and here as well. So we're gonna check if there is an interaction with the screen and that's gonna be the same. So that's gonna be we're gonna give this one and get the first and what we're gonna do here . So what we want to get is actually the current. So that's always gonna be like the currents where we have our finger. That's gonna be current point, which is gonna be this time. So that's gonna be the exact same one here we're going to get, like, the current where we have our finger current position, current CG points finally. So the current point is gonna become the last point. Then you see, So we're gonna keep truck off where we are right now, which is gonna become the last point, and then we're gonna add CG points so each location is gonna be tract kept in memory in order to draw the lines. And I'm gonna leave some space here because we're gonna have another function. So I'm just gonna put your draw lines because what we're gonna do is, like, always allowed to keep track of the currents becoming the last points, and we're going to use the current point in order to draw the line. So we're gonna have, like from two. So the firm is gonna be like the last point, and then the current is gonna be and the two so is gonna be the current point. So we're going to see that in details. Finally, we're gonna have touches ended. So we're going to check if re nuts swiping, meaning that it's like a swipe movement because, like, you're making the movement I was drawing. So that's why we name it swipes and finally say, here is while we're gonna specify, like the drawing. So basically, what we could do is for now, So just, you know, printing because we have nothing to really show what's going on on the screen so we can print right here. You're going to see that they're gonna have, like, the coordinates which are gonna be fluctuating, so changing. So as you move your finger on the screen so we're gonna be able to keep track of that's and touches ended. So he's not mystery because it's just gonna be like to just marked the last points of where you have finished the action of drawing, because when you because when you lift the finger off the screen, then it's gonna be like a new starting point. So starting here. So when you're don't. So we're gonna finish the line. And when we start again touching this cream so the last point is gonna become, like, the very first point where you touch, you know? Okay, so let's try that just as the first demo. So let's touch the screen and you see that we can prints of the locations, and we're going to use those city points to then drew lines. So we're gonna need to write, like, a long function, which is gonna allow us to then draw lines and we're going to use the class. You I graphics image context. So begin image context and also you a graphics. And imagine context. Basically, we're going to draw an image using So the city points Joe context. So we're gonna do that next, using the coordinates and everything 6. Drawing Lines: So now we're going to start drawing lines. So I'm gonna create here of function that I'm gonna name simply but draw lines and this one is gonna take two perimeters, so that's gonna be from which is gonna be STG points. As you may guess, that's gonna be like, we're going to specify the location from to which also gonna be a seed your point. And we're gonna use that you then add points, you know, like it's gonna follow like our location. So where we put our finger on the screen in order to add points on that, we're going to do that with you. I graphics begin image context. So we're gonna take that first you are graphics. That's not gonna be this one. So graphics begin. Imagine context, and we're gonna specify so a size for this one. So that's gonna be a type cge size, so that's gonna be self view frame size. So this context is gonna check like the entire width and height off the street. And basically, we're gonna add this image. So using the context to the pad image, you and it's gonna be image we're gonna draw to it with this method so that's gonna be drawn. And where do we want to draw? So that's gonna be we're gonna use seed your point as well. Actually, it's not gonna be at my bad. It's gonna be actually in. Let me just Revert is gonna be draw and that's gonna be in and we're gonna use See Gerecht . So we're gonna indicate so where we want to draw. So we're going to specify that with CG direct up in privacies to have like, the construct So that's gonna be we're going to specify. So the X, which is gonna be zero so that's gonna be afloat or why so we're gonna start, like with IOS is starting like from the top left corner and then we're going to specify So the with that that's gonna be self view brain with And finally, for the height, it's gonna be self view. So I'm referring always to the Super View, which is like the View like our View controller and then finally high to carry. But so now we know where we're gonna draw inside our image. Then we're going to specify the context. So that's gonna be with you. I graphics get current contexts. There you go. And we're going to start to drums of Yeah, the context to our pad image You. So let's begin. So how we're going to do that? So we're gonna have, like, here context and we're gonna use move and here we're gonna intake. And here we're gonna indicate So where we want to move So that's gonna BCG points on it's gonna be we're going to specify on X and white that is gonna be from that's gonna be from the from the here. So the starting point that we have right here the starting point So I'm going to specify the X for the from and also the why for the from and finally Sanga knows. And finally I'm gonna add lines, add lines to see ji points, which is gonna be about the scene moments. So basically what we do is to indicate we're gonna move and then at the line. So at the last point, which is gonna be, too, and that's gonna create like adults like, you know, like something that your job on your image and I think I am using a cornices here for the two last one a year ago. So we've got to parents is with this one, and then we finish with this one. Okay? And here is Well, I've got, like, a mistake with the parentis since my bets. So I've got to Prentice is at the top. So that's why I was getting on air. So just be careful about this index. Okay, so we're gonna also specify for this context. So the blend mode of the line cap the line with that, we're going to specify ourselves. So the line capsule we were just gonna indicate, like how it's gonna look, So that's gonna be around and also the stroke. So that's gonna be for the quote. So we're gonna do that right here. That's at some space. So first we said that we were going to set the bland mode. Here you go. So that's gonna be normal. No particular effects, then the line cap. So this is just to indicate that we won't like around rendering is not gonna be square shaped. Finally, we're gonna set also the line with a year ago. I'm gonna set it to five. It's gonna be big enough. So also float and we goes and Rosa gonna set, like, the color of this truck that's gonna be with stroke car coffee. And we're gonna said that's with U Y Color And there then we're going to specify for each of the RGB colors of red, green, blue and also the outfall and the tech floats. And basically, what we do here, we're gonna pass the value that we get that we're gonna initially set up for. So when for the Alfa that's gonna be 1.0 and for the last one actually controlled capacities. So meaning that it texted value between sarin one one being fully opaque. And we're gonna need to make that like, CG color because this is how it's gonna work within the context. Can we close the promises? And then we're gonna then close the path with that stroke path Perego. And finally, So we're going to then apply So the contexts graphics to our image. So the image poverty of the bad image, you know that's gonna be you. I graphics gets image from current image contests and finally, we're gonna then finish Instead of having like you, I graphics begin. It's gonna be end image context. Erica So now we don't actually like drawing to our image. You okay? So that's gonna be what we're gonna use to draw the line. So the only thing that we're gonna need to set up here, So although it's already set up Okay, so here, we're gonna have, like, a black car has a default color to set up the colder the initial color for during the lines , and we're going to be able to then set up different coats. So that's gonna be a multiple color drawing pad that we're gonna create. We're gonna see that leader and and here we're gonna use this function, which is touches move to then draw the line. So, as I was explaining, So the current point is always gonna become the last points. So let's see how we're going to set this up. So we're gonna call this function, which is gonna be draw lines and from it's gonna be like the last point. So meaning that's here, you see, for the last one is gonna become like the last point is gonna be like the first location where we put our finger. So we're going to start from here, and then the two point is gonna be like the current point. So we're going towards starting from our last locations to the movement, like to the next location. So where removed that we're going to do when we move out of finger. And the current point is always gonna become the last point. Okay, so we keep track of it to add points to it. And same for such as ended. We're gonna also continue with the action of drawing. That's gonna be last point, which is gonna be nice points of from two from why it's becomes when you end the drawing. So when you finish, it's gonna actually set, like the end of this truth the end of the path, and it's only when you start again. So here we're going to re initialize the last points to become like wherever you starts drawing against the where you put your finger in which location that's gonna become the last point. So we use that to keep track of where you put your finger. Here we keep track of where you move your finger and here so we set like we allow to finish like the last points being where you ended. Okay, so let's try that. So we should be able to draw, like, using black to begin with. Although that is not perfect, because you see that to my, um, cursor is not following, like, perfectly where we draw. So I'm gonna make a few adjustments to that, because originally So when? Um, the first during Pat so was created so that the image you was actually using the entire view for this super view. So, actually, so the way that we set it up, you're going to see that we've got the image You, which is actually covering my more more half of the view, but not completely is not using, like, the anti heights off the views we're going to need to set the context. So where we add the graphics using the actual dimensions off within height of the image, you so I'm gonna make a few adjustments. I'm going to start with here because what we won't actually is to get the X and y related Lee to the pad image view. So I'm gonna start here because basically what we want is to get the coordinates the X and Y coordinates. So for the pad image you because this is where we're gonna draw. So here. So this is what I'm going to get from here. So I'm gonna get, like, the first touch where we put our finger within. So inside the pad image, you and I'm gonna need also to make adjustments. So where I design my contexts as well, So that's gonna be here. So you see that we said this as being the self view frame size with Do you see that we're setting this as being the self view frame size. That's not correct. I'm gonna replace self view with pads imagery as well. So that is of you. And we're gonna get the size of this one and here as well. So when it's gonna be trying to troll, we're gonna also draw back to the bad image shoes who using the with and the height of the patty mature. So everything is a matter of where you want to put your graphics so originally, so you're gonna find lots of tutorials online. So how to draw? So how to create a drawing pad? A drunk up. So usually I think they used like the anti within the height of the view. So that's why they refer to the self you frame and so forth for the width and height. But in that case, so I just want to limit my view, my image to this to this part. So let's try that again. So we've met a few adjustments introduced to set up the context, the graphic context. And here goes, And there you can see that so that we can draw so following, like were removed the cursor or your finger. If you run, it's using your own device. So what we're gonna do next is allowed to use different colors. You see that we have different options here, so we're gonna enable the multi colors for the drawing pad. 7. Adding Colors: So we have multiple colors here. So we've got red, purple, yellow, green, blue, branch, brown, gray and black. So what we want is actually to get, like, the different um, or G b values so we can then assign these two hour You see that we have variables here, so we're gonna then be able to assign this to those variables. So first we need to get is the colors. That is something that I've been able to do using Photoshopped because here, obviously So although you've got this option, which is like this lt'll call it p carrot. And if it works, actually, yes. So that's pretty cool. So that's something that you could you and that's gonna give you the values that you need to apply for each of them. Although it's gonna be dynamically set up using this action that I have already set up. So right here. So we've got this action which is now connected to all the buttons. Now it's a matter off assigning So the corresponding RGB values based on the selection. So I'm going to start by setting up here variable. So that's gonna be colors. Actually, that's gonna be a collection of colors and inside. So that's gonna be a collection, which is gonna be like the orgy be that that's gonna hold like the three RGB values off type city floats. So I'm gonna specify this. Well, that works like Total. Actually, we're gonna be able to set, like, three values altogether at once, which is gonna corresponds to the color that we want to apply and we're gonna have So we're gonna also specify here we're gonna implements the set of colors for each of them. And I put them aside for you, actually, because I had to use the color picker. And I see that in for the shop to get, like, the corresponding values for every crams. So I'm going to write them down. So this for the 1st 1 and this one corresponds to the red, then next. So we have I think it's purple here ago. So this is our collection of colors. So we've got a long 234567899 being like the black one, and it's going to start at zero because this is your index in the collection, and basically what we're gonna do is when we pick the color and I have made I'm gonna make available. So these families also with this is a textile where you're gonna be able to simply Compean paste like the collection of coats. And this corresponds to the orgy B values you see. And then we're gonna need to convert that into C G floats because this is how it works. In order to set up colors with IOS. We're gonna then so each value we're gonna divide by 2 55 to 55 corresponds to the highest value when you create a caller, so that is a value between zero and 2 55 And we need to create the floats value, which is gonna be so which cover value divided by 2 55 to get the float. And this is what's gonna create the corpse for each of them. So here. So when we select a color, what we're gonna do is getting so first we're gonna use the topple formats, and that's gonna be or green and then blue that we're gonna sex equals two colors and we're gonna get so the index position. So by referring to one time, which is gonna be like the center type, meaning that the center is the button that we select. And we're gonna get the tack that we're gonna need to set up because by default, so every tax, so every type for every view in the inter feels builder is equal to zero. So we're gonna need to set them up. So let's start with that, actually, So I'm gonna go back to the story board and basically So we're gonna allow to apply attack to every view. So we're going to start with Pharaoh. They would check. You're going to see that you cut the stock, which is equal to zero then for purple is gonna be cool to one. So that's gonna be under view. Then you know it's gonna corresponds to to Green it's gonna be three Blue. It's gonna before orange. It's gonna be five. Then Brown. It's gonna be six gray seven on the last one. Black is gonna be eight. And you see that it's gonna follow the index position that we have in that collection here . 01234568 months. Oh, my beds, Look, let me do that. Actually, next to the end of his builder. That's gonna be clearer. So zero, 12345678 Okay, so this is how it's gonna work. And by applying tax, so we're gonna be able to keep track of where we are clicking. So which really we are selecting two then assigned the corresponding collection here. And that's not gonna be enough, because here, so they are just values and it's not gonna be enough, because here, So these are playing values we're gonna need to then assigns, Did you float to calculate So the orgy be grinning and then assign a color so there's gonna be an extra step that we're gonna do here. So that's gonna be still this that we're gonna sign too and basic. So the last value that we have assigned to red, green and blue and then divide this by 2 55 which is going to return a city floats for each of them, and this is what we need. So let's try that now. We're gonna draw multi callers here ago. So for now it's black that strike purple and we've got purple blue Great. And it works for every call that you can try them out if you like. Perfect. Perfect. So what we're gonna do next is allowed to raise also resetting like we're gonna have, like, you see, we've got this toolbar. So this Tolbert. So the purpose is to provide with extra options functionalities. So we're gonna have the reset options. So we're going to simply erase what we have. Just drone, and then we're gonna have the options to raise and finally to go to settings as well. So we're gonna do that. 8. Toolbar Options: So now we're gonna take care of the toolbar options right here. So I'm gonna open the documents out lunches to make it easier. Because here you've got the toolbar, and then inside you've got one already item, and we're going to use that to set the reset options. I'm gonna another Barberton item, and this one is gonna be basically used to erase. But for now, so we're gonna do that some other time, So we're gonna need to ads. We've got that already. We've got the assets and about this image, and this is just to show like that. You're select the rays of function, and we're gonna have another option on this Tober, which is gonna be to go to setting and just to add some space between each of them. So we're gonna add some flexible space bar, but an item and it's going to calculate So the amount of speech which is required in order to distribute, to align this tribute like the space evenly. So now we've got, like, on two sides of first here, so that's gonna be the reset button here. It's gonna be the razor. And here it's gonna be the settings, so let's make them recognizable. So first I'm going to select the one on the left, and I'm going to select, Actually, this one, which is a custom system item, just to show that with this one, we're gonna be able to simply refresh and reset about starting from zero. So that's gonna be, like, just empty a blank canvas here. It's gonna be the razor. So what I'm gonna do, we gonna start by actually adding this image? I'm gonna add it inside crayons. OK, that's fine. Okay, we've got the razor here ago, so we're gonna add this one later, and also the last one here, it's gonna be to go to settings. I'm gonna use this. I come, Janicki that we can go to settings in order to readjust. I was sitting, so starting with the brush, but without the brush and also changing the cause. So that's gonna be with another view that we're gonna add right here. But for now, So we're gonna take care of this one, which is used to reset this one. I'm gonna change the title. Just suit to make it clear. So here you can change the title. So pending. So the image that we're gonna us your razor Perego. So it's good to say, Let's go back to the view controller. We're gonna connect some actions to those new options on the toolbar. So first we have so that to me open again. The document outline that's gonna be easier to target the rights view elements on the toolbar. So here we've got the call, a picket actions. Then we're gonna add the refresh, and I'm gonna name this one reset action, and that's gonna be in action. So don't forget to select it here the time he y Barberton item, then the razor and finally go to settings action, which I don't think we need, uh, at this point. But I'm still gonna create it because basically what we're gonna connect to this is gonna be a signal. So we're gonna signature another view in order to get a page for the settings. But let's just leave it turn out like so So every set. Actually, it's gonna be pretty simple, and we can set it up just right now are two. You're gonna see that this is gonna be very simple to simply reset the pad image you. So we're gonna do that and then the image. But we're gonna set to kneel, meaning that here. So whichever image you had originally for this parliament, you so it's gonna be removed. Said to know and for the razor is gonna be very simple as well. So you see here. So the values that we are attributing for each of them rgb red, green and blue we're gonna allow to put this one, actually, So this is originally one. So this is originally zero for black. So by using one for each of them, it's gonna be called to white, meaning that you're just gonna actually apply white, which is gonna be used as a function of you're raising your drawing because you're gonna paint whites on top of the other colors. So let's try that. Here you go. So let's begin with adding some stuff here. Random stuff yellow. We haven't tried green, I think, and then arrange Tariel. So now we're gonna erase that select. So I'm sending this to whites and see that you can erase. And of course, we could also set up the with the stroke with a little bit larger so we could set up the struck with a little bit larger, but that is something that we're gonna be able to set, actually, when we're gonna go to settings And finally we can reset here ago. Let's try that again. So by simply clicking here, we're going to refresh and then reset. Perfect. So the other thing that we're gonna do here for the options on this told Bar is to allow to go to another page, which is maybe settings. So we're gonna go here and then at another view. So I'm gonna close the document outline and then close the bottom as well. We're gonna need to have the object of Ivory open. So we're gonna search for another view. I'm gonna out here, basically. So what? We're gonna have this here like a model action, So that's gonna be presented Model E. So showing up from the bottom. So we're gonna cigarette from here, So let's like this one, he's gonna be from here. I'm gonna control drag over to here, you see, Then release and select present Motive. And then we're gonna apply. And then I'm gonna give a name to this Segway, so that's gonna be good too. Sittings I'm gonna copied because we're gonna need to also use that function, which is prepare for cigarettes. So let's go back to the view controller. So it looks like I don't have any prepare for secret functions, so define automatically. So I'm gonna add it right here. So that's gonna be prepare her Segway this one here ago, and I'm going to start by typing If Segway right onto fire is equal to rotor settings. We're gonna start with vets because we're gonna need to pass a few information, give track of whatever color is used by the user and from there, so update the settings as we'd like. And also, we're gonna need to create a critical Indiana you to then pass over back from the destination. So the information that have been saved by the user so for now, So what we're gonna do is simply, you know, um, enable the Segway just to see how it works. Here we go. So we're gonna click here, and for now, we have nothing on that view. So what we're gonna do, basically, is we're going to continue and set up the settings page. So basically, what we're gonna do next is continue and set up the setting speech. We're gonna do that next 9. Drawing Settings: support these settings, page. So we're gonna have is we're gonna have multiple controls which is gonna allow to adjust values for the different settings that we have for that drawing pub starting with the colors and also this truck with. So we're gonna have a reference to the brush with that we're gonna name it like which are you, like, stroke with or brush with. And we're gonna have different sliders, which are going to be used to then change the values for each of them. So we're gonna have a brush slider and also, um, sliders for the cars red, green and blue. So we're going to set that up, and also we're gonna use something, So that's gonna be for simple navigation purposes. So we're gonna have a navigation bar right here at the top, allowing you to cancel, so to go back to their source view and go back as well, but saving first. So that started by adding a navigation bar right here. Gonna add a title and this one is gonna be settings. I'm gonna have constraints. Was there a everywhere and for the height, I'm gonna make it a little bit larger, so that's gonna be 60. Then we're gonna confirm date frames here, and then we're gonna add So those two controls, as I was saying so that's gonna be Barbara to the items. So first, this one is gonna be canceled, then another one on the right, which is gonna be safe here. Okay, so we're gonna connect those two right away. But the first thing is that we're gonna need a new class for these view controller, So I'm gonna create with new foul, and I'm gonna call it so that's gonna be of type you. I view controller. It's gonna be settings. Here you go. And I'm gonna sign this one. So right away, too. This new view, we're gonna go to Identity Inspector and then assign it ago. And here we're going to see that when I selected. So now we have settings, you control it perfect. But that's going to allow us to now connect those two as actions. So I'm gonna person out and then selected right here, but actually move. It's closer to the View control right here here ago. So let's create actions for those two that's gonna be first cancel, which is gonna be simply like that sort of action here can selection. We're gonna use this function, which is dismissed, which is gonna allow to then dismiss the prison View control and then go back to the source . That's gonna be Disney's than any meeting, so that's gonna be true. Completion. So that's gonna be Neil. Same thing for this one. So which is gonna be used to save So the new settings was gonna be safe Action, safe settings, faction. And then that's gonna be of type B y Barberton item, and that's gonna be the same here. So we're gonna dismiss. Here you go. So let's try that to begin with. Okay, So lets navigate to the settings were gonna cancel. We're going to settings and then go back. So from now, So obviously we're gonna have more actions related to say, but it's just to see that the navigation is working properly. Perfect. So what we're gonna do next is then setting up the settings. So, as I was saying so we're gonna set up different sliders that are gonna be used to adjust values corresponding to the settings off the brush, with also the colors introduced to set update the settings for that drawing pads. So we're going to start by simply drawing so adding I mean, so, yeah, the purpose of this app is to draw, but actually, so for this part, So what we're gonna do is just adding some elements objects. So I'm going back to Standard View editor. Make this one bigger, older. I'm gonna needs, of course, the object library to add a few things. So starting with sliders, we're gonna have a few. So we're gonna have the brush with right here. Yeah, we're gonna have customs for this one as well. So let's just use the guides for analogies to see where we are. So based on, like, some margin that we have, like, sets automatically for every super view. And here we're gonna have a label. We're gonna read like the value for the brush. It's gonna be labeled, and we're gonna have also an image. You and this one is gonna be used to display a preview off. You know, like the side of the brush. We're gonna make it smaller. I'm gonna leave enough space because we're gonna use this image you to display using also context. So we're gonna use the context to drawn image using colors. Okay, initial colors that refused to for the drawing pad, and we're gonna have So let's out. Constraints to begin with, I'm gonna start with this lighter. It's gonna be 16 on each side's eight from the top and then 34 the heights than the label. So I'm gonna make this one a little bit larger. So compared to the top 45 maybe it's too much than 16. The width and the tears. Finally, the image you So I'm gonna make this one actually square 70 by 70. That is gonna be a ching from the top and then 16 for the right margin. Then we're gonna confirm of date crimes. Terrible. So we're gonna have, like, a similar setting for, like, the colors underneath. So I'm just going to take this one and then keep him my finger on option and then drag because basically, so that's gonna be the same starting points Perego. So here, we're going to read, actually read. I'm just putting like, uh, here. I'm gonna put brush. I'm putting bed, but that's gonna be actually dynamically rendered here. So let's start with the slider. I'm going out at some constraints. That's gonna be eight. Then we cannot go with my best. So that's gonna be actually 16 on each side and then the heights here ago. But also constraints for the label. 61 6 in from the left with height. Same for the image. You 70 by 70 and then 34 from the top and then 16 on the right margin. Okay. And for the rest of what we're gonna have is some all this lighter. Let's go back. I made a mistake. So I'm going to select the label together with this lighter. Keep my finger on options to duplicate you. Go. Let me go back. Looks like I'm not able to actually suspects. Okay, so let's select again the slider together with the label, keep my finger on option and then drag here ago. I'm gonna do the same again because I'm going to create the same for bus. That's gonna be green here, and the last is gonna be so here is gonna be cream on here. It's gonna be blue. It's got some constraints as well. It keeps adding up, like from the one that we've added before. So let me see what's extra. So here I've got extra with information. I'm going to remove them. Same for the heights. That was too much here as well. Your as well. OK, so we're gonna do some clean up to march bottom space aids. We can keep that market and for this lighter. So we've got the height, which is too much the top too much. Okay, so we're gonna select this one and then apply So constraints for the left and right, What else is missing? So we've got the height trailing the top, okay? And then we need to also take care of the label. Well, that's gonna be 16 and 15 for the top Perricos. And now it's set up properly for this one. So starting for this one, we're going to start with the label of what's extra bottom space. Okay, so that's gonna be no. 16 for the left and 17 for the top. Now this lighter, so is gonna be 16 left and right. And here ago? Oh, I may have a few things. X trolling, You see? Hide top. Okay, this one's extra. We just need one constraints for every like. And this one as well. About 20 strong tonight. Top chronic strap here ago. That's better. Okay, so now we've got I was settings which are prepared, so I'm just gonna put this one a little bit further down because I have enough space, so because I've moved everything down. So now I'm gonna need to update constraints, okay? To just readjusts within you. Um, I think I've missed one. So let me start over. I'm gonna select everything. Three labels, this re sliders, including the image you go down. And then of deep constraints, I had just missed toe one elements. Okay, so now we've got our view for the settings, which is ready. So let's preview that next. What we're gonna do is connecting all these elements in order to then allowed to control programmatically. So the settings So the values terrible 10. Programming Settings: So what would you now is connecting all these diamonds to the settings you controller Perego that's gonna be here in the top. So that's beginning with, um I'm gonna need to have connections to every label we're gonna start with. That's a brush label. Click connects. I'm gonna do the rest of Well, so for the cars Green label on Blue label. Same for the image. You We're gonna need to refer to them in order to draw like the other context. So which ever graphics, Actually, we're gonna use, you know, the colors that we have. Ah, that who have set at the moment in order to droids as graphics, and then assign it to every image you. So first, we're gonna have here the size for it, like showing which is gonna be previewed here for the size of the legal, for the size of the brush that's gonna be brush in is you. And finally, we're gonna have, like, the colors image you and finally, we're gonna have the image view colors right here. So, based on the values for red, green and blue, we're gonna have a preview of the colors using the this image use. I'm gonna call this one collars. Imagine review. Here we go. And next, we're gonna create connections for this lighters because we're gonna need that to united to get the values back from the user interaction for the to the user. Interaction hers. It's gonna be brush slider. Then we're gonna have the red slighter. Also the green. I just had some space. Okay? Also, the greens lighter and finally, the blue slider. Okay, so let's regroup everything. Nicely organized. So we've got the labels here. Then we've got the image. You I'm gonna call those ones Preview previews, actually. And here these are This is the collection of sliders. Here we go. And then we've got the action we're gonna use to say, okay, and what we're gonna do, we're going to start by allowing to get, like, the settings that we have currently so meaning that we've got here when we go in view controller. So we've got some colors that are set up based on our selection, you know, and also the brush with that I should said, actually, as a global variable right here. So So here we define a line with so that's gonna corresponds to the brush with Are the struck with if you're like so we're going to need to have that as a global variable. So I'm gonna put that actually right here, regard brush with which is gonna be a type float as well, which is equal to 50 And then I'm gonna replace here with brush with and that's fine for the rest because we have a reference to every color value which are red, green and blue. So we keep track of themselves because we have here red, green and blue. So we're gonna be able to pass this over to the settings page. So we're gonna start with that. So that's gonna be the first thing. So basically, So all these variables that we have right here in the view controller, we're gonna have to be exact same ones and the settings you controlled right here. So I'm gonna put a comment just to keep things clear. What it puts settings, for example, and basically what we want here is to pass. So the values that corresponds to this on the view controller over to the settings. Your controller, of course, we're gonna do that with this function, which is prepare for secret. So that is convenience, because we're gonna be able to prepare some objects to have them ready. So before we segue way to the next to the destination view controller so that's gonna be we're gonna define so the destination. So that's gonna be settings V. C. That's gonna be cigarette destination as sittings do you control or and on setting. So what we have. So just like we have owned the view controller. So first we have the brush with we confirm this one clippers. We have the brush wit, which is gonna be cool to the brush with as defined end of you control. Then we have the red color, which is gonna be cool to as defining the view controller sing for green, and same for Luke. Here we go. So this is how we're gonna work this out. And if I go to settings you control so in beauty load. So, for example, we wanted to test just one thing very quickly, So brush with, for example, is so we're just gonna then pass the value that corresponds to brush with. We're gonna be able to read that in our settings, you controller, meaning that we're going to actually keep track of the last settings as they are set up. So originally coming from the source of you controller and then we can adjust them and then send back the new settings once we save back to their source. So by default, it's five. Let's go to settings and hair go brush with is five. So that's good. So we know that we can communicates those values to the destination. So this is what we want next, What we want to stand provides, like your preview using those images that we have set up here. So that's gonna be used as a preview. Now that's gonna change. Also, as you changed the values on the slider, so we're going to start with that. So we're going to see how to draw, actually, like a preview using the image you both for the brush image view here and the colors image you 11. Previewing Settings: basically to preview the settings. So energies have a visual representation off. What's we have originally set up in the view controller? So we're gonna use the exact same function that we have here, which is gonna be used to, like, draw a graphics using graphics by context. So I'm going to simply copied all of that. Just gonna quit. I'm just gonna keep a few things, actually. So we're gonna go to settings, you controller, and here, right below, I'm gonna foot on a corner function, which is gonna be drop review. And I'm just gonna remove that because I'm not gonna need that. So I'm gonna create a context. So here it's gonna be instead of having here bad image use. So I'm just me put image of you, which is gonna give type. You want imagery because we're gonna need it. We're going to need to do that for to image you. So we're gonna use just one. We're not going to retype every single thing. My image of you referring to this one. So we're gonna have one provider. We're gonna also replace right here. So for the pad immature, it's gonna be also image. You like the same that we pass is an argument in order to apply through the image from the current image context to the image you we're gonna draw a graphic. So the other contexts were using. Actually, half of the image of this is 70 by 70 for the image use. We're gonna use half of it for the X. And why, starting from actually the center for each of them, we're going to see how it works. Actually, that should be like almost like we're going to see how it works. And so for the rest of that's pretty similar to how we have precedent for like when we draw the images to the draw to the drawing pad. So that's true. That's so we've got the blend mode, the line cap, and also the line with that corresponds to five because we start with five. And then also, finally we close the path. So we're gonna call this function from here, drop review, and we're gonna then assign this to that's gonna be the brush image. You Same for the colors image. You just write that we're gonna go to settings, so that doesn't seem to show so The thing is, after I different things on for this birth, it doesn't seem to work. So as it was set up and the storyboard originally so we're gonna need to specify, actually, like the dimensions. So within heights, like with sieges size, so within heights, So that's gonna be 70. So the way that we have set them up and the storyboard 7 to 17. So we're gonna try that again, okay here ago. But that is very small. And there's no way that we can adjust them because we haven't, like, set up anything with those lighters yet, so we're gonna be able to make them bigger. So as we move those later left or right in order to adjust the value Same for the colors red, green and blue energy to change the colors. And we're going to see that next. So we're gonna allow to use So this lighters internship date the values that we got originally from the view controller and then apply to the new cities 12. Adjusting Settings: so in order to display. So the sliders position. So based on the values on the colors, So what I'm gonna have is, instead of putting everything in beauty load, I'm gonna have one function separated, separates, which is gonna be sliders. Values I'm gonna call it actually sets sliders values, you know, and inside. So we're going to refer to every element. So including the labels and the sliders, starting with the brush. So that is the 1st 1 So we're gonna have, like, the brush slider. We're gonna set the value, and this one is gonna corresponds to the brush with. So when you pass it as a value, okay. And also we're gonna beat the label off this one, so that's gonna be the brush label text. And because this is expecting textile, we're gonna use So, of course, like quotes. And I'm gonna Right, So that is, I think, brush and we're gonna use this function, which is gonna allow to then for mets, so values. So it takes to organ. It's the first we're gonna pass. So the way that we wanted for my day, so that's gonna be like decimal value, and that's gonna be Now that's gonna be uptight, integer for this one, and then we're gonna pass. So the value of the brush with which originally is a siege it floats on, which is gonna wrap this one within an into in order to turn this one into an intel. You, um this is gonna be like the anti of thing here that's gonna be history, because this is expecting the string here. So here we've got this morning because we're trying to pass as a value here. So this is expecting afloat, and the brush with is up types e g floats. We're gonna convert that as well using So this function, which is Focht. Okay, so we're gonna start with that, So I'm gonna call this function from the view, the load set, sliders, values. Let's see. So now we can see that we've got a value, which is five, and it goes to here. So that's something that we're gonna just later. So as far as the position off the slider is concerned, so we're gonna do the same for the cars. Now, that's for the brush. And now we're gonna do it for the cars. So first we've got the Reds slider. We're gonna set the value. That's gonna be the same. We're gonna need to rub this because these are city floats. We're gonna rub these within this function than because that's an optional. I'm gonna do that as well here. Then we're gonna beat the legal text, and that's gonna be the exact same from it. Here, it's gonna be we're gonna read, read next trump here and for here. So that's gonna be actually like value. So that's Nielsen integer, but we're gonna actually, um, get the value of the slider, which is gonna be great slighter, multiplied by 2 55 Because what we want is to get to return the value using So this format to 55 and that's gonna be as a string. Looks like I don't have to come from them, although Oh, my bed's okay. So here. So my bats, I've copied directly from, you know, if you controller, But obviously you want to allow to pass the value as it corresponds to whatever you pass like, and we'll test that again. My bad. Ok, so now we know that we're gonna need to interrupt them all care Ago same for this one. Okay, so let's try that. And remember when we had made this death to test if we were actually returning like the right value? When we say Quaid from the view controller, we're gonna test that again. So that was here Prince brush with is brush with. Okay, so let's try that. So we should be able to read the same thing, Although, like you here, this is an optional, but that's fine. So we started zero, But for now, So this is a Rebecca. This is black. So this is working just fine, So I'll do the same for the other colors. So we've got also green and then blue. Well, that's gonna be the green slider. The green label? Yeah, that's gonna be the green slider. Same for the blue. Okay, since right except here, Green gonna get the value back for the green. And also And this one's the when were protesting, So we're just gonna pass gonna and rub this one, Okay. Cool. Okay, here we go. So they're all equal to there was actually, if we go back to orange, we're gonna be able to get, like, the exact corresponding you know value of the colors as it dissected. So that is very small. So that's gonna be the next step. Actually, we're going to get back. Actually, um, we're gonna have, like, we're gonna see how to adjust the settings and also something I should do because it's scan of ridiculously small. Here's I'm not going to use the brush with as an indicator of, you know, I'm gonna put it here, So that's gonna be with it's gonna be an extra perimeter because depending on whichever preview that we're making, we're gonna need to adjust the with of this one. And for one, it's not gonna be moving. So that's going to have types e g floats and here I'm gonna replace, was with. So I'm gonna need to update here dysfunction Perego because it's gonna check like both brush with this one is gonna be at first. It's gonna be like we're gonna use No, sorry. It's gonna brush is gonna be brushed. Image you. Then we're gonna pass brush with, because at first it's going to start with the value of five. And here, however, we would like to allow to have, like, a larger prevue. That's one of Yukos image you and here's I'm gonna set it as being a 10. We'll adjust accordingly. We'll see how it goes. So let's see how it works. This time. We're gonna have, like, a larger prevue of some this truck of the color. It's gonna make more sense. That's like this one syringe here. Go through that speaker. I can't even make it bigger. Actually, I'm gonna set it as is to 40 No, 30 million. That's right. Near ago says, that's why better Because then you can adjust. But for now, it's not working like we're gonna do that next, and we're gonna have, like, a larger preview of the culture, So that's better. So this is what we're gonna do next? Actually, we're gonna add some actions to the sliders. So what I'm gonna do, we gonna go back to the storyboard and then connects. So one action, which is gonna be the same for all of them glass with that here. So we're gonna start here, so that's gonna be, um, change color action. It's gonna be the US slider a year ago and next. What we're gonna do is connect also this faction to this one and this one. So to all called. So let's go back to the view controller, the settings you controller. And so here's what we're gonna do is then get the value of back for each of them from the slider. So that's gonna be actually like we're gonna turn that into a CD floats, obviously, because it's gonna be the slider. So when we move the red sliders, so we're gonna get the value back value, and then for the label, it's gonna be the exact same formats right here. So I'm gonna copy it. We're gonna then display. So then you value of the rates lighter. Okay, So let's actually get so the same. It is true that it's gonna be revert as opposed to assigning to the sliders of the value off what we get back from the original from the original source of you controller. We're gonna then assigned to each priority the corresponding value of this lighter. So as you move this lighter left all rights. So I'm just getting this bag because this is the same from its 10. Then for the green gonna sign. So that's what corresponds to the green. Slater and then we got the flu. Her that's gonna be the blue Perego destroyed that. And, of course, we're gonna need you also get a preview of that. So we're gonna again call this function, which is dropped. Preview is gonna corresponds to the colors image, you and for the with. I think we had to use to 30 for this truck. It's gonna be big enough. So let's try that combining. So the change for like, including the red frenemy steak here in my bed is not red. It's gonna be read and hear Green. And here it's gonna be blue. I've made the same mistake here is all keya the red green, and then look Okay, so let's change bets. Okay, so I was just explaining that combining so the three actions call together will allow to provide a preview for including every values for this re sliders in order to create the clothes from the corresponding, um values as they're in place. Because as you move the slider, so the rest is not moving. So you're gonna keep the same values for the other ones and Recalculates the colors and then provide a preview the corresponding prevue So let's try that again. So we're gonna go here and then change the coast. It's black at first, and then you can move and then change the preview and so forth. For now, it's not saving anything because still black, because we're gonna need to set up like a critical into the gate in order to pass back like the information of the settings adjusted. So for now, So we're gonna allow to also change the stroke with by also adding an actions to the brush slider right here. So that's gonna be right here. So I'm gonna create another, and that's gonna be changed. That's gonna be changed brush with. But oh, my about puts men outfits. Don't let me go back and actually make sure that I removed that because I don't need to outlets. So I'm gonna keep the brush later and remove this one year ago. Let's go back and then recreate. That's as an action. It was gonna be changed. Brush with Oak Slater Perego. Let's go back to the settings for you controllers. It just standard view and here. So we're gonna check if, um, the center is actually like the brush later so we don't get confused here, brush, slider and then to brush with, because this time we're gonna assign So whichever new value that we get back from the slider and that's gonna be have types e g float, we're gonna get So the sender value do then just the size of this brush and also indicates for the label. So we're gonna use the exact same one So right here using this, using the text format. So the value which is return so that stray that we're checking, that's a comparison. So let's just put two equal signs here, okay? So this time we're gonna try for the brush. Oh, and I forgot to also drop the preview. So I'm gonna call you from here, so that's gonna be brush with for the with. And then that's gonna be brush image. You. So we're gonna need to prove you're right here. Yes. Let's try that for the brush. It doesn't seem to be super right, because it started actually as a maximum, like as being five, so that doesn't seems to be right. So I'm gonna drift your adjustments here. So starting here. So when we said the values So by keeping the same initial values, I'm gonna allow this one to start, like very small, like I'm talking about, actually, the value which is on the slider in order to allow so bigger. So I'm going to divide this value by fifties with meaning that the value which is set on the slider is gonna be divided. And it's not gonna be set to the maximum and here as well. So when we increase the value, we're gonna allow to increase this one too by 50. So what I'm doing is just increasing so allowing a larger value for the slider. So we're going to start smaller. So on the scale off the slider, which is gonna corresponds to five in reality, for this truck with the brush with, you're going to see that this time you're gonna have, like, here, the position of the slider starting here for five, and then we're gonna be able to increase this one. Okay, so we're gonna need to adjust. Also, the preview doesn't seem to work. Okay, so I don't want to change it here. Actually, I want to actually, my bad I was like, in the wrong area completely wrong. I was intention. Called her accent. So I want to change that right here. Okay. Ready to pay attention? So I have divided right here. 50. And here I want to multiplied by 15. Let's try that again. This time it's gonna be fine. Okay, so we start from here, and then we can go bigger, okay? And that's gonna allowed to then set up like this stroke. The brush with to revere the maximum will be 50. Okay. And then zero. OK, so we're gonna use that in order to then adjust the settings. And that was gonna be time to save the settings. And for that, we're gonna use for political and delegates. So we're going to create havoc own critical energy to pass the settings adjusted back to the initial view controller right here. 13. Saving Settings: So now what we're gonna do is setting up a protocol. So that's gonna be we're going to do that in the settings for controller, and that's gonna allow us to set as a delegate. So what we want is to create a Pirkle, which is gonna be then adopted by the View controller. And then we're gonna have a delegates of type off this particle that we're gonna create, and then on behalf of these particle, we're gonna be able to execute a few actions right here. So let's begin with defining the protocol. That's gonna be protocol. That's gonna be this from it. And I'm gonna call this one our updates setting steady gates, that's gonna be the class. And inside, I'm going to define the functions, the methods that are gonna be required as part of these particles. So this one is gonna be update settings, and that's gonna be the center is gonna be like this settings view controller right here. So that's gonna be sitting ZBC type sittings. You controller, tell us settings, you controller. Here we go. So that's gonna be the function which is gonna be a record as part of this protocol, and then we're gonna define a delegates. I'm gonna put it here. So that's maybe delegates, which is gonna be a type like but critical that we have just defined. That's the date sittings our updates, sittings this one. Okay. And then we're gonna blow. So the view controller to confirm to this critical. So I'm gonna add it right here. That's gonna be update settings delegate here ago. And then So it's going to require me to You're gonna see that right away. We're gonna get this error because we need to implement the record methods. It doesn't conform to political update settings yet. So then we're going to call this function. I'm gonna call it right here. So actually next to, ah, the prepare for sick win. So with prepare for Sig, we were going to be able to pass objects from two and then with this function. So from this particle, we're gonna be able to get the information So from this source, So to get the settings adjusted. So from the destinations of from settings your controller back to view control, there's gonna be updates. Sittings. So how is it okay here ago? It is here updates sittings. Okay. And basically So what we're gonna do is assigned to every perimeters, so we're gonna pass it from settings VC. So that's gonna be brush with. We're gonna get that back from the settings you controller. Then we're gonna have So let me see what I need to confirm here. Okay. Good. There, Busk optionals. And now we're gonna have the red as well equal to the red as set up in the standings. You controller. Then we're gonna have the green, and then we're gonna have to move. I was gonna be from sittings and then Okay, so that's all set up. Let's see, this is working time. So there was another thing that we're gonna need to do because we have a delegate. So we're gonna actually allowed to update the settings, Actually, so it's part of the delegates, So there are different steps that we're going to need to do. So, First of all, we're gonna go back to settings view controller, and you see that this isn't the safe methods that we want to activate that So we're gonna allow to call this function so from the save function. So in settings, view controller. So I'm going to do that. So from the delegates, because the delegate is gonna be actually the view controllers. We're going to set that up as well. So we're gonna update the setting. So on behalf of the settings, your controller via the protocol updates settings, delegates and for the view controller. So that's one of yourself And who is gonna be the delegates? So we're gonna need to set that up. So when we say quay from the view controller to the settings you controller at this level. So we're going to do that because now we have access to that delegate property, and we're gonna make, like this one equal to self, you see, So we have defined our own protocol right here, OK? And the required methods is update settings. So and we have a delegates property, which is of this type of this protocol update settings, delegates and who is going to be the delegate for this protocol? It's gonna be the view controller, and this is where we define it. And so in the settings view controllers. So what we want is to trigger this function. So when we click on the action safe settings actions before going back to the source. The view controller. So the delegates, which is now the view controller, And so the delegate, which is a few controlling, will execute this function, which is update settings back here, which is gonna be the following to set. So the brush with like, as it is adjusted in the settings view controller and then reassigned back to the variable , global variable of the view controller. So let's try that. So I'm gonna Sector one color, which is gonna be green to start with Green, Let's go back. So we start with green and I'm gonna go with this color, gonna make it bigger, and it's quick save, and we're gonna go back with this color. You see, if this is much bigger and here so we can, like just the colors. Let's try that again. And you see that the color is not changing for the brushes. Well, so I'm just gonna date that. So that's a quick update. So I'm gonna change That doesn't seem to pick up the car right away. Okay. Ah, big brush. Okay, so we're gonna take that red and you see that weekend, then updates the settings of back in the view control. So in order to allow suits, you synchronize to the preview off both Ah, the images. But also for the brush we're going to simply actually have the same function. So right here. So you see that for we have, like, the privy for the cause for the colors image. You We're gonna have this function as well available right here in order to adjust the preview for the brush as well. So as we change as we changed the values off the RGB, so we're going to start with blank. It's just that to a different color. You're gonna see that I'm gonna just the brush with that The color is gonna just on both locations. So that's good. Perfect. So what we're gonna do next? So we've got this last part. So the razor. So I've got this image which is available inside here. So we're just gonna this using through the Barberton item, which is the one in the middle. We're gonna do that next 14. Erasing Function: Okay, So the last part will be to then provide with an image for the third for the second item Barberton item that we have on the toolbar. And this one is gonna be of type you I Barberton items, so I'm gonna create a separate functions for that. I'm gonna put eat, actually. Um, right here. So this one is gonna be at your razor. So I'm going to start by creating, like, a separate, if you, for this items of these view limits just going to type you. Why, Button, We're gonna add these to the barber tonight, and that's maybe you I button gonna do in it. Then we're gonna precise over type, and that's gonna be custom. So then we're going to set the image for this About 10. So that's maybe with set image on that's going be going to specify the name. So you are image and that's gonna be the razor. This is how we have named its theories Are PNG. Okay, so that's gonna be for the state normal, and then we're gonna set the frame. So that's maybe button praying. Yeah, that's gonna be with C Gerecht. That's gonna be zero for the X and y or the With that That's gonna be so. I've implied I have applied So 53 53 for the width of than 34 the heights. And we're going then assigned this one to the toolbar That includes items and we're gonna target. So the 2nd 1 So that's part of the items. So that's maybe one. And then we're gonna sign So Barberton, And then we're gonna sign so better character. And finally, we're gonna call this function from So if you did load in order to then at this one So where did I put it? Beauty loaded, sexually here and then. So I'm gonna ban create the Barberton items of this levy Barberton, with this contract, which is you are bourbons and item, and we're going to create this Barberton with a custom view, which is like this one button and finally we're gonna sign. So this permanence to the toolbar, which includes items and that's gonna be the 2nd 1 So that's gonna be It's like a collection starting with zero. So that's maybe the number one and this one is gonna be equal to Barberton. And then I'm gonna call this one. So from you did load finally right here. So that's gonna be add your reason. So this time we should get that image and here ago. So what? I'm gonna Jim gonna remove this one, because this is no longer required. Just gonna test it. Yeah. It looks like I'm gonna need to set actually in actions to this one, because this is completely different. So what I'm gonna do for the action off right here. So you raise, I'm gonna create one function, which is gonna be erase function. I'm going to actually put it right here. Drunk. He raised function right here, and then we're gonna add it Targets to this button that is gonna be Barberton are the targets. That's not gonna be the bourbons. My bad. It's gonna be actually the button to which we're gonna add a target. So that's maybe targets here here ago. So the target is gonna be self and then the sector, so we have just created it. So that's gonna be selector. And then, which is part of the view controller and this one is called erase function. And it's gonna be for, like, the event touch up inside. Okay, so this time we've got an action which is associated to this one, and it's back to the main story board where I'm going to remove. Ah, here. So this one a year ago and back, I'm gonna be able to then erase using this your razor. So we're gonna draw, Let's make it bigger, and then you raise here ago.