LAB 6 - More Graphics and User Interaction

If you don't have a copy of the graphics module we used last week, download a copy of this module by clicking HERE. Once this file is downloaded to your desktop, move it to your Python working area (or work on the desktop). This Python module must be in the same folder as any program code that uses it.

Additional Graphics Operations

Recall last week, we started using a graphics module that contains functions that we can call to do some drawing in a window on the screen without knowing how to physically deal with pixel manipulation. Most software is written like this. Programmers create libraries to handle specific operations, and then others create new libraries that build on those to do more sophisticated things, and so on.

Here are some more graphical objects you can use:

Line(point, point2) - creates a line from point1 to point2.

Example: line1 = Line(Point(0,200), Point(200,0))

Oval(point1, point2) - creates an oval in the bounding box determined by point1 and point2 (opposite corners of the box)

Example: oval2 = Oval(Point(50,50), Point(150,100))

Polygon(point1, point2, point3, ...) - creates a polygon consisting of the given points as endpoints for each line in sequence. The last point is connected back to the first point.

Example: triangle = Polygon(Point(25,100), Point(175, 50), Point(175, 150))

NOTE: You can use the same setFill, setOutline and setWidth functions with these objects as you can with rectangles and circles.

Text(anchorpoint, string) - creates a text object consisting of the given string centered at the given anchor point

Example: message = Text(Point(150,150), "15-105")

For text objects, you can use the following functions as well before you draw the text object:

setFace(font) - sets the font face where font is "helvetica", "courier", "times roman" or "arial"
  Example: message.setFace("courier")
setSize(point) - sets the font size to the given point size (between 5 and 36)
  Example: message.setSize(18)
setStyle(style) - sets the font to the given style where style is "normal", "bold", "italic", or "bold italic"
  Example: message.setStyle("italic")
setTextColor(color) - sets the color of the text to the given color (same behavior as the setFill function)
  Example: message.setTextColor("red")

Here is a simple Python program that illustrates how to use all of the graphical objects and functions above, along with the sample output.

from graphics import *

def main():
        win = GraphWin()

        line1 = Line(Point(0,200), Point(200,0))
        line1.setFill("blue")

        oval2 = Oval(Point(50,50), Point(150,100))
        oval2.setWidth(5)

        triangle = Polygon(Point(25,100), Point(175, 50), Point(175, 150))
        triangle.setOutline("green")

        message = Text(Point(150,150), "15-105")
        message.setFace("courier")
        message.setStyle("italic")
        message.setSize(18)
        message.setTextColor("red")

        line1.draw(win)
        oval2.draw(win)
        triangle.draw(win)
        message.draw(win)

        raw_input("Press <Enter> to quit.")
        win.close()
        
main()

Getting User Input

Most graphical user interfaces allow users to enter data into a program using a number of techniques, including clicking a mouse, entering a value in a box, choosing a selection from a menu, etc. The graphics module that we are using has a few simple ways for us to allow users to interact with the graphics window: we will see how mouse input works below.

Recall that the location of each pixel in the graphics window is given by x- and y-coordinates. If the user clicks the mouse inside the window, the location of the mouse pointer (i.e. whichever pixel was clicked) is recorded for us to use. The window has a function called getMouse which waits until the user clicks in the window and then returns a Point object that indicates where the user clicked. We can then use the getX and getY functions on the point to find out where the user clicked. Here is a simple program that tracks 10 input clicks by the user. Try it out.

from graphics import *

def main():
        win = GraphWin()

        for i in range(10):
                point = win.getMouse()
                print point.getX(), point.getY()

        raw_input("Press <Enter> to quit.")
        win.close()

main()

Here is a simple program that allows the user to draw a triangle on the screen. They click on three points on the screen and we create a polygon out of these points.

from graphics import *

def main():
        print "Draw a triangle. Click three times in the graphics window." 
        win = GraphWin()
        point1 = win.getMouse()
        point2 = win.getMouse()
        point3 = win.getMouse()
        triangle = Polygon(point1, point2, point3)
        triangle.setFill("orange")
        triangle.draw(win)
        raw_input("Press <Enter> to quit.")
        win.close()

main()

from graphics import *

def main():
        colors = ["green", "yellow", "red", "orange", "blue"]
        win = GraphWin()
        for i in range(5):
                print "Draw a triangle. Click three times in the graphics window."
                point1 = win.getMouse()
                point2 = win.getMouse()
                point3 = win.getMouse()
                triangle = Polygon(point1, point2, point3)
                triangle.setFill(colors[i])
                triangle.draw(win)
        raw_input("Press <Enter> to quit.")
        win.close()

main()