[MUSIC]. 
In this video we are going to talk about 
SimpleGUI. 
SimpleGUI is the python margin and code 
sculptor that allows us to build 
interactive applications. 
This is really the magic in code 
sculptor, without it we couldn't build 
these interesting games that we are going 
to build in this class. 
Now another way I could have title this 
is Frustrations Over My Summer Vacation. 
So I told you that I spent my summer 
building Code Sculptor. 
Well a lot of that was building 
SimpleGUI, and SimpleGUI is actually 
written in JavaScript allowing us to use 
the web browser in the way that we are. 
Now this is great for you. 
 >> It was great for me, too. 
 >> Why? 
Well, JavaScript is just a. 
 >> Fantastic language. 
 >> There is a good reason why we're 
teaching this class in Python and not 
JavaScript. 
With that, I want to walk you through 
some SimpleGUI applications, I want to 
show you how to find out more about 
SimpleGUI and get you started. 
First, I just want to walk you through 
the example application at 
codesculptor.org. 
So when you first go the site, this is 
what you see. 
This is a very SimpleGUI program, so 
let's run it. 
When we run it, another window pops up 
'cause I'm going to call this window the 
frame. 
And the frame has a couple of different 
areas to it. 
First, we have the control area. 
And the control area is where we have 
buttons, text inputs, and there are even 
text labels that allow you to print 
status information from your application 
back to the frame. 
In this application, there's just this 
one button that says click me, so let's 
click it. 
And you'll notice over on the right hand 
side, which is the canvas, the message 
changed from welcome to good job. 
Now the canvas, is where all the 
interesting things are going to happen in 
your program. 
This is where we can draw images, shapes, 
text, and we can even respond to keyboard 
and mouse events over in the canvas. 
So, the canvas is the interesting part of 
the frame. 
And in the final area of the frame is the 
status area, the status area gives us 
feedback about keyboard and mouse events 
that happen in the canvas and this is 
critical to making the bugging a little 
bit simpler in SimpleGUI. 
So now you seen the basic application on 
this elements. 
So this simple application actually has 
two event handlers. 
It has the click handler that registered 
to execute in response to button presses, 
it has a draw handler that registered 
with the framed actually draw the canvas. 
Okay, an what the click handler does is 
it simply changes the message that's 
going to be drawn, and the draw handler 
draws that message. 
So, how do I learn more about how all 
this works? 
Well, there's a nice link over here to 
documentation. 
We should use it. 
The documentation has three tabs, 
SimpleGUI, Python an the editor. 
We're going to focus on Simple GUI today. 
Okay, the frame, only has a few different 
things you can do to it. 
You can create a frame. 
You can set the background color of the 
frame so it doesn't always have to be 
black, and then you can start the frame. 
If you don't actually call frame.start 
here okay, then the frame is never 
going to actually do anything and you're 
not going to have any interactivity. 
There are also a bunch of control objects 
in SimpleGUI. 
As I said, you can have buttons, text 
inputs, and text labels in the control 
area. 
And this talks about how to register 
their handler, their handlers and how to 
actually write a, or create a text label 
and so on. 
Also the canvas, I can register event 
handlers to respond to key presses, key 
releases, mouse button clicks, mouse, 
mouse dragging events. 
I can also change the text labels that I 
created before. 
The canvas is the most interesting part. 
I can do a lot of stuff to the canvas. 
I need to set a draw handler if I 
actually want to draw anything on to the 
canvas and that draw handler can then 
draw text, lines, multi-lines, or 
polylines, polygons, circles. 
You can even draw images into the canvas. 
We've seen timers before, I can simply 
create a timer but I have to start if 
before it does anything, I can also stop 
the timer if I don't want it to keep 
going any more. 
Great, I am going to ignore images for 
the moment because we actually need to 
get a working can this before we can do 
images and that's further little later in 
the course and we can also do sounds. 
Now, sounds we are not going to use for 
quite a while in the course so I also 
going to ignore that, right but that's 
the basics of the SimpleGUI. 
Alright, now I'm going to talk about the 
program structure that we are going to 
advocate, you use for a SimpleGUI 
Program. 
And if you follow thsi structire, we 
think that your programs are going to, 
you're going to find that your SimpleGUI 
programs are easier to write. 
There's basically a seven step process, 
first. 
You should define your global , this is 
basically the state in your program. 
So the message variable is a global 
variable in the example program that was 
just read by the draw handler and written 
by the button handler. 
After that you define any helper 
functions that you need for your program. 
Your helper functions now are things that 
perhaps you need to use in more than one 
event handler. 
So they're not event handlers, rather 
they're functions that are used to help 
event handlers accomplish a particular 
task. 
Then I am going to define any classes 
that I need in my program and we have not 
talked about, not talked about classes we 
will get to that later in the course, 
right? 
I just want to put it here as a place 
holder, so that when you see them you 
know where they should go and at this 
point we are now ready to define our 
event handlers. 
And by doing it this way, your event 
handlers now can easily use the globals, 
helper functions and classes that you've 
defined in your program. 
At that point, we're now ready to create 
a frame. 
And once we have our frame, we can 
register all of the event handlers that 
we need. 
And finally, all we have to do is start a 
frame and any timers that we have in the 
program, right? 
Now, by following this seven set process 
we think that your programs will be 
easier to write, maintain, and 
understand. 
And if you and everyone in the class 
follows this seven step process you will 
also be able to understand other people's 
programs with you see them. 
So please, we strongly recommended that 
you do follow this process. 
You use this as a checklist. 
You look at your programs and you go down 
the list, and you either say, hey I have 
my globals or I don’t need any in this, 
this program, and I have my helper 
functions, or I don’t need any and so on. 
And if you do that, you will have a much 
easier time in generating correct working 
SimpleGUI programs. 
Let's use this structure to write a 
SimpleGUI program. 
Here I have the template, alright? 
The first thing that I'm going to do, is 
make sure that I import the simple gui 
module. 
If I don't import the SimpleGUI module, I 
can't do any of this. 
Now, we're going to define a global 
variable. 
Let's define an a global variable called 
counter, and let's initialize it to zero. 
Next, I want to define any helper 
functions I might have. 
I don't actually need a helper function 
for this program, but I'm going to define 
one anyway. 
This helper function is simply going to 
increment that global counter variable. 
Now, I want to define an event handler, 
I'm going to call it tick again 'cause 
I'm going to run it on a timer, I'm 
going to call increment and then I'm 
going to print counter. 
So here we go, I have my helper function, 
I have my event handler, let's run our 
program, mm-hm, nothing happens, alright. 
Well we knew that, right? 
nothing's going to happen until we 
actually registered the event handler and 
start the timer and so on. 
So, let's create a frame. 
Now, to create a frame, I call 
simplegui.create_frame. 
Okay, now I have a frame, let's register 
my event handler. 
I'm going to create a timer. 
I want it to run every second, and I want 
it to run the tick handler. 
Now, am I ready to run? 
Let's try it. 
Oop, well, a frame popped up, but 
nothing's actually printing over here, 
the frame background is white. 
This is an indication that I forgot to 
start everything which also should have 
been obvious because following the 
program structure, I have my nice little 
comment here, I didn't follow my 
checklist. 
So let's do frame dot start, timer dot 
start. 
Now, my program should work I hope. 
And here we go. 
Oh, okay? 
So, I got an exception, name error, name 
incremen is not defined because I meant 
increment. 
Let's fix that, run it again, great. 
Now, ticks are happening over here, I 
have my frame, the canvas background is 
actually black, everything seems to be 
working. 
Now, this, isn't that great of a program, 
because I don't actually need the frame, 
right? 
Things are just ticking along, over here, 
on the right-hand side. 
Let's fix that. 
Well, eight[INAUDIBLE] still ticking, I 
better reset here. 
Okay, let's add a button, 
frame.add_button. 
And let's call it, click me, and let's 
register it with the tick event handler. 
Now, this is not normally what you would 
do, you do not usually register the same 
handler with multiple events. 
But, for this illustration purposes I'm 
going to do it anyway. 
So now, I run over here, and you can see 
that I'm ticking along here, once per 
second, but now I have this button. 
And so, I can click the button, and I can 
make it print faster, so basically, I can 
make it go faster than once per second by 
clicking. 
And that should make sense, right? 
Because when I click, it's calling the 
tick event handler, which increments the 
counter and then prints it, okay, so 
things will print faster. 
Now, that's not really, all that 
interesting. 
Let's, instead, register a function 
called, buttonpress. 
And, let's make this reset the counter to 
zero. 
So what's going to to happen now? 
Again I have my frame, things are ticking 
along nicely over here, when I click it 
now it resets the counter. 
So, the counter goes back to zero and 
next time the tick handler happens it 
increments it and so it prints as one and 
keeps going. 
And so, I can reset it as much as I would 
like, but this, now that's a much more 
interesting program. 
I think SimpleGUI was definitely worth 
the effort that it took to build it. 
SimpleGUI is one of the aspects of codes 
culture that just makes it so much fun to 
use. 
I hope that as the class goes on you'll, 
you'll agree with me on that one. 
Alrght, even now, you should be able to 
go through the example programs that we 
talked about. 
Go through the documentation, and I think 
you can build some neat little SimpleGUI 
programs. 
So, enjoy.