Title image Spring 2017

GUI Design

The purpose of this lab is to start the process of building an interactive visualization system and get you familiar with the Tkinter GUI building system.

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


  1. Download the skeleton python file for creating a window and menus using the Tkinter package. 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 the code. Look through the code and see if you have answer the following questions.
    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?
  3. Write code to add buttons to the window 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 creates 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 this project on your own computer, you will need to install four packages: Python, Numpy, Scipy, and Matplotlib.

If you are running OSX 10.6 or higher, then download the universal 2.7.X Python package for OSX from python.org. Install it first.

Then download the numpy and scipy packages from Sourceforge, which is linked from scipy.org. You want the Python 2.7 OSX 10.6+ packages. Install those second.

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 2.7 OSX 10.6-10.9 package. Install this last.

If you look at the instructions on the Numpy site, you'll see you can also use Macports to install all of the necessary packages in a single command. Depending upon how you do the install, you may need to run python2.7 instead of just python when you want to use these packages.

The command for macports is duplicated here:

sudo port install py27-numpy py27-scipy py27-matplotlib py27-ipython +notebook py27-pandas py27-sympy py27-nose

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.