cs349 - s10 - Lecture 26

CS349 - Implementing User Interfaces - Spring 2010

Public Service Annoucements

  1. Assignment 3.

Lecture 26 - Direct Manipulation

How direct manipulation works

  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
  2. Move something to the special location.
  3. The special functionality is applied it it

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

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

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

What we need to think hard about

When we manipulate graphical objects

The Future of Direct Manipulation

Lasso is distinctly different from anything we have seen so far.

Gesture

Multitouch

Overloading

Learning The Principles of Direct Manipulation

  1. Geometry manipulation applications have the richest repertoire of direct manipulation.
  2. Direct manipulation requires a more powerful model of geometry.

One Preliminary - Points and vectors

A point is a location in space; what is the difference between two points?

Both are designated by two real numbers (in the plane); what's the difference?

Thus, we have two kinds of entities, both represented by the same notation. To differentiate

Does this make sense?

  1. P - P -> V
  2. P + V -> P
  3. V + V -> V
  4. P + P doesn't make sense: it gives (x + x', y + y', 2), which isn't defined
  5. aV -> V
  6. aP doesn't make sense: it gives (ax, ay, a), which is only defined if a=1..

Important finicky (and practical) point

Graphical User Interfaces

What does this tell us about graphical user interfaces (more precisely, interfaces that use direct manipulation)?

We (for some value of we) know a powerful formalism for manipulating the vector part

How do we extend these to points?

  1. Rotate about the origin.
  2. Reflect about the y axis.
  3. Scale with respect to the origin.

To get these correct in 3x3 matrices

          (  cos(t)  sin(t)  0 )
(x, y, 1) ( -sin(t)  cos(t)  0 ) = (x cos(t) - y sin(t), x sin(t) + y cos(t), 1) 
          (    0       0     1 )

Now we just need to add in translation.

  1. Leave vectors unchanged (x, y, 0) -> (x, y, 0)
  2. Translate points (x, y, 1) -> (x+dx, y+dy, 1)

Now we can get any geometric figure specified as sets of points and vectors anywhere and any shape, just by multiplying matrices, which computers are very good at.

Matrix multiplication is just a technology for implementing an interface, and not an interface. We also need a framework for putting a human-understandable interface onto matrix multiplication. Here's how it's done.

  1. Implement an interface that returns a geometric operation that you want to perform.
  2. Interpret the geometric operation in terms of a sequence of basic transformations
  3. Write each basic transformation as a matrix.
  4. Multiply the matrices together, and apply the result to the thing you want to transform

Redundancy check

There are two ways to rotate a rectangle which is away from the origin.

  1. Consider it as a collection of points
    1. Translate to the origin
    2. Rotate at the origin
    3. Translate back to where it started
  2. Consider it as one point plus a collection of vectors
    1. Rotate the vectors

They `obviously' give the same answer. (Exercise left to the reader.)

You will find both representations in PostScript because one is sometimes more convenient than the other.

But for making a graphical interface it's usually better to stick to one or the other.

Graphical User Interfaces

Last lecture we talked about points and vectors, how they transform.

How does this help us make graphical user interfaces (more precisely, interfaces that use direct manipulation)?

Let's think for a minute about assignment 5. What needs to be done?

  1. drawing
  2. selecting
  3. transforming

Here's how we do it.

  1. Base all things you draw on a small number of basic figures, such as
  2. Use transformations to turn this into any quadrilateral shape

Matrices

The matrices you need (transposed if you like column vectors rather than row vectors)

  1. Translation (points only)
    ( 1.0    0.0   0.0 )
    ( 0.0    1.0   0.0 )
    ( dx     dy    1.0 )
  2. Rotation about the origin
    (  cos(t)   sin(t)   0.0 )
    ( -sin(t)   cos(t)   0.0 )
    (    0.0      0.0    1.0 )
  3. Scale along the x-axis
    (   a    0.0    0.0 )
    ( 0.0    1.0    0.0 )
    ( 0.0    0.0    1.0 )
  4. Reflect about the y-axis
    ( -1.0    0.0    0.0 )
    (  0.0    1.0    0.0 )
    (  0.0    0.0    1.0 )
    
        

These are standard transformations. How do we do more interesting and useful work?

These matrices transform points and vectors. Let's see how we do drawing.

  1. Store the standard shape in terms of points and vectors.
  2. Know how to draw the standard shape in terms of its points and vectors.
  3. Store with it a transformation matrix that turns it into the actual shape.
  4. Draw the actual shape using the transformed points and vectors.

And let's see how we do the inside test. (We could just use the transformed points, but there's an easier way to do it.)

  1. Fact. The transformations above - when applied to a point and a shape - do not affect whether or not the point is inside the shape.
  2. This gives us two options for doing the inside test
    1. Transform the standard shape into the point's world, using the transformation matrix stored with the point.
    2. Transform the point into the standard shape's world, using the inverse of the transformation matrix.

    We prefer the second, because we can choose the standard object so that the inside test is easy.

Therefore store the inverse matrix with the shape, along with the transformation matrix.

Exercises.

  1. What is the inverse matrix of each of the basic matrices?
  2. How do we multiply inverse matrices?


Return to: