1 00:00:05,860 --> 00:00:07,760 Love them back to the party everyone. 2 00:00:07,770 --> 00:00:10,290 Mark Price here at Dove slopes dot com. 3 00:00:10,290 --> 00:00:18,660 And in this exciting video we are going to get our ramp picker started at least and basically think 4 00:00:18,660 --> 00:00:20,000 about this feature. 5 00:00:20,010 --> 00:00:23,370 I want you to think about this feature if you know what the specs look like. 6 00:00:23,370 --> 00:00:28,160 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,160 --> 00:00:30,720 And how do we do that and then we got to spin them around. 8 00:00:30,720 --> 00:00:34,410 Does it even involve a market you know think about the feature what we need to do. 9 00:00:35,670 --> 00:00:36,790 Did you do that. 10 00:00:36,790 --> 00:00:37,670 What do you think. 11 00:00:38,020 --> 00:00:42,190 Well that's what I do before I ever code anything is I think about what I'm going to need to do. 12 00:00:42,190 --> 00:00:48,640 And I realize that we don't need scene or we don't need a market for the ability to pick a ramp and 13 00:00:48,640 --> 00:00:52,330 what we want to do is show three ramps somehow detect a tap on a ramp. 14 00:00:52,330 --> 00:00:53,560 No one was tapped. 15 00:00:53,770 --> 00:01:00,010 And then what we want to do is make that the selected ramp so we can then place it in the scene in our 16 00:01:00,250 --> 00:01:01,540 market. 17 00:01:01,540 --> 00:01:05,800 So first things first as we know we are going to need a view controller to show those things. 18 00:01:05,860 --> 00:01:11,790 So my controller folder here I mean to create a new file and we're going to create Kokoo touch class 19 00:01:12,760 --> 00:01:20,320 and we're going to call this one ramp picker b c don't need a zip file and this is just fine. 20 00:01:23,540 --> 00:01:28,790 So here's our view controller we know we're going to need it because we need a 3D models so I might 21 00:01:28,790 --> 00:01:31,250 as well import that now. 22 00:01:31,240 --> 00:01:33,130 And of course in order to work with scene kit. 23 00:01:33,170 --> 00:01:39,130 OK we have to have a way to display the 3-D models on the screen and we're going to do that. 24 00:01:42,110 --> 00:01:54,460 With a scene view of our scene view s c and the you now also what we want to do is we want to show a 25 00:01:54,460 --> 00:01:55,280 pop up. 26 00:01:55,500 --> 00:01:59,680 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 27 00:01:59,680 --> 00:02:01,240 over presentation controller. 28 00:02:01,330 --> 00:02:06,210 And because our screen is so simple and it's all done in the world of scene I don't think we're going 29 00:02:06,210 --> 00:02:07,320 to need it in a storyboard. 30 00:02:07,330 --> 00:02:10,890 So here's a perfect case of where it doesn't make sense to out of you in the storyboard. 31 00:02:10,880 --> 00:02:15,610 Here we're just going to load it programmatically and do it all in the coats. 32 00:02:15,640 --> 00:02:19,840 So we're just going to leave out of our hair no outlet needed. 33 00:02:19,840 --> 00:02:20,130 OK. 34 00:02:20,140 --> 00:02:24,220 So we've got a scene view and then we'll probably need to do. 35 00:02:24,640 --> 00:02:30,570 If you've ever worked a popovers before is specify a size like what size do we want the the width and 36 00:02:30,560 --> 00:02:32,430 height of this pop over to be. 37 00:02:32,650 --> 00:02:39,190 And so what I want to do is create a custom initialiser here so when the ramp placer shows the pop over 38 00:02:39,340 --> 00:02:41,290 OK we can pass in a size. 39 00:02:41,290 --> 00:02:49,120 So when you say knit by size critter own initialiser here and we'll do superdog in it and we're going 40 00:02:49,120 --> 00:02:55,400 to just go ahead and do the nib byname initialiser will override that. 41 00:02:55,570 --> 00:03:05,620 And then what we're going to do is create a variable here of our size i.e. size of type C.G. size and 42 00:03:05,680 --> 00:03:10,330 we are going to initialize it here so self does size equal size. 43 00:03:10,330 --> 00:03:15,490 Now if you've ever created your own initialiser you know it's going to yell at us. 44 00:03:15,730 --> 00:03:19,420 You know you didn't implement initialized with code or blah blah blah acyclic the little red icon and 45 00:03:19,420 --> 00:03:22,770 click fix and there it is. 46 00:03:22,870 --> 00:03:25,900 So that error is gone and we can leave this as is. 47 00:03:25,900 --> 00:03:27,870 This will never be called so that's just fine. 48 00:03:27,880 --> 00:03:33,670 So here is our size and where we need to do of course is make the size of the view the size that is 49 00:03:33,670 --> 00:03:34,720 passed in from near the screen. 50 00:03:34,720 --> 00:03:37,300 How big do we want it to pop on the screen. 51 00:03:37,300 --> 00:03:41,050 So in the view did load here let's make some adjustments. 52 00:03:41,050 --> 00:03:49,600 We are going to say frame so the base view equals C.G. wrecked and let's do origin and we're going to 53 00:03:49,600 --> 00:03:52,160 say C-g point zero. 54 00:03:52,480 --> 00:03:54,660 And then for the size we're going to say it's size. 55 00:03:54,720 --> 00:04:00,820 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,820 --> 00:04:04,990 doesn't really matter all that much because the previous controller is going to show where it goes. 57 00:04:04,990 --> 00:04:09,250 On 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,250 --> 00:04:10,250 of the screen. 59 00:04:10,330 --> 00:04:14,680 And so some things some things are different when you're working with it so. 60 00:04:15,000 --> 00:04:16,320 OK very cool. 61 00:04:16,450 --> 00:04:20,720 And the other thing that we're going to want to do is create a new scene view. 62 00:04:20,830 --> 00:04:26,440 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,440 --> 00:04:31,140 as of you and we're going to do the one with a frame. 64 00:04:31,270 --> 00:04:33,060 And what else we want. 65 00:04:33,170 --> 00:04:41,560 Yeah frame this the frame or it's C-g correct and we'll do this one here and so we'll say 0 0 and the 66 00:04:41,560 --> 00:04:44,350 width is going to be size with the same. 67 00:04:44,470 --> 00:04:46,210 The same with as the view OK. 68 00:04:46,510 --> 00:04:49,380 And then the high is going to be size the height. 69 00:04:49,390 --> 00:04:52,930 Now if you're wondering Mark why didn't we just make this seem to you this like you know us screen that 70 00:04:52,930 --> 00:04:56,480 main screen that bounds that with you know remained a bounce. 71 00:04:56,620 --> 00:05:00,520 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,520 --> 00:05:03,180 it's consistent with the size. 73 00:05:03,220 --> 00:05:03,720 OK. 74 00:05:03,790 --> 00:05:05,120 Very very important. 75 00:05:05,350 --> 00:05:11,410 So there's our view we've created it initialized that we pass in a frame creating a CGI recked which 76 00:05:11,410 --> 00:05:14,540 is great and now we need to actually added on to the view so view. 77 00:05:14,590 --> 00:05:20,200 Insert subcu and we're going to say the scene view and we're going to insert it and dig zero. 78 00:05:20,230 --> 00:05:24,910 Now we could just add a view but I always like to insert them when I can because I can guarantee it's 79 00:05:24,910 --> 00:05:28,500 going to be at a specific index which is fine. 80 00:05:28,930 --> 00:05:30,300 So very cool. 81 00:05:31,030 --> 00:05:33,940 And I'm really liking that. 82 00:05:34,030 --> 00:05:38,250 So the next thing I want to do is get rid of some of that boilerplate stuff here. 83 00:05:38,320 --> 00:05:43,100 The next thing I want to do is actually just get this pop over showing up on the screen. 84 00:05:43,180 --> 00:05:43,760 OK. 85 00:05:43,810 --> 00:05:50,520 Just make a show and we can probably also do a little more work here as well too. 86 00:05:50,530 --> 00:05:58,660 Before we move over there we've got the subcu here preferred content size the preferred size for the 87 00:05:58,660 --> 00:05:59,610 view controller view. 88 00:05:59,740 --> 00:06:03,160 We need to set that and we want that to be sized as well. 89 00:06:03,160 --> 00:06:06,770 That's very important don't forget this or you'll you'll see problems. 90 00:06:07,580 --> 00:06:08,530 That's looking good. 91 00:06:09,340 --> 00:06:11,540 What else do we want to hear anything. 92 00:06:11,590 --> 00:06:14,620 I don't think so I think I think. 93 00:06:15,110 --> 00:06:19,000 I think it will run just as is so I'm going to leave that here. 94 00:06:19,310 --> 00:06:26,630 And then what I want to do is go over to our ramp placer and then I want to load this as a pop over 95 00:06:27,200 --> 00:06:33,410 so it shows only on a portion of the screen so let's click the ramp placer and what we want to do is 96 00:06:33,500 --> 00:06:39,870 use it as a pop over and so there's a delegate that we're going to need to implement up here. 97 00:06:39,890 --> 00:06:47,690 You might pop over presentation control or delegate possibly the longest named protocol that exists 98 00:06:47,930 --> 00:06:49,560 and you can find a longer one let me know. 99 00:06:49,580 --> 00:06:52,090 But this one is quite long. 100 00:06:52,400 --> 00:06:59,950 And what we want to do is we're going to use that to specify the style when it's presented. 101 00:06:59,960 --> 00:07:01,300 Adaptive style I think. 102 00:07:01,400 --> 00:07:04,490 So pop over presentation control or delegate. 103 00:07:04,520 --> 00:07:08,590 And when do we want to show it what we want to show it when the button is pressed. 104 00:07:08,810 --> 00:07:13,190 Well since we haven't added the button yet we have to stop because we're blocked and we're going to 105 00:07:13,190 --> 00:07:19,550 go into our storyboard and we're going to add the button now and a ramp place or type in the letters 106 00:07:19,640 --> 00:07:23,150 B for button and put it here at the bottom right. 107 00:07:23,540 --> 00:07:27,370 And let's look at our image to see how wide and big it is. 108 00:07:27,740 --> 00:07:29,710 Tall ramp icon. 109 00:07:29,810 --> 00:07:35,310 What I'll do is all right click this show in Finder and just right click and go to get info. 110 00:07:35,810 --> 00:07:40,660 And this is 1 or 7 by 71. 111 00:07:40,750 --> 00:07:43,480 That's all I wanted to know 1 0 7 by 71. 112 00:07:43,600 --> 00:07:45,790 So what make it the same size. 113 00:07:45,990 --> 00:07:53,540 107 or you are one of seven I 71 OK. 114 00:07:53,650 --> 00:07:56,220 I move it over like so. 115 00:07:57,010 --> 00:08:07,950 And let's get rid of the text and let's set an image on here to the ramp icon beautiful. 116 00:08:08,260 --> 00:08:12,460 And it just got all wonky on us here again. 117 00:08:12,460 --> 00:08:13,810 That's not very nice. 118 00:08:14,690 --> 00:08:17,210 One of seven by 71. 119 00:08:17,220 --> 00:08:19,860 Not sure why I did that. 120 00:08:20,300 --> 00:08:21,460 So there's a button. 121 00:08:21,460 --> 00:08:22,010 All right. 122 00:08:22,340 --> 00:08:24,930 Let's go ahead and pin it to the right. 123 00:08:25,100 --> 00:08:31,260 Let's say 10 from the right and 10 from the bottom and let's give it a fixed width and height like so 124 00:08:32,200 --> 00:08:33,370 there there's our button. 125 00:08:33,370 --> 00:08:34,900 Let's create an IB action for it. 126 00:08:34,960 --> 00:08:41,590 So here's our ramp placer which is perfect and we'll just scroll down to the bottom here and make our 127 00:08:41,590 --> 00:08:49,000 Iby action click the ramp icon control drag over and we're going to change it to action and we're going 128 00:08:49,000 --> 00:08:57,370 to say on ramp and pressed like so and this is where we're going to do the pop over presentation. 129 00:08:57,370 --> 00:09:00,490 So I think we're set up to do that now. 130 00:09:01,050 --> 00:09:06,070 So let's go back to our ramp placer and go all the way down to our on ramp. 131 00:09:06,100 --> 00:09:07,010 But impressed. 132 00:09:07,030 --> 00:09:11,270 And what do we need to do to load the controller. 133 00:09:11,740 --> 00:09:13,420 First we got to create the view controller right. 134 00:09:13,420 --> 00:09:18,560 So let ramp picker AVC equals ramp picker. 135 00:09:18,630 --> 00:09:24,520 We see like so and we're going to use our custom initialiser that we created the one with the size where 136 00:09:24,550 --> 00:09:33,100 CCG size likes all go C.G. size. 137 00:09:33,100 --> 00:09:40,060 And because I've tested this already I want it to be about 250 pixels wide and with a height of 500 138 00:09:41,470 --> 00:09:44,920 that's a really good size for this pop up and looks really good. 139 00:09:44,980 --> 00:09:49,370 So do I have all my current closing curly braces or parentheses. 140 00:09:49,390 --> 00:09:50,100 Yes I do. 141 00:09:50,110 --> 00:09:50,380 Great. 142 00:09:50,380 --> 00:09:51,810 There's our rent picker. 143 00:09:52,220 --> 00:10:00,190 And what do we want to do we want to set the model presentation style so ramp picker VC up modal presentation 144 00:10:00,280 --> 00:10:05,550 style is going to be equal to dot pop over perfect. 145 00:10:05,800 --> 00:10:19,580 And we need to set the delegate so ramp picker VC dot pop over President takes pop over presentation 146 00:10:22,910 --> 00:10:31,010 controller delegate there is equal or self is a word just so long and so you like to read them. 147 00:10:31,410 --> 00:10:36,090 All right but it's good it's it's way better to have things extra wordy than to have things that don't 148 00:10:36,090 --> 00:10:42,120 make any sense because then it causes confusion and bugs so kudos to Apple for being true to good coding 149 00:10:42,120 --> 00:10:44,860 practices here so that looks good. 150 00:10:45,050 --> 00:10:47,790 Let's go ahead and presenta at this point so present 151 00:10:50,440 --> 00:10:52,130 your controller to present. 152 00:10:52,130 --> 00:10:58,400 And we're going to say ramp picker we see animated true and completion Neal we don't care when it's 153 00:10:58,400 --> 00:11:01,920 done and then a few more things we want to do is make it work. 154 00:11:01,950 --> 00:11:08,920 Whereas it popping up from we want it from the button so ramp picker the C pop over presentation control 155 00:11:09,080 --> 00:11:14,840 source view is going to be equal to the ramp button. 156 00:11:14,840 --> 00:11:17,100 So let's just say the sender here actually. 157 00:11:17,150 --> 00:11:24,770 So let's say sender and you know what we do and it doesn't even need to be send or we know it's going 158 00:11:24,770 --> 00:11:25,310 to be a button. 159 00:11:25,310 --> 00:11:35,780 So let's just change this to you I'd And like so let's just change this to sender as we go. 160 00:11:36,140 --> 00:11:37,660 And we don't have to make an outlet for it. 161 00:11:37,660 --> 00:11:44,250 So at least not yet ramp picker VC and then we're going to say pop over presentation controller about 162 00:11:44,290 --> 00:11:51,780 source wrecked is going to be equal to Senator founts. 163 00:11:52,450 --> 00:11:54,850 Works for me. 164 00:11:54,850 --> 00:11:55,360 That looks good. 165 00:11:55,360 --> 00:11:56,200 Who's going to present it. 166 00:11:56,200 --> 00:11:57,620 Now there's one more thing that we have to do. 167 00:11:57,640 --> 00:12:02,110 And this is incredibly incredibly incredibly important. 168 00:12:02,110 --> 00:12:03,040 Do not forget this. 169 00:12:03,040 --> 00:12:03,590 OK. 170 00:12:03,820 --> 00:12:11,730 And this is the function OK adaptive presentation style for view controller for a view control or a 171 00:12:11,740 --> 00:12:15,290 yes that is correct. 172 00:12:15,370 --> 00:12:18,660 And what we're going to do is we're going to return dot none. 173 00:12:18,670 --> 00:12:23,150 If you don't turn none it will go full screen and you'll be pulling your hair out. 174 00:12:23,170 --> 00:12:24,590 Why is it going fullscreen. 175 00:12:24,610 --> 00:12:31,540 Well it's because you need to set the adaptive presentation style to none so it doesn't like expand 176 00:12:31,880 --> 00:12:33,190 and doesn't try to be too smart. 177 00:12:33,190 --> 00:12:35,700 We want to do exactly what we want it to do. 178 00:12:36,140 --> 00:12:36,740 OK. 179 00:12:37,090 --> 00:12:40,280 So let's go ahead and run this and see if it works. 180 00:12:40,390 --> 00:12:45,730 We can do this on the simulator even though the market won't work for us. 181 00:12:45,820 --> 00:12:48,160 It's just so be able to present this without any problems. 182 00:12:48,160 --> 00:12:50,400 I should hope so let's run it and see. 183 00:12:50,650 --> 00:12:52,320 So our app is running. 184 00:12:52,450 --> 00:12:53,690 Actually that's interesting. 185 00:12:53,710 --> 00:12:54,840 It did place the model here. 186 00:12:54,850 --> 00:12:58,580 There's no there's no augmented reality of course it's going to place the model that makes sense. 187 00:12:58,610 --> 00:13:03,220 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 188 00:13:03,610 --> 00:13:07,440 and see if our pop over up appears and sure enough it did. 189 00:13:07,510 --> 00:13:08,870 So it's cool. 190 00:13:08,940 --> 00:13:09,670 No crashes. 191 00:13:09,670 --> 00:13:10,690 That's the most important thing. 192 00:13:10,690 --> 00:13:12,040 So what do we just do here. 193 00:13:12,040 --> 00:13:13,650 We created the second view controller. 194 00:13:13,650 --> 00:13:17,800 And of course this one is white as well is because it's a it's a scene kit. 195 00:13:17,830 --> 00:13:22,380 So it's seen view and by default they're white and there's no models on it and so it's just empty. 196 00:13:22,390 --> 00:13:23,860 But it's definitely working. 197 00:13:24,040 --> 00:13:26,340 And it's definitely popping over where the button is. 198 00:13:26,350 --> 00:13:28,010 So this is really great news for us. 199 00:13:28,060 --> 00:13:33,430 It's looking it's looking good we've got it up there and then in the subsequent videos we actually get 200 00:13:33,430 --> 00:13:36,330 the models in there and spinning around and looking super cool. 201 00:13:36,490 --> 00:13:40,480 And so let's call this video I've done what you've done and here you've created a second view controller 202 00:13:40,480 --> 00:13:43,640 and made it a pop over and I think it looks great. 203 00:13:43,690 --> 00:13:44,950 So that's it. 204 00:13:44,950 --> 00:13:46,790 Mark Price Adair's soap's dotcom. 205 00:13:46,810 --> 00:13:47,740 Let's move on and for.