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".
Interactive Drawing
Loading...
From the course by Rice University
An Introduction to Interactive Programming in Python (Part 1)
1805 ratings
From the lesson
Week 3 - Canvas, drawing, timers
Create a canvas in Python, learn how to draw on the canvas, create a digital stopwatch
Meet the Instructors
John GreinerLecturer
Department of Computer Science
Stephen WongLecturer
Computer Science
Scott RixnerProfessor
Computer Science
Joe WarrenProfessor
Computer Science
Welcome back to class. In the first two lectures this week is me
kinda talk a little bit about how to draw on the canvas, canvas coordinates, things
like that. Scott then did a very nice example
oriented, went into a fair bit of detail about doing string processing.
Particularly he built some functions that converted decimal numbers into dollars and
cents. That's actually a very useful skill for
doing your stopwatch. What I'm going to do is I'm going to
actually just take that, Scott's method, and actually just turn it into an
interactive application. I'm going to add an input field where you
can enter a number. And then we're gonna actually print that
number out on the canvas in terms of dollars and cents.
I'm going to try to do this in one take. If I mess up I'll just keep going.
You kind of see my thought processes as I go through actually building this
application. So let's take a crack at it.
So let's build an interactive application out of Scott's code.
So the first thing you should do when you are working with anybody else's code is
just take a couple of minutes to look at over and make sure you understand what
it's doing. So here we see is Scott's brought two
functions. There is a function convert and a function
convert units. I mean the key one here is convert.
It says it converts some floating point number into xx dollars and yy cents. So
you can see down below here where he's got some test calls, he's taking this floating
point number and trying to treating the kind of the two digits to the right of the
decimal point as being cents and then the whole part corresponds to dollars.
So let's just run it to make sure it works and it looks like it's working here.
So notice it takes its floating point number and converts it into a string.
So let's go through and just start filling out interactive application.
Now what would that application look like? What I want to do is I want to open a
frame up, and in that frame I want to draw on the canvas this xx dollars and yy
cents. Where do I get the number from?
I'm going to add an input field that lets me enter that decimal number, and then
I'll automatically draw that number over on the canvas as a dollar and cent form.
So, let's just see if we can do that. So the first thing is, I'm going to get a
little working space here. So let's go through and kill the test code
off. We'll do our own testing a little bit
later on. And the second thing is, Scott has his
functions here. Let's use the feature called code folding.
I'm gonna click right outside statement two, and it's going to fold up the body of
convert units. I'm going to click here outside nine.
It's going to fold up the body on convert. So now we can start writing our own code.
So what I'd like to do, is I'd like to kind of enter in some comments first to
kind of guide me in terms of what I want to do and then I fill in the rest of the
code kind of a little bit at a time. So the first thing is what is this going
to be. This is going to be an interactive
application to convert a float into dollars and cents.
Alright how can we do that? Well, we have our two helper functions
here. Now, for our application, we're going to
need, After helper functions, we're going to
need to do define, I guess, a draw handler.
We'll certainly need that. We're also going to need to define an
input field handler. We're going to need to create a frame.
We're going to need to register, the event handlers.
The filing we're going to do is we're going to need to start the frame.
So lets do the things we kinda know how to do very easily first.
Let's go ahead and create the frame and start it.
So we'll say frame is equal to simplegui.create<u>frame().</u>
We'll call it, let's call it converter. And lets say the width, let's make the
width 300 by 200. Then what do we need to do?
Let's start the frame up to make sure everything's okay.
So lets say frame.start(). And lets just run that real quick to make
sure I didn't make any silly mistakes. So looks like I did,
Saying simplegui is not defined. That's a classic mistake.
What do I need to do? Need to go up here and say import
simplegui.. So why don't I test it very quickly.
It's always a good idea to make sure the code you have is working and not far from
a working version. So if it stops working you know exactly
where you introduce the error. Alright, let's test it again.
Another silly mistake. Let's test it again.
Alright, a little bit better. Got our frame open.
Lets see, it's 300 pixels by 200 pixels, that's good.
Alright, let's consider what do we need to do next.
Lets see if we can get something drawing in the, on the canvas.
We're not going to do the input field just less.
So let's, let's just try to just draw something onto canvas, make sure that's
working. And then we'll kind of build the rest of
the program. So lets see.
So let's go back, and lets define the draw handle.
We'll call it, draw. And lets see, it takes a canvas.
And what do we want to draw? Well, I love to say hello.
So lets say, draw text, and we'll draw hello.
And let's put it in, what the heck, 100, 100 and make the font size 24, make the
color white. And then what do you need to do, well, we
need to register the draw handler, so we can down here, say
frame.set<u>draw<u>handler(). Give a draw.</u></u>
So I'll just run that. See if I did a good job getting it up.
So looks good. We have hello being drawn in the middle of
our canvas. So what next?
Well, we could do one of two things I guess.
We could I guess we could add an input field here and start trying to read in a
number and then print that number. But let's, let's just break that into two
steps. Let's go a little simpler.
Let's define a kind of constant value. We want to draw in the middle of the
canvas. And get that working with Scott's code.
And the last thing we'll do is add an end into the input field that actually
modifies that value. So I'm going to break that task into
simpler tasks. So I'm going to go through and define a
global value. Let's just say value and we'll say it's, I
don't know, $3.12 and let's go through and get that drawing inside the draw handler,
so how could I do that? I could take value,
Turn that into a string. And I think I would get 3.12 drawn on the
canvas. Let's try that, and see what happens.
Good, good, good, okay. So, values a number.
I stored it in the global variable and now I've actually converted a string and drawn
it on a canvas. Now there is a reason I made it a global
variable. Just wasn't because I wanted to make
everything become variable because I'm going to use that global variable now
inside the input handler. And I'm going to actually essentially
convert whatever I read into the value for that global variable.
So let's go through now and actually go through and do kind of the next step.
Let's go ahead and put the input. Go ahead and put in the thing that
actually recognizes the, the number we want draw.
So let's say. Define input<u>handler What's it take, it's,</u>
it's given some text. What do we need to do? We want to take
that text and we want to convert it onto a floating point number that we can then
draw out on the canvas. So we can say, maybe value = float(text).
So, if we give something that looks like a floating point numbers, flow will convert
floating point number and this is one thing we need to do here, because float is
a global variable. We need to say global value because we're
going to actually assign to and try to change it.
Hm, oh yeah, one more thing, we need to actually go through register that handle.
So since that frame.add<u>input oh, you know what, let's just go in the docs and see</u>
what parameters it takes. I always mess this up.
So let's be a little proactive here and go.
So here we are. Control objects, edit input field.
What does it want? It wants a label, it wants the input
handler and it wants a width, I think I can do that.
So let's go down here, what's the label? Let's say enter value, the handler's going
to be input, handler the width, let's make it 100.
Check our code over real quick. I think that's good.
Let's try that and see what happens. What did I mess up here?
Says, Define input handler oh, what did I do?
I said, Define. Now usually I make my classical mistake of
forgetting this colon here. But I'll tell you my trick about how I
always remember the colon. I had a colonoscopy a year ago.
And I can guarantee you that after you have a colonoscopy you will never forget
the colon. So if you think that was corny just
remember that joke and you'll remember the colon too.
Alright, lets go back and finish this off here.
So I'm going to run this. Okay looking good, hold your breath.
Let's type in a value. Let's type in 1.11 and enter excellent.
Let's try it a couple more maybe 0.01 enter.
Okay. We're actually getting very close here.
Because now we just need to rely on Scott. Let's go up here and look.
I have a value. I think it's in, ways, it's in the form
that Scott expects. I just convert it into a string.
But Scott has this very nice function that kind of converts it into dollars and
cents. So let's just crank it out and see what it
does. So let's say, convert.
We're going to run it. And actually surprisingly successful.
We see three dollars and twelve something kind of, kind of ran off the canvas.
So, what we're going to do is kind of pretty this up and do more testing to make
sure it works. So lets go ahead and get it prettied up
and then we'll do a few more test cases to make sure things are working correctly.
So lets go through and probably what we're going to do is we're going to need to
increase the size of the canvas. Let's make it 400.
And lets also maybe move things over to the right a little bit.
Maybe 60. I like, I thought it was a little too
high, let's move it down, so let's just adjust a few of those numbers and see what
we get. Oh, look at that, $3.12 right on the dot.
So I like the way that's laid out. So let's just do a few more tests to make
sure everything is fine. So let's go through and just put in say I
don't know, put in 0.10. Oh. What am I doing?
I don't need to change that do I? No, no, no, no, no, no. What's the whole
point? How do I test it?
Well, let's go and just run the program. Okay.
Let's go down here. How can we change it?
Don't change a constant there. We can change it in here.
We can say 0.10. Ten cents, looks good.
Let's do 10.32. Looks good.
Let's do 7.00. We're just testing Scott's out more.
So here's what you can see. You've kind of seen kind of an overview of
how I built this application here. And its it's not too hard.
The critical thing is to be patient, be systematic, test as you go.
If you screw up, just stop, think for a second.
Back up to where it was working. Go over the steps that you just did.
There's probably an error where you just in, you introduced something that made the
program not work. It's not really not that hard to get this
going. And this is really almost what you're
going to be doing in your stopwatch projects.
So I'll see you back in a little bit. And I'll give you a little more, a little
more of a walk through about doing stopwatch.
But I think this is kind of enough to get you going fairly well on doing the mini
project. See you in a bit.
Explore our Catalog
Join for free and get personalized recommendations, updates and offers.
Coursera provides universal access to the world’s best education,
partnering with top universities and organizations to offer courses online.
© 2018 Coursera Inc. All rights reserved.
