Chap. 5

foremanyellowSoftware and s/w Development

Nov 7, 2013 (3 years and 7 months ago)

67 views

Chapter 5


Graphics


We’ve been doing command line programming, but
now it’s time to try GUI programming

programming
in a graphical user interface, using a mouse.


Python provides a graphics library called Tkinter


But we’ll use the smaller graphics library provided by
our textbook,
graphics.py


You should be able to access the
graphics.py
automatically. Test it by typing:
>>>import
graphics
. If you don’t get an error message, all is
well.


If you do get an error message, copy the graphics.py
file (available on our course web page) to the
directory where you keep your Python files. Then test
again, as above.

Object
-
oriented programming (OOP) involves
programming using objects. An
object

represents
an entity in the real world that can be distinctly
identified. For example, a student, a desk, a circle,
a button, and even a loan can all be viewed as
objects. An object has a unique identity, state, and
behaviors. The
state

of an object consists of a set of
data

fields

(also known as
properties
) with their
current values. The
behavior

of an object is defined
by a set of methods.


data field 1

method n

data field m

method 1

(A) A generic object

...

...

State
(Properties)


Behavior


radius = 5

findArea()

Data field, State
Properties


Method,
Behavior

(B) An example of circle object

An object has both a state and behavior. The state
defines the object, and the behavior defines what the
object does.


Once you create an object or import a library
with objects, you can easily access the
functions (or methods) and properties (or
data) of an object using a
dot separator
.


For example, we already have been accessing
both properties and functions of the Math
library:
Math.pi

will return the value of Pi,
and
Math.round(x)

will take the value of x
and round it up to the nearest integer.


Be sure the
graphics.py

file is in the same
directory as your other Python files.


For any program you’re writing that will use
graphics, you’ll need to write
import
graphics
in the very first line, even before
you write
def main()
.


However, this means you’d have to type
graphics.Function()
every time. A
shorthand:
from graphics import *
Then you can just type the name of the
function without the prefix
graphics
.



The first thing you have to do in a graphics
program is create the window. The syntax to
do this is:

>>>win = GraphWin()


This creates an object, called win, which is
the window. You can use any identifier you
want, as long as it follows Python naming
rules.


At the end of the program, you should
probably destroy your window with
>>>win.close()



A screen is comprised of pixels, or
picture elements, tiny dots of light
that can be any color. The higher
the number of pixels, the clearer
the picture. For example, the
better HD flat
-
screen TVs are
1040p, vs. 720p for cheaper
models.


The default size of the GraphWin()
window is 200 tall x 200 wide
pixels, or 40,000 pixels in all.


You can change the size of the
window by using parameters:
GraphWin(“My Window”,300, 200)
will create a taller window than the
default with My Window as the
title.
TRY THIS


The default size of the graphics window
created by GraphWin() is 200 x 200 pixels


But this can get cumbersome. You can
simplify things by setting “artificial”
coordinates.


win = GraphWin(“Tic
-
tac
-
toe”)

win.setCoords(0.0,0.0,3.0,3.0)


The graphics library comes with built
-
in functions
which allow us to easily draw in Python.


Point(x,y)

creates a point at the coordinates
provided by x and y. The x value refers to the x
axis, the horizontal axis, while the y value refers to
the y axis, the vertical axis.


Once you’ve created a point object, you can
retrieve the x and y values using the
getX()

and
getY()

functions.


>>>nuPt = Point(22, 66)

>>>nuPt.getX()

22
TRY THIS


The Line() function takes two points as its
parameters. You can either pre
-
define the
points or use the Point() function.


>>>myL = Line(Point(22, 44),
Point(44, 66))

Then you need to actually draw the line in the
window you created:

>>>myL.draw(win)


Want to add arrows? The

setArrow(string)
function does this:

>>>myL.setArrow(‘first’)
TRY THIS


The Circle() function takes two parameters, a
center point and a radius


>>>nuCirc = Circle(Point(55,55), 90)

And then draw it:

>>>nuCirc.draw(win)


getRadius()

returns the radius:
nuCirc.getRadius()


TRY THIS


To create a rectangle,
use the
Rectangle(point1,
point2) function, where
p1 and p2 are the upper
left and lower right
corner points of the
rectangle, respectively.


>>>myR =
Rectangle(Point(22, 66),
Point(128, 200))

>>>myR.draw(win)


TRY THIS


The best way to think of
an oval is as a rectangle
with an oval inside. Ergo,
the Oval() function takes
two points as parameters,
the upper left and lower
right point of a rectangle
bounding the oval.


To put an oval in the
rectangle already created:

>>>myOval =
Oval(Point(22, 66),
Point(128, 200))

>>>myOval.draw(win)


TRY THIS


The move(dx, dy) function will move any
graphical object x pixels to the right and y
pixels up.


If I wanted to move my circle to the right 80
pixels, I would type:
>>>nuCirc.move(80,0)


You can move objects ot the left and down by
using negative numbers:

>>>myOval.move(
-
20,
-
30)


TRY THIS


You can change the color of any object using the
setFill(string) function.


If I wanted a green circle, I would type:

>>>nuCirc.setFill(‘green’)


Python recognizes standard colors, but if you want to
know what a color is named, you can use RGB values. To
do this (for example), type
>>>color_rgb(100, 200,
300)

and the string returns:
#64c812c


You can then use that string to set a color


Sadly, my favorite color, teal, is not supported


You can also change the color of the outline of a
graphical object:
>>>nuCirc.setOutline(‘blue’)


Make your circle green with a blue outline


My dog, Rae, likes to chase red balls. Write a program
that throws a ball across the screen.


Hints: use a defined loop to move the ball.
Remember that syntax?

for x in range(500):


The range number should be the width of your
window.


Then use the move() function to move your circle
across the window


This will happen really quickly, so you might want to
use
p = myWin.getMouse()

to wait for a click from
the user


When we create a graphical object


>>>myOval = Oval(Point(22, 66), Point(128,
200))

we are creating an INSTANCE of the CLASS Oval


Instances of classes INHERIT properties and methods
from their parent classes.


When we create an object, we are CONSTRUCTING it,
and the method which creates it is called a
CONSTRUCTOR, such as
Oval(Point(22, 66),
Point(128, 200))


The individual values of the instance (above,
(Point(22, 66), Point(128, 200))

are stored as
INSTANCE VARIABLES associated with the instance.


So any
instance

has unique values (or properties or
states) associated with it. In the case of


>>>nuPt = Point(22, 66)

the unique values (or
instance variables
) are the
point’s two coordinates.


When we use
nuPt.getX()
, we are accessing those
associated values; the
getX()
function is known
as an
accessor
.


When we move an object, we are changing those
values. Ergo,
nuPt.move(0, 25)
is known as a
mutator, since it mutates the values.


You can make your graphics respond to a
user’s mouse clicks. The function getMouse()
will return the coordinates of the point where
the mouse was clicked.


>>>pt1 = win.getMouse()

will return the x and y coordinates.

# triangle.pyw

# Interactive graphics program to draw a triangle


from graphics import *


def main():


win = GraphWin("Draw a Triangle")


win.setCoords(0.0, 0.0, 10.0, 10.0)


message = Text(Point(5, 0.5), "Click on three points")


message.draw(win)



# 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)



# Wait for another click to exit


message.setText("Click anywhere to quit.")


win.getMouse()


main()


Starting with the code on p. 143 of our text,
create an interactive tic
-
tac
-
toe game. Users
can click in any of 9 squares and alternate
creating Xs or Os.

from graphics import *


def main():



win = GraphWin("Tic
-
tac
-
toe")


win.setCoords(0.0,0.0,3.0,3.0)



Line(Point(1,0), Point(1,3)).draw(win)


Line(Point(2,0), Point(2,3)).draw(win)



Line(Point(0,1), Point(3,1)).draw(win)


Line(Point(0,2), Point(3,2)).draw(win)




main()


To create a message on a Python window, use
the
Text(anchorPoint, string)
constructor:

>>>prompt=Text(Point(50, 100),
“Abandon hope all ye who enter here”)


setText(str)

will change the words
associated with the text object:
prompt.setText(“Hope is all”)


setFace(font_family)
will change the
font:

prompt.setFace(‘times roman’)


>>>prompt=Text(Point(50, 100), “Abandon
hope all ye who enter here”)


getText()
returns the string associated with the
text object:
prompt.getText()


To set the font size, use the setSize(point) function:
prompt.setSize(36)
puts the text into 36 point
font.


prompt.setStyle(‘italic’)

will display the text
in italics


prompt.setTextColor(‘green’)
will display the
text in green

though probably not Titan green.


The Entry constructor creates a text box in which
users can enter data

inp = Entry(Point(50, 100), 5)






setText(string)
puts default text in the Entry
box:
inp.setText(“Enter data”)


You still have to draw it:
inp.draw(win)


Sets the center
point of the box

Number of
characters box
will hold


Just like with the Text object, you can change
the displayed text in the Entry box


setText(string)


setSize(point)


setStyle(italic, bold, bold italic)


setTextColor(color)

from graphics import *


def main():


win = GraphWin("Celsius Converter", 300, 200)


win.setCoords(0.0, 0.0, 3.0, 4.0)




# 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)



# wait for a mouse click


win.getMouse()



# convert input


celsius = eval(input.getText())


fahrenheit = 9.0/5.0 * celsius + 32



# display output and change button


output.setText("%0.1f" % fahrenheit)


button.setText("Quit")



# wait for click and then quit


win.getMouse()


win.close()



main()



Images can be imported to a Python window
using the
Image(centerPoint, filename)
function.


JPEG and GIF picture file types are supported.