WEBVTT

1
00:00:01.960 --> 00:00:07.750
so in the previous video we talked about
creating an advanced screen to give you

2
00:00:07.750 --> 00:00:11.639
an idea on how to go about building a
more complex screen interface and I just

3
00:00:11.639 --> 00:00:16.299
want to show the screens once again
the one on the right hand side obviously

4
00:00:16.299 --> 00:00:20.250
they're both the same screen but the one
on the left hand side is showing you how

5
00:00:20.250 --> 00:00:24.000
it's set up in a grid layouts so you can see the orange lines showing you the

6
00:00:24.000 --> 00:00:29.029
columns and rows and on the right hand
side is the actual screen will try to

7
00:00:29.029 --> 00:00:33.790
build without the grid lines
so let's make a start on creating that now

8
00:00:33.790 --> 00:00:34.699
in this video

9
00:00:34.699 --> 00:00:38.910
we're going to do is open up the file that
we're working on the previous video we are

10
00:00:38.910 --> 00:00:43.230
going to copy some code I'm going to
copy this first bit up to and including

11
00:00:43.230 --> 00:00:48.839
the main line that geometry line copy all of
that taje a copy and I'm gonna go ahead and

12
00:00:48.839 --> 00:00:53.659
create a new file right click click on
new click on Python file and I'm gonna

13
00:00:53.659 --> 00:01:01.519
call this one screen and paste in that code
that's just our basic starting code instead of

14
00:01:01.519 --> 00:01:08.960
hello world what I'm gonna do is call it grid
demo and we are going to leave the defaults

15
00:01:08.960 --> 00:01:15.110
their 640 by 480 and then of course the
offsets that we had previously we are gonna

16
00:01:15.110 --> 00:01:20.950
use those as well ok just bring up on the screen we want to add
the label first the labels on the first

17
00:01:20.950 --> 00:01:26.170
line and notice how it spans multiple columns across we need to do the code for

18
00:01:26.170 --> 00:01:32.759
that as well so type....

19
00:01:32.759 --> 00:01:38.979
.....

20
00:01:38.979 --> 00:02:01.579
......

21
00:02:01.579 --> 00:02:06.340
...so lets run it and see what it looks like

22
00:02:06.340 --> 00:02:13.489
now even thought we specified column
span equals 3 notice how it is still over to the

23
00:02:13.489 --> 00:02:17.940
left hand side and you would think that
it should be centered because the

24
00:02:17.940 --> 00:02:22.870
default value for sticky is centered but the
reason is we haven't given weights to the

25
00:02:22.870 --> 00:02:27.019
columns or put anything in them so they don't
really exist until that point so we have

26
00:02:27.019 --> 00:02:30.950
to sort of imagined them do in order to lay
everything out so once we set the weights

27
00:02:30.950 --> 00:02:34.060
columns the labels should be
re-positioned correctly

28
00:02:34.060 --> 00:02:38.590
let's go back and actually do that now
come down here before the main loop because of course

29
00:02:38.590 --> 00:02:47.060
that's the last statement......

30
00:02:47.060 --> 00:02:56.269
....lets go
ahead and copy some of this.....

31
00:02:56.269 --> 00:03:03.940
......

32
00:03:03.940 --> 00:03:10.410
....so that's our columns
configured then we need to do the same

33
00:03:10.410 --> 00:03:25.680
thing for our rows so.....

34
00:03:25.680 --> 00:03:33.260
......

35
00:03:33.260 --> 00:03:39.359
...so row 0 only contains

36
00:03:39.359 --> 00:03:44.590
the headings so files list box is going start
therefor on row 1 column 0 in case you're wondering but before

37
00:03:44.590 --> 00:03:53.329
we see that lets just run this and what I need to do is close the one from last time and there it is you can see it

38
00:03:53.329 --> 00:04:01.470
is a bit more centered now and if we look at our
images notice how

39
00:04:01.470 --> 00:04:05.459
it's basically moved over a little bit
but it's still not fully moved over to

40
00:04:05.459 --> 00:04:09.549
where we perhaps think it should be but
as we continue on in the demo will see

41
00:04:09.549 --> 00:04:10.250
that should work

42
00:04:10.250 --> 00:04:15.730
incidentally these screen shots were
taken on Linux and so really only

43
00:04:15.730 --> 00:04:20.100
looking at the first part here the part above that is from the previous software that it comes with

44
00:04:20.100 --> 00:04:23.810
the MAC so that is why it does look a little bit
different

45
00:04:23.810 --> 00:04:30.160
ok so what to do next is add the listbox
let's go ahead and do that is gonna be

46
00:04:30.160 --> 00:04:37.700
right under the row configure file list will call it.....

47
00:04:37.700 --> 00:04:41.529
......

48
00:04:41.529 --> 00:05:00.339
.......

49
00:05:00.339 --> 00:05:05.669
......just like the column span we defined on line 12 rows span

50
00:05:05.669 --> 00:05:11.949
does the similar thing but for rows we are gonna set that to 2 and we want to configure our

51
00:05:11.949 --> 00:05:18.499
list box so....

52
00:05:18.499 --> 00:05:26.449
...and just to be clear with

53
00:05:26.449 --> 00:05:30.409
the sticky we are position the listbox
against the left-hand edge of the cell

54
00:05:30.409 --> 00:05:34.979
we've done that by specifying west
and expanded to fill the entire cell

55
00:05:34.979 --> 00:05:39.159
by also specifying east so we start of
west and went east we've also caused it to

56
00:05:39.159 --> 00:05:43.199
expand to fill the entire height north and south so it's going to take up two rows

57
00:05:43.199 --> 00:05:46.589
in the final layout and of course row span equals 2 does so that's why we're

58
00:05:46.589 --> 00:05:51.979
actually specifying in sticky nsew so we want it to get to expand the entire height and

59
00:05:51.979 --> 00:05:57.389
the entire width for those rows and I
mentioned that we added sunken and you

60
00:05:57.389 --> 00:06:02.469
can see there there is other options you can
choose flat grooved raised ridge solid

61
00:06:02.469 --> 00:06:05.659
as well as sunken so feel free to
experiment to see what they look like

62
00:06:05.659 --> 00:06:12.459
I'm just gonna use sunken for this and what I'm gonna
do is create some code to populate the list

63
00:06:12.459 --> 00:06:16.529
box so instead of having to type up a long
list of items manually what we're going

64
00:06:16.529 --> 00:06:19.679
to do is we are going to generate one by
getting a directory listing of where we use

65
00:06:19.679 --> 00:06:24.619
folder now on a Mac which right now on a
Linux I'm gonna type on a command and

66
00:06:24.619 --> 00:06:27.949
if your in Windows you need to just
change and I'll actually tell you what to

67
00:06:27.949 --> 00:06:37.109
command to type if you're on Windows being on Mac
I'm gonna type....abreviated for

68
00:06:37.109 --> 00:06:41.079
list directory and OS is the
operating system code and what we need

69
00:06:41.079 --> 00:06:51.069
to do is come back here in order to do
that and put an import.....

70
00:06:51.069 --> 00:06:52.860
.....

71
00:06:52.860 --> 00:06:58.819
....and what I'm gonna do is put in a directory which is....and that's applicable for

72
00:06:58.819 --> 00:07:03.710
as I mentioned if your on a Mac or Linux
 now if not

73
00:07:03.710 --> 00:07:16.129
if your on a Windows machine instead of typing...../usr/bin
instead we type this.....

74
00:07:16.129 --> 00:07:20.229
so basically replace the entire thing with
a single quotes we've replace that with

75
00:07:20.229 --> 00:07:25.219
the / windows / system32 and that should
work give you a listing of some files

76
00:07:25.219 --> 00:07:32.080
that are actually in your Windows folder the indented code is going to be....

77
00:07:32.080 --> 00:07:41.939
...so it is going to
basically add the file name in case you're

78
00:07:41.939 --> 00:07:45.300
wondering Tkinter.END when you're
inserting an item to a list box you

79
00:07:45.300 --> 00:07:50.949
need to specify the insertion point so we are
using the Tkinter constant called end and

80
00:07:50.949 --> 00:07:54.009
that places each entry at the end of the
list as they are added so you specified

81
00:07:54.009 --> 00:07:59.219
a number for example we are changing Tkinter.END
into the number zero and the list is going to appear

82
00:07:59.219 --> 00:08:03.779
in reverse because each item is going to be inserted at
the start of the list instead of the end we gonna leave it

83
00:08:03.779 --> 00:08:10.250
at how it is now so lets run that
and see that it's working.....

84
00:08:10.250 --> 00:08:15.060
....lets just run it

85
00:08:15.060 --> 00:08:17.120
again

86
00:08:17.120 --> 00:08:22.979
and look at our code and you can see there's a list of
file names that have been populated in their

87
00:08:22.979 --> 00:08:26.370
but notice at the moment if you go back to what
we're trying to achieve with our interface

88
00:08:26.370 --> 00:08:30.969
will need to add a scroll bar so were gonna do
that next so that we can actually see

89
00:08:30.969 --> 00:08:45.550
what a scroll bar would look like so close that down come back to the code and add a scroll bar and will type....

90
00:08:45.550 --> 00:08:50.350
.....yes it is a different component it's not part of the list box

91
00:08:50.350 --> 00:08:58.990
......

92
00:08:58.990 --> 00:09:05.459
.....obviously it needs to be vertical to match
up with the list box so....

93
00:09:05.459 --> 00:09:06.259
.....

94
00:09:06.259 --> 00:09:10.439
....and next we are gonna type something we haven't

95
00:09:10.439 --> 00:09:16.549
talked about before which is command
so come back here command....

96
00:09:16.549 --> 00:09:24.749
...so as I've mention we haven't seen command before but

97
00:09:24.749 --> 00:09:29.809
this is how actions are associated with
widgets and UI events so here command is set

98
00:09:29.809 --> 00:09:33.720
to the wide view method of the list box
and if you control click on wide view and if I do that

99
00:09:33.720 --> 00:09:39.410
now you can see that it's
used to query and change the vertical

100
00:09:39.410 --> 00:09:41.399
position and if the scroll bar was

101
00:09:41.399 --> 00:09:46.649
horizontal then we would have to use xview instead of yview
to handle horizontal in this case we are

102
00:09:46.649 --> 00:09:53.119
vertical so we are good to go with that
and on the next line......

103
00:09:53.119 --> 00:10:01.939
......

104
00:10:01.939 --> 00:10:11.509
...we want it to basically come down to be the same
length as the list box so there is one

105
00:10:11.509 --> 00:10:14.549
further step involved in linking the
scroll box to the list box and that

106
00:10:14.549 --> 00:10:18.879
using the y scroll Command Option
of the list box and that the

107
00:10:18.879 --> 00:10:23.509
list box call the set method of the
scroll bar when it changes and the reason it might

108
00:10:23.509 --> 00:10:27.519
change is for example if more items were
added or its scrolled using the keyboard

109
00:10:27.519 --> 00:10:31.249
or mouse wheel now if the scroll bar was horizontal
then we would use a different commands so

110
00:10:31.249 --> 00:10:34.910
but in this case its vertical so I'm going to type....

111
00:10:34.910 --> 00:10:43.139
......

112
00:10:43.139 --> 00:10:56.259
.....and that should be that so if we run that.....

113
00:10:56.259 --> 00:10:59.369
you can see we've got
scrolling implemented which is pretty

114
00:10:59.369 --> 00:11:05.379
cool we should be able to also
scroll with our key pressing the up and down arrow

115
00:11:05.379 --> 00:11:09.649
key so that's cool we are making some
progress here our interface is starting to come

116
00:11:09.649 --> 00:11:13.829
together and you can see that the
brilliant part of TKinter in Python

117
00:11:13.829 --> 00:11:17.959
in general is it at this very few commands
that need to be typed to achieve quite a

118
00:11:17.959 --> 00:11:21.869
significant graphical user interface
which is pretty cool ok so next what we

119
00:11:21.869 --> 00:11:29.079
want to do is start looking we need to add a label frame first and if we bring the image back on the screen again we

120
00:11:29.079 --> 00:11:32.729
want to actually create a frame and
settle this up so this heading

121
00:11:32.729 --> 00:11:37.769
to save file details and we went to
actually have these radio buttons all

122
00:11:37.769 --> 00:11:43.589
showing on the screen there so
let's go ahead and do that add that and I'll make a note

123
00:11:43.589 --> 00:11:57.549
.....

124
00:11:57.549 --> 00:12:27.739
......

125
00:12:27.739 --> 00:12:36.199
...now what we're
doing is we're creating 3 radio

126
00:12:36.199 --> 00:12:39.299
buttons that all share the same variable
and the reason we doing this is

127
00:12:39.299 --> 00:12:42.899
only one can be selected any one time
so as you click on each one the one that

128
00:12:42.899 --> 00:12:47.059
was previously selected is automatically
un-selected now the mechanism to do this

129
00:12:47.059 --> 00:12:51.899
in Python relies on the Tkinter
control variables that can be bound to

130
00:12:51.899 --> 00:12:54.470
one or more widgets and that's what we
gonna be doing here we've created this

131
00:12:54.470 --> 00:13:04.980
tkinter.IntVar to do that and you'll see how that will work shortly.....

132
00:13:04.980 --> 00:13:08.510
.....

133
00:13:08.510 --> 00:13:14.959
......

134
00:13:14.959 --> 00:13:21.329
.....because the

135
00:13:21.329 --> 00:13:25.870
frame itself is attached to the main window
so the text for the first one if you recall was

136
00:13:25.870 --> 00:13:35.279
file name so I'm gonna add that....

137
00:13:35.279 --> 00:13:39.930
......and do the same to the other two

138
00:13:39.930 --> 00:13:47.320
buttons we just change references
so....

139
00:13:47.320 --> 00:13:51.970
...because each button you click we want a different value so we can

140
00:13:51.970 --> 00:13:56.709
pragmatically determine which
button is clicked and time stamp was the

141
00:13:56.709 --> 00:14:03.320
text for the third one and second one was path so that's how we associate and its

142
00:14:03.320 --> 00:14:06.769
going to be one variable that we can
query and we'll know depending on the

143
00:14:06.769 --> 00:14:11.019
value of that rbValue whether it's one
two or three as to which radio button was

144
00:14:11.019 --> 00:14:23.199
actually clicked so lets just go ahead and add
it......

145
00:14:23.199 --> 00:14:36.380
.....

146
00:14:36.380 --> 00:14:41.510
......and what will also do just out of

147
00:14:41.510 --> 00:14:48.100
interest and here I'm gonna do.....

148
00:14:48.100 --> 00:14:52.460
.....and by adding that

149
00:14:52.460 --> 00:14:57.650
we can get a printout of the number as
the radio button is clicked so you can confirm that

150
00:14:57.650 --> 00:15:01.660
it is actually doing the right things and we should be able to run that

151
00:15:01.660 --> 00:15:08.940
so let's run that and see that it's
working and notice we got our radio buttons now and now if I click on

152
00:15:08.940 --> 00:15:13.160
and we are not going to get output now until I
actually close the program down because

153
00:15:13.160 --> 00:15:19.010
we are obviously looping here on this line 51
but given the default value has change we should get a

154
00:15:19.010 --> 00:15:23.400
value of 2 if I close this down you can see
that 2 has come up there and just to

155
00:15:23.400 --> 00:15:29.100
confirm run again this time
I'm going to select option three their

156
00:15:29.100 --> 00:15:32.810
which is that one close it down
we have the value of 3 so you can see

157
00:15:32.810 --> 00:15:37.880
that we're actually getting the right value and we are just fine and incidentally the other thing I didn't

158
00:15:37.880 --> 00:15:42.900
point out was the label frame on line 38
 the reason I chose label

159
00:15:42.900 --> 00:15:48.450
frame their as a frame is it's very similar to
frames we have use previously but it allows

160
00:15:48.450 --> 00:15:52.070
a caption to be sent using the text
option and you can see that on line

161
00:15:52.070 --> 00:15:55.860
38 I've added the text option which is cool but it
also adds that border

162
00:15:55.860 --> 00:16:01.560
s o it draws a border around the content such so just
run it again should have mentioned that earlier so can

163
00:16:01.560 --> 00:16:07.200
see it's allowed us to actually add the text about the actual name and its

164
00:16:07.200 --> 00:16:11.030
also drawn this border around it so its
pretty neat so its ideal for like a set of

165
00:16:11.030 --> 00:16:16.530
radio buttons that we got on the screen
there now ok so close that and on

166
00:16:16.530 --> 00:16:21.040
line 53 .get that is obviously
retrieving the value wherever the

167
00:16:21.040 --> 00:16:24.370
previous button has been
selected and we can do that

168
00:16:24.370 --> 00:16:27.100
pragmatically then to determine the
course of action depending on which radio

169
00:16:27.100 --> 00:16:31.220
button was actually clicked there's also
a .set as you can see where we set the

170
00:16:31.220 --> 00:16:38.230
initial default values so if change that
to 2 and run again what that will do is

171
00:16:38.230 --> 00:16:42.610
give you or it should default the middle
radio button as you can see there that's

172
00:16:42.610 --> 00:16:46.140
the default option in case you're
wondering how it determines how many

173
00:16:46.140 --> 00:16:51.500
radio buttons it is because we
specify rbValue on line 44 to 46

174
00:16:51.500 --> 00:16:56.680
it know because that's that special type of an IntVar part of TKinter it knows how many radio

175
00:16:56.680 --> 00:16:59.450
buttons because we're assigning that
multiple times and of course we're

176
00:16:59.450 --> 00:17:03.000
setting the value as well ok so I'm
going to finish this video here now

177
00:17:03.000 --> 00:17:08.079
in the next video we'll continue on and will
start looking at the other elements from

178
00:17:08.079 --> 00:17:09.650
the GUI so see you in the next video