CMSC 15200 - Summer 2013

Lab 4: GUI Development with GTK (Picture Click)

Preliminaries

As requested, we are getting away from the command line and experimenting with graphical user interfaces. We are using the GTK library to do our GUI development.

This week you will be writing your code in a file called lab4.c

Part 1 - Connecting to a CS machine

For those of you using your own laptops, you will need to remotely connect to a CS machine using a secure shell (i.e. ssh) with the x forwarding option enabled in your terminal window (or another ssh appliucation). If you are on a CS machine currently, you do not need to follow these steps and can skip to Part 2 BUT you will need to follow these steps when you are doing your assignment from home. Thus, make sure to read over this section to fully understand how connect to a cs machine.

Unix/Mac Users

ssh gives you access to the Terminal application from any remote commputer. If you have a Unix based machine (Mac OS-X or Linux), it is installed by default and is accessible through the Terminal.

Special Note for Mac Users: You may need to download an X11 environment such as: Quartz.

For Mac/Unix users can use ssh from a terminal as follows

ssh -XC -c blowfish-cbc,arcfour username@computername

For example if I were to log in remotely to the server classes.cs.uchicago.edu I would type the following into my local terminal.

ssh -XC -c blowfish-cbc,arcfour lamonts@classes.cs.uchicago.edu

This solution allows you to use the default text editors like gedit to compile. This means once you have your directory setup inside your repo you can enter gedit in the terminal window and then graphical text editor will appear.

The options "-XC -c blowfish-cbc,arcfour" allows us to visually see applications that are installed on the remote machine and loads those applications "fast". If you would like to learn more about those options then just perform a google search on "SSH X-Forwarding and Compression".

Windows Users

If you have a Windows machine you can install PuTTY. You will also have to download an X11 environment, such as Xming.

Once you have download both Putty and X-Forwarding Client running then follow these steps to get Putty running: Running Putty.

Finding a Computer

Here is a list of computers to which you have access. Alternatively if you’re in the MacLab the names are printed on the top of the computer itself. If you see a machine that is tagged with “bellatrix” then its full computer name is bellatrix.cs.uchicago.edu .

Picture Click

In this lab, you will create the following GUI application:

The Application should be implemented as follows:

  1. Create a 5x5 grid of buttons that will display images of various animals. Each button, will display a picture of an animal from a randomly generated integer. The following list maps a random integer to the animal that will need to be displayed:
    • 0 = Cat
    • 1 = Chipmunk
    • 2 = Dog
    • 3 = Duck
    • 4 = Eagle
    • 5 = Koala
    • 6 = Loin
    • 7 = Moose
    • 8 = Owl
    • 9 = Parrot

    Download the zip file of the animal images from here: animals.zip

    If you are remotely connected to the a CS machine you can download the images using the wget command (to download the animals.zip file and unzip to retrieve the animals directory) inside the terminal window 

    
wget http://www.classes.cs.uchicago.edu/archive/2013/summer/15200-91/labs/lab4_files/animals.zip
unzip animalz.zip
  2. A label needs to be displayed at the bottom of the grid of buttons.
  3. When a button is clicked, the application needs to display the name of the animal displayed in the button inside the label.

Place this code in a file named lab4.c .

To compile the GTK library with your lab4.c file you will need to run the following command: 


gcc lab4.c -o lab4 `pkg-config --cflags --libs gtk+-2.0`
Once you are completed with the assignment, commit ONLY your lab4.c file. Do not commit the animals directory.

Helpful Advice

  • You should create an animal struct that contains the actual GTKWidget * button, the name of the animal, and the pointer to the label that is being displayed at the bottom of the application 
    
struct animalItem { 
    GtkWidget * button;
    GtkWidget * nameLabelRef; 
    char * name; 
}; 

typedef struct animalItem AnimalItem_t;
  • Inside your main function, create a 2D array of AnimalItems that will represent the grid of animals: 
    
AnimalItem_t animals[5][5];
  • Use a gtk_table to build the grid of buttons and use the actual gtk_table_attach function to place the buttons in their correct table cells.
  • Remember you can pass in data (i.e. an AnimalItem) into the callback function of a button "click". Don't forget to typecast the user_data inside the callback function to an AnimalItem. 
    
static void cardClicked (GtkButton *button,
                gpointer   user_data)
{
   AnimalItem_t * animal = (AnimalItem_t *)user_data; 
   ...
}

Helpful Links

So What's Next?

Get started working on your HW#6 assignment while you have teaching staff present. It relies heavily off this lab.