[MUSIC] Okay so now let's do something more exciting as [INAUDIBLE] mentioned and add a button that will allow us to basically toggle this image from the current one, which is the before image, and the filtered one which we'll call the filtered image. Doing that requires, will require some interface changes here, as well as code changes to make sure to do the functionality. Let's start here since we're already here. So what we're gonna need here is a button. And you can always scroll down and look for everything. But you can filter it again by typing button. And there's a few kinds, but we just want the normal button. So again, we drag it in, put it right under the image view. And we're not going to worry about making it pretty or laying anything out yet. And we'll call it Show, it will say Show Filtered Image in the beginning, but then, and then, let's make it bigger, so it takes bits. But then, afterwards, once it's showing the filtered image, we'll change the text into code to say, show before image. So that's all we need here. And a button is a bit more interesting than an image view, because you can click on it. And how that works, we'll still connect the button into code exactly like how we did with image view. And how you do that again is called control, drag it and we'll put it below the imageView and call it imageToggle. So that's our button. But outside of just a property, it also needs to call some code when it's pressed, when the button is tapped. And how you do that, we'll stay here at the top of the file, is, again, you drag it again into a similar, exactly the same as before. When you let go, instead of making an outlet connection this time, we're gonna make an action. And this, an action is basically it would define a function which this button will call. And we'll call it onImageToggle and you can change the type to UIButton, and I'll show you what that does, and that's it for now. When you press connect, as you see here it's a function now and not a variable that takes. Okay, now let's close this. Get more screen space, close the interface builder. It passes in the sender of the action which is the button. And if you chose any object before, then this would basically be any object. But since we know its a button, it can be a button. So this is what will be called whenever the button is pressed. So we need to do two things here, change the button title, and change the image. So, first of all, we will need to save this image that's been filtered in order to display it. So instead of setting it directly to the, let's move this as well. Instead of setting it directly to the image view, we'll save into a property. Let's simply define a property called filteredImage. And this will be UI image, which may or may not exist. So it's an optional. In this case, it doesn't exist up until we create it. So we can simply set it here. Instead of setting it to result, I'll set it directly to filteredImage. >> And before, the result was only accessible within the scope of this function. So that's why the property of filteredImage was needed so it would make it visible outside of the scope of this function that we had. >> Yes, so even though we had the result here before, this function would have no access to it, it would be gone after the code is run. So now that we have access to that, let's start simple and on the press the button, we'll set image view.image like we did before, equals to filteredImage. Let's just start with that and make sure it works. So if you build and run the app now, we'll get our app back, but now the image not filtered, and we have our button. We press it, there, we get the image. So that's cool, so that's step one. Now let's also set the title. So we have the image toggle which is our button, and here we'll have to call a function, a method on button, a UIbutton called set title. So a button has states. It can be selected or deselected, and so in this case, we're going to set the title of this button to be show before image on the state for when the state is selected. And since we're doing it this way, we don't really have to put it in here. We're setting the button to show this title for a selected state and the original title for a default state. Instead of saying this every time you press the button, you can simple set this once, which is viewDidLoad when this app starts up. If you do this here, you simply have to make it selected. Selected equals true. And if we now just simply run again, and we press show filtered image, it'll become show before image and it even has this nice effect. And it does this because it's a system button and system buttons, by default, always highlight when you select them. But when you press them again right now, this code is running but it's not doing anything because we've already shown, it's already selected and it's already showing the filtered image. So now that's pretty easy to handle, we have to check if it is selected. So if it's already selected, we wanna do something else, or else we wanna do this. Cuz in the beginning it's not selected. And if it is selected, we're simply going to get the original image back. And we could've saved this in a property, just to be quick here you can recreate this image, exact one. Set the image view to this guy, and toggle off the button. And it may be interesting that the button doesn't toggle by itself, but that's just how it is. The button, you have to toggle yourself. So if we press this now and we press show filtered image, it will turn the filter on. We press it again it will turn back. Great, pretty neat. So yeah, so here we've showed how to connect the button, make it, call it, run your code, and all this is magic done by the system. When you press the button, your code runs and in here we can modify the UI some more. And on the next time the button is pressed, it'll run different code. >> Great. Now one thing that might be of interest when you look at this, is that you call on ViewDidLoad, that's where you define this show before image, so I guess it's remembering that state, so when it goes into selected state, that title comes up. >> Yes, so we could also do this in the storyboard, and maybe that's a better place to do that now and let's see how we do that. So, a button has different properties again from ImageView, and buttons are a bit more complicated cuz like I said, they have states. So they actually have four states, and the interface builder will allow you to basically change it right here. So if we do go to selected state and change this to Show Before Image, as you can see it's a property of the button. The button on Selected state will show this and on Default state will show that. And if we run this, we should have the same effect. And running code in ViewDidLoad, ViewDidLoad is in a view controller is the first place you should run code cuz that's where everything has been loaded. As you can see from the name. And as you see this still works. So it was also safe to set it up, run this code and get it load or in interface builder. And lots of things we can do multiple ways. In this case, it's probably most convenient to set up into storyboard. >> At least initially when people can become more comfortable than doing code might be more efficient. >> Mm-hm. >> Good, so that's our first actual app and that's something useful that toggles an image, the before and after image of the contrast enhanced or partially contrast enhanced image. And so this is if you guys are running this on Xcode, you've built your first photo editor. And you can't upload any photo yet, but that's the heart of it, that's the essential core which will be adding to and adding a few different elements to it, but the basic part is what you see. >> Mm-hm, and we'll go into making this look a lot nicer, making these things not be randomly placed in the app. And for the time being, you can go ahead and plan the storyboard, and look at all its features and properties, to try to make it look a bit nicer on your own.
