CS177
Project 3: Writing a Graphic Editor
In this project you will write a graphic editor. The project has been divided in multiple
steps to make it easier to implement.
Setting up your Environment
Go to your working directory in “data.cs.purdue.edu” and create a directory
“cs177/project3”. Refer to the lab1 if you need to remember the steps to do so. Then start
the IDLE Python Interpreter.
Input Files
You will start your program by downloading this zip file and uncompressing it in your
project3 directory.
In this directory you will find three files:
editor.py – The initial editor file.
graphics.py – The graphics file you have used before in previous projects
button.py – Implementation of simple buttons.
The editor.py File
This file implements a simple graphics editor where you can draw lines, rectangles of
different colors. Load editor.py inside IDLE and run it.
To create a line, select the line Button and press the mouse in the screen twice for each
end point of the line.
To create a Rectangle, select the Rectangle button and press the button twice for the two
opposite corners.
To change the color select a color button and then select the Line or Rectangle button.
Here is the code of editor.py. It explains the different methods.
# editor.py
# This class implements a Graphical Editor
#
from graphics import *
from button import Button
class Editor:
#Constructor for the editor
def __init__(self):
#Create a window
self.win = GraphWin('Graphic Editor', 800, 800)
# Make the window scaled
self.win.setCoords(0, 0, 10.0, 10.0)
# Create the buttons
self.buttons = []
self.createButtons()
#Initial color
self.color = "red"
#List of figures
self.figs = []
# Add one button. It will be placed in the first available space
def addButton(self, label, func):
# Get button number
buttonNum = len(self.buttons)
#Compute ccordinate of button
x = 1.5 * (buttonNum % 2) + 0.8
y = 9.5 - 0.6 * (buttonNum //2)
#Create button
button = Button(self.win, Point(x,y), 1.4, 0.5, label)
button.activate()
#Add button to list
self.buttons.append({'button':button, 'func':func} )
# Create all buttons in the application
def createButtons(self):
self.addButton("Line", self.newLine)
self.addButton("Rectangle", self.newRectangle)
colors = ["red", "blue", "green", "yellow", "pink", "brown"]
for c in colors:
self.addButton(c, self.setColor)
# Check for mouse events
def run(self):
while True:
# Wait until we click mouse in the window
p = self.win.getMouse()
# Check if a button was pressed
for e in self.buttons:
b = e['button']
if b.clicked(p):
# This button was pressed. Invoke function.
print(b.getLabel())
func = e['func']
func(b.getLabel())
##### Commands in the editor ####
def newLine(self, cmd):
print("---- New Line ----")
print("Press first point")
p1 = self.win.getMouse()
print("Press last point")
p2 = self.win.getMouse()
# Create Line
line = Line(p1, p2)
line.setFill(self.color)
line.setWidth(5)
line.draw(self.win)
# Add to list of figures
self.figs.append(line)
def newRectangle(self,cmd):
print("---- New Rectangle ---")
print("Press Corner 1")
c1 = self.win.getMouse()
print("Press Corner 2")
c2 = self.win.getMouse()
#Create rectangle
rect = Rectangle(c1, c2)
rect.setFill(self.color)
rect.draw(self.win)
#Add to list of figures
self.figs.append(rect)
def setColor(self,cmd):
print("Set Color to", cmd)
self.color = cmd
def main():
editor = Editor()
editor.run()
main()
Step 1. Implement Oval, Circle, Polygon, Text
In this step you will add buttons to the program to create Oval, Circle, Polygon, and Text.
You will add buttons to the program to add these elements.



To create an Oval, the user will press the button for Oval and the program will ask
you to click with the mouse two opposite corners. Then draw an Oval with the
current color. See the documentation of the graphics.py library for details.
To create a Circle, the user will press the button for Circle and the program will
ask you to click with the mouse the center of the circle and a point in the border of
the circle. Then, computing the formula of the distance of two points, you will
determine the Radius and draw the circle of the current color.
To create a Polygon, the user will press the button for Polygon. Then in the
console the program will ask for the number of vertices in the polygon. Then the

program will ask the user to select the vertices with the mouse that many times.
Finally, the program will draw the polygon with the given color.
To create Text, the user will select the Text button. Then the program will prompt
for the text to be displayed on the screen. Then the program will ask the user to
select with the mouse the position where the text will be displayed.
See the documentation of the graphics.py library for details of how to display the
different elements.
Turnin in Step 1
You will have to turn in step 1 before 11:59pm April 11th.
1. Create a directory cs177/project3
2. Copy all the files editor.py, graphics.py, button.py. Include also other files you use.
3. Login to data.cs.purdue.edu and type:
cd cs177
turnin –c cs177 –p project3-1 project3
This submission will count for 10% of the grading of the project. Submit your files even
if they don’t work as expected to get a partial grade. You may continue working on these
files after your submission.
There are no labs this week. The lab time will be used to explain the project and help you
in the implementation.
Step 2. Implement Clear Screen, Delete, and Undo
In this step add buttons for Clear, Delete, and Undo
 When selecting the Clear button, the program will erase all the elements in the
screen and empty the list of figs.
 When selecting the Delete button, the program will ask the user to select with the
mouse the figure to delete. Your program will iterate over all the figures in the
figs list to find the LATEST created figure that encloses the selected point and
delete it. Only the latest created figure should be deleted if figures overlap. For
example, use the methods fig.getP1() and fig.getP2() to get the boundary of the a
rectangle or oval. For lines, a line is selected if the end points of the line match
the selected position by a distance of 0.25. If no figure is found, it will display a
message “No figure found”. If a figure is found, then it is removed from the figs
list and then removed from the display using fig.undraw(win).
 When selecting the Undo button, it will undraw the figure at the end of figs.
Turnin in Step 2
You will have to turn in step 2 before 11:59pm April 18th.
1. Create a directory cs177/project3
2. Copy all the files editor.py, graphics.py, button.py. Include also other files you
use.
3. Login to data.cs.purdue.edu and type:
cd cs177
turnin –c cs177 –p project3-2 project3
This submission will count for 10% of the grading of the project. Submit your files even
if they don’t work as expected to get a partial grade. You may continue working on these
files after your submission.
Step 3. Implement Open and Save
Add the buttons Open and Save to your program.
 When the Save button is selected, the program will prompt for a file name that
will be used to save the file. Then the program will save the figures in a text file
in the following format:
LINE x0 x1 y0 y1 color
RECTANGLE x0 y0 x1 y1 color
OVAL x0 y0 x1 y1 color
CIRCLE x0 y0 x1 y1 color (the circle is stored as an oval)
TEXT x0 y0 text
POLYGON n color x0 y0 x1 y1 …
HINT: If you are looking at the first figure drawn and you want to get the color of
that figure use: self.figs[0].config['fill']

When the Open button is selected, the program will prompt for a file name that
will be used to read the file. Then the program will read the figures in the text file
in the previous format:
Extra Credit
You may also add the following extra features to your implementation.
1. Identify ellipses using a formula instead of bounding box
2pts
2. Identify polygons using a formula instead of bounding box
2pts
3. Being able to move an already created figure by pressing a
“move” button, then asking to select with the mouse the figure and
then asking to select with the mouse the new position. The
distance in x and y between the two mouse positions will
determine the change in the position of the figure.
4pts
4. Being able to change the color of an already created figure by
pressing a “change color” button and then selecting a figure with
the mouse. The figure will change to the current color.
2pts
5. Have buttons “Bring Front” and “Bring Back” that will bring a
figure to the Front or Back of the “figs” list and redraw the figures.
For example, the user will press “Bring Front”, and then the
program will ask to select a figure with the mouse. The figure will
be brought to the Front of all the figures.
4pts.
Turnin
This program is due 11:59pm April 25th.
1. Create a directory cs177/project3
2. Copy all the files budget editor.py, graphics.py, button.py. Include also other
files you use.
3. Login to lore and type:
cd cs177
turnin –c cs177 –p project3 project3
Grading Form
Project 3
Name: ______________________________
Login:_______________________________
Feature
Max Grade
Step 1
Oval (5p)
Circle (5p)
Polygon(5p)
Text(5p)
Turnin (10p)
30
Step 2
Clear (10p)
Delete (10p)
Undo(10p)
Turnin (10p)
40
Step 3
Open (10p)
Save (10p)
Turnin (10p)
30
Extra credit
14
Total:
Current Grade