1 00:00:01,650 --> 00:00:07,980 OK, so we've created our brush size frame, label frame in this video, we want to create the actual 2 00:00:07,980 --> 00:00:10,930 slider that allows us to change the size of it dynamically. 3 00:00:11,310 --> 00:00:12,840 So let's create another comment. 4 00:00:12,840 --> 00:00:15,560 Let's call this brush slider. 5 00:00:16,560 --> 00:00:21,390 And this is a you would think it would be called a slider widget, but it's actually called a scale 6 00:00:21,390 --> 00:00:21,840 widget. 7 00:00:22,020 --> 00:00:23,970 And it doesn't actually come with Quinter. 8 00:00:24,150 --> 00:00:29,070 It comes with something called Teekay, which is sort of an add on for Kintner that allows us to do 9 00:00:29,460 --> 00:00:30,990 cooler widgets, basically. 10 00:00:31,230 --> 00:00:35,580 And so to use this, we have to come up here to the top of our program and import it. 11 00:00:35,580 --> 00:00:43,330 So so up here to the top, let's go import tech center DOT Teekay as t.K. 12 00:00:43,590 --> 00:00:44,640 So now we can use this. 13 00:00:44,640 --> 00:00:48,510 Teekay all these widgets in our program. 14 00:00:48,520 --> 00:00:53,670 So let's come down here back to our brush slider and let's call this my underscore slider. 15 00:00:53,940 --> 00:00:58,620 And this is going to be a K dot scale widget. 16 00:00:59,100 --> 00:00:59,460 Right. 17 00:00:59,640 --> 00:01:05,430 And where do we want to put this where we want to put it inside this brush size frame and now we need 18 00:01:05,430 --> 00:01:09,660 to designate the start and stop position of our slider. 19 00:01:09,660 --> 00:01:11,400 So we wanted to start at one. 20 00:01:11,700 --> 00:01:13,500 We want a brush size of one. 21 00:01:13,500 --> 00:01:15,450 We don't ever want a brush size of zero. 22 00:01:15,780 --> 00:01:16,160 Right. 23 00:01:16,380 --> 00:01:18,180 We always want a brush size of at least one. 24 00:01:18,190 --> 00:01:22,470 So let's go from underscore equals. 25 00:01:22,950 --> 00:01:24,150 Notice the underscore here. 26 00:01:24,150 --> 00:01:24,810 That's important. 27 00:01:26,300 --> 00:01:30,100 And then we want to set that to one and what do we want it to? 28 00:01:30,200 --> 00:01:34,280 Well, we want it to equals one hundred and you can make the same size you want. 29 00:01:34,280 --> 00:01:35,980 But I'm just going to say one hundred is the biggest. 30 00:01:35,990 --> 00:01:37,070 We want our brush to be. 31 00:01:37,340 --> 00:01:37,700 Right. 32 00:01:38,060 --> 00:01:39,890 So now. 33 00:01:40,810 --> 00:01:47,350 We need to actually change our brush size when that happens, so we need to create a command that runs 34 00:01:47,350 --> 00:01:55,280 whenever we click on our slider and let's say let's call this change brush size, I. 35 00:01:56,600 --> 00:01:59,720 Now, we need a couple of more things we need to set Oriente. 36 00:02:00,940 --> 00:02:06,670 What is Orient are sledder can either go up and down or left and right, and I want it to go up and 37 00:02:06,670 --> 00:02:08,050 down, so that's vertical. 38 00:02:08,050 --> 00:02:11,860 So we type in vertical here, all capital, not in quotation marks. 39 00:02:11,860 --> 00:02:12,110 Right. 40 00:02:12,490 --> 00:02:14,890 And then finally, we can set the value of our slider. 41 00:02:14,890 --> 00:02:16,730 What do we want the default value to be? 42 00:02:16,930 --> 00:02:19,840 What what do we want our default brush size to be? 43 00:02:20,080 --> 00:02:21,090 I'm going to call this 10. 44 00:02:21,440 --> 00:02:21,650 Right. 45 00:02:22,420 --> 00:02:25,680 So, OK, now we've created the slider. 46 00:02:25,690 --> 00:02:27,610 And remember, it's always a two step process. 47 00:02:27,610 --> 00:02:29,170 You create it and then you put it on the screen. 48 00:02:29,170 --> 00:02:31,650 So let's go my slider dot pack. 49 00:02:32,860 --> 00:02:40,480 And let's give this iPad why, let's say 10 and a pad X of 10. 50 00:02:43,050 --> 00:02:49,200 And that what all that does is it gives it some padding of 10 above and below and left and right, so 51 00:02:49,200 --> 00:02:51,580 X and Y both have padding of 10. 52 00:02:51,870 --> 00:02:53,050 So we're packing. 53 00:02:53,400 --> 00:02:58,740 So we're inside of our brush size frame, which itself is gridded onto the screen. 54 00:02:58,740 --> 00:03:00,900 But inside of it, we're just going to pack. 55 00:03:01,260 --> 00:03:01,600 Right. 56 00:03:01,920 --> 00:03:03,490 So, OK, that looks good. 57 00:03:03,510 --> 00:03:08,430 So now let's come up here and we need to create this function, change brush size. 58 00:03:08,760 --> 00:03:12,990 So I'm going to copy this and we can head back to the top of our program. 59 00:03:14,810 --> 00:03:21,800 And I'm just going to go define change brush size, and for now I'm just going to type pass will work 60 00:03:21,800 --> 00:03:22,920 on this function in a bit. 61 00:03:23,570 --> 00:03:27,530 So here, actually, let's put this stuff together and comment. 62 00:03:28,250 --> 00:03:29,750 Create our canvas. 63 00:03:32,480 --> 00:03:37,220 And here we could comment, change the size of the brush. 64 00:03:38,400 --> 00:03:43,320 OK, so let's go and save this and let's just run this to see if everything looks correct. 65 00:03:44,040 --> 00:03:49,230 And you remember we created that first frame and made it green so we can see the green is showing up 66 00:03:49,230 --> 00:03:49,500 here. 67 00:03:49,710 --> 00:03:51,660 And then here we have the brush size. 68 00:03:51,990 --> 00:03:53,790 And here's a thing. 69 00:03:53,790 --> 00:03:58,530 And you can see things happen in the background when we do this, because we haven't defined this function 70 00:03:58,530 --> 00:03:58,860 yet. 71 00:03:59,280 --> 00:04:02,310 But, yeah, that's looking pretty good. 72 00:04:02,310 --> 00:04:05,250 So let's get rid of this green color because we don't need that anymore. 73 00:04:05,520 --> 00:04:07,590 I just did that to show you where the frame is. 74 00:04:07,590 --> 00:04:08,760 And now we've seen the frame. 75 00:04:08,770 --> 00:04:12,210 So let's see, where was that at right here. 76 00:04:12,240 --> 00:04:13,200 Let's get rid of that. 77 00:04:15,420 --> 00:04:18,410 All right, so let's go ahead and say this and run this one more time. 78 00:04:23,870 --> 00:04:29,390 We've got this nice little slider, and this is the label frame, right, the box around it with some 79 00:04:29,390 --> 00:04:30,230 text above it. 80 00:04:33,150 --> 00:04:37,890 Now, as we move this, you could see things are happening in the background, we're getting sort of 81 00:04:38,100 --> 00:04:45,920 exceptions and kind of looks like errors, but if we build out this function, that should go away. 82 00:04:45,930 --> 00:04:48,450 So let's look at our code again. 83 00:04:48,780 --> 00:04:50,520 And actually, this video is going a little bit long. 84 00:04:50,520 --> 00:04:51,570 So let's stop right here. 85 00:04:51,580 --> 00:04:53,520 We'll pick this up in the next video. 86 00:04:53,680 --> 00:04:55,440 We'll work on changing this brush size. 87 00:04:55,440 --> 00:05:00,930 And I think we also probably want to give this a little label so it shows exactly how how big the brush 88 00:05:00,930 --> 00:05:02,070 is at any given time. 89 00:05:02,220 --> 00:05:03,660 And so we'll do that in the next video.