Project Writeup
Partner: Brittany Thomas
The task for the final project was to create a simple GUI (Graphics User Interface) that allows a user to draw different Zelle graphics or different objects from previous projects (e.g. L-System trees). We also had to incorporate different drawing styles from the past homework assignment to give the user a series of options to choose from, as well as an option that allows the user to undraw the last shape or object drawn. In addition to these requirements, we added a couple of drop-down (fixed) menus that allow the user to select color options to draw width, select a width for the objects being drawn, two sets of fun animations, a set background color option, as well as an option that will allow the user to click anywhere on the screen and get a pop-up menu with all of the shapes options.
In lab we created a menu class, as well as a fixed menu class. The menu class was the parent class, and the fixed menu class incorporates a lot of the code in the parent menu class. The menu class creates a menu based on a series of text items (e.g. 'Square', 'Circle', 'Triangle', etc.) at the location of a mouse click by the user (think of a pop-up menu). The rectangle that holds the options is based on the height of the text (in pixels) multiplied by the number of items in the menu, and it is as wide as the longest text item in the menu times the character width (in pixels as well). The menu class tests a mouse click to see first if in was in the menu, and if the click was in fact in the menu, then it checks to see which item was selected, returning a tuple. The first item in the tuple is the index number of the string in the menu text list, and the second item returns the actual string from the menu text list. The fixed menu class adds on to this process by taking a specific point at which to draw a rectangle that functions as an accessor button to a menu, and a title name for that accessor button. It hads on to the code in the menu class by checking to see if the user clicked in the rectangle that acts as the accesor to a certain menu.
In the homework assignment we implement this menu class into an application class. The application class sets up some fixed menus, with options for shapes, color, width, etc. Using the tuples returned by the menu class, the applications class uses a mainloop to look up the string index value in a dictionary. In the dictionary the key is the index value string, and the value is the title of the method which contains the code that defines how the computer should carry out the appropriate actions (e.g. drawRectangle). Thus the main loop method in the application is the crucial piece of the project. It runs a while loop that looks up the appropriate value (action) in the dictionary given the mouse click and which menu/item was selected by the user, and will continue to allow the user to choose operations until the quit option is selected (a method which contains code to break out of the main loop). It also adds the parameter call "(self)" to the value returned by the dictionary to complete the code required to call the appropriate method action in the application class. While this project took a lot of code, the main function contains only two lines: the first sets a variable equal to the application class, and the second calls the mainLoop() method on the application class created.
User Manual for Our GUI
The first fixed menu is titled "Actions." The first option in this menu is "Draw Shapes," which allows the user to click anywhere in the window, and get a popup menu that has options for all of the possible shapes and objects that can be drawn. The second option is to set the background color. The default value in the color field in the program is black, so the user can select a number of different color choices from the color menu, and then select the "Set Background Color" to set the window background to that color. The third option is "Undo" which will undo the last object or shape drawn into the window. The last option is "Quit" which will close the window and quit the program.
The second fixed menu is called "Shapes", which is the same menu that is accessed by the "Draw Shapes" pop-up menu option in the "Actions" menu. The first item in the menu is "Line", which will require two mouse clicks from the user, with which a line will be formed between them. The second item in the menu is "Rectangle", which will require two mouse clicks from the user. The first click will make the top left corner of the rectangle, and the second mouse click will mark the spot of the lower right corner of the rectangle. The third option in the shapes menu is "Triangle", which takes in three mouse clicks and forms a triangle between the points. The fourth option is "Circle", which takes in two mouse clicks. The first click is the centerpoint of the circle, and the second point determines the radius of the circle. The last option is "LSystem", which will draw an L-System tree with the bottom at where the user clicks in the window.
The third fixed menu is called "Styles". This gives the user three drawing style options. The first is "Default", which is normal, perfectly drawn shapes and lines (e.g., the default drawing method of the Zelle graphics package). The second item in the menu is "Crayon", which will draw all of the shapes in a crayon artistic effect simulation. The third item in the menu is "Paint Brush", which will draw all of the shapes in a paint brush artistic effect simluation. The fourth item in the menu is "Crazy Cirlces" which outlines the shapes selected with a bunch of cirlces. Be sure to select the drawing style in this menu before selecting the shapes that you want to draw.
The fourth menu is called "Color". It contains the options of Red, Orange, Yellow, Green, Blue, Purple, Black, and White. Like the styles menu, the color must be selected before the shape is selected to be drawn. This rule also applies for the "Set Background Color" option in the "Actions" menu. The color cannot be changed for any of the animations, nor the L-System class (which has a fixed color set so that it moderately resembles a tree).
The fifth menu is called "Width". It contains width options of 1-5, one being the thinnest and five being the widest. Like the styles menu, the width must be selected before the shape is selected to be drawn. The width cannot be changed for any of the animations, nor the L-System class (fixed to hold the proportion of the tree in comparison to the leaves).
The last menu is called "Animations". The first item "Flying Birds", creates ten birds at the location of ten mouse clicks in the window by the user. A picture of "bird food" is created in the window, and with mouse clicks the bird food is moved around the window, and the birds gravitate towards the food. To stop the animation, a mouse click is required in the top left hand corner of the window ( somewhere near the "Actions" menu). The second item is "Superman", which only requires one random mouse click in the window before Superman flies across the screen.
Examples
Brittany and I were partners on this project, and the vast majority of the code written for this project we wrote together. Go team. However, Brittany wrote the code for the paint brush class as well as the crazy circles class by herself, and I wrote the code for the Text Menu help box at the bottom of the window by myself. While we are indebted to Professor Maxwell for the majority of the code in this project, I modified an exact copy of his code from a previous lab to get the birds to gravitate towards the hamburger picture. We also have to thank Piper Haywood for her photoshop work with the superman image.
Here is a picture that I created using the GUI we created:
Here is a picture that Brittany created using the GUI we created:
Here is a picture that Brittany's Roommate (who is not in the class) created using the GUI we created:
