“A picture is worth a thousand words. An interface is worth a thousand pictures."
-- Ben Shneiderman, 2003
Background
At this point you are the proud author of a delightful cat and mouse simulation whose vanilla Arena Interface was given to you.
Problem
You are asked to augment the basic Arena user interface and add features to it which would be useful. In the process, you will learn about tkInter. Add the following:
- A reset Button to the Canvas (place it to the left of the 'step' button) - Clicking this stops the simulation (if it's running) and resets everything (cat, mouse, system) to the original values
- A time Label widget to the Canvas (how many steps [minutes, in this case] we are in the simulation) that reads: Time: <current-time>
- A Cat radius Label widget to the Canvas (indicating the current Cat's radius [in meters, not pixels]) that reads: CatRadius: <value>
- A Cat angle Label widget to the Canvas (indicating the current Cat's angle [radians or degrees is ok]) that reads: CatAngle: <value>
- A Mouse angle Label to the Canvas (indicating the current Mouse's angle [radians or degrees is ok]) that reads: MouseAngle: <value>
- A Menu widget item at the top which says "File" and when selected, shows "About..." and "Quit"
-
- When Quit is selected, the simulation quits (same behavior as clicking the button on the canvas)
- When About... is selected, a new window should pop up which has the following widgets in it:
- A Label widget which says your name and the name of the project and includes anything else you want to add
- A PhotoImage widget with a picture of you
- A button at the bottom labeled "Ok", which closes the new window when clicked
- The title of the new window should read something appropriate, like "About the UC Berkeley CS9H Turtle Arena"
- The ability to move the cat when the simulation is stopped. When your cursor moves over the cat, it should turn black (to provide feedback to the user). If the user clicks their mouse button when the cursor is over the cat, and drags their mouse, the cat should follow (as if you were moving a plate around on a table with your hand). The cat's orientation should always be facing the center of the statue as it's being moved around. The values in the cat radius and angle Labels should update as you move. Releasing the mouse button should release the connection your mouse movement has with the cat graphic object. Moving the cursor (with the mouse released) off of the cat should return the cat's color to its original value. This allows you to place the cat anywhere on screen; don't you wish you had this feature when you were testing project 4?
- One more widget of your choosing (from the following list) that should serve a useful purpose for your simulation:
- Checkbox (perhaps toggling some feature of the display, like turning off the printed logging of the simulation values to the screen?)
- Radiobutton (perhaps controlling the clockwise vs counterclockwise motion of the mouse?)
- Listbox (perhaps to choose the color of the cat/mouse?)
- Entries and spinboxes (perhaps to explicitly edit the cat/mouse parameters?)
- Scales (perhaps to adjust how many minutes the cat will chase before it quits [default=30])
Hints
Here are some general tips that may help you in your journey:
- Make a copy of your code from project 4 before you start modifying the Arena and related classes.
- You will probably have to modify more than just Arena.py to add all the features we're requesting.
- Feel free to add any supplementary files you think will be needed.
- We've intentionally not provided any sample screenshots because we want you to have full flexibility over the layout of graphical elements within the GUI.
Checklist
- Correctly working code
- Printed program listing
- Sufficient testing, with output sufficient to verify test correctness. Testing a GUI is harder than a command-line interface (CLI). You should:
- Write down all the states the GUI could be in as a Finite State Diagram, and verify that you've tested every traversal path and visited every state.
- You should also try to break your GUI. What happens if:
- ...you select your cat when the simulation is running?
- ...you open multiple windows by selecting "About..." several times? Maybe you want to disable the About... menu item if the About window is still open?
- ...you move the Cat inside the statue and start the simulation? Maybe you want to constrain its movement to prevent this? (The cat's radius would then simply be the max of the radius of the statue and the cursor position.)
- ...you move the Cat and then click reset. Should the Cat revert to its original, pre-moved position?
- Good style
- appropriate use of indenting and white space;
- variable and method names that reflect their use;
- informative comments at the head of each method;
Extra for Experts
With GUIs, there are always tons of things you could add. Here are some things you could do to have some fun:
- Add a Scale widget that will (in real-time) adjust the initial pixels-per-m scale.
- Add a Scale widget that allows you to "scratch" your way back and forth through simulation time, like you'd do for a Quicktime movie.
- Allow the user to move the mouse object too. It should always stay constrained to lie in the circle of the mouse.
- Allow the user to double-click in the canvas to add another cat.
- After the cat is added, it should also display its parameters (radius, angle) on the canvas. The user should be able to move those out of the way.
