1
00:00:01,630 --> 00:00:05,980
OK, in this video, we're going to start to add a volume slider so that we can change the volume up

2
00:00:05,980 --> 00:00:07,050
and down for a song.

3
00:00:07,060 --> 00:00:12,010
So I'm looking at our app here and I think I want to put the volume slider right here on the right hand

4
00:00:12,010 --> 00:00:12,420
side.

5
00:00:12,430 --> 00:00:19,150
So we need to add all of this stuff into a frame so that we can kind of shift it all over and then sort

6
00:00:19,150 --> 00:00:21,470
of at our volume slider next to that.

7
00:00:21,490 --> 00:00:24,130
So that's how we're going to start to do in this video that's going to take a couple of videos to get

8
00:00:24,130 --> 00:00:24,820
all this worked out.

9
00:00:24,850 --> 00:00:27,670
Very simple, but it can take a couple of videos to get through it, so.

10
00:00:27,940 --> 00:00:32,980
All right, let's close this and let's head back over to our code and let's come down here underneath

11
00:00:32,980 --> 00:00:36,340
our functions where we've got all of our sort of things defined.

12
00:00:36,730 --> 00:00:40,920
And here is the playlist box and we've just got it in route.

13
00:00:40,930 --> 00:00:45,520
Let's create another frame, so create main frame.

14
00:00:46,510 --> 00:00:50,770
And so let's just call this main underscore frame and that's going to be a frame.

15
00:00:50,770 --> 00:00:57,910
And we want to put it in root and then we can main underscore frame dot pack this to the screen and

16
00:00:57,910 --> 00:01:02,350
let's give this a pad Y of 20 to push it down a little bit.

17
00:01:02,360 --> 00:01:06,130
Now we can get rid of this pad Y of 20 because.

18
00:01:07,210 --> 00:01:10,610
This is going to be inside of that frame, which itself has already pushed down.

19
00:01:10,810 --> 00:01:14,560
And again, we're going to have to and we're going have to change this from pacta grid anyway.

20
00:01:15,010 --> 00:01:17,020
So, OK, we've got this mainframe now.

21
00:01:17,020 --> 00:01:21,430
Let's start to put the things of our app that we already have into that frame.

22
00:01:21,440 --> 00:01:24,910
So, for instance, this listbox right away, we want to put it in there.

23
00:01:25,540 --> 00:01:32,350
And then instead of PIAC, let's give this a grid and we want to put this on row equals zero column

24
00:01:32,830 --> 00:01:34,020
equals zero.

25
00:01:34,030 --> 00:01:36,010
So the write up at the top of the frame.

26
00:01:36,370 --> 00:01:37,990
So then we can look through here.

27
00:01:37,990 --> 00:01:39,130
We've got our buttons.

28
00:01:39,160 --> 00:01:41,890
The buttons are all in the control frame.

29
00:01:42,080 --> 00:01:47,860
So let's put the control frame itself in our main frame.

30
00:01:48,760 --> 00:01:50,620
All right, so that will work now.

31
00:01:52,410 --> 00:01:54,120
These can all stay the same.

32
00:01:55,850 --> 00:02:01,250
But this control frame, we need to we need to grid it as well, so let's grid this and let's give this

33
00:02:01,250 --> 00:02:08,270
a row equals one column equals zero, and we can keep the pad Y on there as well.

34
00:02:08,280 --> 00:02:12,460
So Wirawan will because our play list is in row zero.

35
00:02:12,470 --> 00:02:15,290
That's the first row and we want those controls to be under.

36
00:02:15,480 --> 00:02:17,810
So that's one row below, which is row one.

37
00:02:17,990 --> 00:02:20,210
And we want to keep it in the same column of zero.

38
00:02:20,600 --> 00:02:21,700
So we keep that in zero.

39
00:02:21,860 --> 00:02:28,400
So, OK, let's just go ahead and save this and run it just to make sure that that ended up looking

40
00:02:28,400 --> 00:02:28,870
OK.

41
00:02:30,680 --> 00:02:34,820
And our app looks basically the same as it did before, but now we've added these two things into a

42
00:02:34,820 --> 00:02:41,000
frame, so now we need to just push this part over a little and then add a little slider over there.

43
00:02:41,000 --> 00:02:44,060
And I want to put the slider in a label frame.

44
00:02:44,060 --> 00:02:49,820
So it's a frame, but it has a sort of like a bar all the way around it, a border at the top.

45
00:02:49,820 --> 00:02:54,650
There's a little label so we can put volume on the label so that we know it's a volume slider.

46
00:02:54,650 --> 00:02:58,750
So, OK, let's go ahead and do that so we could put this really anywhere.

47
00:02:59,000 --> 00:03:04,130
Let's go create volume, slider, frame.

48
00:03:04,550 --> 00:03:09,680
So let's call this volume underscore frame and this is going to be a label frame.

49
00:03:11,330 --> 00:03:13,970
And where do we want to put it, we want to put it in our mainframe.

50
00:03:15,970 --> 00:03:19,570
And we want the tax to equal volume.

51
00:03:20,640 --> 00:03:27,090
OK, so now let's volume, underscore frame, dot grid this now where do we want to put this when we

52
00:03:27,090 --> 00:03:32,270
want to put it in row zero, but we want to put it in column one.

53
00:03:32,340 --> 00:03:36,570
So one column over from our playlist box.

54
00:03:37,200 --> 00:03:37,390
Right.

55
00:03:37,440 --> 00:03:41,940
So maybe it makes more sense logically to put this underneath here.

56
00:03:42,940 --> 00:03:47,560
Just because this is column zero right here and this is column one, it doesn't matter.

57
00:03:47,560 --> 00:03:53,980
But just at a glance, maybe this makes more sense just in the future or hunting around for things we,

58
00:03:53,980 --> 00:03:55,810
you know, OK, yeah, this is below that.

59
00:03:55,810 --> 00:03:56,050
So.

60
00:03:56,200 --> 00:03:58,090
All right, let's go ahead and save this.

61
00:03:58,090 --> 00:04:06,700
And actually inside of here, before we do that, let's create volume slider and let's call this volume

62
00:04:06,700 --> 00:04:08,050
underscore slider.

63
00:04:08,170 --> 00:04:14,210
And this is going to be a K dot scale and we want to put it in the volume frame.

64
00:04:16,030 --> 00:04:17,570
We'll talk about this in just a second.

65
00:04:17,740 --> 00:04:19,960
And then for now, let's just go volume.

66
00:04:21,990 --> 00:04:27,740
Underscore slider pack, and let's give this iPad why of tend to push it down a little bit.

67
00:04:27,750 --> 00:04:30,480
Now this tech scale thing is a little bit new.

68
00:04:31,810 --> 00:04:38,800
And so we have to actually import this up here, so let's go import Tekin to talk about.

69
00:04:40,620 --> 00:04:47,340
And this will allow us to run the Kintyre TDK widgets, which are a little bit fancier widgets, right.

70
00:04:47,730 --> 00:04:49,770
So, OK, let's go ahead and come down here.

71
00:04:51,010 --> 00:04:52,600
Back to our slider again.

72
00:04:54,220 --> 00:04:59,230
And we're going to have to give this some attributes, the first of which was where do we want to start

73
00:04:59,470 --> 00:05:05,340
from what we want to start from underscore zero and we want it to go to one.

74
00:05:05,590 --> 00:05:07,810
So our Sleater, we're going to be able to slide it.

75
00:05:07,820 --> 00:05:09,490
We want it to slide from zero to one.

76
00:05:09,500 --> 00:05:14,020
Now, normally, you would pick bigger numbers like from one to one hundred or something, but the pygame

77
00:05:14,020 --> 00:05:16,660
volume controls only go from zero to one.

78
00:05:16,660 --> 00:05:18,340
And we'll talk about this probably in the next video.

79
00:05:18,340 --> 00:05:20,290
But for now, we'll just put it like this.

80
00:05:20,290 --> 00:05:23,530
And now we want to set the orientation so Oriente equals.

81
00:05:23,680 --> 00:05:25,240
And let's put this to vertical.

82
00:05:25,360 --> 00:05:26,470
Vertical means up and down.

83
00:05:26,470 --> 00:05:29,440
We want our slider to go up and down as opposed to left and right.

84
00:05:29,970 --> 00:05:30,320
Right.

85
00:05:30,640 --> 00:05:35,560
And for now, we're going to need to give this a command, but I think we can get away with leaving

86
00:05:35,560 --> 00:05:35,920
it for now.

87
00:05:35,950 --> 00:05:38,560
So let's go and save this and run it just to see what we've done here.

88
00:05:38,950 --> 00:05:43,570
And we could see we've now got this volume slider right here.

89
00:05:43,570 --> 00:05:43,960
So.

90
00:05:44,230 --> 00:05:46,780
All right, this is Smosh right up against there.

91
00:05:46,780 --> 00:05:50,410
Let's give this some padding to push these things apart.

92
00:05:51,190 --> 00:05:53,770
And we could do that in the volume frames right here.

93
00:05:53,770 --> 00:05:56,980
When we put our volume frame up, let's give this a pad.

94
00:05:56,980 --> 00:06:02,410
Acts of like thirty X is padding left or right if we go ahead and save this and run it again.

95
00:06:05,220 --> 00:06:10,080
So that looks decent, but maybe that's a little bit too much.

96
00:06:10,290 --> 00:06:13,680
So instead of 30, maybe, let's say 10, see what this looks like.

97
00:06:17,340 --> 00:06:22,620
I guess maybe a little better, I'll split the difference and go 20 and you could just play around with

98
00:06:22,620 --> 00:06:25,470
this and make it look however you like to make it look.

99
00:06:27,710 --> 00:06:32,600
OK, so for now, that's fine, we'll leave it like this, so we need to also make this larger so that

100
00:06:32,600 --> 00:06:35,390
it kind of stretches the whole length of our playlist here.

101
00:06:35,810 --> 00:06:39,580
And we could do that right in here when we defined our slider itself.

102
00:06:39,830 --> 00:06:43,820
We can go a length as good this length of one twenty five.

103
00:06:43,820 --> 00:06:44,540
Save this.

104
00:06:45,860 --> 00:06:47,240
Come back here, run it again.

105
00:06:48,840 --> 00:06:54,180
And you can see now this sort of lines up here and it kind of lines up here better and all right, that's

106
00:06:54,180 --> 00:06:54,690
looking better.

107
00:06:54,700 --> 00:07:00,510
So now we've got this thing and we can move it around and it doesn't really do anything yet, but we're

108
00:07:00,510 --> 00:07:01,440
sort of halfway there.

109
00:07:01,440 --> 00:07:03,240
So I think that's all for this video in the next video.

110
00:07:03,240 --> 00:07:05,250
We'll go ahead and finish up this volume, Slider.