Module 8 Overview

We continue to work on Chapter 4 during Week 8. (We started on Chapter 4 on Week 7)

Read through this overview with each sub-title.

Practice codes (save into the right folder when prompted)

Complete assignments

Note Updates (since last Module about graphics)

Graphics make programming more fun for many people. We will first introduces a simplified graphics module graphics.py developed by John Zelle for use with his Python Programming book. Updates: Always keep any new files within the same folder where this graphics.py locates.

Note

You will just be a user of the graphics.py code, so you do not need to understand the inner workings! It uses all sorts of features of Python that are way beyond these tutorials. There is no particular need to open graphics.py in the Idle editor.

.

.

Saved Files as Required and Two More from Lab 5

Before we start this Module 8 to continue work on Objects and Graphics (Chapter 4), we need to ensure that we've downloaded and saved SIX .py or .pyw files:

WHAT DO WE HAVE SO FAR? ------ Inside the folder "CS114_Graphics_Files", we have at least SIX files from the textbook (graphics.py, click.py, convert_gui.pyw, futval_graph.py, futval_graph2.py, triangle.pyw), at least TWO files from your last assignments (Lab 5 (chp4 archery & draw line)) during Week 7 about graphics: (archery.py and draw_line.py (or other name as you named for the question 2 of Lab 5))

THEN WHAT TO DO? ------ Open the folder, you should see all EIGHT files listed. Right-click each file's name, click Edit with IDLE --> Edit with IDLE 3.x.x, click Run --> Run Module F5, to see how each file works. You should see graphics show on your screen. We want to learn the purpose of each file and then look inside all file to decode them.

.

.

Code Explanation

1.

Open IDLE (Python Shell 3.x.x.), click File --> Open, Inside the folder "CS114_Graphics_Files", find triangle.pyw file, click Run --> Run Module F5. What graphic will you see?

We will see an empty window, which prompts user to click three points to make a triangle. See screen shots before and after user's input as below:

Let's look at Zelle's textbook Page 104 to understand the codes from triangle.pyw:

 # Get and draw three vertices of triangle p1 = win.getMouse() p1.draw(win) p2 = win.getMouse() p2.draw(win) p3 = win.getMouse() p3.draw(win) # Use Polygon object to draw the triangle triangle = Polygon(p1,p2,p3) triangle.setFill("peachpuff") triangle.setOutline("cyan") triangle.draw(win) 

Now we can try to use these codes to update our archery.pyw from Lab 5 Question 1 by adding a short line (you will try to do this by yourself, we learned from last week) and a triangle (pretend it's a dart). You update it, and save it as archery_v2_YourLastName.pyw, which is first part of this week's assignments.

2.

Open IDLE (Python Shell 3.x.x.), click File --> Open, Inside the folder "CS114_Graphics_Files", find convert_gui.pyw file, click Run --> Run Module F5. What graphic will you see?

New thing from this file is about how to choose "coordinates". Let's look at Zelle's textbook Page 99-101 for detailed information about this.

win = GraphWin("Celsius Converter", 400, 300) win.setCoords(0.0, 0.0, 3.0, 4.0)

The first line shows general parameters for constructing a new GraphWin with 400 pixel long (x axis/coordinate), and 300 pixel high (y axis/coordinate), a window title with length and height in pixels. The second line shows how to "change values from a real-world problem into the window coordinates that get mapped onto the computer screen" (Zelle). In this example, the x values 3.0 representing the real length of 400 pixel, the y values 4.0 representing the real length of 300 pixel. We had to transform these values to be represented this transformation happens.

The setCoods method requires four parameters specifying the coordinates of the lower-left and upper-right corners, respectively. You can the use this coordinate system to place graphical objects in the window.

To make it easier to understand, we draw horizontal lines and vertical lines to show the coordinates with following codes (for explanation purpose, not part of assignment):

from graphics import * def main(): win = GraphWin("Testing Window", 400, 300) win.setCoords(0.0, 0.0, 3.0, 4.0) # draw 3 horizontal lines line = Line(Point(0,1), Point(3,1)) line.draw(win) line = Line(Point(0,2), Point(3,2)) line.draw(win) line = Line(Point(0,3), Point(3,3)) line.draw(win) 

 # draw 3 vertical lines line = Line(Point(1,0), Point(1,4)) line.draw(win) line = Line(Point(2,0), Point(2,4)) line.draw(win) line = Line(Point(3,0), Point(3,4)) line.draw(win) # wait for click and then quit win.getMouse() win.close() main() 

Now the coordinates for lower-left corner is (0,0) and upper-right corner is (3,4).

3.

It's getting little bit easier to understand how this interface looks like by looking at some codes from convert_gui.pyw file

 # Draw the interface Text(Point(1,3), " Celsius Temperature:").draw(win) Text(Point(1,1), "Fahrenheit Temperature:").draw(win) input = Entry(Point(2,3), 5) input.setText("0.0") input.draw(win) output = Text(Point(2,1),"") output.draw(win) button = Text(Point(1.5,2.0),"Convert It") button.draw(win) Rectangle(Point(1,1.5), Point(2,2.5)).draw(win) 

Now, you can look at the graphic made from convert_gui.pyw as below. We can change the location/coordinates for each item (textual input, rectangle object, and button, etc.) as we like to. If you adjust coordinates to play with them, you will find interesting changes.)

4.

Now we can try to use these codes as model to work on a file, on Zelle's textbook Page 54, Question 9. Save as kilometers_to_miles_converter_YourLastName.pyw, which is the second part of this week's assignments.

You can based on convert_gui.pyw file to create a new file for this assignment.

1 kilometer = 0.62 mile