WEBVTT

00:00:01.960 --> 00:00:07.290
so in this video we are going to start talking
about the Tkinter module now some

00:00:07.290 --> 00:00:13.530
people will pronounce this as Tkinter but is spelt T-K-I-N-T-E-R so I'm gonna

00:00:13.530 --> 00:00:18.220
pronounce this Tkinter now this module
and Python provides access to the TK

00:00:18.220 --> 00:00:23.470
widget tool kit and really what that means
is that it allows gui programs to be created

00:00:23.470 --> 00:00:28.270
now the TK toolkit was developed to work with
scripting language called TCL and the

00:00:28.270 --> 00:00:33.570
tkinter Python binding works by
actively sending TCL code to a TCL

00:00:33.570 --> 00:00:38.019
interpreter but that's actually embedded
in the Python interpreters so we don't need to load any

00:00:38.019 --> 00:00:43.190
thing extra now there are other graphic
libraries available but tkinter

00:00:43.190 --> 00:00:47.370
has the advantage that it's part of the
standard Python language and part of

00:00:47.370 --> 00:00:50.640
and its therefore
available without installing anything

00:00:50.640 --> 00:00:54.929
else which is pretty handy but also has
a disadvantage in that the documentation

00:00:54.929 --> 00:01:01.219
isn't brilliant and the Python
documentation itself even states that

00:01:01.219 --> 00:01:06.399
the documentation isn't brilliant but that situation does
seem to have improved and there's been an

00:01:06.399 --> 00:01:11.880
increased interest in tk with new versions
for both it and TCL released in 2015

00:01:11.880 --> 00:01:16.579
and as you search the internet for information
on TK you might find references to it

00:01:16.579 --> 00:01:22.450
looking dated the but Tkinter version 8.5
which was released in 2015 has added

00:01:22.450 --> 00:01:26.159
something interesting called themed
widgets and they provide a native

00:01:26.159 --> 00:01:29.820
look and feel for each operating system
and I think that's both JP and myself

00:01:29.820 --> 00:01:32.909
think that seriously cool and the good
thing is that those examples are some

00:01:32.909 --> 00:01:36.960
nice interface is produced with it if
you do a bit of searching with that said

00:01:36.960 --> 00:01:41.070
there's also a lot of quite cryptic
information available so what we gonna

00:01:41.070 --> 00:01:44.140
do is we're gonna start by checking out
some links that are used for it when

00:01:44.140 --> 00:01:48.000
starting out with tkinter and this will all be
available in the Resources section of

00:01:48.000 --> 00:01:51.149
the video as well by now you should
probably have the Python standard

00:01:51.149 --> 00:01:55.729
library link bookmarked if you
haven't I suggest you do that and what I'm going

00:01:55.729 --> 00:02:02.590
to do is take you their and the main access area is docs.python.org

00:02:02.590 --> 00:02:06.939
but you can see here we are in the sub folder for tk.html which is the course

00:02:06.939 --> 00:02:11.680
discussion about the graphical user
interfaces with TK and one of yhe first

00:02:11.680 --> 00:02:14.400
things that we notice when we got here was
it

00:02:14.400 --> 00:02:17.849
the start talking about alternative
strait away and doesn't give you a lot of confidence

00:02:17.849 --> 00:02:23.280
but really I think that's more an unfortunate phrasing rather than a

00:02:23.280 --> 00:02:28.590
deliberate criticism tkinter because they have been embedded to Python so they got

00:02:28.590 --> 00:02:32.220
some confidence in how robust and
platform-independent it is for those

00:02:32.220 --> 00:02:37.069
reasons that's one site we suggest you go
to some good information in their there's also another

00:02:37.069 --> 00:02:43.280
link and again these links will be in
the Resources section now if

00:02:43.280 --> 00:02:47.109
you're creating tkinter UI this is a
quite a useful site it's really short

00:02:47.109 --> 00:02:51.459
in code examples but what it does do well
is describing the various features of

00:02:51.459 --> 00:02:55.400
TK and the individual widgets do make
sure you check that it's really going to be

00:02:55.400 --> 00:03:00.579
worth while for you to have a look at that and
tk docs is another one second to last link

00:03:00.579 --> 00:03:04.069
I want to show you tkdocs.com
as you can see there on the screen

00:03:04.069 --> 00:03:08.450
this got a really good tutorial section and you know it's got examples

00:03:08.450 --> 00:03:13.030
in TCL Ruby Pearl and Python so if you get
stuck trying to use a particular widget

00:03:13.030 --> 00:03:17.799
then the tutorials in this
section they will be enough to get

00:03:17.799 --> 00:03:20.419
going so of course you can
always ask questions on here as well

00:03:20.419 --> 00:03:23.790
and we will get back to you and try to
help you out but there's another option there

00:03:23.790 --> 00:03:26.650
when you actually searching for
information and lastly the last thing link

00:03:26.650 --> 00:03:32.579
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

00:03:32.579 --> 00:03:37.090
and that can be useful just to give you a brief
history of TK if you are into that sort of

00:03:37.090 --> 00:03:42.159
thing and how it really developed
initially let's go back now and start putting some code

00:03:42.159 --> 00:03:47.870
together so we can start our introduction
by making sure that tkinter is

00:03:47.870 --> 00:03:51.930
correctly installed and working with this version of Python whichever

00:03:51.930 --> 00:03:58.729
version you are running..... see that's come up OK and then we

00:03:58.729 --> 00:04:12.699
can do a print.....

00:04:12.699 --> 00:04:17.810
.....

00:04:17.810 --> 00:04:23.550
.....so that will pop

00:04:23.550 --> 00:04:27.090
out a little gui so if you follow the
Python instructions at the start of

00:04:27.090 --> 00:04:31.669
this course you should see either a version
8.5 or 8.6 pop up as well as a small

00:04:31.669 --> 00:04:37.050
window that we've added a code to do on line 6 and we just run this to make sure it does

00:04:37.050 --> 00:04:44.970
work 8.5 and let me bring this to
the middle there now just open up a

00:04:44.970 --> 00:04:51.690
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

00:04:51.690 --> 00:04:55.639
a Mac but if you're running on Linux or
are running on a Windows machine you'll see

00:04:55.639 --> 00:05:01.340
a slightly different look and feel on
your version then click on click me you can see how its

00:05:01.340 --> 00:05:04.770
putting the double square brackets around it when
I click just to confirm that it's

00:05:04.770 --> 00:05:09.820
actually doing something and click on quit
as well so tk version 8.6 is also

00:05:09.820 --> 00:05:13.610
available for Python two if your working
with Python 2 but the

00:05:13.610 --> 00:05:15.130
module name has a capital T

00:05:15.130 --> 00:05:19.870
now a useful technique that you can use to
cater for both versions is an attempt to

00:05:19.870 --> 00:05:24.479
or to attempt an operation for your main
version and trap an exception and

00:05:24.479 --> 00:05:28.150
add the corresponding code for the other
version so we're gonna be looking at

00:05:28.150 --> 00:05:32.910
exceptions in detail later but here is one now that you can case

00:05:32.910 --> 00:05:36.120
further you might find interesting with
if you want to check out tkinter with

00:05:36.120 --> 00:05:41.630
Python 2 so you go about doing that
as follows what we do is we wrapped the

00:05:41.630 --> 00:05:53.750
import around a try so....

00:05:53.750 --> 00:05:57.750
...which essentially would mean that you running Python 2 at that point so that's the

00:05:57.750 --> 00:06:04.970
case then put import....noting that its the same as the

00:06:04.970 --> 00:06:10.020
module name on line 2 and then at that point
we should find now the code works correctly

00:06:10.020 --> 00:06:14.490
so you can see what its doing now it's
trying to import Tkinter on Python 3

00:06:14.490 --> 00:06:18.560
that import should work and
therefore the accept line won't be

00:06:18.560 --> 00:06:23.800
processed and it will come down straight
to line 6 but if you run this on Python 2 the

00:06:23.800 --> 00:06:29.419
code on line 2 will fail and it will come to
line 4 and I mentioned that tkinter had

00:06:29.419 --> 00:06:34.400
to be an uppercase T we unable it so that
we can actually refer to it as a

00:06:34.400 --> 00:06:38.460
lowercase T and so then we should be
able to run and again will just confirm this

00:06:38.460 --> 00:06:50.320
runs and for some reason I'm not
sure why the GUI a screen is not coming

00:06:50.320 --> 00:06:57.000
through so if I just go through and delete the code temporarily run that

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

00:07:03.260 --> 00:07:09.290
I'm going to do is to put those changes back in
and close down and restart

00:07:09.290 --> 00:07:17.560
IntelliJ ok so it started up again

00:07:17.560 --> 00:07:21.300
might have something to do with the Mac
platform that's doing that because I would

00:07:21.300 --> 00:07:25.490
have thought that it should just working
again will open up tkinterdemo again

00:07:25.490 --> 00:07:29.949
and we're going to leave in the code
with the try except

00:07:29.949 --> 00:07:40.870
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

00:07:40.870 --> 00:07:44.569
is ok so what I'm going to do is just continue
and will add another way to open a

00:07:44.569 --> 00:07:55.889
window and just to see whether if it works
so type....

00:07:55.889 --> 00:08:26.099
.....

00:08:26.099 --> 00:08:31.570
.....if we do that we should find
this doesn't work so it exited and

00:08:31.570 --> 00:08:34.409
nothing's happened and the reason in
this particular case it hasn't worked is

00:08:34.409 --> 00:08:39.620
what we need to do is in this scenario
is we need to pass control over to Tk by

00:08:39.620 --> 00:08:43.709
calling the main method on our top
window because main method handles the

00:08:43.709 --> 00:08:48.190
event processing that the GUI needs in order to
function so we would actually need to

00:08:48.190 --> 00:08:53.050
add this code....

00:08:53.050 --> 00:08:58.149
and by doing that we've now pass control over
to Tk and let it do the works so if we run

00:08:58.149 --> 00:09:04.560
that we should get to see that it works
and there's the Windows so I'm just wondering

00:09:04.560 --> 00:09:07.670
whether the other window was actually
there as well so I'm gonna close that window and

00:09:07.670 --> 00:09:13.980
then now and let's go back to the
code again and run that again and

00:09:13.980 --> 00:09:18.190
and now minimize it again the windows was there
so probably that's what was

00:09:18.190 --> 00:09:21.220
happening along for some reason it's
because I'm running this on full screen

00:09:21.220 --> 00:09:24.850
when I'm recording the videos were not seeing the
whole screen but you can see that clearly

00:09:24.850 --> 00:09:28.870
we've got the main loop their but also the
other thing to note is the program

00:09:28.870 --> 00:09:32.180
still running but the program hasn't
completed it hasn't come back and sort of said

00:09:32.180 --> 00:09:36.570
program exited with condition 0
whatever it normally comes up with

00:09:36.570 --> 00:09:42.000
go back to their and close this down you will notice that processes has finished just very quickly what

00:09:42.000 --> 00:09:46.980
I'll do is undo these changes and come back and put in the other

00:09:46.980 --> 00:09:54.140
code that we had in before the
Tkinter.....to see whether

00:09:54.140 --> 00:09:56.150
it was just a case of the window being
hidden

00:09:56.150 --> 00:10:02.130
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

00:10:02.130 --> 00:10:06.540
and there's our annoying little window
that is hidden from the backgrounds so

00:10:06.540 --> 00:10:10.690
not sure that's a feature of MAC OSX what because obviously the first

00:10:10.690 --> 00:10:14.320
time I run this it actually popped up
over the top of IntelliJ and then after

00:10:14.320 --> 00:10:21.210
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

00:10:21.210 --> 00:10:25.830
and put the original code back in there so
you can see what that code their did and it

00:10:25.830 --> 00:10:29.590
actually popped up that little window
the titles is what appeared on the top of

00:10:29.590 --> 00:10:35.620
the screen and the geometry was the size
of the window in this case 640 pixels wide

00:10:35.620 --> 00:10:40.650
by 480 pixels down and it's probably
interesting there that's a little bit

00:10:40.650 --> 00:10:45.260
unusual is the geometries using a string
not sort of passing numbers you think

00:10:45.260 --> 00:10:50.220
normally when you sending a resolution
and certainly if you've use other GUIs in the past done you

00:10:50.220 --> 00:10:53.730
would pass a number of some sort of
number maybe a float or certainly an

00:10:53.730 --> 00:10:58.140
integer to specify the width and the height but in this case its actually a string

00:10:58.140 --> 00:11:01.220
that we are passing so the geometry
method expect a string containing

00:11:01.220 --> 00:11:07.470
four components so we got 2 in it at the moment so
we got the width the height but its also we

00:11:07.470 --> 00:11:11.180
can also specify the left and the top
offsets from the edge of the screen now

00:11:11.180 --> 00:11:15.350
the width and height are separated by x as you
saw and really look like

00:11:15.350 --> 00:11:20.030
the normal way of expressing screen resolution you
normally talk in these terms 640 by 480 but the

00:11:20.030 --> 00:11:24.350
2 offset are separate from the size by each other by using either plus or minus

00:11:24.350 --> 00:11:29.570
and I'll just show you what I mean by
adding that so put....

00:11:29.570 --> 00:11:35.500
..as an example there so the
windows same height but is now 8 pixels in from the

00:11:35.500 --> 00:11:41.240
left edge of the screen and 400 pixels
down now if you used minus instead of + we get 8

00:11:41.240 --> 00:11:45.300
pixels in from the right edge of the
screen and 400 pixels up from the bottom

00:11:45.300 --> 00:11:49.930
and you can mix plus and minus as specified from the
position of the 4 edges

00:11:49.930 --> 00:11:56.580
run this again to confirm it works and minimize again there is our
window that's down further you can see now

00:11:56.580 --> 00:11:59.649
clearly it listed pixels here to the
left hand side which before was

00:11:59.649 --> 00:12:04.760
flushed over like that we now got those pixels over their now this is a good spot to

00:12:04.760 --> 00:12:08.450
finish this video because what we need
to start talking about next is geometry

00:12:08.450 --> 00:12:14.180
managers and this is where you can use to set up the application widgets

00:12:14.180 --> 00:12:18.550
that can be placed into these areas or
the geometry managers and the probably

00:12:18.550 --> 00:12:21.459
the most useful ones gonna be the grid
manager but in any event I'll start

00:12:21.459 --> 00:12:24.620
talking about that and showing you some
examples of how that works in the next video