Hello, I'm Brad Myers, and I'm going
to be demonstrating the Peridot User Interface Management
System.
Peridot stands for programming by example
for real-time interface design obviating typing.
Peridot allows the user interface designer
to create complex, graphical, highly interactive,
direct manipulation interfaces by demonstration
without programming.
This is achieved by applying ideas
from visual programming, programming
by example, constraints, and plausible inferencing.
By successfully integrating these techniques,
Peridot promotes extremely rapid prototyping
since interfaces can be created and edited
very quickly and easily.
When you use Peridot, you get a number of windows,
as you can see here.
That was the drawing area.
This is the command menu.
Up here are the parameters to the procedure.
And down here is the prompt an error message window.
And over here is a code window.
Now this doesn't have to ever be seen by actual designers,
and it's really for debugging.
So now we're going to draw a rectangle.
And of course, the code is updated immediately
to correspond to the current picture.
Now we're going to draw another rectangle.
And when we do this, Peridot is going to try and automatically
infer a graphical constraint of the old rectangle
to the new one.
And down in the prompt area, it's
asking me to confirm this constraint, and which I'll do.
And then it'll immediately adjust the picture
to be exactly even.
These constraints are important for Peridot,
and they are also helpful for the user
because they help to automatically beautify
the picture.
When you draw things, you can select them.
And in addition, the parameters to the procedure
can be selected.
And of course, things can be deselected.
Now what we're going to do is edit this picture.
And when we do, we can use the mouse
to draw the new extend for it.
And when we change it, the black rectangle
is going to change with it because it has a constraint.
When you invoke Peridot, you can do it
by pointing at this logo window.
And then it pops up another window
in which you can type in the name of the procedure
you want to create.
In addition, you type in the names of the parameters
to the procedure and example values for each parameter.
Here, we're going to create a menu
and so we'll type in, say, some colors as the example
value for the kinds of things we want to appear in the menu.
Let's say, for some reason, that we want to have some of these
be illegal.
And we'll just use yellow and magenta as illegal values.
The procedure we'll also have a little bar
that moves up and down.
And this is represented by an active value
called current items.
Now the window is displayed.
And then we'll start drawing the picture.
First, we start by drawing the background graphics.
This window will have a drop shadow.
So we start by drawing a gray background.
And then we draw a black rectangle, slightly offset,
to represent the border for the window.
Of course, Peridot immediately asks us
about graphical constraints and adjusts the picture.
Now we're going to draw the white rectangle, which
will be the inside area.
And now we're going to copy the first element of the parameter
items down into the picture.
It's centered at the top of the rectangle, that's right.
And now we're going to copy the second parameter of the--
second element of the parameter directly underneath it.
Peridot guesses that it's centered underneath,
which is correct.
And now since we've done the first two elements of the list,
Peridot guesses that we want to do
the rest of the elements the same way, and I confirm this
and then it does the rest to the list.
Now what I'm going to do is change
the size of the white rectangle to be
almost the size of the strings.
And then Peridot will guess that what I really want
is for it to be the size of the entire set of strings.
And this is right.
And then it'll go through, and notice
that the relationships with the black and the gray rectangles
no longer hold and it asked me if I want to fix that up.
And so I did.
Now what we're going to do is erase with a gray rectangle
to show which values are illegal.
So we draw this little gray rectangle
around one of the items.
Peridot guesses that it's exactly
the same size as this item, which is, of course, correct.
And it adjusted to show that.
Now I'll select this and make it conditional
on the parameter illegal items.
Peridot guesses that this parameter controls the display
by being the name.
And then it immediately updates it to show it
over yellow and magenta, since these are the ones that
are in the parameter.
Now we're going to draw in inverting
black rectangle to represent where the mouse is.
And so we'll just draw this.
Oops.
I didn't draw it quite right, but that's OK
because Peridot's rules will fix up the picture.
The black rectangle has two dependencies,
both on the string blue and on the white rectangle.
Now we're going to define that this depends on the mouse.
Now we can't use the real mouse because it's used
for giving Peridot commands.
So we use the simulated mouse.
So we pick it up by the nose, place it over the item,
and press on the left button.
Then we define that this is mouse dependent.
Peridot will guess that it should move over
the items of this list.
And so we select this active value current item
to show which one we want.
Peridot will immediately move it to red
because that's the value of current item.
And then it guesses that even though we
have the simulated mouse over one of these items,
it wants to do them over all the same way.
Then it wants to know if we want to move--
to use a different value when we're outside,
so we type in nil.
And now we can try this out immediately.
So we'll press on the simulated mouse button
and move it around.
And sure enough, it works.
It's pretty clumsy to use a simulated mouse,
so we can use the real mouse also.
We see that it doesn't yet know that these items are
supposed to be illegal.
So we can now define that to be illegal.
First, we have to go out of run mode, which
we do by hitting the stop key.
And then we define that this is a mouse exception.
Now we can try it out again and we'll
see that it will not display over
the items that are illegal.
So what we've done now is create a procedure that handles menus.
Now this is a parameterized procedure.
The strings red, green, blue, et cetera,
are just an example of the kind of value we can do.
So before we write it out though,
we have to add a return statement
so the procedure will exit.
And we'll save to return when the interaction is complete.
So now we've-- now we finished this procedure,
we've written it out, and now what we're going to do is
execute this procedure on a different set of parameters.
So we'll say, type in the days of the week
as an example of another set of parameters
that this might work on.
And let's say, for some reason, that Wednesday and Friday
are illegal days of the week, whatever.
And so we get the menu.
It's the same as this menu.
It's the same procedure exactly as this menu.
But again, we supply different parameters.
Notice that the sizes change and that Wednesday's legal.
Peridot uses Peridot created menus for its own interface.
Here's some pop-up menus.
All of these pop-up menus use the same Peridot
generated procedure.
And notice that the width of this
depends on either the width of the title
or the width of the items.
A different kind of-- a different procedure
is used to allow you to select the objects by name.
And we're bringing up the Select By Name menu now.
And this will display all of the items.
There's a little bar, of course, when you move the mouse.
And when you press down, you get this little S,
which shows which items will be selected when you're finished.
You can toggle whether where the S appears.
And then when you're finished, you press on Done.
It goes away and the items are selected.
Peridot can also create other kinds of menus.
Here's one that looks a little like the Macintosh,
it has an illegal item.
Here's a sort of a property sheet thing.
When you press down, you get this little black circle
with the left button.
And you erase with the middle button.
Here's a menu where the items go back and forth
when you press on them.
This menu is a menu of colors and there are four arrows.
These are separate icons that define the picture.
Here's a little number pad.
It sort of simulates three dimensional pressing.
This time we're going to define something different.
We're going to define a scroll bar where the indicator can
move continuously.
This bar will show both the percent of the file we can see
and where in the file we are looking.
So first, we'll draw the background graphics.
And then we'll draw an indicator bar
to show what part we're seeing.
The way you do this kind of operation in Peridot
is you graphically draw both extremes and tell Peridot
to form a linear interpolation between them.
OK.
Now we're finished with the background graphics
and I'll draw the indicator bar.
First, we'll draw it when we can see 100% of the file.
And so we draw it to full height.
Then we select it and tell it to remember this as one extreme.
Now we're going to edit it with the--
by specification, we're going to say that the height should
be exactly too high.
And this represents when we can see any of the files.
So now we're going to select this and tell it to remember
that as the other extreme.
So then Peridot asks what this would depend on,
and we'll select the active value percent seen.
Peridot then asks us to type in the value
of percent seen that corresponds to this, which is zero.
And to the previous, which was 100.
And then it immediately updates it to show 57 out of 100 tall.
We can change this to make sure it works.
So we'll type in a new value, say, 25,
and it updates immediately.
Now this negative value can be changed by application programs
also.
So we'll go up here into another window, which
represents a different process, and type
in the set active call.
So we'll change percent seen to be, say, 75%.
Then the value and the window changes.
And of course, the bar changes also.
Let's change it back to be 20.
OK.
Now what we're going to do is specify
independently and separately at a different linear
interpolation.
And this one will show what part of the file we're seeing.
So it will tell it to remember this as one extreme.
And then we'll modify this with the mouse
to be the other extreme.
So let's move it up to the top.
It's guessing constraints on this.
And then we'll select this Intel to remember this
as the other extreme value.
Again, it wants to know what this should depend on.
And this time, we'll select where in file.
Now this number, say, represents the byte position in the file.
So we'll say that this goes between 0 and, say, 5,000.
So then it'll immediately update the bar
to be 2,300 out of 5,000 or about 50% of the way down.
Now this time we want the bar to be movable by the mouse.
So we'll take the simulated mouse
and we'll put it on top of the bar.
Say, with the left button down.
And then we'll tell it that the bar now is mouse dependent.
It wants to know if we should trigger
when we're exactly over this bar, which is correct.
And then it guesses based on the position of the simulated mouse
that we should use the middle.
So we can run this with the simulated mouse
or with the real mouse.
Of course, the values in the top window are updated
and the bar moves with the mouse when we're in run mode,
An important point here is that the particular graphics
are independent of the numbers.
So that we can change the graphics
and the application program who's dealing in these numbers
is not affected.
So we can, say, edit this.
And due to all the constraints, everything
will keep the same proportions.
And of course, it'll still operate with the mouse.
Here's another kind of scroll bar.
This time we can press on the little arrows
or move the bar up and down.
And we can also do it horizontally.
In addition, these scroll bars are part of a larger interface.
The window can be changed size when you press over this icon.
And you can move the position when you press on this one.
It's important to note that both of these interactions, all
of these interactions are defined entirely
inside of Peridot, and the application program
is only in charge of displaying the picture inside the window.
When we want to stop, we simply move over here
to the stop button and press it.
This is similar, except you're using
a two dimensional scroll area, which
was defined by two independent linear interpolations.
Peridot can also create interfaces
that use multiple clicking on the mouse buttons,
as well as multiple input devices
active at the same time.
All of this allows Peridot to create its own interface, as
well as all of the interaction techniques
in the Macintosh toolbox.
Peridot proves that user interfaces can
be created by demonstration without programming,
and that visual programming, programming by example,
constraints, and plausible inferencing,
can be successfully integrated into practical, useful,
and easy to use systems.
Thank you.