1
00:00:05,320 --> 00:00:10,650
so in this video we are going to start talking
about the Tkinter module now some

2
00:00:10,650 --> 00:00:16,890
people will pronounce this as Tkinter but is spelt T-K-I-N-T-E-R so I'm gonna

3
00:00:16,890 --> 00:00:21,580
pronounce this Tkinter now this module
and Python provides access to the TK

4
00:00:21,580 --> 00:00:26,830
widget tool kit and really what that means
is that it allows gui programs to be created

5
00:00:26,830 --> 00:00:31,630
now the TK toolkit was developed to work with
scripting language called TCL and the

6
00:00:31,630 --> 00:00:36,930
tkinter Python binding works by
actively sending TCL code to a TCL

7
00:00:36,930 --> 00:00:41,370
interpreter but that's actually embedded
in the Python interpreters so we don't need to load any

8
00:00:41,370 --> 00:00:46,550
thing extra now there are other graphic
libraries available but tkinter

9
00:00:46,550 --> 00:00:50,730
has the advantage that it's part of the
standard Python language and part of

10
00:00:50,730 --> 00:00:54,000
and its therefore
available without installing anything

11
00:00:54,000 --> 00:00:58,280
else which is pretty handy but also has
a disadvantage in that the documentation

12
00:00:58,280 --> 00:01:04,569
isn't brilliant and the Python
documentation itself even states that

13
00:01:04,569 --> 00:01:09,750
the documentation isn't brilliant but that situation does
seem to have improved and there's been an

14
00:01:09,750 --> 00:01:15,240
increased interest in tk with new versions
for both it and TCL released in 2015

15
00:01:15,240 --> 00:01:19,930
and as you search the internet for information
on TK you might find references to it

16
00:01:19,930 --> 00:01:25,810
looking dated the but Tkinter version 8.5
which was released in 2015 has added

17
00:01:25,810 --> 00:01:29,510
something interesting called themed
widgets and they provide a native

18
00:01:29,510 --> 00:01:33,180
look and feel for each operating system
and I think that's both JP and myself

19
00:01:33,180 --> 00:01:36,260
think that seriously cool and the good
thing is that those examples are some

20
00:01:36,260 --> 00:01:40,320
nice interface is produced with it if
you do a bit of searching with that said

21
00:01:40,320 --> 00:01:44,430
there's also a lot of quite cryptic
information available so what we gonna

22
00:01:44,430 --> 00:01:47,500
do is we're gonna start by checking out
some links that are used for it when

23
00:01:47,500 --> 00:01:51,360
starting out with tkinter and this will all be
available in the Resources section of

24
00:01:51,360 --> 00:01:54,500
the video as well by now you should
probably have the Python standard

25
00:01:54,500 --> 00:01:59,080
library link bookmarked if you
haven't I suggest you do that and what I'm going

26
00:01:59,080 --> 00:02:05,950
to do is take you their and the main access area is docs.python.org

27
00:02:05,950 --> 00:02:10,289
but you can see here we are in the sub folder for tk.html which is the course

28
00:02:10,289 --> 00:02:15,040
discussion about the graphical user
interfaces with TK and one of yhe first

29
00:02:15,040 --> 00:02:17,760
things that we notice when we got here was
it

30
00:02:17,760 --> 00:02:21,200
the start talking about alternative
strait away and doesn't give you a lot of confidence

31
00:02:21,200 --> 00:02:26,640
but really I think that's more an unfortunate phrasing rather than a

32
00:02:26,640 --> 00:02:31,950
deliberate criticism tkinter because they have been embedded to Python so they got

33
00:02:31,950 --> 00:02:35,580
some confidence in how robust and
platform-independent it is for those

34
00:02:35,580 --> 00:02:40,420
reasons that's one site we suggest you go
to some good information in their there's also another

35
00:02:40,420 --> 00:02:46,640
link and again these links will be in
the Resources section now if

36
00:02:46,640 --> 00:02:50,460
you're creating tkinter UI this is a
quite a useful site it's really short

37
00:02:50,460 --> 00:02:54,810
in code examples but what it does do well
is describing the various features of

38
00:02:54,810 --> 00:02:58,760
TK and the individual widgets do make
sure you check that it's really going to be

39
00:02:58,760 --> 00:03:03,930
worth while for you to have a look at that and
tk docs is another one second to last link

40
00:03:03,930 --> 00:03:07,420
I want to show you tkdocs.com
as you can see there on the screen

41
00:03:07,420 --> 00:03:11,810
this got a really good tutorial section and you know it's got examples

42
00:03:11,810 --> 00:03:16,390
in TCL Ruby Pearl and Python so if you get
stuck trying to use a particular widget

43
00:03:16,390 --> 00:03:21,150
then the tutorials in this
section they will be enough to get

44
00:03:21,150 --> 00:03:23,770
going so of course you can
always ask questions on here as well

45
00:03:23,770 --> 00:03:27,150
and we will get back to you and try to
help you out but there's another option there

46
00:03:27,150 --> 00:03:30,010
when you actually searching for
information and lastly the last thing link

47
00:03:30,010 --> 00:03:35,930
I want to show you now is the Wikipedia entry so that can be quite useful to look at as well their is the link on the screen

48
00:03:35,930 --> 00:03:40,450
and that can be useful just to give you a brief
history of TK if you are into that sort of

49
00:03:40,450 --> 00:03:45,510
thing and how it really developed
initially let's go back now and start putting some code

50
00:03:45,510 --> 00:03:51,230
together so we can start our introduction
by making sure that tkinter is

51
00:03:51,230 --> 00:03:55,290
correctly installed and working with this version of Python whichever

52
00:03:55,290 --> 00:04:02,080
version you are running..... see that's come up OK and then we

53
00:04:02,080 --> 00:04:16,050
can do a print.....

54
00:04:16,050 --> 00:04:21,170
.....

55
00:04:21,170 --> 00:04:26,910
.....so that will pop

56
00:04:26,910 --> 00:04:30,450
out a little gui so if you follow the
Python instructions at the start of

57
00:04:30,450 --> 00:04:35,020
this course you should see either a version
8.5 or 8.6 pop up as well as a small

58
00:04:35,020 --> 00:04:40,410
window that we've added a code to do on line 6 and we just run this to make sure it does

59
00:04:40,410 --> 00:04:48,330
work 8.5 and let me bring this to
the middle there now just open up a

60
00:04:48,330 --> 00:04:55,050
little bit you can see their that's working quite nicely its got a little Click Me! button and a quite button and that's how it looks on

61
00:04:55,050 --> 00:04:58,990
a Mac but if you're running on Linux or
are running on a Windows machine you'll see

62
00:04:58,990 --> 00:05:04,700
a slightly different look and feel on
your version then click on click me you can see how its

63
00:05:04,700 --> 00:05:08,130
putting the double square brackets around it when
I click just to confirm that it's

64
00:05:08,130 --> 00:05:13,180
actually doing something and click on quit
as well so tk version 8.6 is also

65
00:05:13,180 --> 00:05:16,970
available for Python two if your working
with Python 2 but the

66
00:05:16,970 --> 00:05:18,490
module name has a capital T

67
00:05:18,490 --> 00:05:23,230
now a useful technique that you can use to
cater for both versions is an attempt to

68
00:05:23,230 --> 00:05:27,830
or to attempt an operation for your main
version and trap an exception and

69
00:05:27,830 --> 00:05:31,510
add the corresponding code for the other
version so we're gonna be looking at

70
00:05:31,510 --> 00:05:36,270
exceptions in detail later but here is one now that you can case

71
00:05:36,270 --> 00:05:39,480
further you might find interesting with
if you want to check out tkinter with

72
00:05:39,480 --> 00:05:44,990
Python 2 so you go about doing that
as follows what we do is we wrapped the

73
00:05:44,990 --> 00:05:57,110
import around a try so....

74
00:05:57,110 --> 00:06:01,110
...which essentially would mean that you running Python 2 at that point so that's the

75
00:06:01,110 --> 00:06:08,330
case then put import....noting that its the same as the

76
00:06:08,330 --> 00:06:13,380
module name on line 2 and then at that point
we should find now the code works correctly

77
00:06:13,380 --> 00:06:17,850
so you can see what its doing now it's
trying to import Tkinter on Python 3

78
00:06:17,850 --> 00:06:21,920
that import should work and
therefore the accept line won't be

79
00:06:21,920 --> 00:06:27,160
processed and it will come down straight
to line 6 but if you run this on Python 2 the

80
00:06:27,160 --> 00:06:32,770
code on line 2 will fail and it will come to
line 4 and I mentioned that tkinter had

81
00:06:32,770 --> 00:06:37,760
to be an uppercase T we unable it so that
we can actually refer to it as a

82
00:06:37,760 --> 00:06:41,820
lowercase T and so then we should be
able to run and again will just confirm this

83
00:06:41,820 --> 00:06:53,680
runs and for some reason I'm not
sure why the GUI a screen is not coming

84
00:06:53,680 --> 00:07:00,360
through so if I just go through and delete the code temporarily run that

85
00:07:00,360 --> 00:07:06,620
again not sure why but the second time
we are running this we are getting a bit of a problem so what

86
00:07:06,620 --> 00:07:12,650
I'm going to do is to put those changes back in
and close down and restart

87
00:07:12,650 --> 00:07:20,920
IntelliJ ok so it started up again

88
00:07:20,920 --> 00:07:24,660
might have something to do with the Mac
platform that's doing that because I would

89
00:07:24,660 --> 00:07:28,850
have thought that it should just working
again will open up tkinterdemo again

90
00:07:28,850 --> 00:07:33,300
and we're going to leave in the code
with the try except

91
00:07:33,300 --> 00:07:44,230
and see whether it works again so that's weird I'm not sure we aren't getting that little pop up window I'm sure that the code

92
00:07:44,230 --> 00:07:47,920
is ok so what I'm going to do is just continue
and will add another way to open a

93
00:07:47,920 --> 00:07:59,240
window and just to see whether if it works
so type....

94
00:07:59,240 --> 00:08:29,450
.....

95
00:08:29,450 --> 00:08:34,929
.....if we do that we should find
this doesn't work so it exited and

96
00:08:34,929 --> 00:08:37,760
nothing's happened and the reason in
this particular case it hasn't worked is

97
00:08:37,760 --> 00:08:42,980
what we need to do is in this scenario
is we need to pass control over to Tk by

98
00:08:42,980 --> 00:08:47,060
calling the main method on our top
window because main method handles the

99
00:08:47,060 --> 00:08:51,550
event processing that the GUI needs in order to
function so we would actually need to

100
00:08:51,550 --> 00:08:56,410
add this code....

101
00:08:56,410 --> 00:09:01,500
and by doing that we've now pass control over
to Tk and let it do the works so if we run

102
00:09:01,500 --> 00:09:07,920
that we should get to see that it works
and there's the Windows so I'm just wondering

103
00:09:07,920 --> 00:09:11,030
whether the other window was actually
there as well so I'm gonna close that window and

104
00:09:11,030 --> 00:09:17,340
then now and let's go back to the
code again and run that again and

105
00:09:17,340 --> 00:09:21,550
and now minimize it again the windows was there
so probably that's what was

106
00:09:21,550 --> 00:09:24,580
happening along for some reason it's
because I'm running this on full screen

107
00:09:24,580 --> 00:09:28,210
when I'm recording the videos were not seeing the
whole screen but you can see that clearly

108
00:09:28,210 --> 00:09:32,230
we've got the main loop their but also the
other thing to note is the program

109
00:09:32,230 --> 00:09:35,540
still running but the program hasn't
completed it hasn't come back and sort of said

110
00:09:35,540 --> 00:09:39,930
program exited with condition 0
whatever it normally comes up with

111
00:09:39,930 --> 00:09:45,360
go back to their and close this down you will notice that processes has finished just very quickly what

112
00:09:45,360 --> 00:09:50,340
I'll do is undo these changes and come back and put in the other

113
00:09:50,340 --> 00:09:57,500
code that we had in before the
Tkinter.....to see whether

114
00:09:57,500 --> 00:09:59,510
it was just a case of the window being
hidden

115
00:09:59,510 --> 00:10:05,490
before when we are running it because that code should work so we run that again you don't see the code but if we minimize

116
00:10:05,490 --> 00:10:09,900
and there's our annoying little window
that is hidden from the backgrounds so

117
00:10:09,900 --> 00:10:14,050
not sure that's a feature of MAC OSX what because obviously the first

118
00:10:14,050 --> 00:10:17,680
time I run this it actually popped up
over the top of IntelliJ and then after

119
00:10:17,680 --> 00:10:24,570
that it didn't so I'm going to quite out of that and get the code back again and we can continue on ok so just undo that

120
00:10:24,570 --> 00:10:29,190
and put the original code back in there so
you can see what that code their did and it

121
00:10:29,190 --> 00:10:32,950
actually popped up that little window
the titles is what appeared on the top of

122
00:10:32,950 --> 00:10:38,980
the screen and the geometry was the size
of the window in this case 640 pixels wide

123
00:10:38,980 --> 00:10:44,010
by 480 pixels down and it's probably
interesting there that's a little bit

124
00:10:44,010 --> 00:10:48,620
unusual is the geometries using a string
not sort of passing numbers you think

125
00:10:48,620 --> 00:10:53,580
normally when you sending a resolution
and certainly if you've use other GUIs in the past done you

126
00:10:53,580 --> 00:10:57,090
would pass a number of some sort of
number maybe a float or certainly an

127
00:10:57,090 --> 00:11:01,500
integer to specify the width and the height but in this case its actually a string

128
00:11:01,500 --> 00:11:04,580
that we are passing so the geometry
method expect a string containing

129
00:11:04,580 --> 00:11:10,830
four components so we got 2 in it at the moment so
we got the width the height but its also we

130
00:11:10,830 --> 00:11:14,540
can also specify the left and the top
offsets from the edge of the screen now

131
00:11:14,540 --> 00:11:18,710
the width and height are separated by x as you
saw and really look like

132
00:11:18,710 --> 00:11:23,390
the normal way of expressing screen resolution you
normally talk in these terms 640 by 480 but the

133
00:11:23,390 --> 00:11:27,710
2 offset are separate from the size by each other by using either plus or minus

134
00:11:27,710 --> 00:11:32,930
and I'll just show you what I mean by
adding that so put....

135
00:11:32,930 --> 00:11:38,860
..as an example there so the
windows same height but is now 8 pixels in from the

136
00:11:38,860 --> 00:11:44,600
left edge of the screen and 400 pixels
down now if you used minus instead of + we get 8

137
00:11:44,600 --> 00:11:48,660
pixels in from the right edge of the
screen and 400 pixels up from the bottom

138
00:11:48,660 --> 00:11:53,290
and you can mix plus and minus as specified from the
position of the 4 edges

139
00:11:53,290 --> 00:11:59,940
run this again to confirm it works and minimize again there is our
window that's down further you can see now

140
00:11:59,940 --> 00:12:03,000
clearly it listed pixels here to the
left hand side which before was

141
00:12:03,000 --> 00:12:08,120
flushed over like that we now got those pixels over their now this is a good spot to

142
00:12:08,120 --> 00:12:11,810
finish this video because what we need
to start talking about next is geometry

143
00:12:11,810 --> 00:12:17,540
managers and this is where you can use to set up the application widgets

144
00:12:17,540 --> 00:12:21,910
that can be placed into these areas or
the geometry managers and the probably

145
00:12:21,910 --> 00:12:24,810
the most useful ones gonna be the grid
manager but in any event I'll start

146
00:12:24,810 --> 00:12:27,980
talking about that and showing you some
examples of how that works in the next video