Title image Spring 2018

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. All of the example code uses Python 3 (currently version 3.6)


  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 two 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 ):

      The function should generate some number of points (e.g. 100) in random locations on the screen. One way to make points is to create an oval graphics object. In order to later modify the attributes of the oval (e.g. position, size, color) you need to store a reference to the object in a list. The following two lines of code generate one oval object at location (x, y) with radius dx and then append a reference to it in the list self.objects.

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

      To make many points, put the above two lines in a loop, choosing new random values for x and y each time through the loop. Before the loop, set dx to whatever size you want the points to be. Note that the fill color option for the oval uses self.colorOption.get() to assign the color. The field self.colorOption is a reference to the popup menu created in the buildControls function.

    2. Add a button that calls createRandomDataPoints. When you create the button, set the command parameter to self.createRandomDataPoints, which is reference to the function. The code to create the button should be located just after the code that creates the "Press Me" button in buildControls.

      If you want to know the size of the canvas, use the winfo_width and winfo_height Canvas methods.

    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 uses the itemconfig Canvas function to modify the color of each of the ovals. Use the current value of self.colorOption as the new color.

      The following code snippet loops over all of the graphics objects in the self.objects list and updates their 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

If you want to do the CS 251 projects on your own computer, you will need to install several packages: python 3, numpy for python 3, scipy for python 3, and possibly tkinter for python 3. The most recent version of Python 3 is 3.6. You will need to make sure your versions of numpy, scipy, and tkinter match the version of Python you have installed (e.g. version 3.6).

If you are using MacOS, an easy way to manage the installation is to install the package manager MacPorts. Once you have installed MacPorts, The terminal command for installing the necessary packages is the following:

sudo port install python36 py36-numpy py36-scipy py36-gnureadline py36-tkinter

If you want to get more sophisticated with your version of Tcl/Tk, see the following notes: Python Tcl/Tk notes

For windows machines you can go to the python and scipy sites and pick up the packages appropriate for your OS install. The key is to make sure all of the package versions match.

Download Python 3 (version 3.6) from python.org. Install it first.

Dwnload the numpy and scipy packages from Sourceforge, which is linked from scipy.org. You want the Python 3 versions that match your Python version and OS. Install those second. You may not need to install tkinter separately.