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.
