Title image Spring 2017

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.


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.

  1. 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.
  2. Add new capabilities to the mouse.
    1. 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] )
    2. 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,
          self.objects.append( oval )
  3. 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.


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.