1. GUI in Python
Ismail Abumuhfouz

2. Outlines Why GUI in CS 170 GUI in Python.
Configure graphics library in python.
Major Components of the library.
Exercises.

3. Why GUI in CS170 Most students are visual learners.
Approximately 65 percent of the population are visual learners. – Mind Tools, 1998.
Visual aids in the classroom improve learning by up to 400 percent. – 3M Corporation, *
Motivating beginners to learn programming using graphics
(Students hate/bored/Don’t fully understand programs using shell).
Help students understand the basic elements of the programming more (iterations, selections, functions, lists, files).
Incorporate graphics into the class’s projects (the last 2 projects).

4. Graphics Libraries in Python
Use the turtle library (for more details click here).
Use the graphics library designed by Dr. John N Zelle. (for more details click here)
Use Pygame Library (for more details click here).
Use Tkinter.
GUI frameworks (or toolkits) (for more details click here).
Others (for 3D graphics use PyOpenGL and piglet,
for Visual Python, use vpython,
Others. )
I use the graphics library designed by Dr. John N Zelle in my intro to programming course for the following reasons.
Simple.
Fit more introductory programming courses.

5. Steps Need for Using Graphics Library
First: Download the graphics library (graphics.py) from here.
Second: Save the library inside:
Windows: c:\Python34\Lib\site-packages
Mac:: /Library/Frameworks/Python.framework/Versions/3.4/lib/python3.4/site
-packages
Others: you can also save the library inside the same folder where you have source code file.
Third: Review the following reference module for any help.

6. Major Components Window Class Other Class Point Shapes: Line Circle
Rectangle
Polygon
Image
Display Message (Prompt)
Text
Getting Input Data
Entry

7. Program Skeleton # import the graphics library from graphics import *
def main():
width =600
height=600
# Create the Window Object
win = GraphWin (“ Title “ , width , height)
# Change the window object’s properties
# Create other objects needed for the program ……
# close the window
win.getMouse()
win.close()
main()

8. Window Class # Create a window object
win = GraphWin (“ Title “ , windowWidth , windowHeight)
windowWidth , windowHeight are measured in pixels
# Major methods to change the window object’s properties
.close() # Close the window
.flush() # Updates drawing to graphics window
.getHeight() # Gets the Height of the window
.getWidth() # Gets the Width of the window
.getMouse() # Wait for mouse click and return Point obj representing click location
.setBackground(color) # Sets the background color of the window
. setCoords(xll, yll, xur, yur) # Sets the coordinate system of the window so that the lower left corner is at (xll, yll) and the upper right corner is at (xur, yur)

9. Point Class # Create a Point object Point_Object = Point(x, y)
# Main methods
.getX() # the int value of the Point's x-coordinate
.getY() # the int value of the Point's y-coordinate
# Draw and Undraw object on/from graphic window
.draw(graphwin) # Draw the object in graphwin, which should be a
GraphWin object. A GraphicsObject may only be
drawn into one window.
.udraw() # Undraw the object (i.e. hide it).

10. Objects are drawn using Absolute position
Coordinate Systems
Cartesian coordinate system
Computer coordinate system
Objects are drawn using Absolute position

11. Other Classes (Line & Rectangle)
# Create a Line object
Line_Object = Line( Point1, Point2)
# Main methods
.getP1() # get one end-point Point object
.getP2() # get get the other Point object
.getCenter() # get a Point object corresponding to the Line's center
.draw(graphwin) # Draw the object in graphwin
.udraw() # Undraw the object (i.e. hide it).
# Create a Rectangle object
Rectangle_Object = Rectangle ( Point1, Point2)
# Main methods
.getP1() # get one end-point Point object
.getP2() # get get the other Point object
.getCenter() # get a Point object corresponding to the Line's center
.draw(graphwin) # Draw the object in graphwin
.udraw() # Undraw the object (i.e. hide it).

12. Other Classes (Circle & Oval)
# Create a Line object
Circle_Object = Circle ( Point1, radius )
# Main methods
.getCenter() # get a Point object corresponding to the circle's center
.getRadius() # returns the int value of the Circle's radius
.draw(graphwin) # Draw the object in graphwin
.udraw() # Undraw the object (i.e. hide it).
# Create an Oval object
Oval_Object = Oval ( Point1, Point2)
# Main methods
.getP1() # returns a clone of the corresponding corner of the
.getP2() # oval's bounding box (opposite corners of bounding square)
.getCenter() # get a Point object corresponding to the oval's center
.draw(graphwin) # Draw the object in graphwin
.udraw() # Undraw the object (i.e. hide it).

13. Other Classes (Polygon & Mouse)
# Create a Polygon object
Polygon_Object = Polygon ( List of Points )
# Main methods
.getPoints() # returns a list of points in the polygon
.draw(graphwin) # Draw the object in graphwin
.udraw() # Undraw the object (i.e. hide it).
# Mouse Click on the window object
Point_Object= WindowObject.getMouse() # Wait for mouse click and return
a Point object representing the click
location.

14. Other Classes (Image) # Create an image object
image_Object = Image( Point , “ Name and path of the image” )
# Supported Images.
This library supports only PPM and GIF image
# Main methods
.getWidth() # returns the width of the image
.getHeight() # returns the height of the image
.draw(graphwin) # Draw the object in graphwin
.udraw() # Undraw the object (i.e. hide it).

15. Other Class (Text) # Create a Text object
Text_Object = Text ( Point, Message) Display a text message centered at the point.
# Main methods
.getText () # returns the message displayed
.setText(text) # Change the message
.setTextColor(color) #change the text color
.setFace(family) # set font face, ex. "arial" "courier"
.setSize(size) # set font size (5-36 are legal)
.setStyle(style) # set font style ex. "bold" "italic"
.draw(graphwin) # Draw the object in graphwin
.udraw() # Undraw the object (i.e. hide it).

16. Other Class (Entry) # Create an Entry object
Entry_Object = Entry ( Point, width ) Display a place for the user to type.
# Main methods
.getText () # returns the typed data entered by the user
.setText(String text) # Change the message displayed inside the entry
.setTextColor(color) #change the text color
.setFace(family) # set font face, ex. "arial" "courier"
.setSize(size) # set font size (5-36 are legal)
.setStyle(style) # set font style ex. "bold" "italic"
.draw(graphwin) # Draw the object in graphwin
.udraw() # Undraw the object (i.e. hide it).
# Note:
Make sure to follow the creation of the entry object with getMouse method before extracting the text of the entry using .getText().

17. Common Methods to All Graphics Object Classes
.draw(graphwin) # Draw the object in graphwin, which should be a
GraphWin object. A GraphicsObject may only be
drawn into one window.
.udraw() # Undraw the object (i.e. hide it).
.clone() # create a new polygon object that is an exact copy of this
one
.move(dx, dy) # move object dx units in x and dy units in y direction
.setFill(color) # Set interior color to color
.setOutline(color) # Set outline color to color
.setWidth(width) # Set line weight to width

18. Color System Use a string that represents the color name.
Can use different color depth 1-4
Example:
“red”
“black”
“red1”
“blue4”
Use the function:
color_rgb (redValue, GreenValue, blueValue)
Where:
redValue, GreenValue, blueValue take values from 0-255
Example:
Black color= color_rgb ( 0, 0, 0)
White color= color_rgb ( 255, 255, 255)
Green color = color_rgb ( 0, 255, 0)
Red color= color_rgb( 255, 0, 0)
Using Color’s Name
Using color_rgb function

19. Exercises # Exercise 1 Show the following texts on the screen.
Using GUI in CS 170

20. Exercises # Exercise 2 Ask the user to click two points on the screen.
Use these two points as center points for two circles with radius 10, then draw these circles on the screen.
Draw a line between these two points, then find the distance between these two points –length of the line – using the following equation, then display it on the screen.
Use the two points as corner points of a rectangle. Draw that rectangle on the screen and then display its area and perimeter .
Solve each requirement above using a separate function.