1
00:00:05,600 --> 00:00:10,730
so in the previous video we talked about
creating an advanced screen to give you

2
00:00:10,730 --> 00:00:14,610
an idea on how to go about building a
more complex screen interface and I just

3
00:00:14,610 --> 00:00:19,270
want to show the screens once again
the one on the right hand side obviously

4
00:00:19,270 --> 00:00:23,230
they're both the same screen but the one
on the left hand side is showing you how

5
00:00:23,230 --> 00:00:26,980
it's set up in a grid layouts so you can see the orange lines showing you the

6
00:00:26,980 --> 00:00:32,000
columns and rows and on the right hand
side is the actual screen will try to

7
00:00:32,000 --> 00:00:36,770
build without the grid lines
so let's make a start on creating that now

8
00:00:36,770 --> 00:00:37,670
in this video

9
00:00:37,670 --> 00:00:41,890
we're going to do is open up the file that
we're working on the previous video we are

10
00:00:41,890 --> 00:00:46,210
going to copy some code I'm going to
copy this first bit up to and including

11
00:00:46,210 --> 00:00:51,810
the main line that geometry line copy all of
that taje a copy and I'm gonna go ahead and

12
00:00:51,810 --> 00:00:56,630
create a new file right click click on
new click on Python file and I'm gonna

13
00:00:56,630 --> 00:01:04,489
call this one screen and paste in that code
that's just our basic starting code instead of

14
00:01:04,489 --> 00:01:11,940
hello world what I'm gonna do is call it grid
demo and we are going to leave the defaults

15
00:01:11,940 --> 00:01:18,090
their 640 by 480 and then of course the
offsets that we had previously we are gonna

16
00:01:18,090 --> 00:01:23,930
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:23,930 --> 00:01:29,150
line and notice how it spans multiple columns across we need to do the code for

18
00:01:29,150 --> 00:01:35,730
that as well so type....

19
00:01:35,730 --> 00:01:41,950
.....

20
00:01:41,950 --> 00:02:04,550
......

21
00:02:04,550 --> 00:02:09,320
...so lets run it and see what it looks like

22
00:02:09,320 --> 00:02:16,460
now even thought we specified column
span equals 3 notice how it is still over to the

23
00:02:16,460 --> 00:02:20,920
left hand side and you would think that
it should be centered because the

24
00:02:20,920 --> 00:02:25,850
default value for sticky is centered but the
reason is we haven't given weights to the

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

26
00:02:29,990 --> 00:02:33,930
to sort of imagined them do in order to lay
everything out so once we set the weights

27
00:02:33,930 --> 00:02:37,040
columns the labels should be
re-positioned correctly

28
00:02:37,040 --> 00:02:41,570
let's go back and actually do that now
come down here before the main loop because of course

29
00:02:41,570 --> 00:02:50,040
that's the last statement......

30
00:02:50,040 --> 00:02:59,240
....lets go
ahead and copy some of this.....

31
00:02:59,240 --> 00:03:06,920
......

32
00:03:06,920 --> 00:03:13,390
....so that's our columns
configured then we need to do the same

33
00:03:13,390 --> 00:03:28,660
thing for our rows so.....

34
00:03:28,660 --> 00:03:36,240
......

35
00:03:36,240 --> 00:03:42,330
...so row 0 only contains

36
00:03:42,330 --> 00:03:47,570
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:47,570 --> 00:03:56,300
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:56,300 --> 00:04:04,450
is a bit more centered now and if we look at our
images notice how

39
00:04:04,450 --> 00:04:08,430
it's basically moved over a little bit
but it's still not fully moved over to

40
00:04:08,430 --> 00:04:12,520
where we perhaps think it should be but
as we continue on in the demo will see

41
00:04:12,520 --> 00:04:13,230
that should work

42
00:04:13,230 --> 00:04:18,709
incidentally these screen shots were
taken on Linux and so really only

43
00:04:18,709 --> 00:04:23,080
looking at the first part here the part above that is from the previous software that it comes with

44
00:04:23,080 --> 00:04:26,790
the MAC so that is why it does look a little bit
different

45
00:04:26,790 --> 00:04:33,140
ok so what to do next is add the listbox
let's go ahead and do that is gonna be

46
00:04:33,140 --> 00:04:40,680
right under the row configure file list will call it.....

47
00:04:40,680 --> 00:04:44,500
......

48
00:04:44,500 --> 00:05:03,310
.......

49
00:05:03,310 --> 00:05:08,640
......just like the column span we defined on line 12 rows span

50
00:05:08,640 --> 00:05:14,920
does the similar thing but for rows we are gonna set that to 2 and we want to configure our

51
00:05:14,920 --> 00:05:21,470
list box so....

52
00:05:21,470 --> 00:05:29,420
...and just to be clear with

53
00:05:29,420 --> 00:05:33,380
the sticky we are position the listbox
against the left-hand edge of the cell

54
00:05:33,380 --> 00:05:37,950
we've done that by specifying west
and expanded to fill the entire cell

55
00:05:37,950 --> 00:05:42,130
by also specifying east so we start of
west and went east we've also caused it to

56
00:05:42,130 --> 00:05:46,170
expand to fill the entire height north and south so it's going to take up two rows

57
00:05:46,170 --> 00:05:49,560
in the final layout and of course row span equals 2 does so that's why we're

58
00:05:49,560 --> 00:05:54,950
actually specifying in sticky nsew so we want it to get to expand the entire height and

59
00:05:54,950 --> 00:06:00,360
the entire width for those rows and I
mentioned that we added sunken and you

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

61
00:06:05,440 --> 00:06:08,630
as well as sunken so feel free to
experiment to see what they look like

62
00:06:08,630 --> 00:06:15,430
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:15,430 --> 00:06:19,500
box so instead of having to type up a long
list of items manually what we're going

64
00:06:19,500 --> 00:06:22,650
to do is we are going to generate one by
getting a directory listing of where we use

65
00:06:22,650 --> 00:06:27,590
folder now on a Mac which right now on a
Linux I'm gonna type on a command and

66
00:06:27,590 --> 00:06:30,920
if your in Windows you need to just
change and I'll actually tell you what to

67
00:06:30,920 --> 00:06:40,080
command to type if you're on Windows being on Mac
I'm gonna type....abreviated for

68
00:06:40,080 --> 00:06:44,050
list directory and OS is the
operating system code and what we need

69
00:06:44,050 --> 00:06:54,040
to do is come back here in order to do
that and put an import.....

70
00:06:54,040 --> 00:06:55,840
.....

71
00:06:55,840 --> 00:07:01,790
....and what I'm gonna do is put in a directory which is....and that's applicable for

72
00:07:01,790 --> 00:07:06,690
as I mentioned if your on a Mac or Linux
now if not

73
00:07:06,690 --> 00:07:19,100
if your on a Windows machine instead of typing...../usr/bin
instead we type this.....

74
00:07:19,100 --> 00:07:23,200
so basically replace the entire thing with
a single quotes we've replace that with

75
00:07:23,200 --> 00:07:28,190
the / windows / system32 and that should
work give you a listing of some files

76
00:07:28,190 --> 00:07:35,060
that are actually in your Windows folder the indented code is going to be....

77
00:07:35,060 --> 00:07:44,910
...so it is going to
basically add the file name in case you're

78
00:07:44,910 --> 00:07:48,280
wondering Tkinter.END when you're
inserting an item to a list box you

79
00:07:48,280 --> 00:07:53,920
need to specify the insertion point so we are
using the Tkinter constant called end and

80
00:07:53,920 --> 00:07:56,980
that places each entry at the end of the
list as they are added so you specified

81
00:07:56,980 --> 00:08:02,190
a number for example we are changing Tkinter.END
into the number zero and the list is going to appear

82
00:08:02,190 --> 00:08:06,750
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:06,750 --> 00:08:13,230
at how it is now so lets run that
and see that it's working.....

84
00:08:13,230 --> 00:08:18,040
....lets just run it

85
00:08:18,040 --> 00:08:20,100
again

86
00:08:20,100 --> 00:08:25,950
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:25,950 --> 00:08:29,350
but notice at the moment if you go back to what
we're trying to achieve with our interface

88
00:08:29,350 --> 00:08:33,940
will need to add a scroll bar so were gonna do
that next so that we can actually see

89
00:08:33,940 --> 00:08:48,530
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:48,530 --> 00:08:53,330
.....yes it is a different component it's not part of the list box

91
00:08:53,330 --> 00:09:01,970
......

92
00:09:01,970 --> 00:09:08,430
.....obviously it needs to be vertical to match
up with the list box so....

93
00:09:08,430 --> 00:09:09,230
.....

94
00:09:09,230 --> 00:09:13,410
....and next we are gonna type something we haven't

95
00:09:13,410 --> 00:09:19,520
talked about before which is command
so come back here command....

96
00:09:19,520 --> 00:09:27,720
...so as I've mention we haven't seen command before but

97
00:09:27,720 --> 00:09:32,780
this is how actions are associated with
widgets and UI events so here command is set

98
00:09:32,780 --> 00:09:36,700
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:36,700 --> 00:09:42,390
now you can see that it's
used to query and change the vertical

100
00:09:42,390 --> 00:09:44,370
position and if the scroll bar was

101
00:09:44,370 --> 00:09:49,620
horizontal then we would have to use xview instead of yview
to handle horizontal in this case we are

102
00:09:49,620 --> 00:09:56,090
vertical so we are good to go with that
and on the next line......

103
00:09:56,090 --> 00:10:04,910
......

104
00:10:04,910 --> 00:10:14,480
...we want it to basically come down to be the same
length as the list box so there is one

105
00:10:14,480 --> 00:10:17,520
further step involved in linking the
scroll box to the list box and that

106
00:10:17,520 --> 00:10:21,850
using the y scroll Command Option
of the list box and that the

107
00:10:21,850 --> 00:10:26,480
list box call the set method of the
scroll bar when it changes and the reason it might

108
00:10:26,480 --> 00:10:30,490
change is for example if more items were
added or its scrolled using the keyboard

109
00:10:30,490 --> 00:10:34,220
or mouse wheel now if the scroll bar was horizontal
then we would use a different commands so

110
00:10:34,220 --> 00:10:37,890
but in this case its vertical so I'm going to type....

111
00:10:37,890 --> 00:10:46,110
......

112
00:10:46,110 --> 00:10:59,230
.....and that should be that so if we run that.....

113
00:10:59,230 --> 00:11:02,340
you can see we've got
scrolling implemented which is pretty

114
00:11:02,340 --> 00:11:08,350
cool we should be able to also
scroll with our key pressing the up and down arrow

115
00:11:08,350 --> 00:11:12,620
key so that's cool we are making some
progress here our interface is starting to come

116
00:11:12,620 --> 00:11:16,800
together and you can see that the
brilliant part of TKinter in Python

117
00:11:16,800 --> 00:11:20,930
in general is it at this very few commands
that need to be typed to achieve quite a

118
00:11:20,930 --> 00:11:24,840
significant graphical user interface
which is pretty cool ok so next what we

119
00:11:24,840 --> 00:11:32,050
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:32,050 --> 00:11:35,700
want to actually create a frame and
settle this up so this heading

121
00:11:35,700 --> 00:11:40,740
to save file details and we went to
actually have these radio buttons all

122
00:11:40,740 --> 00:11:46,560
showing on the screen there so
let's go ahead and do that add that and I'll make a note

123
00:11:46,560 --> 00:12:00,520
.....

124
00:12:00,520 --> 00:12:30,710
......

125
00:12:30,710 --> 00:12:39,170
...now what we're
doing is we're creating 3 radio

126
00:12:39,170 --> 00:12:42,270
buttons that all share the same variable
and the reason we doing this is

127
00:12:42,270 --> 00:12:45,870
only one can be selected any one time
so as you click on each one the one that

128
00:12:45,870 --> 00:12:50,030
was previously selected is automatically
un-selected now the mechanism to do this

129
00:12:50,030 --> 00:12:54,870
in Python relies on the Tkinter
control variables that can be bound to

130
00:12:54,870 --> 00:12:57,450
one or more widgets and that's what we
gonna be doing here we've created this

131
00:12:57,450 --> 00:13:07,960
tkinter.IntVar to do that and you'll see how that will work shortly.....

132
00:13:07,960 --> 00:13:11,490
.....

133
00:13:11,490 --> 00:13:17,930
......

134
00:13:17,930 --> 00:13:24,300
.....because the

135
00:13:24,300 --> 00:13:28,850
frame itself is attached to the main window
so the text for the first one if you recall was

136
00:13:28,850 --> 00:13:38,250
file name so I'm gonna add that....

137
00:13:38,250 --> 00:13:42,910
......and do the same to the other two

138
00:13:42,910 --> 00:13:50,300
buttons we just change references
so....

139
00:13:50,300 --> 00:13:54,950
...because each button you click we want a different value so we can

140
00:13:54,950 --> 00:13:59,680
pragmatically determine which
button is clicked and time stamp was the

141
00:13:59,680 --> 00:14:06,300
text for the third one and second one was path so that's how we associate and its

142
00:14:06,300 --> 00:14:09,740
going to be one variable that we can
query and we'll know depending on the

143
00:14:09,740 --> 00:14:13,990
value of that rbValue whether it's one
two or three as to which radio button was

144
00:14:13,990 --> 00:14:26,170
actually clicked so lets just go ahead and add
it......

145
00:14:26,170 --> 00:14:39,360
.....

146
00:14:39,360 --> 00:14:44,490
......and what will also do just out of

147
00:14:44,490 --> 00:14:51,080
interest and here I'm gonna do.....

148
00:14:51,080 --> 00:14:55,440
.....and by adding that

149
00:14:55,440 --> 00:15:00,630
we can get a printout of the number as
the radio button is clicked so you can confirm that

150
00:15:00,630 --> 00:15:04,640
it is actually doing the right things and we should be able to run that

151
00:15:04,640 --> 00:15:11,920
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:11,920 --> 00:15:16,140
and we are not going to get output now until I
actually close the program down because

153
00:15:16,140 --> 00:15:21,990
we are obviously looping here on this line 51
but given the default value has change we should get a

154
00:15:21,990 --> 00:15:26,380
value of 2 if I close this down you can see
that 2 has come up there and just to

155
00:15:26,380 --> 00:15:32,080
confirm run again this time
I'm going to select option three their

156
00:15:32,080 --> 00:15:35,790
which is that one close it down
we have the value of 3 so you can see

157
00:15:35,790 --> 00:15:40,860
that we're actually getting the right value and we are just fine and incidentally the other thing I didn't

158
00:15:40,860 --> 00:15:45,880
point out was the label frame on line 38
the reason I chose label

159
00:15:45,880 --> 00:15:51,430
frame their as a frame is it's very similar to
frames we have use previously but it allows

160
00:15:51,430 --> 00:15:55,050
a caption to be sent using the text
option and you can see that on line

161
00:15:55,050 --> 00:15:58,840
38 I've added the text option which is cool but it
also adds that border

162
00:15:58,840 --> 00:16:04,540
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:04,540 --> 00:16:10,180
see it's allowed us to actually add the text about the actual name and its

164
00:16:10,180 --> 00:16:14,010
also drawn this border around it so its
pretty neat so its ideal for like a set of

165
00:16:14,010 --> 00:16:19,510
radio buttons that we got on the screen
there now ok so close that and on

166
00:16:19,510 --> 00:16:24,020
line 53 .get that is obviously
retrieving the value wherever the

167
00:16:24,020 --> 00:16:27,350
previous button has been
selected and we can do that

168
00:16:27,350 --> 00:16:30,080
pragmatically then to determine the
course of action depending on which radio

169
00:16:30,080 --> 00:16:34,200
button was actually clicked there's also
a .set as you can see where we set the

170
00:16:34,200 --> 00:16:41,210
initial default values so if change that
to 2 and run again what that will do is

171
00:16:41,210 --> 00:16:45,590
give you or it should default the middle
radio button as you can see there that's

172
00:16:45,590 --> 00:16:49,120
the default option in case you're
wondering how it determines how many

173
00:16:49,120 --> 00:16:54,480
radio buttons it is because we
specify rbValue on line 44 to 46

174
00:16:54,480 --> 00:16:59,660
it know because that's that special type of an IntVar part of TKinter it knows how many radio

175
00:16:59,660 --> 00:17:02,430
buttons because we're assigning that
multiple times and of course we're

176
00:17:02,430 --> 00:17:05,980
setting the value as well ok so I'm
going to finish this video here now

177
00:17:05,980 --> 00:17:11,050
in the next video we'll continue on and will
start looking at the other elements from

178
00:17:11,050 --> 00:17:12,630
the GUI so see you in the next video