[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.
