1
00:00:05,990 --> 00:00:07,710
Love them back to the party everyone.

2
00:00:07,720 --> 00:00:10,240
Mark Price here at Dove slopes dot com.

3
00:00:10,240 --> 00:00:18,610
And in this exciting video we are going to get our ramp picker started at least and basically think

4
00:00:18,610 --> 00:00:19,950
about this feature.

5
00:00:19,960 --> 00:00:23,320
I want you to think about this feature if you know what the specs look like.

6
00:00:23,320 --> 00:00:28,130
You know it's a pop it's a pop up or a view controller that has three 3-D models.

7
00:00:28,140 --> 00:00:30,670
Now how do we do that and then we got to spin them around.

8
00:00:30,670 --> 00:00:32,190
Does it even involve a market.

9
00:00:32,350 --> 00:00:34,340
You know think about the feature what we need to do.

10
00:00:35,580 --> 00:00:36,510
Did you do that.

11
00:00:36,720 --> 00:00:37,620
What do you think.

12
00:00:37,950 --> 00:00:42,330
Well that's what I do before I ever code anything is I think about what I'm going to need to do and

13
00:00:42,660 --> 00:00:48,660
I realize that we don't need seen or we don't need a market for the ability to pick a ramp and what

14
00:00:48,660 --> 00:00:52,280
we want to do a show three ramps somehow detect a tap on a ramp.

15
00:00:52,290 --> 00:00:53,510
No one was tapped.

16
00:00:53,730 --> 00:00:59,940
And then what we want to do is make that the selected ramp so we can then place it in the scene in our

17
00:01:00,210 --> 00:01:01,500
market.

18
00:01:01,500 --> 00:01:05,740
So first things first as we know we are going to need a view controller to show those things.

19
00:01:05,790 --> 00:01:11,730
So my controller folder here are going to create a new file and we're going to create Kokoo touch class

20
00:01:12,690 --> 00:01:19,890
and we're going to call this one ramp picker Visi don't need a zip file and this is just fine.

21
00:01:23,490 --> 00:01:28,750
So here's our view controller we know we're going to need some kit cause we need a 3D models so I might

22
00:01:28,750 --> 00:01:31,200
as well import that now.

23
00:01:31,210 --> 00:01:37,450
And of course in order to work with scene kit OK we have to have a way to display the 3D models on the

24
00:01:37,450 --> 00:01:39,110
screen and we're going to do that.

25
00:01:42,060 --> 00:01:54,320
With a scene view of our scene view s see and the you now also what we want to do is we want to show

26
00:01:54,320 --> 00:01:55,160
a pop up.

27
00:01:55,440 --> 00:01:59,630
OK we want to show a pop up on the screen that doesn't take up the whole screen and we can use a pop

28
00:01:59,630 --> 00:02:01,190
over presentation controller.

29
00:02:01,280 --> 00:02:05,420
And because our screen is so simple and it's all done in the world of scene.

30
00:02:05,510 --> 00:02:09,410
I don't think we're going to need it in a storyboard so here's a perfect case of where it doesn't make

31
00:02:09,410 --> 00:02:10,820
sense to add a view in the storyboard.

32
00:02:10,820 --> 00:02:15,550
Here we're just going to load it programmatically and do it all in the Cotes.

33
00:02:15,590 --> 00:02:19,790
So we're just going to leave out of our here no outlet needed.

34
00:02:19,790 --> 00:02:20,080
OK.

35
00:02:20,090 --> 00:02:23,990
So we got a scene view and then we'll probably need to do.

36
00:02:24,590 --> 00:02:29,300
If you've ever worked a popovers before is specify a size like what size do we want.

37
00:02:29,300 --> 00:02:32,490
The the width and height of this pop over to be.

38
00:02:32,600 --> 00:02:39,140
And so what I want to do is create a custom initialiser here so when the ramp placer shows the pop over

39
00:02:39,290 --> 00:02:41,130
OK we can pass in a size.

40
00:02:41,240 --> 00:02:49,070
So when you say that by size Kreder own initialiser here and we'll do superdog in it and we're going

41
00:02:49,070 --> 00:02:55,020
to just go ahead and do the Nibbe name initialiser will override that.

42
00:02:55,520 --> 00:03:05,660
And then what we're going to do is create a variable here of our size CIE size of type C.G. size and

43
00:03:05,660 --> 00:03:10,280
we are going to initialize it here so self does size equal size.

44
00:03:10,280 --> 00:03:16,520
Now if you've ever created your own initialiser you know it's going to yell at us you know to implement

45
00:03:16,520 --> 00:03:22,850
initialized with code or blah blah blah acyclic the little red icon and click fix and there it is.

46
00:03:22,850 --> 00:03:25,840
So that error is gone and we can leave this as is.

47
00:03:25,840 --> 00:03:27,810
This will never be called so let's just fine.

48
00:03:27,830 --> 00:03:33,950
So here is our size and when we need to do of course is make the size of the view the size that is passed

49
00:03:33,950 --> 00:03:34,670
in from near the screen.

50
00:03:34,670 --> 00:03:36,920
How big do we want it to pop on the screen.

51
00:03:37,250 --> 00:03:40,840
So in the view did load here let's make some adjustments.

52
00:03:40,980 --> 00:03:49,550
We are going to say frame so the base view equals C-g wrecked and less to origin and we're going to

53
00:03:49,550 --> 00:03:52,120
say C.G. point zero.

54
00:03:52,430 --> 00:03:54,560
And then for the size we're going to say it's size.

55
00:03:54,620 --> 00:04:00,770
OK so we're just going to set the origin point at 0 and then give it the size that it is and the origin

56
00:04:00,770 --> 00:04:05,150
doesn't really matter all that much because the previous controller is going to show where it goes on

57
00:04:05,150 --> 00:04:09,200
the screen because it's a pop over remember it's not taking up the whole screen it's just a portion

58
00:04:09,200 --> 00:04:10,190
of the screen.

59
00:04:10,280 --> 00:04:14,720
And so some things some things are different to when you're working with it so.

60
00:04:15,040 --> 00:04:16,280
OK very cool.

61
00:04:16,400 --> 00:04:20,640
And the other thing that we're going to want to do is create a new scene view.

62
00:04:20,780 --> 00:04:26,370
So let's do that now so we've we've declared it but we haven't actually initialized Sassine view because

63
00:04:26,370 --> 00:04:31,170
as LCN of you and we're going to do the one with a frame.

64
00:04:31,220 --> 00:04:32,980
And what else we want.

65
00:04:33,080 --> 00:04:41,510
Yeah frame this the frame or the Siggi correct and we'll do this one here and so will say 0 0 and the

66
00:04:41,510 --> 00:04:44,200
width is going to be size with the same.

67
00:04:44,250 --> 00:04:46,170
It's the same with as the view OK.

68
00:04:46,460 --> 00:04:49,330
And then the high is going to be sized the height.

69
00:04:49,340 --> 00:04:52,790
Now if you're wondering Mark why didn't we just make this scene to you this like you know us screen

70
00:04:52,790 --> 00:04:56,460
that main screen that bounds that with you know remained a bounce with.

71
00:04:56,570 --> 00:05:00,470
Well it's because again it's a pop over it's not taking up the whole screen so we want to make sure

72
00:05:00,470 --> 00:05:03,130
it's consistent with the size.

73
00:05:03,170 --> 00:05:03,660
OK.

74
00:05:03,740 --> 00:05:05,080
Very very important.

75
00:05:05,300 --> 00:05:11,450
So there's our view we've created it initialized it we pass in a frame creating a CGI rect which is

76
00:05:11,450 --> 00:05:14,470
great and now we need to actually added on to the view so view.

77
00:05:14,540 --> 00:05:16,200
Insert some view.

78
00:05:16,580 --> 00:05:20,150
And we're going to say the scene view and we're going to insert it and 0.

79
00:05:20,150 --> 00:05:24,730
Now we could it just said add subcu but I always like to insert them when I can because I can guarantee

80
00:05:24,740 --> 00:05:28,750
it's going to be at a specific index which is fine.

81
00:05:28,880 --> 00:05:30,260
So very cool.

82
00:05:30,980 --> 00:05:33,910
And I'm really liking that.

83
00:05:33,980 --> 00:05:38,200
So the next thing I want to do is get rid of some of that boilerplate stuff here.

84
00:05:38,270 --> 00:05:43,060
The next thing I want to do is actually just get this pop over showing up on the screen.

85
00:05:43,130 --> 00:05:43,700
OK.

86
00:05:43,760 --> 00:05:50,480
Just make a show and we can probably also do a little more work here as well too.

87
00:05:50,480 --> 00:05:58,610
Before we move over there we've got the subcu here preferred content size the preferred size for the

88
00:05:58,610 --> 00:05:59,560
view controller view.

89
00:05:59,690 --> 00:06:03,100
We need to set that and we want that to be sized as well.

90
00:06:03,110 --> 00:06:07,420
That's very important don't forget this or you'll you'll see problems.

91
00:06:07,550 --> 00:06:08,470
That's looking good.

92
00:06:09,260 --> 00:06:11,460
What else we want to hear anything.

93
00:06:11,540 --> 00:06:14,820
I don't think so I think I think.

94
00:06:15,060 --> 00:06:18,920
I think it'll run just as is so I'm going to leave that here.

95
00:06:19,260 --> 00:06:26,580
And then what I want to do is go over to our rent placer and then I want to load this as a pop over

96
00:06:27,150 --> 00:06:29,520
so it shows only on a portion of the screen.

97
00:06:29,520 --> 00:06:36,390
So let's click the ramp placer and what we want to do is use as a pop over and so there's a delegate

98
00:06:36,870 --> 00:06:39,830
that we're going to need to implement up here.

99
00:06:39,840 --> 00:06:47,640
You might pop over presentation control or delegate possibly the longest named protocol that exists

100
00:06:47,910 --> 00:06:49,020
and you can find a longer one.

101
00:06:49,020 --> 00:06:52,220
Let me know but this one is quite long.

102
00:06:52,350 --> 00:06:59,900
And what we want to do is we're going to use that to specify the style when it's presented.

103
00:06:59,910 --> 00:07:01,260
Adaptive style I think.

104
00:07:01,350 --> 00:07:04,440
So pop over presentation control or delegate.

105
00:07:04,470 --> 00:07:08,560
And when do we want to show it what we want to show it when the button is pressed.

106
00:07:08,760 --> 00:07:13,140
Well since we haven't added the button yet we have to stop because we're blocked and we're going to

107
00:07:13,140 --> 00:07:19,500
go into our storyboard and we're going to add the button and now and a ramp placer type in the letters

108
00:07:19,590 --> 00:07:23,090
B for button and put it here at the bottom right.

109
00:07:23,490 --> 00:07:27,390
And let's look at our image to see how wide and big it is.

110
00:07:27,690 --> 00:07:35,320
Tall ramp icon what I'll do is all right click this show in Finder and right clicking go to get info.

111
00:07:35,760 --> 00:07:43,390
And this is 1 or 7 by 71 That's all I wanted to know 1 or 7 by 71.

112
00:07:43,550 --> 00:07:45,780
So what would make it the same size.

113
00:07:46,000 --> 00:07:50,850
107 there you are why not seven.

114
00:07:50,860 --> 00:07:52,260
I 71.

115
00:07:52,700 --> 00:07:53,670
OK.

116
00:07:53,700 --> 00:08:05,830
Move it over like so and let's get rid of the text and let's set an image on here to the ramp icon.

117
00:08:06,260 --> 00:08:07,690
Beautiful.

118
00:08:08,210 --> 00:08:12,400
And it just got all wonky on us here again.

119
00:08:12,410 --> 00:08:13,750
That's not very nice.

120
00:08:14,530 --> 00:08:17,180
One of seven by 71.

121
00:08:17,190 --> 00:08:19,130
Not sure why I did that.

122
00:08:19,140 --> 00:08:19,810
Cool.

123
00:08:20,240 --> 00:08:21,430
So there's a ramp button.

124
00:08:21,420 --> 00:08:22,280
All right.

125
00:08:22,280 --> 00:08:25,030
Let's go ahead and pin it to the right.

126
00:08:25,040 --> 00:08:31,220
Let's say 10 from the right and 10 from the bottom and let's give it a fixed width and height like so

127
00:08:32,190 --> 00:08:33,320
there is our button.

128
00:08:33,320 --> 00:08:34,910
Let's create an IB action for it.

129
00:08:34,910 --> 00:08:41,390
So here's our ramp place here which is perfect and we'll just scroll down to the bottom here and make

130
00:08:41,390 --> 00:08:48,830
our Iby action click the ramp icon control drag over and we're going to change it to action and we're

131
00:08:48,830 --> 00:08:54,410
going to stay on ramp and press it like so.

132
00:08:54,410 --> 00:08:57,320
And this is where we're going to do the pop over presentation.

133
00:08:57,320 --> 00:09:00,920
So I think we're set up to do that now.

134
00:09:01,000 --> 00:09:06,030
So let's go back to our ramp placer and go all the way down to our on ramp.

135
00:09:06,060 --> 00:09:06,960
But impressed.

136
00:09:06,980 --> 00:09:13,360
And what do we need to do to load the View Controller first we got to create the view controller right.

137
00:09:13,370 --> 00:09:22,160
So let ramp picker AVC equals ramp picker we see like so and we're going to use our custom initialiser

138
00:09:22,160 --> 00:09:33,040
that we created the one with the size or CCG size likes all three C-g size.

139
00:09:33,040 --> 00:09:40,930
And because I've tested this already I want it to be about 250 pixels wide and with a height of 500.

140
00:09:41,410 --> 00:09:44,860
That's a really good size for this pop up and it looks really good.

141
00:09:44,920 --> 00:09:49,310
So do I have all my current closing curly braces or parentheses.

142
00:09:49,330 --> 00:09:50,110
Yes I do.

143
00:09:50,110 --> 00:09:50,320
Great.

144
00:09:50,320 --> 00:09:52,150
There's our rent picker.

145
00:09:52,150 --> 00:10:00,130
And what do we want to do we want to set the model presentation style so ramp picker b c the modal presentation

146
00:10:00,220 --> 00:10:05,500
style is going to be equal to dot pop over perfect.

147
00:10:05,780 --> 00:10:19,530
And we need to set the delegate so ramp picker Visi dot pop over President takes pop over presentation

148
00:10:22,660 --> 00:10:27,270
control or delegate there is equal self.

149
00:10:27,310 --> 00:10:30,790
These words are so long and so you like to read them.

150
00:10:31,360 --> 00:10:31,690
All right.

151
00:10:31,750 --> 00:10:36,400
But it's good it's it's way better to have things extra wordy than to have things that don't make any

152
00:10:36,400 --> 00:10:42,700
sense because then it causes confusion and bugs so kudos to Apple for being true to good coding practices

153
00:10:42,700 --> 00:10:44,830
here so that looks good.

154
00:10:45,000 --> 00:10:47,740
Let's go ahead and present at this point so present

155
00:10:50,380 --> 00:10:52,070
your controller to present.

156
00:10:52,070 --> 00:10:58,370
And we're going to say ramp picker we see animated true and completion Neal we don't care when it's

157
00:10:58,370 --> 00:11:01,910
done and then a few more things we want to do is make it work.

158
00:11:01,920 --> 00:11:08,860
Whereas a popping out from we want it from the button so ramp picker the C pop over presentation control

159
00:11:09,020 --> 00:11:14,320
source view is going to be equal to the the ramp button.

160
00:11:14,810 --> 00:11:17,050
So let's just say the sender here actually.

161
00:11:17,090 --> 00:11:24,770
So let's say sender and you know what we do and it doesn't even need to be send We know it's going to

162
00:11:24,770 --> 00:11:36,350
be a button solaces changes to you button like so OK let's just change this to sender go and we don't

163
00:11:36,350 --> 00:11:37,610
have to make an outlet for it.

164
00:11:37,610 --> 00:11:44,750
So at least not yet ramp picker C and then we're going to say pop over presentation control or source

165
00:11:44,810 --> 00:11:54,710
rect is going to be equal to Senator founts K works for me.

166
00:11:54,800 --> 00:11:55,310
That looks good.

167
00:11:55,310 --> 00:11:56,150
Who's going to present it.

168
00:11:56,150 --> 00:11:57,570
Now there's one more thing that we have to do.

169
00:11:57,590 --> 00:12:02,050
And this is incredibly incredibly incredibly important.

170
00:12:02,060 --> 00:12:02,990
Do not forget this.

171
00:12:02,990 --> 00:12:03,710
OK.

172
00:12:03,770 --> 00:12:11,580
And this is the function OK adaptive presentation style for view controller for a view controller.

173
00:12:11,600 --> 00:12:15,320
Yes that is correct.

174
00:12:15,320 --> 00:12:18,610
And what we're going to do is we're going to return dot none.

175
00:12:18,620 --> 00:12:23,100
If you don't turn none it will go full screen and you'll be pulling your hair out.

176
00:12:23,120 --> 00:12:24,540
Why is it going fullscreen.

177
00:12:24,560 --> 00:12:31,490
Well it's because you need to set the adaptive presentation style to none so it doesn't like expand

178
00:12:31,830 --> 00:12:33,140
and doesn't try to be too smart.

179
00:12:33,140 --> 00:12:35,660
We want it to do exactly what we want it to do.

180
00:12:36,090 --> 00:12:36,680
OK.

181
00:12:37,010 --> 00:12:40,190
So let's go ahead and run this and see if it works.

182
00:12:40,310 --> 00:12:45,630
We can do this on the simulator even though the market won't work for us.

183
00:12:45,740 --> 00:12:48,080
It's just so be able to present this without any problems.

184
00:12:48,080 --> 00:12:50,350
I should hope so let's run it and see.

185
00:12:50,600 --> 00:12:52,270
So our app is running.

186
00:12:52,400 --> 00:12:53,610
Actually that's interesting.

187
00:12:53,660 --> 00:12:54,790
It did place the model here.

188
00:12:54,800 --> 00:12:58,530
There's no there's no augmented reality of course it's going to place the model that makes sense.

189
00:12:58,560 --> 00:13:03,140
We do have a button down here but it's white so it's hard to see but let's try clicking in the area

190
00:13:03,560 --> 00:13:07,450
and see if our pop over up appears and sure enough it did.

191
00:13:07,460 --> 00:13:08,830
So it's cool.

192
00:13:08,900 --> 00:13:09,620
No crashes.

193
00:13:09,620 --> 00:13:10,640
That's the most important thing.

194
00:13:10,640 --> 00:13:11,990
So what do we just do here.

195
00:13:11,990 --> 00:13:13,580
We created a second view controller.

196
00:13:13,580 --> 00:13:17,750
And of course this one is white as well is because it's a it's a scene kit.

197
00:13:17,780 --> 00:13:22,340
So it's seen view and by default they're white and there's no models on it and so it's just empty.

198
00:13:22,340 --> 00:13:23,990
But it's definitely working.

199
00:13:23,990 --> 00:13:26,290
And it's definitely popping over where the button is.

200
00:13:26,300 --> 00:13:28,000
So this is really great news for us.

201
00:13:28,010 --> 00:13:33,380
It's looking it's looking good we've got it up there and then in the subsequent videos we actually get

202
00:13:33,380 --> 00:13:36,320
the models in there and spinning around and looking super cool.

203
00:13:36,440 --> 00:13:40,430
And so let's call this video done what you've done and here's you've created a second view controller

204
00:13:40,430 --> 00:13:43,640
and made it a pop over and I think it looks great.

205
00:13:43,640 --> 00:13:44,900
So that's it.

206
00:13:44,900 --> 00:13:46,700
Mark Price a Dove soaps dot.com.

207
00:13:46,730 --> 00:13:47,680
Let's move on and for.