Computer Graphics


Graphical User Interfaces (GUIs)

Development Tools

What are Development tools? :

·        Tools that help a developer convert interface specifications into an interactive system and that support all phases of system refinement including prototypes, implementation, testing, maintenance, and enhancement

Conventional Development Tools

e.g. X Windows:


Toolkits - a variety of interface building blocks called widgets and language for putting together

e.g. Motif, Xview, Tk/Tcl , Java AWT (Swing), Python GUIs

·         Widgets - buttons, menus, sliders, scrollbars, text editors, canvases for graphics, terminal windows

·         Interfaces are built by using widgets, and programming languages (e.g Tk/Tcl)

·         Widget Limitations:

o        Widget sets are small and restrict interaction techniques

o        Widgets are good for creating control panels BUT poor for what is seen inside. (e.g. Tk/Tcl for visualization resorts to OpenGL for graphics)

o        Programming in an abstract language is not easy way for putting widgets together.

GTK (  )

·        GTK+ is a multi-platform toolkit for creating graphical user interfaces.

·        Offering a complete set of widgets

·        GTK+ is suitable for projects ranging from small one-off projects to complete application suites.


GTK+ is based on three libraries developed by the GTK+ team:

e.g. GIMP (  )

GIMP is the GNU Image Manipulation Program. It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.




PyUI ( )

PyUI is a user interface library written entirely in the high-level language python.

·        Modular implementation that allows drawing and event input to be performed by pluggable "renderers".

o       Makes PyUI very portable and scalable.

·        Can run in environments from hardware accelerated 3D surfaces to regular desktop windows.

·        PyUI was originally targeted as a User Interface for games, but it has evolved into a more general UI toolkit with applicability outside of games.



·         A set of useful GUI widgets including buttons, list boxes, menus, and scrollbars

·         Windows with resizability and movability

·         An extensible event system for interacting with the user interface

·         An interactive python console window

·         Layout managers similar so the Java Swing layout managers

·         Portability and scalability



Interactive Builders - provide a direct manipulation of graphical and interface toolkits. Some are integrated into toolkit environment, e.g.



Glade - a User Interface Designer for GTK+ and GNOME ( )
·        Glade is a free user interface builder for GTK+ and GNOME, released under the GNU GPL License.
·        User interfaces designed in Glade are saved as XML, and by using the libglade library these can be loaded by applications dynamically as needed.
·        By using libglade, Glade XML files can be used in numerous programming languages including C, C++, Java, Perl, Python, C#, Pike, Ruby, Haskell, Objective Caml and Scheme. Adding support for other languages is easy too.



Java GUI Builders

Swing Designer:

·        Implements WYSIWYG GUI editing by dragging and dropping composites, layouts and controls.

·        Implemented as a bi-directional tool - directly generates Java code which can be changed in the graphical editor or directly in source.

o       All changes made directly to the source code will be reflected in the graphical designer.








·        FormLayoutMaker builds JGoodies Java forms

·        JGoodies Forms ( ) framework helps layout and implement elegant Swing panels quickly and consistently

·        FormLayoutMaker provides a WYSIWYG tool that enables developers to quickly layout Java screens using the JGoodies FormLayout layout manager.

·        The result is an xml file containing all of the constraints.



User Interface Management Systems (UIMS) - better said as "user interface development environments."
Separate Applications into 3 modules:

Good - Application and Interface separated
- Hard for designer to separate two in practice



Novel Approaches to Developer tools

Garnet - System and Tools - comprehensive toolkit:

Sample Applications of Garnet:

Amulet - Garnet's Successor

User interface development environment for C++ and is portable across X11 on all kinds of Unix (Sun, Dec, HP, SGI, Linux, NetBSD, etc.), Microsoft Windows 95 and NT, and the Macintosh.


Tools for Entire Development Cycle

Alternate Approach
- instead of "artifact centered" of existing tools USE "semantically driven user interface design."

Semantic model - interface developed as a declarative description and model becomes a plan that is used to let the developer manipulate in a way that is appropriate to its stage in the lifecycle.

e.g. IBM's Interactive Transaction System (ITS)

NOTE: Each layer corresponds to work roles of the development team members:

Groupware Toolkits
Supports and augments group work where conventional toolkits do not work

e.g. Groupkit Project - University of Calgary



1.gk_initConf $argv
2.gk_defaultMenu .menubar
3.pack .menubar -side top -fill x
4.set greetings "[users local.username] says hello!"
5.button .hello -text "Hello World" \

-command "gk_toAll say_hi

6.pack .hello -side top
7.proc say_hi {new_label} {
8. .hello configure -text $new_label
9. after 2000 {.hello configure -text "Hello World"}


SharedNotes is a system that allows people to create and manipulate both personal and public notes between three devices: a personal digital, assistant (PDAs, in this case the Palm Pilot), a large public display, and their office computer (which acts both as a personal device and a system for remote collaboration).



GUI Prototyping



·        DENIM is a system that helps web site designers in the early stages of design.

·        DENIM supports sketching input, allows design at different refinement levels, and unifies the levels through zooming.




Video      Talk


Paper Prototyping –

·        Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person ‘playing computer,’ who doesn’t explain how the interface is intended to work." Paper Prototyping

·        Paper prototyping can be used for virtually any type of human-computer interface – software, Web site, hand-held device, or even hardware.

·        Its purpose is to get quick feedback from users while the design is still (literally) "on the drawing board."

·        Some paper prototypes are hand-drawn, while others use printed-out screen shots. - The Book