Scribd
Upload
83 views

Lect03 GUI Programming1 GTK

This document provides an introduction and overview of GUI programming using GTK for a lecture on design automation. The outline introduces basic GTK concepts like widgets, events, signals, and callbacks. It demonstrates how to create a simple window with a menu, open files, edit text, and display figures. The document compares GTK and Qt frameworks and provides code examples for making a simple window and menu bar. It discusses using callbacks and show the final window. The document recommends using makefiles and provides assignments for students to learn GTK and create a GUI with a menu system, text editor, and drawing window.

Uploaded by

Teto Schedule
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
83 views

Lect03 GUI Programming1 GTK

This document provides an introduction and overview of GUI programming using GTK for a lecture on design automation. The outline introduces basic GTK concepts like widgets, events, signals, and callbacks. It demonstrates how to create a simple window with a menu, open files, edit text, and display figures. The document compares GTK and Qt frameworks and provides code examples for making a simple window and menu bar. It discusses using callbacks and show the final window. The document recommends using makefiles and provides assignments for students to learn GTK and create a GUI with a menu system, text editor, and drawing window.

Uploaded by

Teto Schedule
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

INTRODUCTION TO DESIGN AUTOMATION

Lecture 3.
GUI Programming – part 1: GTK

Guoyong Shi, PhD


[email protected]
School of Microelectronics
Shanghai Jiao Tong University
Fall 2010

2010-9-15 Slide 1
Outline
• Introduce basic GUI programming in Gtk.
• Learn the concept of widget, event and
signal, and callback, etc.
• Learn to create menu, open file, edit text,
and display figures, etc.

2010-9-15 Lecture 3 Gtk slide 2


GTK vs Qt
• GTK is a toolkit for C programming.
ƒ Also possible for C++, but requiring programming
skills.

• Qt is mainly for C++ programming.

2010-9-15 Lecture 3 Gtk slide 3


Make a Simple Window (1)
• gui_drill01.c
#include <stdio.h> (for GTK lib)
#include <gtk/gtk.h>

int main( int argc, char *argv[] )


{
int win_W0 = 400, win_H0 = 300; /* initial window size */

2010-9-15 Lecture 3 Gtk slide 4


Make a Simple Window (2)
gtk_init (&argc, &argv); /* initialized GTK */
/* Create an initial window */
GtkWidget *window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
gtk_widget_set_size_request (GTK_WIDGET (window), \
win_W0, win_H0);
gtk_window_set_title (GTK_WINDOW (window), "GUI-DRILL01");

g_signal_connect (G_OBJECT (window), "delete_event", close window


G_CALLBACK (gtk_main_quit), NULL);

height

2010-9-15 Lecture 3 Gtk width slide 5


“vbox” for holding a menu
/* Make a vbox to hold a menu-bar and other gui layouts. */
GtkWidget *vbox = gtk_vbox_new (FALSE, 0);
/* <gboolean homogeneous = FALSE>; controls whether each object in the box
* has the same size */
gtk_container_add (GTK_CONTAINER (window), vbox);
gtk_widget_show (vbox);

vbox

2010-9-15 Lecture 3 Gtk slide 6


Make a menu bar
/* Create a menu-bar for showing all menu titles. */
GtkWidget *menu_bar = gtk_menu_bar_new ();
gtk_box_pack_start (GTK_BOX (vbox), menu_bar, FALSE, FALSE, 2);
gtk_widget_show (menu_bar);

GtkWidget *menu = gtk_menu_new (); put the menu_bar in vbox

vbox

2010-9-15 Lecture 3 Gtk slide 7


Make the 1st menu item
/* (1) Create the 1st menu-item with a name. */
GtkWidget *menu_item = gtk_menu_item_new_with_label("Open File ...");

/* (1) Append the entry to the menu. */


gtk_menu_shell_append (GTK_MENU_SHELL(menu), menu_item);

/* (1) Define callback for each menu entry. */


g_signal_connect_swapped (G_OBJECT(menu_item), "activate",
G_CALLBACK(menuitem_response),
(gpointer) g_strdup("Open File ...") );

callback function
/* (1) Show the 1st menu item. */
gtk_widget_show (menu_item);
message passed to callback

2010-9-15 Lecture 3 Gtk slide 8


Make the 2nd menu item
/* (2) Create the 2nd menu-item with a name. */
menu_item = gtk_menu_item_new_with_label("Save");

/* (2) Append the entry to the menu. */


gtk_menu_shell_append (GTK_MENU_SHELL(menu), menu_item);

/* (2) Define callback for each menu entry. */


g_signal_connect_swapped (G_OBJECT(menu_item), "activate",
G_CALLBACK(menuitem_response),
(gpointer) g_strdup("Save") );

/* (2) Show the 2nd menu item. */


gtk_widget_show (menu_item);

2010-9-15 Lecture 3 Gtk slide 9


Hook up the menu
/* Define the menu label */
GtkWidget *menu_head = gtk_menu_item_new_with_label ("File");
gtk_widget_show (menu_head);

/* Hook up the "menu-items" to the "menu_head" */


gtk_menu_item_set_submenu (GTK_MENU_ITEM (menu_head), menu);

/* Append the menu title to the menu_bar. */


gtk_menu_shell_append (GTK_MENU_SHELL (menu_bar), menu_head);

/* Show the window */


gtk_widget_show (window);

gtk_main (); /* enter the gtk display loop until the window is destroyed */

return 0;
} /* END OF THE MAIN CODE */

2010-9-15 Lecture 3 Gtk slide 10


The callback function
static void menuitem_response( gchar *string )
{
printf ("%s\n", string);
}

2010-9-15 Lecture 3 Gtk slide 11


The final window
• The GTK window generated

* Your SPICE simulator should have a window for functionalities and


displaying.
2010-9-15 Lecture 3 Gtk slide 12
Use “makefile”
CC = gcc
PROGRAM = gui_drill01

all: $(PROGRAM)

$(PROGRAM): $(PROGRAM).c
$(CC) $< -o $@ \
`pkg-config gtk+-2.0 --cflags --libs`

(needed for linking to the GTK libraries)

Important: Learn to write “makefile” for compiling your project and for
multiple-task programming.

2010-9-15 Lecture 3 Gtk slide 13


Choose a file to open ...

The “Choose file” widget


provided by Gtk.

2010-9-15 Lecture 3 Gtk slide 14


A scribble window

You can program to do hand-


drawing.
You also can program to
display coordinates and
simulation waveforms.

2010-9-15 Lecture 3 Gtk slide 15


How to make a command window?
• GTK does not provide a widget for use as a command
window.
• User can type in text and do text editing in the
command window.
• You can use the text widget to program a command
window.

2010-9-15 Lecture 3 Gtk slide 16


Command Window
• A command window is not purely a text editor.
• You need a command parser to recognize the
commands.
• Programming a text widget into a simple
command window is not hard (exercise).
• Programming a sophisticated command
window (like the one in MATLAB) requires
great programming skills:
ƒ symbol table; parser; grammar; etc.

2010-9-15 Lecture 3 Gtk slide 17


Summary
• Introduced 5 programming drills in this
lecture:
1. A simple window with a simple menu.
2. A simple window with a menu system.
3. A window with two menu items working: one for
opening a text file, the other for popping up a
drawing window.
4. Modify 3 so that multiple text files can be opened
in tabs.
5. Create a simple command window (but command
line not parsed).

2010-9-15 Lecture 3 Gtk slide 18


References
• GTK+ Reference Manual
• GTK+ 2.0 Tutorial
• GDK Reference Manual
ƒ GIMP Drawing Kit (APIs for drawing and
windowing)

• All available online

2010-9-15 Lecture 3 Gtk slide 19


Programming Kickoff
• How to write professional programs?
ƒ Divide your project into modules
ƒ Learn multiple-file programming
ƒ Compile using “makefile”

• After exercising Gtk/Qt for a while, every


team must decide on using one GUI toolkit.

2010-9-15 Lecture 3 Gtk slide 20


Assignment 1
This assignment contains the following parts:
• Learn GTK and run some examples.
• Write a simple GUI window containing
1. a menu system;
2. a text editor;
3. a drawing popup window;
4. a simple command window.
(see the requirements next ...)

2010-9-15 Lecture 3 Gtk slide 21


Requirement 1
On the menu system:
• The following menu system is for your reference.
• Make your menu system easily modifiable.
• Your menu system always changes as your project proceeds.
• So you should not “hard-code” your menu;
• rather, think about “clever” programming to make the menu
change easy.

File Edit Tools Simulate Window Help


Open Netlist ... Delete Floorplan Spice New Window Help & Support
Save Undelete Placement Digital Arrange All About ...
Save As ... Copy Route Mixed-Signal Cascade Contact Developer
Exit Extraction

2010-9-15 Lecture 3 Gtk slide 22


Requirement 2
• Add the following two functions to your menu
1. Open a text file editor
2. Pop up a window for hand drawing

ƒ You can use the GTK examples in the GTK package


you download.
ƒ Understand the examples and put the separated
code together in one GUI program.

2010-9-15 Lecture 3 Gtk slide 23


Assignment Due
The rule for “due” through out the course is:
• Submit your finished assignment (including
code and documents) to Moodle in one week
after the lecture is finished.

• Your turn-in must include:


ƒ A text report describing the programming details;
ƒ Your source code must be well-commented;
ƒ Must have a makefile.
ƒ Don’t use any automatically generated makefile.

2010-9-15 Lecture 3 Gtk slide 24

You might also like