1 00:00:06,180 --> 00:00:11,330 Hey everyone what is going on this is Caleb began with devah slopes and in the last video we set up 2 00:00:11,330 --> 00:00:12,500 our user interface. 3 00:00:12,500 --> 00:00:18,760 But we're still missing a UI image view and believe it or not in this video that is when we're going 4 00:00:18,750 --> 00:00:19,160 to add it. 5 00:00:19,160 --> 00:00:24,950 So I'm going to go into my view controller here and I'm actually going to make a function called set 6 00:00:24,960 --> 00:00:27,140 up image view. 7 00:00:27,440 --> 00:00:28,020 OK. 8 00:00:28,580 --> 00:00:32,040 And we're going to go ahead and create an image view. 9 00:00:32,060 --> 00:00:36,810 We're going to drag in an image that the image view will use. 10 00:00:36,830 --> 00:00:40,960 And we're also going to just set up a few properties we're going to have to do some special math here 11 00:00:41,300 --> 00:00:43,330 and I'll explain why in just a moment. 12 00:00:43,340 --> 00:00:44,190 But to begin. 13 00:00:44,240 --> 00:00:50,530 I'm going to go into my assets folder here and I'm going to drag in two images here. 14 00:00:50,540 --> 00:00:51,340 There they are. 15 00:00:51,530 --> 00:00:57,410 So first of all we have the face image which you can see here a very clear photo of a face which will 16 00:00:57,410 --> 00:01:03,950 be easy to identify and then we have an image with multiple faces looking at a bunch of different angles 17 00:01:03,980 --> 00:01:07,100 and you know closeness to the camera. 18 00:01:07,100 --> 00:01:11,060 It should be a good challenge to see how effective our application really is. 19 00:01:11,060 --> 00:01:17,390 So the face image is now in place and in this function we're going to go ahead and first create a property 20 00:01:17,390 --> 00:01:18,170 to hold that image. 21 00:01:18,170 --> 00:01:19,480 So go ahead and type. 22 00:01:19,500 --> 00:01:26,900 Gardner Let image equals UI image and we're going to create a UI image with a name like so. 23 00:01:27,110 --> 00:01:29,620 And the first image is just called face. 24 00:01:29,870 --> 00:01:34,190 And so assuming that we have that image which we do you know this will work out. 25 00:01:34,210 --> 00:01:40,940 But in the instance that we didn't we're going to be nice and safe and return out but thankfully we 26 00:01:40,940 --> 00:01:41,990 do have this image. 27 00:01:41,990 --> 00:01:44,330 So it's not going to cause us any trouble. 28 00:01:44,330 --> 00:01:45,460 So we're using guard let. 29 00:01:45,470 --> 00:01:51,890 Because a UI image when you actually create one it's created as optional because they're never 100 percent 30 00:01:51,890 --> 00:01:54,970 sure that you actually have this image in you're in the folder there. 31 00:01:54,980 --> 00:02:00,920 So we're using a guard left to create a non optional variable in the instance that this does not return 32 00:02:00,920 --> 00:02:01,330 nil. 33 00:02:01,340 --> 00:02:02,630 Otherwise it's going to return. 34 00:02:02,810 --> 00:02:04,480 So pretty cool. 35 00:02:04,520 --> 00:02:06,500 Next up we're going to go ahead and create our image view. 36 00:02:06,500 --> 00:02:12,260 So Type let image view equal UI image view OK like so. 37 00:02:12,470 --> 00:02:14,980 And we're going to need to give it an image. 38 00:02:15,020 --> 00:02:19,100 Thankfully we already have one called IMET and we can just pass that right on in. 39 00:02:19,100 --> 00:02:23,960 But now we need to actually set the content mode of this image view. 40 00:02:23,960 --> 00:02:29,300 So in order to do that we're going to type image view content mode and I want you to look at all of 41 00:02:29,300 --> 00:02:34,550 these different content modes you can align images to the bottom the bottom left Center et cetera et 42 00:02:34,550 --> 00:02:35,380 cetera. 43 00:02:35,480 --> 00:02:41,150 But the one that we want is scale aspect fit and what this is going to do is it's going to scale the 44 00:02:41,150 --> 00:02:48,080 content to fit the size of the view by maintaining the aspect ratio any remaining area of the views. 45 00:02:48,080 --> 00:02:53,840 Bounds is transparent so obviously if you've done any level of Iowa's development you're familiar with 46 00:02:53,840 --> 00:02:55,990 making images aspect fit. 47 00:02:56,360 --> 00:03:03,350 And this is if you want the image to show or I guess if you want to see the full image in the image 48 00:03:03,350 --> 00:03:04,100 view. 49 00:03:04,460 --> 00:03:11,840 But the issue is that while the whole image will show the image views frame could actually be a lot 50 00:03:11,840 --> 00:03:16,460 bigger than the actual image it could be taller. 51 00:03:16,460 --> 00:03:17,660 It could be wider. 52 00:03:17,780 --> 00:03:24,620 And so we're going to make it so that the image views frame is exactly the same as the size of the image 53 00:03:24,620 --> 00:03:25,920 itself. 54 00:03:26,090 --> 00:03:28,310 Or at least we'll scale it so that it can be. 55 00:03:28,310 --> 00:03:32,340 So in order to do that we're first going to need to set the frame of the image view. 56 00:03:32,360 --> 00:03:37,600 So go ahead and type image view frame and that's going to be a C-g recked. 57 00:03:37,670 --> 00:03:38,340 OK. 58 00:03:38,630 --> 00:03:44,630 And a CD is just a rectangle that has an origin point x and y and it has a width and height. 59 00:03:44,690 --> 00:03:48,370 So for now let's go ahead and just set this to zero and zero. 60 00:03:48,560 --> 00:03:54,500 And just for the record that's going to be the top left corner of the screen the width we want the image 61 00:03:54,500 --> 00:04:01,650 to be as wide as the screen so we can just copy the views with property by typing view frame dot with. 62 00:04:01,790 --> 00:04:05,120 And that means that our image view will be as wide as our screen. 63 00:04:05,420 --> 00:04:08,280 But the height of the image view this is where things get tricky. 64 00:04:08,300 --> 00:04:14,550 So we could do a view frame height and then you know. 65 00:04:14,570 --> 00:04:18,830 Well let's let's leave it at that and let's see what happens when we actually add this image view to 66 00:04:18,830 --> 00:04:19,480 our view. 67 00:04:19,490 --> 00:04:26,420 So type view view dot adds some view and image view is what we're going to add there. 68 00:04:26,660 --> 00:04:31,670 Let's go ahead and call this function from feuded load and let's run this on the simulator and let's 69 00:04:31,670 --> 00:04:38,180 see exactly what happens when it is set to Aspect fit and the height is set to be the height of the 70 00:04:38,180 --> 00:04:38,770 view. 71 00:04:39,080 --> 00:04:39,680 Cool. 72 00:04:39,680 --> 00:04:41,020 So there we go. 73 00:04:41,360 --> 00:04:43,740 As you can see the image fits beautifully. 74 00:04:43,850 --> 00:04:47,880 But our image view is actually the full size of the screen. 75 00:04:48,050 --> 00:04:50,540 And you know what I'm going actually proved that really quickly. 76 00:04:50,630 --> 00:04:51,550 Let's do image view. 77 00:04:51,620 --> 00:04:52,640 Layer dot. 78 00:04:52,680 --> 00:05:00,400 Border color and let's just set it to white and then let's do image view layer border with and looks 79 00:05:00,440 --> 00:05:01,710 at that too. 80 00:05:02,210 --> 00:05:07,730 Oh you know what I realized this is C.G. color so we need to do I color dot white and convert it to 81 00:05:07,730 --> 00:05:08,590 a CGI color. 82 00:05:08,770 --> 00:05:09,380 OK. 83 00:05:09,650 --> 00:05:10,700 Build and run. 84 00:05:10,700 --> 00:05:13,350 It'll pull open in the simulator here. 85 00:05:13,580 --> 00:05:19,880 And we're going to see that the image view itself is actually bigger than the image but since it's set 86 00:05:19,880 --> 00:05:25,600 to scale to Aspect fit the image is going to you know show the entire image. 87 00:05:25,610 --> 00:05:29,500 But we want the image views framed to be the same exact size as the image. 88 00:05:29,510 --> 00:05:38,350 So we don't actually scale the height of our image view in comparison to the actual size of the image. 89 00:05:38,360 --> 00:05:42,280 We need to scale the height of the image view to the size of the image. 90 00:05:42,380 --> 00:05:49,790 So to do that we're going to go ahead and create a property called scaled height and in order to do 91 00:05:49,790 --> 00:05:56,160 this we need to figure out what the ratio is of the views with care of the width of the view. 92 00:05:56,390 --> 00:06:01,670 We need to find out the ratio of that to do with the image because obviously the image here is much 93 00:06:01,670 --> 00:06:04,990 bigger than my screen and it's getting scaled down to fit. 94 00:06:05,060 --> 00:06:09,830 So we need to find the ratio between the width of the view and the width of the image. 95 00:06:09,830 --> 00:06:16,670 And to do that we can go ahead and type view frame that with and we can actually divide that by the 96 00:06:16,760 --> 00:06:17,350 image. 97 00:06:17,390 --> 00:06:17,720 Right. 98 00:06:17,750 --> 00:06:24,280 But this image property we have and we can pull out the size of that image and get the width property. 99 00:06:24,290 --> 00:06:31,790 Now we actually have a ratio we know maybe the width of the screen here is 10 but the image with is 100 00:06:31,790 --> 00:06:32,300 20. 101 00:06:32,300 --> 00:06:34,730 That means that it's a 1 to 2 ratio. 102 00:06:34,880 --> 00:06:42,810 And what we can actually do with that ratio is we can multiply that by Image dot size dot height. 103 00:06:43,010 --> 00:06:47,690 And that property will make it so that the image view can be the exact same size as the height because 104 00:06:47,690 --> 00:06:53,210 we took the ratio that it's scaled down and we multiply that by the height of the image. 105 00:06:53,390 --> 00:06:58,740 And that way we know what the actual height of the images from this ratio is pretty cool. 106 00:06:59,030 --> 00:07:04,760 So with that said we can actually take our image view here and we can pass in the scaled height. 107 00:07:04,760 --> 00:07:08,750 And when we build and run this you'll see that we get something much different. 108 00:07:09,140 --> 00:07:11,870 Let's pull it open here and boom. 109 00:07:11,870 --> 00:07:15,250 Look at that the image view is the exact same size as the image. 110 00:07:15,260 --> 00:07:17,290 That's exactly what we want. 111 00:07:17,330 --> 00:07:20,100 So let's get rid of this border color here we don't want that. 112 00:07:20,300 --> 00:07:27,560 But what we do want to do is to actually pull this spinner does start animating out and we want to set 113 00:07:27,560 --> 00:07:33,160 it so that it's in our function here we can just consolidate it into one big function. 114 00:07:33,170 --> 00:07:35,340 Now we have our image view setup. 115 00:07:35,540 --> 00:07:36,610 Ok that's cool. 116 00:07:36,620 --> 00:07:38,030 It's showing on the screen. 117 00:07:38,210 --> 00:07:40,360 The spinner is now animating. 118 00:07:40,520 --> 00:07:46,310 But in order to save memory I'm going to set a property on the spinner here so that when it is hidden 119 00:07:46,310 --> 00:07:50,240 it stops animating and that will also reduce the amount of code we need to right. 120 00:07:50,240 --> 00:07:56,420 So type spinner hides when stopped and set that to be equal to true. 121 00:07:56,570 --> 00:08:00,500 So later when we call stop animating it's going to automatically hide. 122 00:08:00,500 --> 00:08:06,920 And I don't need to call this line of code to say is hidden equals true it'll just automatically hide 123 00:08:07,010 --> 00:08:07,790 which is pretty cool. 124 00:08:07,790 --> 00:08:13,880 So build and run it one more time let's verify that everything looks nice and pretty OK the image is 125 00:08:13,880 --> 00:08:14,500 in place. 126 00:08:14,490 --> 00:08:17,930 It's saying finding faces in the spinner is spinning. 127 00:08:17,930 --> 00:08:18,320 Awesome. 128 00:08:18,320 --> 00:08:19,170 This looks so good. 129 00:08:19,180 --> 00:08:24,670 So we are now ready to move on to actually creating our face detection request. 130 00:08:24,680 --> 00:08:30,320 Now that we have a face in the image view and we have set the height of the image view to be exactly 131 00:08:30,320 --> 00:08:35,750 the same size as the image this is going to help us when we place our rectangle to go around the face 132 00:08:35,990 --> 00:08:38,840 so that it knows what to reference for its size. 133 00:08:38,840 --> 00:08:40,040 Very helpful stuff. 134 00:08:40,040 --> 00:08:42,160 Let's head to the next video and let's do that now.