CS349 - Implementing User Interfaces - Spring 2010

Public Service Annoucements

1. Assignment 3.

Lecture 25 - Scripted Interfaces

Here's a very common type of problem.

An application has evolved in the following way

1. Started out life as a big Fortran code compluting fluid dynamics in the 1960s.
   • computed overnight
   • users looked at numbers on fan-fold paper.
2. Incorporated static computer graphics in the 1980s.
3. Animated the computer graphics in the 1990s.
   • and the animation came closer and closer to `real-time'. Define carefully what this means.

Now the owners want a `graphical user interface'. (They actually ask for `something like Windows'.)

• This is actually the most common type of user interface project.

How is it done?

UI Architectures We've Seen

Xlib-style

• interface and application mixed together everywhere
• roll everything yourself
• have lots of control, perhaps too much control

Java-style

• interface and application different classes within a single program
• interface constructed from components
• components infinitely plastic (malleable)

And a Third One We've not yet Seen

Scripting style

• to make a cheap and dirty interface quickly
• interface and application are separate programs
• interface constructed from components

We'll make such an interface out of Python.

This interface also includes a new interaction style, direct manipulation. What is direct manipulation?

• In most interfaces you manipulate the application at one remove
  • interface affordance maps metaphorically onto application manipulation
  • e.g., dragging a file to the garbage maps metaphorically onto crmbling and throwing a piece of paper.
• Interface actions - button click and mouse drag - stand for application action - discard document. Why?
  • `discard document' has no necessary geometric component, but
  • we only are able to manipulate geometry in the interface, so
  • we extracted a geometric component from a particular - but typical - instance of `discard document', and
  • by synecdoche, made it stand for the abstract idea `discard document'.
• Some applications have inherent geometry. For example,
  • three-dimensional design,
  • text layout,
  • animation,
  • illustration, etc.
• When we do geometric things in the interface
  • click on an object
  • drag an object

  the positions are interpreted directly in terms of the geometry of the object we are manipulating, possibly through some geometric transformations, like

  • scaling
  • translation

This is what we call direct manipulation.

• A subtle point. We can directly manipulate the interface, and we can directly manipulate the application. These use the same programming constructs, but are conceptually different.

You did direct manipulation in assignment 1,

• calculating all the geometry yourself, based on high school geometry,

Doing this on a large scale is not practical,

• we need systematically to develop a model of geometry that we can map onto the interface.

Scripting Languages

You've used (heard of) quite a few of them

• sh
• perl
• tcl
• python

The idea is that they allow you to combine separate, existing programs into something useful quickly. For example,

• find . -name "xxx" -print

  is really (should really be)

• du -a . | awk '{print $2}' | grep "xxx"
  • which has the close cousin

    grep "xxx" `du -a . | sed 's/^.* //'`

• tr " " "012" | sort | uniq | diff /lib/dictionary | sed '/^> /d'
  • which is what?

In this course we will use Python. Why?

1. It's the latest, greatest thing, an object-oriented scripting language.
2. It has a collection of classes that do all teh usual UI construction stuff.
3. (You haven't seen it in SE courses.)

Direct Manipulation Interfaces

How they work

1. Grab something with the mouse
2. Move around the mouse to torment it a little
3. Drop it when you like the result

The very simplest direct manipulation interface

1. Locations on the screen have special functionality associated with them
   • usually indicated by little drawings, called icons
   • e.g. wastebasket.
2. Move something
   • usually indicated by a little drawing

   to the special location.

3. The special functionality is applied it it
   • if appropriate

Such interfaces are usually best when there are lots of special locations.

• Programs that manipulate geometry are the obvious candidates.
• Every location is special, meaning `put me here.'

In fact, geometry manipulation programs often want different interpretations for a single location

• `Select what's here.'
• `Move whatever's selected to here.'
• `Make here the centre of rotation.'
• and so on.

Modes are used to create separate contexts that disambiguate the meanings.

Return to:

• CS349 - Spring 2010 - Lecture schedule
• CS349 - Spring 2010
• CS349 page
• Bill Cowan's home page.