[MUSIC] All right, now that we saw how exactly to take a code that we had from the previous course and run that code. Now it's a good time to start looking at how we put that on screen. Or how we at least can get output so we can see how our application is performing. >> Yeah. So, the final goal will be to display this filtered image in the app, in the actual app for the user, which is the one we're building. But before we do that, let's start by making sure the code is executing by printing something to the command line and this is really, what you would do in any other programming assignment. And we can do that here as well. So, in SWF You really just have to use the print command and you can print a string, anything you want, for example, this code has executed. And now when you run this, I press the Play button or Cmd+R. As you can see, that was very fast. [LAUGH] That's already executed. And has it really executed though? It must have. It must have. Or else it wouldn't print it. So yeah, so let's move on directly to the, displaying something on the screen of an app. Here we will using this storyboard. So in your project, and your project comes with a storyboard, and this is where you can lay out your interface, but just really the bones of it. And we'll be going into this a lot more in future modules. But here we wanna get a sneak peek and sort of a taste of what this does. So, you can hide this bottom debug console by placing this. And for interface builder, you need to bring out this side panel. And down here, you'll see all the things that you can, basically, components. These are, if you hover over this, it tells you it's the object. These are the objects and components you can use to build your interface. And in the beginning, as we mentioned, you have a single view controller and that's what we are seeing here. And that's represented by this guy. So you may be wondering why it's square. That's because, storyboards have the ability to support ipads, iPhones of all sizes. A it's really just the general layout and where you have to go into specific or constrain items to display at a certain way during a process. And we'll be going through all that. Okay, so what we're doing is adding an image. And how you do that is in this object library, you can filter it by typing image. And I give this an image view. And so all you have to do is drag that into your controller. Right now we're in zoomed out mode, so you have to double-click on it, click on view controller. This is the size, and it's kind of bigger than our screen here, but for those of you at home, it might be okay. You can just simply drag this Into the scene here the view controller and you can move it around and as you can see it, it will guide you on where to put it. We will put it right in the middle. And that's it and to make sure it's there let's set the background color. So if you click on it on the right side, it will go to the properties inspector, attributes inspector. And here you can set basic properties of every view. So say we click on the view controller, these are different because it's for the view controller. But on image view, here are some properties we can set and one of them is the background color. So if we make it black, we should be able to see it by running it. So if we now run, you'll see it's there, but its not really where you expect it to be. And that's because the screen basically is this big or like down there. You can sort of see I'm drawing with my mouse and this image view is not really in view. So for now we're gonna move this here and we'll go in the next module, discuss how to fix that issue if you actually wanted to center something, but for now we'll just put it in the upper left corner. Let's run it again, to make sure that it Is visible here. And that's really good enough for now. So, here you can also, will set how the image is displayed and we'll click on aspect fit which means the initial will fit within this image view. And that will make sure that we can see the whole image. So, now we have an image view that's displaying on screen. And we have code that generates the image that we want to go into the view. So the last step is how do we put it in? So there's two steps to this process. Step one, we have to let the code be aware of the fact that there is an image view here inside the view controller. And so how you do that is by opening up these files side by side, and the that was holding the option key and pressing on this file. You can also press here and open up the file in the second screen. And then hold control, and you left-click on image view. You can do it from here or from the screen. And you simply, let's find a place above here in the class, drag that into your code. And it's not connecting right now. Oh, that's because we're inside a function. You want to make sure it's outside of a function. So up here and then you'll get this indicator and when you let go it says you're connecting an outlet to the view controller of a type UI image view, and asks you to name it. So we'll call it image view. And if you hit enter, there you go. You get a special variable called, that's an IB outlet, which IB stands for interface builders. So it's an outlet, and when you click on it, it connects directly to this image view. And what that does is now our code knows that this image view exists and its connected here and the system will set everything up before view did load to make sure that it already exists and has the properties that you specified which is a background color of black >> Now this is quite important. So these steps of how you connect UI into the program that you are writing is very critical. So this is something that everyone should, all the students should be paying a lot of attention to. As we do it. And so Jack, what you mentioned also is that when you dragged it, it has to be done outside of function. So if you're dragging it and you find that it's not actually adding the coder, enabling you to add it, make sure you are outside of function. Yes, and we'll be doing a lot of this in the future, so if you're not too comfortable right now, don't worry too much. You'll see a lot more of this. So now, inside our function around this code that you've executed, which again is being called. You can grab this, now it's just a property, it's like any other property that we've discussed in your code. And you can access it just by saying imageView. So all we have to do is set the image of imageView equals to result. And imageView as we'll also go over in the future is used to display images and so it has image and it will simply display the image. It's pretty straightforward and if we run this code now we should see our image in the image view. Pretty cool, yeah? And maybe as a final thing here. And the properties here it's really a blank image view. We can set up our scenery image n here to be a default image. And that, we'll show you a preview of that. So if want an app that- our app is too fast. But you would see this before it gets replaced by the Filtered image. And there you have it. Here's your first app, it filtered an image and that's pretty good. >> Now what will be actually more exciting is to have a button that allows you to go from the before image to the after image. So I think next we should be focusing on that.
