SimpleGUI

Loading...

En provenance du cours de Rice University

An Introduction to Interactive Programming in Python (Part 1)

1681 notes

Rice University

An Introduction to Interactive Programming in Python (Part 1)

1681 notes

Cours 1 sur 7 dans Specialization Fundamentals of Computing

This two-part course is designed to help students with very little or no computing background learn the basics of building simple interactive applications. Our language of choice, Python, is an easy-to learn, high-level computer language that is used in many of the computational courses offered on Coursera. To make learning Python easy, we have developed a new browser-based programming environment that makes developing interactive applications in Python simple. These applications will involve windows whose contents are graphical and respond to buttons, the keyboard and the mouse. In part 1 of this course, we will introduce the basic elements of programming (such as expressions, conditionals, and functions) and then use these elements to create simple interactive applications such as a digital stopwatch. Part 1 of this class will culminate in building a version of the classic arcade game "Pong".

À partir de la leçon

Week 2 - Event-driven programming, local/global variables

Learn the basics of event-driven programming, understand difference between local and global variables, create an interactive program that plays a simple guessing game

Event-Driven Programming13:14

Local vs. Global Variables11:23

Rencontrer les enseignants

John Greiner
Lecturer
Department of Computer Science
Stephen Wong
Lecturer
Computer Science
Scott Rixner
Professor
Computer Science
Joe Warren
Professor
Computer Science

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

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2018 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play