CS 251: Project #1

GUI Design

Due midnight, Monday 13 February 2017

The purpose of this assignment is to start the process of building an interactive visualization system. In the project, you will be adding menus, mouse callbacks, listboxes, and a dialog window to your program.

Tasks

The skeleton program from lab gives you a structure for making an application. The GUI pieces of this project give you practice creating other types of GUI elements like buttons, lists, labels, popup menus and modal dialog windows.

Add the following set of menu items and key bindings to your program.
1. Write a method that clears all the data points. It should have the signature
```
    def clearData(self, event=None):
    
```
2. Bind the method to Cmd-N. You should model this after the binding of Cmd-Q to handleQuit
3. Bind the method to a new item in the File menu. You should model this after the binding of handleQuit to the Quit item in the File menu.
  There are some special escape characters needed to indicate the apple/command symbol. Use the sequence \xE2\x8C\x98 to generate the command symbol.
4. Test it. I suggest creating a bunch of random points, clearing them, and then making sure you can create more points.

Add new capabilities to the mouse.

In the method that handles the motion of button 1, add code to update the location of all objects in the self.objects list. You can get the current coordinates of a graphical object using the coords method.
```
    loc = self.canvas.coords(obj)
    
```
and you can modify the coordinates of a graphic object using the same function with arguments.
```
    self.canvas.coords( obj, 
                        loc[0] + diff[0], 
                        loc[1] + diff[1], 
                        loc[2] + diff[0],
                        loc[3] + diff[1] )
    
```

In the method that handles your second mouse button, add code to create a circular object at the mouse click location and store the object in the self.objects list (created and initialized in the init function).

    dx = 3
    rgb = "#%02x%02x%02x" % (random.randint(0, 255), 
                             random.randint(0, 255), 
                             random.randint(0, 255) )
    oval = self.canvas.create_oval( event.x - dx,
                                    event.y - dx, 
                                    event.x + dx, 
                                    event.y + dx,
                                    fill = rgb,
                                    outline='')
    self.objects.append( oval )

Create a dialog window that will allow the user to choose which random distribution to use for the random points.
1. Visit this effbot page and read about dialog boxes. Copy the code for dialog support class into display.py. Note that the code is written under the assumption that you wrote from TkInter import *. We wrote import TkInter as tk, so put the tk. where you need them.
2. Make a new class derived from Dialog that allows the user to specify which random distribution to use for choosing the position of each point. They should be allowed to choose between at least uniform and gaussian for each of the x and y dimensions.
  1. You will need to make a list box to diplay the list of options for the random distributions.
  2. Each list box should allow the user to select just one item. And when there is more than one listbox, the default behavior is for just one to allow a selection. But we need both to. so, you should create each listbox using this expression:
```
            tk.Listbox(master, selectmode=tk.SINGLE, exportselection=0)
					
```
    store the result in a field, so you can acess the currently selected value when the OK button is pressed.
3. Add any necessary fields to your display class and the necessary code to createRandomDataPoints so that you can use the chosen distributions the next time you add random points to the screen.

Extensions

Make it so the button-2 movement adjusts the size of the ovals. Movement up the window should increase the size (e.g. moving the mouse 10% of the way up the screen increases the size by 1 pixel). Recall that in your button-1 motion handler, you kept track of incremental changes. In this case, you want to keep track of how much the mouse has moved since you first clicked it. Why? If you keep track of incremental changes, you run the risk of having each movement result in no change in size. I suggest you add a field that keeps track of the original size.
Add widgets to make it possible for the user to control how many random data points are added.
Add a list box with different shapes that lets you control the shape drawn for each data point.
Get the mouse-over to report the position of the data point underneath it. Either display it in the terminal (less prefered) or in a status area (a new frame below the canvas).
Make it so clicking Shift-Cmd-mouse-button-1 will delete the point underneath it.
Make it so the distributions dialog box begins with the current values of the x and y distributions as the initially selected items.

Writeup and Handin

Create a new wiki page, give it a useful title (e.g. Stephanie's CS251 Project 1), and describe the functionality of your GUI. Include at least one screen shot and clearly identify any extensions that you did. As a rule-of-thumb, your write-up should be approximately 2 pages when printed. It is important to be both thorough and concise!

Label your wiki page: cs251s17project1

Turn in your code by putting it into a project1 directory in your private directory on the Courses server.