1
00:00:05,420 --> 00:00:09,140
so its now time for a challenge what
we're going to do is challenge your

2
00:00:09,140 --> 00:00:14,050
understanding of TKinter and get you to
solve a particular challenge that we've

3
00:00:14,050 --> 00:00:21,320
come up with so what I'm going to do first is
open a new Python file and paste in the

4
00:00:21,320 --> 00:00:29,680
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:29,680 --> 00:00:35,140
challenge the challenge is to write a GUI program to create a simple calculator layout that

6
00:00:35,140 --> 00:00:40,890
looks like the screen shot that I am about to
show you actually I'll show that first

7
00:00:40,890 --> 00:00:48,300
there's the screen shot of what we try to
produce here

8
00:00:48,300 --> 00:00:52,740
so when you're going
ahead creating this and you are gonna be using

9
00:00:52,740 --> 00:00:57,890
Tkinter for it you will try to be Pythonic as possible so it's ok if you want to

10
00:00:57,890 --> 00:01:02,350
end up writing repeated
button and grid statements but consider

11
00:01:02,350 --> 00:01:06,900
using lists and also a for loop then there's
no need to store the buttons in

12
00:01:06,900 --> 00:01:10,900
variables as an optional extra refer to
the documentation to work on how to use

13
00:01:10,900 --> 00:01:15,040
minsize() the function to prevent a
window from being shrunk

14
00:01:15,040 --> 00:01:22,670
so the widgets vanished from view and just a hint you
may also want to use the widgets

15
00:01:22,670 --> 00:01:28,560
.winfo_height function as well as .winfo_width the function method for that

16
00:01:28,560 --> 00:01:32,460
as well which case you should know that
they will not return the correct results unless

17
00:01:32,460 --> 00:01:36,960
the window has been forced to draw
the widgets by calling its update method

18
00:01:36,960 --> 00:01:43,210
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:43,210 --> 00:01:47,280
constrained and can't be re-sized to small
the height will still need to be

20
00:01:47,280 --> 00:01:51,060
constrained so that's it that's the
challenge to produce this interface as you can

21
00:01:51,060 --> 00:01:56,310
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:56,310 --> 00:02:06,720
and get that working and then come back
when you're ready to see what our solution was

23
00:02:06,720 --> 00:02:10,770
..ok so hopefully you
were able to get it working so let's go

24
00:02:10,770 --> 00:02:16,550
ahead and show you our version as always our is just one version one possible

25
00:02:16,550 --> 00:02:19,940
solution you don't need to have produced
an identical challenge result the

26
00:02:19,940 --> 00:02:25,370
main thing is you've got something
working ok so gonna start with try because I want to import TKinter

27
00:02:25,370 --> 00:02:39,090
....and you saw this code before...

28
00:02:39,090 --> 00:02:49,730
...ok so what we are gonna do first is create

29
00:02:49,730 --> 00:02:53,490
some keys and ultimately this are going to
contain the various settings and so forth

30
00:02:53,490 --> 00:03:49,180
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:49,180 --> 00:04:06,920
.....

32
00:04:06,920 --> 00:04:25,820
.....ok so there's our

33
00:04:25,820 --> 00:04:30,850
keys so that's the various keys that are
forming part of the interface the actual

34
00:04:30,850 --> 00:04:36,080
keys that you would type on a calculator ok we are gonna specify the variable for our

35
00:04:36,080 --> 00:04:42,450
padding....

36
00:04:42,450 --> 00:05:07,090
...set that as we've done through out this

37
00:05:07,090 --> 00:05:20,620
section on TKinter.....

38
00:05:20,620 --> 00:05:28,670
...ok so lets setup our entries so.....

39
00:05:28,670 --> 00:05:49,760
.....

40
00:05:49,760 --> 00:05:53,920
......

41
00:05:53,920 --> 00:06:03,160
.....

42
00:06:03,160 --> 00:06:16,750
.....ok so next is going to be a

43
00:06:16,750 --> 00:06:27,440
loop so put.....

44
00:06:27,440 --> 00:06:38,470
...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:38,470 --> 00:06:46,020
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:46,020 --> 00:07:00,740
......

47
00:07:00,740 --> 00:07:13,720
.....

48
00:07:13,720 --> 00:07:23,800
......

49
00:07:23,800 --> 00:07:34,790
..so we are going through the

50
00:07:34,790 --> 00:07:39,670
various columns and rows and once you've
done that that should be all we need to do

51
00:07:39,670 --> 00:07:48,340
and on line 57...so just going through that loop now although we could have

52
00:07:48,340 --> 00:07:52,930
actually just use a similar line like you
see on line 53 to create all the buttons

53
00:07:52,930 --> 00:07:56,460
individually the more Pythonic way is
to set up a representation of the

54
00:07:56,460 --> 00:08:01,060
buttons in a nested lists of lists to
represent the rows of the keypad and

55
00:08:01,060 --> 00:08:06,090
also the keys within each row so a simple loop as
you can see then gets each row from the

56
00:08:06,090 --> 00:08:09,850
list that we defined on line 29 an
inner loop gets the caption and the

57
00:08:09,850 --> 00:08:15,070
column span values for each key in the row as a tuple now the sticky properties is used to

58
00:08:15,070 --> 00:08:19,840
make each button fill the width of its cell
because the row height is determined by

59
00:08:19,840 --> 00:08:24,160
the size of the buttons using north and
south is unnecessary here now the TKInter

60
00:08:24,160 --> 00:08:26,740
module contains a number of constants
so we used a couple of those in

61
00:08:26,740 --> 00:08:32,090
previous videos but also includes the 8
compass points so you can see when your using TKinter.e

62
00:08:32,090 --> 00:08:34,450
for east and tkInter.w now

63
00:08:34,450 --> 00:08:37,330
although there's no difference between
the way would set sticky here and the

64
00:08:37,330 --> 00:08:41,140
previous way of using a string its useful to see this method using the Tkinter

65
00:08:41,140 --> 00:08:44,710
constants because you may come across it at an
existing code

66
00:08:44,710 --> 00:08:49,870
often you'll find that Tkinter has been imported
using star so you might see e+w as

67
00:08:49,870 --> 00:08:55,280
well and the way we've been setting it up
to this point involves less typing and

68
00:08:55,280 --> 00:08:58,680
there's no need to include the row and
column numbers in the data so that they can

69
00:08:58,680 --> 00:09:02,350
easily be calculated in the loops and
that's why we've dont it that way and for the

70
00:09:02,350 --> 00:09:08,000
optional extra we can work at why the keypad is using winfo_width property you

71
00:09:08,000 --> 00:09:12,690
can then add on to the Windows padding to do
that and similarly winfo_height is going to

72
00:09:12,690 --> 00:09:16,410
give us the height of the keypad and
result to entry box which we can add to get

73
00:09:16,410 --> 00:09:20,480
the total height needed these
values are use in the main window as

74
00:09:20,480 --> 00:09:24,300
min size method to prevent the window from re-sizing too small at first lets just run what

75
00:09:24,300 --> 00:09:26,050
we've got before we actually go ahead

76
00:09:26,050 --> 00:09:31,180
so gonna run that right click on run the
challenge and there's our basic calculator as

77
00:09:31,180 --> 00:09:35,010
you can see on the screen at the moment
and obviously it needs to be fixed a little

78
00:09:35,010 --> 00:09:41,230
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:41,230 --> 00:09:46,110
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:46,110 --> 00:09:51,820
close that off and come back down here and I mentioned
previously but until the main loop

81
00:09:51,820 --> 00:09:55,980
is called nothing has actually been drawn so
the sizes are not available so in order to

82
00:09:55,980 --> 00:09:59,450
get these values before main loop is called which we want so that we can

83
00:09:59,450 --> 00:10:03,110
actually re-size it according to the
buttons we need to use the update method

84
00:10:03,110 --> 00:10:10,100
so we actually before this main loop put
in some code.....to call

85
00:10:10,100 --> 00:10:16,580
it so we've got access to those values and
now we got that we should be able to......

86
00:10:16,580 --> 00:10:30,490
.....

87
00:10:30,490 --> 00:10:41,470
which we defined on line 36 main window padding is 8 we are adding that

88
00:10:41,470 --> 00:10:45,200
as well which we need because that's already in
use so we want pad over to the right area

89
00:10:45,200 --> 00:10:53,890
and adding that to the total size and
we also put....

90
00:10:53,890 --> 00:11:01,890
and we need to add the keypad info to that as well so....

91
00:11:01,890 --> 00:11:21,470
....and if we run that
so we've now got our application working and if we

92
00:11:21,470 --> 00:11:26,570
just minimize this we can see that the minimization is actually
working now so it's actually stopping us

93
00:11:26,570 --> 00:11:30,410
from making it too small and all the
buttons remain on the screen and

94
00:11:30,410 --> 00:11:35,150
obviously you saw the fact that we can still maximize it past its normal size which is

95
00:11:35,150 --> 00:11:43,630
not great and if we stop this run it again
when it first starts of course its too big

96
00:11:43,630 --> 00:11:47,210
so although we haven't talked about much the
other thing we can do it just to finish

97
00:11:47,210 --> 00:11:52,000
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:52,000 --> 00:11:55,050
too big and that can be useful in
situations like this when a calculator

99
00:11:55,050 --> 00:11:59,940
where it doesn't necessarily make sense to
expand it anymore given the size of the

100
00:11:59,940 --> 00:12:03,920
screen so let's just finish off the
challenge doing that so we can do

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

102
00:12:10,920 --> 00:12:17,450
and by doing that that's going to
make the minimum maximum size the same

103
00:12:17,450 --> 00:12:21,650
so that means its going give us
the right size should work for any

104
00:12:21,650 --> 00:12:25,740
version Windows Mac or Linux and it
should actually enable us to have a

105
00:12:25,740 --> 00:12:29,750
minimum and maximum size and for that to
be correct but what we're going to do is

106
00:12:29,750 --> 00:12:31,630
suggest you type in here

107
00:12:31,630 --> 00:12:36,490
...then after this line here

108
00:12:36,490 --> 00:12:42,120
...so what we are trying to do is make the maximum size 50

109
00:12:42,120 --> 00:12:47,510
larger horizontally and also 50 vertically so by doing that

110
00:12:47,510 --> 00:12:54,600
we can actually see the difference so lets just
run that and see what it does and notice how it

111
00:12:54,600 --> 00:12:58,760
automatically start on the right size
and so consequently we can now bring it

112
00:12:58,760 --> 00:13:01,730
back to the smallest size the minimum
size but the maximum size I can't

113
00:13:01,730 --> 00:13:06,320
physically drag it anymore and
that's why I added the 50 their just to make sure that you

114
00:13:06,320 --> 00:13:11,830
had something to be able to make a larger or smaller like so if you decided

115
00:13:11,830 --> 00:13:16,130
that the value that we came up bearing in mined it is calculated to fit

116
00:13:16,130 --> 00:13:16,750
anyway

117
00:13:16,750 --> 00:13:23,740
was correct for the maximum size then we can get rid of that again.....do something like that...

118
00:13:23,740 --> 00:13:34,700
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:34,700 --> 00:13:37,870
we actually placed on there so that's it
and I know that wasn't part of the challenge

120
00:13:37,870 --> 00:13:41,510
but that is something else for you to
look at doing if you want to create

121
00:13:41,510 --> 00:13:46,500
screens of a given size and want to
make sure that it doesn't extend too small or

122
00:13:46,500 --> 00:13:47,820
too large

123
00:13:47,820 --> 00:13:52,410
the two the min size making it to smaller
is something more important is

124
00:13:52,410 --> 00:13:56,730
something that you using more than the
maximum size because often you do want

125
00:13:56,730 --> 00:14:00,840
to expand to a larger size but again in a case
of this challenge I didn't really tell

126
00:14:00,840 --> 00:14:04,560
yo to do that we really only talked about min size
so don't feel you should have done

127
00:14:04,560 --> 00:14:08,190
that other section I just wanted to
make sure it was complete and also show you

128
00:14:08,190 --> 00:14:09,630
the max size as well

129
00:14:09,630 --> 00:14:15,070
one final note is IntelliJ is giving us
a warning mark to the right-hand margin and

130
00:14:15,070 --> 00:14:19,890
if we have look if we didn't actually
use the import Tkinter method with the

131
00:14:19,890 --> 00:14:24,500
try catch then you probably got an additional message
and we just highlighted it we can safely

132
00:14:24,500 --> 00:14:28,240
ignore that because we know that that's
the case we are importing with a capital T

133
00:14:28,240 --> 00:14:34,400
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:34,400 --> 00:14:37,900
looking calculator but obviously none of the buttons
actually do anything

135
00:14:37,900 --> 00:14:40,840
so in order to make the buttons work what we
really need to do at this point is link them to

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

137
00:14:44,840 --> 00:14:48,310
a look at how to write our own functions in Python and ultimately that's

138
00:14:48,310 --> 00:14:52,630
gonna enable you to if you wanted to convert this back to the calculator and actually add

139
00:14:52,630 --> 00:14:56,030
some code to get it to work like a calculator so will see you in the next

140
00:14:56,030 --> 00:14:56,230
video