1
00:00:06,150 --> 00:00:11,310
Hello hello this is Caleb with Dev slopes dot com and in this video we're going to create our X code

2
00:00:11,310 --> 00:00:16,040
project and we're going to build out the user interface for our face finder app.

3
00:00:16,050 --> 00:00:23,220
So click on Create new X code project and we're going to go ahead and just make this a single view application.

4
00:00:23,220 --> 00:00:26,610
We're going to go ahead and name this face finder.

5
00:00:26,610 --> 00:00:31,350
I'm going to name mine face finder too since I already built a project called Face finder but you will

6
00:00:31,350 --> 00:00:33,270
be able to name it face finder.

7
00:00:33,270 --> 00:00:35,340
Click next and save it wherever you'd like.

8
00:00:35,340 --> 00:00:41,400
I'm just going to put mine on the desktop for now and I'm going to pull this open in full screen.

9
00:00:41,400 --> 00:00:45,750
It's going to give me some issues here so I'll switch to my personal profile.

10
00:00:45,750 --> 00:00:49,650
And now we can go ahead and build out our controller here.

11
00:00:49,800 --> 00:00:56,190
So I'm going to first click on my view and the View Controller go to the assistant editor and I'm going

12
00:00:56,190 --> 00:00:58,400
to set it to have a black background.

13
00:00:58,410 --> 00:01:00,330
I just think that looks pretty cool.

14
00:01:00,330 --> 00:01:06,450
Next I'm going to go ahead and add a spinner and a label to show the indicator of when it's identifying

15
00:01:06,450 --> 00:01:08,290
a face and so to do that.

16
00:01:08,310 --> 00:01:13,470
I'm going to go ahead and type activity for an activity indicator view.

17
00:01:13,470 --> 00:01:19,020
I'm going to change the style of this indicator appear at the top two large white just because that

18
00:01:19,020 --> 00:01:25,590
will look a little better on my screen and I'm going to go ahead and pin this 20 from the bottom and

19
00:01:25,590 --> 00:01:30,510
then I'm going to go ahead and make sure that it is horizontally aligned in the container and that'll

20
00:01:30,540 --> 00:01:32,410
stay right in place.

21
00:01:32,430 --> 00:01:38,290
Next we're going to go ahead and drop in a label like so and I'm going to make.

22
00:01:38,430 --> 00:01:43,740
Well I'm going to put it right here on top of our spinner and I'm going to make the text white so we

23
00:01:43,740 --> 00:01:49,560
can actually see it and then I'm going to change the font from the system font to Avenir next my font

24
00:01:49,560 --> 00:01:59,340
of choice and lets make it medium weight size 18 and let's go ahead and just say finding faces and you

25
00:01:59,340 --> 00:02:02,600
know what just for fun let's put in some face emojis.

26
00:02:02,610 --> 00:02:05,560
How about Beard Man.

27
00:02:05,820 --> 00:02:10,250
Well and how about hair lady.

28
00:02:10,860 --> 00:02:14,100
And let's see what else.

29
00:02:14,730 --> 00:02:15,510
Mr. grandpa.

30
00:02:15,510 --> 00:02:16,590
There we go.

31
00:02:16,800 --> 00:02:19,980
So we have a few different people in there it's finding faces.

32
00:02:20,190 --> 00:02:23,010
And of course now we need to pin this and align it.

33
00:02:23,010 --> 00:02:25,010
So go to the pin menu.

34
00:02:25,080 --> 00:02:30,930
Pinot ate from the activity indicator and then we'll pin this also horizontally in the container and

35
00:02:30,920 --> 00:02:34,760
that will keep that all stuck down near the bottom which is nice and cool.

36
00:02:34,830 --> 00:02:40,770
So open up the assistant editor and we're going to create some outlets for these so that we can animate

37
00:02:40,770 --> 00:02:42,770
them and hide them when we need to.

38
00:02:42,990 --> 00:02:47,380
So right click and drag and we're going to go ahead and just call this spinner.

39
00:02:47,910 --> 00:02:54,120
And then below that we're going to drop the labels so let's go ahead and right click on the label and

40
00:02:54,120 --> 00:02:59,810
drag and we'll call this maybe message label.

41
00:03:00,630 --> 00:03:01,640
Cool.

42
00:03:01,740 --> 00:03:02,680
So there's that.

43
00:03:02,700 --> 00:03:05,530
Those are now able to spin.

44
00:03:05,550 --> 00:03:07,920
And just to give it a quick little test.

45
00:03:07,920 --> 00:03:10,130
Let's go ahead and just say spinner.

46
00:03:10,260 --> 00:03:15,300
Dot start animating and let's build and run this to our simulator here.

47
00:03:15,540 --> 00:03:18,950
Let's see what we get and see how it looks.

48
00:03:18,960 --> 00:03:22,480
You might notice that there's no image view we haven't added it yet.

49
00:03:22,920 --> 00:03:27,300
And that's because we have to do something special with our image of you for this particular circumstance

50
00:03:27,690 --> 00:03:28,660
with using vision.

51
00:03:28,660 --> 00:03:31,590
It's just going to make it easier for us to understand and work with vision.

52
00:03:31,800 --> 00:03:37,770
So we're going to add the image view programmatically but upon first glance it looks like everything

53
00:03:37,770 --> 00:03:43,520
is working properly it's properly animating the label shows up nice and clear.

54
00:03:43,590 --> 00:03:47,910
And with that we're actually done building the user interface for this project.

55
00:03:47,910 --> 00:03:52,550
With the exception of adding the UI image view programmatically we're going to do that in the next video

56
00:03:52,560 --> 00:03:56,370
so let's head over there now and let's get started.