CS 251: Lab #1

Lab 1: GUI Design

Project due Monday night Feb 17, 2014

The purpose of this assignment is to start the process of building an interactive visualization system. In lab, you will be writing a program with a graphical user interface including buttons.

See these install notes to set up the necessary software on your own computer.


  1. Examine a skeleton GUI program.
    1. Download tkbase.py. Rename the file to display.py or something you like. To run the program, open a Terminal and type the following command.

      python display.py

      The code creates the menus and a single button in the window and connects them to empty functions.

    2. Familiarize yourself with it. As a guide, answer these questions (no need to turn in your answers):
      1. What is the basic organization of the file?
      2. What is a canvas?
      3. What is a frame?
      4. What is the pack geometry manager?
      5. What is the basic layout of the window that appears when you run the file?
      6. What is the baseClick field used for?
      7. What is the purpose of the colorOption field?
  2. Write code to add buttons and to make it so pressing them accomplishes something.
    1. Write a method that will add data points to the display. It should have this signature:
              def createRandomDataPoints( self, event=None ):

      And your approach should be to randomly generate some number of points (I use 100), to make an oval graphics object for each, and to append each oval to self.objects. For example, I have these two lines of code in a loop

                  pt = self.canvas.create_oval( x-dx, y-dx, x+dx, y+dx,
                           fill=self.colorOption.get(), outline='' )

      Before these two lines (but in the loop), I set the values of x and y. Notice that I use self.ColorOption to set the color of the oval.

    2. Add a button that calls createRandomDataPoints (i.e. when you create the button, set the command parameter to createRandomDataPoints). The code to create the button should be located just after the code that create the "Press Me" button.
    3. Make it so the "Press Me" button becomes an "Update Color" button. In other words, change the text on the button and update the code in handleButton1 so that it reconfigures each of the ovals, using the current value of self.colorOption as the new color:
                  for obj in self.objects:
                      self.canvas.itemconfig(obj, fill=self.colorOption.get() )

For more details on Python GUI development in Tk, see the following resources.

When you are done with the lab exercises, you may start on the rest of the project.

Packages for Tk/Numpy/Scipy/Matplotlib

If you want to do future projects on your own computer, you will need to install four packages: Python, Numpy, Scipy, and Matplotlib.

If you are running Snow Leopard (OSX 10.6) or Lion (OSX 10.7) or higher, then download the universal 2.7.X Python package for OSX 10.3+ from python.org. Install it first.

Then download the numpy and scipy packages from Sourceforge, which is linked from scipy.org. You want the packages that correspond to your Python installation (i.e. they should have 2.7 somewhere in their names). Install those second. (Note: If you want to install MacPorts, you could do that first, and then use MacPorts to install numpy and scipy.)

Then download the matplotlib package from Sourceforge, which is linked from the matplotlib site. Note the link is the word 'download' on the right. You also want the package with the appropriate Python and OS versions. Install this last.

Note: Since the numpy, scipy, and matplotlib packages are 32-bit code, you will need to run the 32-bit version of python. This is called python-32. (Note: This may or may not be something you need to worry about. If it all works without worrying, then don't worry, be happy.)

For windows machines you can go to the same places and pick up the packages appropriate for your OS install. They key is to make sure all of the packages match.