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

        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.

Motif Examples: (from: )

(Common Desktop Environment (CDE))

Front Panel

Drawing Widget

File Selection Box Widget

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




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

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

e.g. SUIT (Simple User Interface Toolkit):
Can learn to build an interface in a few hours.
Designed for teaching.

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).



Touch, Gesture, and Marking

Haptic input (Greek for contact) - involves physical contact between computer and user.

Relating Task and Technology

Basic set of generic tasks:

Test:  Fly moves over screen under computer control

e.g. C:D 2:1, 2 cm of controller results in 1 cm. on screen.


Test: User selects each of a number of rectangles displayed on screen

Movement time (MT): time to move the hand to a target of width (W) which lies (D) distance away, where a is a constant and b=100 [70 - 120] msec/bit.

- time it takes (test by having user hit space bar after clicking on rectangle)

What is effective target within two dimensions or more?
What is effect of approach angle?

 - Also Fitts law task -> Holding mouse down can effect target acquisition

- Relative devices useless
- Absolute devices vary widely
- Resolution important (eg cartography)

- move mouse in x or y

- Thumbwheels work better than a mouse

- Task: tracking symbol is a ball that is dragged along a linear path without crossing parallel lines.

A Taxonomy of Input Devices


Chunking and Phrasing

e.g proof-reading marks

Style of interaction (gesture driven, e.g. pen-based)

Who Does the Recognition?

        Recognition is heart of marking system: block characters, cursive script, etc.

        Pattern recognition is hard and still unsolved.

        Should focus on systems where marks are recognized by user.

What is Recognition?

        High level marks, such as proofreaders, easier to learn.

Self-Revelation and Marking Menus:

Working within the Marking Idiom:



       Can take about one hour to learn.

       Only single stroke.

       No segmentation problem - which stroke belongs to what.

       Can recognize character when each one is written upon other.


        Marking system leave an explicit audit trail of user's actions.

        Figure/ground relationship on computer - know which marks made by computer and which by person

Situated Design


e.g. Myron Krueger - Videoplace - non-invasive (video camera, image processing)


Gestures in Collaborative Work

Two-handed Input

Three properties of bimanual asymmetric actions:

e.g. holding nail to be hammered.
       holding needle to be thread.

e.g. above examples.


 - navigation and selection

New paradigm: see-through interface

        Toolglass sheet with click through buttons.

        Magic lenses are visualization widgets analogous to magnifying glasses with diverse optical properties.

e.g. An achromatic lens over a drop shadow lens over a knotwork.

e.g. The local scaling lens

Realizing Inputs Full Potential

Transparent Access and the Physically Disabled

Device Independence and Virtual Devices

Application written in device independent way all it needs to know is kind of input (e.g. text).

Input Functions

Specify the following:

       Which physical devices are allowed

       How program and devices interact

       How data is input


Input Modes – how program and input devices interact

       Request Mode – application program initiates data entry

o      Data requested => process suspended until data entered

o      Device put into wait state until input request made

       Sample Mode – program and input devices operate independently

o      Program may run simultaneously with input devices

o      When program needs new data it samples current data

       Event Mode – input devices initiate data input to application program