0
1
00:00:00,840 --> 00:00:01,140
All right.
1

2
00:00:01,140 --> 00:00:06,330
So the first thing that we need to do is we're going to set up the interface. So UIPickerController
2

3
00:00:06,330 --> 00:00:09,350
requires a navigation controller.
3

4
00:00:09,420 --> 00:00:15,330
So we're going to select it and then embed it in a Navigation Controller. Let's just shift it over to the
4

5
00:00:15,330 --> 00:00:16,100
left there.
5

6
00:00:16,290 --> 00:00:16,560
All right.
6

7
00:00:16,560 --> 00:00:22,230
So the next thing that we need to do is to add a bar button item up here.
7

8
00:00:22,230 --> 00:00:24,410
So let's search for bar button.
8

9
00:00:24,480 --> 00:00:30,040
There we go. Found it. And we are all going to change it to a Camera style.
9

10
00:00:30,300 --> 00:00:32,800
So where's that camera? There we go.
10

11
00:00:33,000 --> 00:00:39,810
And finally, we're going to need a ImageView in order to display the selected image.
11

12
00:00:39,810 --> 00:00:46,140
So we're just going to put that in there. And I'm going to add constraints to all four corners and I'm
12

13
00:00:46,140 --> 00:00:51,870
going to hit enter. There we go. And it's going to give me a warning, so I can get rid of that by just saying,
13

14
00:00:52,200 --> 00:00:56,980
"Use Safe Area Layout Guides," and you can see now the warning is gone. Cool.
14

15
00:00:57,030 --> 00:01:03,030
So we've done our design. It's pretty minimal. But now we just need to link it up into the code.
15

16
00:01:03,120 --> 00:01:10,780
So first thing I'm going to create is an IBAction for my camera and I'm going to call it cameraTapped.
16

17
00:01:11,000 --> 00:01:13,840
Now, you can call it whatever you want as long as it makes sense to you.
17

18
00:01:14,950 --> 00:01:15,770
You can call it whatever.
18

19
00:01:15,790 --> 00:01:17,900
And the other thing I'm going to do is link up
19

20
00:01:17,970 --> 00:01:21,560
this UIImageView. I'm just going to call it ImageView.
20

21
00:01:22,120 --> 00:01:22,980
There we go.
21

22
00:01:22,990 --> 00:01:23,630
All right, cool.
22

23
00:01:23,650 --> 00:01:28,420
So I'm all done with my design and my linking up with code.
23

24
00:01:28,420 --> 00:01:33,890
Next thing I need to do is to code up the actual image picker so that it brings up the camera and allows
24

25
00:01:33,890 --> 00:01:35,430
the usage to take a photo.
25

26
00:01:35,890 --> 00:01:42,160
So the first thing that we need to do to allow our app to use the camera is, of course, giving a privacy
26

27
00:01:42,160 --> 00:01:43,040
description.
27

28
00:01:43,240 --> 00:01:51,340
So if we head into the info.plist, then we can add a new Privacy-Camera Usage Description
28

29
00:01:51,910 --> 00:01:56,290
and I'm just going to say something like, "We need your camera!"
29

30
00:01:56,290 --> 00:01:57,490
All right, so that's done.
30

31
00:01:57,640 --> 00:02:03,520
And now we're going to head into ViewController and code up our UIImagePickerController.
31

32
00:02:03,610 --> 00:02:08,990
First thing I'm going to do, I'm going to make this file a little bit clearer for you to see.
32

33
00:02:09,400 --> 00:02:22,320
And then I'm going to add our UIImagePickerControllerDelegate as well as the 
33

34
00:02:23,220 --> 00:02:24,570
UINavigationControllerDelegate.
34

35
00:02:24,720 --> 00:02:34,930
All right. Then I'm going to create a new imagePicker and it's going to be an object of type 
35

36
00:02:35,290 --> 00:02:36,310
UIImagePickerController.
36

37
00:02:37,470 --> 00:02:45,830
All right. Then inside my viewDidLoad, I'm going to set my imagePIcker's delegate to self, and then I'm
37

38
00:02:45,830 --> 00:02:53,720
going to implement the imagePicker delegate method which is called didFinishPickingMediaWithInfo.
38

39
00:02:53,760 --> 00:02:54,590
All right.
39

40
00:02:54,830 --> 00:03:00,330
So once we've finished picking media with info, then we want to pick out that image.
40

41
00:03:00,350 --> 00:03:05,700
So, remember, we can tap into the image by using the info dictionary.
41

42
00:03:05,780 --> 00:03:08,990
So let userPickedImage
42

43
00:03:09,120 --> 00:03:10,960
= info.
43

44
00:03:10,960 --> 00:03:13,320
And we're tapping into the key called
44

45
00:03:13,770 --> 00:03:18,920
uiImagePickerControllerOriginalImage.
45

46
00:03:19,100 --> 00:03:20,940
That's quite a mouthful.
46

47
00:03:20,990 --> 00:03:21,940
All right.
47

48
00:03:22,430 --> 00:03:31,850
And we're going to set our imageView's image property to that userPickedImage, and we're going to
48

49
00:03:31,910 --> 00:03:34,820
cast it as a UIImage.
49

50
00:03:34,820 --> 00:03:35,140
All right.
50

51
00:03:35,150 --> 00:03:36,350
So two more things.
51

52
00:03:36,380 --> 00:03:43,890
One is to set some properties on our imagePicker, so imagePicker's allowsEditing, we'll set it as false
52

53
00:03:43,900 --> 00:03:50,320
for now, and then the other thing that we want to set is the sourceType which is going to be .camera.
53

54
00:03:51,620 --> 00:03:55,850
And we need to present our imagePicker onto the screen
54

55
00:03:55,850 --> 00:04:05,360
when the camera is tapped, so present, ViewController, animated, ViewController to present is called 
55

56
00:04:05,360 --> 00:04:07,730
imagePicker, animated:
56

57
00:04:07,730 --> 00:04:10,360
true, completion: nil.
57

58
00:04:10,380 --> 00:04:11,080
All right.
58

59
00:04:11,100 --> 00:04:11,450
Done.
59

60
00:04:11,480 --> 00:04:17,030
And we need to remember that once the user is finished picking the image, we need to dismiss this 
60

61
00:04:17,030 --> 00:04:21,700
imagePicker. So imagePicker.dismiss.
61

62
00:04:23,380 --> 00:04:26,700
Animated: true, completion: nil.
62

63
00:04:27,010 --> 00:04:27,430
All right.
63

64
00:04:27,430 --> 00:04:30,640
And that's all we need in order to make our UIImagePicker work.
64

65
00:04:30,640 --> 00:04:33,040
So let's go ahead and give it a spin.
65

66
00:04:33,040 --> 00:04:38,320
All right, so here's our app, nice and clean interface, and we're going to tap the camera button to bring up
66

67
00:04:38,320 --> 00:04:44,810
the UIImagePickerController. I'm going to take a photo, and then I'm going to click Use Photo.
67

68
00:04:45,010 --> 00:04:50,950
And as you can see, it's set as the background of my image view, and we've successfully implemented our
68

69
00:04:50,950 --> 00:04:52,920
UIImagePickerController.
69

70
00:04:53,000 --> 00:04:53,320
All right.
70

71
00:04:53,320 --> 00:04:59,260
So I just want to show you one more thing and that's if you do actually want the user to be able to crop
71

72
00:04:59,260 --> 00:05:02,020
the image that they've taken, then you can change
72

73
00:05:02,020 --> 00:05:05,400
this allowsEditing property to true,
73

74
00:05:05,740 --> 00:05:08,900
and also you'll need to change this image,
74

75
00:05:09,070 --> 00:05:17,140
instead of being the UIImageViewControllerOriginalImage, you want the UIImagePickerControllerEditedImage,
75

76
00:05:18,010 --> 00:05:20,530
so that way you can bring up the cropped image.
76

77
00:05:20,620 --> 00:05:26,740
So that's a user experience choice for you, whether if you want your app to allow cropping or not,
77

78
00:05:26,980 --> 00:05:29,520
but it's pretty simple to switch around anyways.
78

79
00:05:29,620 --> 00:05:35,130
And I think in the case of flower recognition because the model was trained on a lot of head-on shots
79

80
00:05:35,140 --> 00:05:39,050
of flowers, it might make sense to crop it into square.
80

81
00:05:39,100 --> 00:05:41,250
But again, it's a choice that you can make,
81

82
00:05:41,260 --> 00:05:45,800
so it works both ways and just decide on what you want for your app.
82

83
00:05:45,850 --> 00:05:51,160
So I'll see you on the next lesson where we use our Flower Classifier to detect the image that's being
83

84
00:05:51,160 --> 00:05:53,060
picked in the UIImagePicker.
84

85
00:05:53,200 --> 00:05:54,050
So I'll see you there.