WEBVTT

1
00:00:01.920 --> 00:00:05.640
so its now time for a challenge what
we're going to do is challenge your

2
00:00:05.640 --> 00:00:10.559
understanding of TKinter and get you to
solve a particular challenge that we've

3
00:00:10.559 --> 00:00:17.820
come up with so what I'm going to do first is
open a new Python file and paste in the

4
00:00:17.820 --> 00:00:26.180
challenge so just gonna call it challenge and let me go ahead and paste in what the
challenge is all about so here is the

5
00:00:26.180 --> 00:00:31.640
challenge the challenge is to write a GUI program to create a simple calculator layout that

6
00:00:31.640 --> 00:00:37.399
looks like the screen shot that I am about to
show you actually I'll show that first

7
00:00:37.399 --> 00:00:44.809
there's the screen shot of what we try to
produce here

8
00:00:44.809 --> 00:00:49.249
so when you're going
ahead creating this and you are gonna be using

9
00:00:49.249 --> 00:00:54.399
Tkinter for it you will try to be Pythonic as possible so it's ok if you want to

10
00:00:54.399 --> 00:00:58.859
end up writing repeated
button and grid statements but consider

11
00:00:58.859 --> 00:01:03.409
using lists and also a for loop then there's
no need to store the buttons in

12
00:01:03.409 --> 00:01:07.409
variables as an optional extra refer to
the documentation to work on how to use

13
00:01:07.409 --> 00:01:11.549
minsize() the function to prevent a
window from being shrunk

14
00:01:11.549 --> 00:01:19.170
so the widgets vanished from view and just a hint you
may also want to use the widgets

15
00:01:19.170 --> 00:01:25.060
.winfo_height function as well as .winfo_width the function method for that

16
00:01:25.060 --> 00:01:28.960
as well which case you should know that
they will not return the correct results unless

17
00:01:28.960 --> 00:01:33.469
the window has been forced to draw
the widgets by calling its update method

18
00:01:33.469 --> 00:01:39.719
first so keep that in mind and a final note if you are using
Windows you probably find that the width is already

19
00:01:39.719 --> 00:01:43.780
constrained and can't be re-sized to small
the height will still need to be

20
00:01:43.780 --> 00:01:47.560
constrained so that's it that's the
challenge to produce this interface as you can

21
00:01:47.560 --> 00:01:52.819
see on the screen there so it's now time
to go away and try that out so pause the video now

22
00:01:52.819 --> 00:02:03.220
and get that working and then come back
when you're ready to see what our solution was

23
00:02:03.220 --> 00:02:07.270
..ok so hopefully you
were able to get it working so let's go

24
00:02:07.270 --> 00:02:13.050
ahead and show you our version as always our is just one version one possible

25
00:02:13.050 --> 00:02:16.440
solution you don't need to have produced
an identical challenge result the

26
00:02:16.440 --> 00:02:21.870
main thing is you've got something
working ok so gonna start with try because I want to import TKinter

27
00:02:21.870 --> 00:02:35.590
....and you saw this code before...

28
00:02:35.590 --> 00:02:46.230
...ok so what we are gonna do first is create

29
00:02:46.230 --> 00:02:49.990
some keys and ultimately this are going to
contain the various settings and so forth

30
00:02:49.990 --> 00:03:45.680
that we need so...you will see how this all works shortly....and your probably figuring out these are the various entries for the calculator....

31
00:03:45.680 --> 00:04:03.420
.....

32
00:04:03.420 --> 00:04:22.320
.....ok so there's our

33
00:04:22.320 --> 00:04:27.350
keys so that's the various keys that are
forming part of the interface the actual

34
00:04:27.350 --> 00:04:32.580
keys that you would type on a calculator ok we are gonna specify the variable for our

35
00:04:32.580 --> 00:04:38.950
padding....

36
00:04:38.950 --> 00:05:03.590
...set that as we've done through out this

37
00:05:03.590 --> 00:05:17.129
section on TKinter.....

38
00:05:17.129 --> 00:05:25.179
...ok so lets setup our entries so.....

39
00:05:25.179 --> 00:05:46.269
.....

40
00:05:46.269 --> 00:05:50.429
......

41
00:05:50.429 --> 00:05:59.669
.....

42
00:05:59.669 --> 00:06:13.259
.....ok so next is going to be a

43
00:06:13.259 --> 00:06:23.949
loop so put.....

44
00:06:23.949 --> 00:06:34.979
...so we are gonna go through our keys to defined on line 29 and add each row but also each column within

45
00:06:34.979 --> 00:06:42.529
that as well so we are doing column now so....and we are going to add buttons for all of those so....

46
00:06:42.529 --> 00:06:57.240
......

47
00:06:57.240 --> 00:07:10.220
.....

48
00:07:10.220 --> 00:07:20.300
......

49
00:07:20.300 --> 00:07:31.290
..so we are going through the

50
00:07:31.290 --> 00:07:36.170
various columns and rows and once you've
done that that should be all we need to do

51
00:07:36.170 --> 00:07:44.840
and on line 57...so just going through that loop now although we could have

52
00:07:44.840 --> 00:07:49.430
actually just use a similar line like you
see on line 53 to create all the buttons

53
00:07:49.430 --> 00:07:52.960
individually the more Pythonic way is
to set up a representation of the

54
00:07:52.960 --> 00:07:57.560
buttons in a nested lists of lists to
represent the rows of the keypad and

55
00:07:57.560 --> 00:08:02.590
also the keys within each row so a simple loop as
you can see then gets each row from the

56
00:08:02.590 --> 00:08:06.350
list that we defined on line 29 an
inner loop gets the caption and the

57
00:08:06.350 --> 00:08:11.570
column span values for each key in the row as a tuple now the sticky properties is used to

58
00:08:11.570 --> 00:08:16.340
make each button fill the width of its cell
because the row height is determined by

59
00:08:16.340 --> 00:08:20.660
the size of the buttons using north and
south is unnecessary here now the TKInter

60
00:08:20.660 --> 00:08:23.240
module contains a number of constants
so we used a couple of those in

61
00:08:23.240 --> 00:08:28.590
previous videos but also includes the 8
compass points so you can see when your using TKinter.e

62
00:08:28.590 --> 00:08:30.950
for east and tkInter.w now

63
00:08:30.950 --> 00:08:33.839
although there's no difference between
the way would set sticky here and the

64
00:08:33.839 --> 00:08:37.640
previous way of using a string its useful to see this method using the Tkinter

65
00:08:37.640 --> 00:08:41.210
constants because you may come across it at an
existing code

66
00:08:41.210 --> 00:08:46.370
often you'll find that Tkinter has been imported
using star so you might see e+w as

67
00:08:46.370 --> 00:08:51.780
well and the way we've been setting it up
to this point involves less typing and

68
00:08:51.780 --> 00:08:55.180
there's no need to include the row and
column numbers in the data so that they can

69
00:08:55.180 --> 00:08:58.850
easily be calculated in the loops and
that's why we've dont it that way and for the

70
00:08:58.850 --> 00:09:04.500
optional extra we can work at why the keypad is using winfo_width property you

71
00:09:04.500 --> 00:09:09.190
can then add on to the Windows padding to do
that and similarly winfo_height is going to

72
00:09:09.190 --> 00:09:12.910
give us the height of the keypad and
result to entry box which we can add to get

73
00:09:12.910 --> 00:09:16.980
the total height needed these
values are use in the main window as

74
00:09:16.980 --> 00:09:20.800
min size method to prevent the window from re-sizing too small at first lets just run what

75
00:09:20.800 --> 00:09:22.550
we've got before we actually go ahead

76
00:09:22.550 --> 00:09:27.680
so gonna run that right click on run the
challenge and there's our basic calculator as

77
00:09:27.680 --> 00:09:31.510
you can see on the screen at the moment
and obviously it needs to be fixed a little

78
00:09:31.510 --> 00:09:37.730
bit but re-sizing will be good but we will come back and do that but basically we got our entry box

79
00:09:37.730 --> 00:09:42.610
for our numbers we got the various buttons on the
screen coming up so we are off to a good start so lets

80
00:09:42.610 --> 00:09:48.329
close that off and come back down here and I mentioned
previously but until the main loop

81
00:09:48.329 --> 00:09:52.480
is called nothing has actually been drawn so
the sizes are not available so in order to

82
00:09:52.480 --> 00:09:55.950
get these values before main loop is called which we want so that we can

83
00:09:55.950 --> 00:09:59.610
actually re-size it according to the
buttons we need to use the update method

84
00:09:59.610 --> 00:10:06.600
so we actually before this main loop put
in some code.....to call

85
00:10:06.600 --> 00:10:13.089
it so we've got access to those values and
now we got that we should be able to......

86
00:10:13.089 --> 00:10:26.990
.....

87
00:10:26.990 --> 00:10:37.970
which we defined on line 36 main window padding is 8 we are adding that

88
00:10:37.970 --> 00:10:41.709
as well which we need because that's already in
use so we want pad over to the right area

89
00:10:41.709 --> 00:10:50.399
and adding that to the total size and
we also put....

90
00:10:50.399 --> 00:10:58.390
and we need to add the keypad info to that as well so....

91
00:10:58.390 --> 00:11:17.970
....and if we run that
so we've now got our application working and if we

92
00:11:17.970 --> 00:11:23.070
just minimize this we can see that the minimization is actually
working now so it's actually stopping us

93
00:11:23.070 --> 00:11:26.910
from making it too small and all the
buttons remain on the screen and

94
00:11:26.910 --> 00:11:31.650
obviously you saw the fact that we can still maximize it past its normal size which is

95
00:11:31.650 --> 00:11:40.130
not great and if we stop this run it again
when it first starts of course its too big

96
00:11:40.130 --> 00:11:43.710
so although we haven't talked about much the
other thing we can do it just to finish

97
00:11:43.710 --> 00:11:48.500
off the challenges we can use a max size
we could set it up so that the max size is also not

98
00:11:48.500 --> 00:11:51.550
too big and that can be useful in
situations like this when a calculator

99
00:11:51.550 --> 00:11:56.440
where it doesn't necessarily make sense to
expand it anymore given the size of the

100
00:11:56.440 --> 00:12:00.420
screen so let's just finish off the
challenge doing that so we can do

101
00:12:00.420 --> 00:12:07.420
something similar we can just take a
copy of that line paste it and change min to max

102
00:12:07.420 --> 00:12:13.950
and by doing that that's going to
make the minimum maximum size the same

103
00:12:13.950 --> 00:12:18.150
so that means its going give us
the right size should work for any

104
00:12:18.150 --> 00:12:22.240
version Windows Mac or Linux and it
should actually enable us to have a

105
00:12:22.240 --> 00:12:26.250
minimum and maximum size and for that to
be correct but what we're going to do is

106
00:12:26.250 --> 00:12:28.130
suggest you type in here

107
00:12:28.130 --> 00:12:32.990
...then after this line here

108
00:12:32.990 --> 00:12:38.620
...so what we are trying to do is make the maximum size 50

109
00:12:38.620 --> 00:12:44.010
larger horizontally and also 50 vertically so by doing that

110
00:12:44.010 --> 00:12:51.100
we can actually see the difference so lets just
run that and see what it does and notice how it

111
00:12:51.100 --> 00:12:55.260
automatically start on the right size
and so consequently we can now bring it

112
00:12:55.260 --> 00:12:58.230
back to the smallest size the minimum
size but the maximum size I can't

113
00:12:58.230 --> 00:13:02.820
physically drag it anymore and
that's why I added the 50 their just to make sure that you

114
00:13:02.820 --> 00:13:08.330
had something to be able to make a larger or smaller like so if you decided

115
00:13:08.330 --> 00:13:12.630
that the value that we came up bearing in mined it is calculated to fit

116
00:13:12.630 --> 00:13:13.250
anyway

117
00:13:13.250 --> 00:13:20.240
was correct for the maximum size then we can get rid of that again.....do something like that...

118
00:13:20.240 --> 00:13:31.200
run it again and now we got a screen that we can't change sizes and its already correct for the controls that

119
00:13:31.200 --> 00:13:34.370
we actually placed on there so that's it
and I know that wasn't part of the challenge

120
00:13:34.370 --> 00:13:38.010
but that is something else for you to
look at doing if you want to create

121
00:13:38.010 --> 00:13:43.000
screens of a given size and want to
make sure that it doesn't extend too small or

122
00:13:43.000 --> 00:13:44.320
too large

123
00:13:44.320 --> 00:13:48.910
the two the min size making it to smaller
is something more important is

124
00:13:48.910 --> 00:13:53.230
something that you using more than the
maximum size because often you do want

125
00:13:53.230 --> 00:13:57.340
to expand to a larger size but again in a case
of this challenge I didn't really tell

126
00:13:57.340 --> 00:14:01.060
yo to do that we really only talked about min size
so don't feel you should have done

127
00:14:01.060 --> 00:14:04.690
that other section I just wanted to
make sure it was complete and also show you

128
00:14:04.690 --> 00:14:06.130
the max size as well

129
00:14:06.130 --> 00:14:11.570
one final note is IntelliJ is giving us
a warning mark to the right-hand margin and

130
00:14:11.570 --> 00:14:16.390
if we have look if we didn't actually
use the import Tkinter method with the

131
00:14:16.390 --> 00:14:21.000
try catch then you probably got an additional message
and we just highlighted it we can safely

132
00:14:21.000 --> 00:14:24.740
ignore that because we know that that's
the case we are importing with a capital T

133
00:14:24.740 --> 00:14:30.900
if you recall so that it works with Python 2 as well
so now that we've done this we've got a reasonably good

134
00:14:30.900 --> 00:14:34.400
looking calculator but obviously none of the buttons
actually do anything

135
00:14:34.400 --> 00:14:37.340
so in order to make the buttons work what we
really need to do at this point is link them to

136
00:14:37.340 --> 00:14:41.340
functions so what we gonna do is leave our calculator for now and in the next video we are gonna have

137
00:14:41.340 --> 00:14:44.810
a look at how to write our own functions in Python and ultimately that's

138
00:14:44.810 --> 00:14:49.130
gonna enable you to if you wanted to convert this back to the calculator and actually add

139
00:14:49.130 --> 00:14:52.530
some code to get it to work like a calculator so will see you in the next

140
00:14:52.530 --> 00:14:52.730
video