video.txt from gzz at Krugle

Show video.txt syntax highlighted

Script for the accompanying video.
{{word}} = stress word - simulate italics in text.

[ show title ]

[ show the two views of the A-E system, no animation, flip every 2 seconds ]

In this abstract diagram, we see two views of the same objects A to E.
Shown in sequence like this, it is not simple to see the relationship
between the views.  This is the problem which the Vob system is intended
to solve.

The Vob system allows smooth animation between the different views ---

[ show the same views, this time animation between them, continue
  flipping with animation ]

so that you can immediately see where the visual things representing the
same underlying object are on the different views.

Animation, as such, is of course nothing new.
What is new is that the code for the first and second view
can be written by different people, without knowledge of each other.

The animation is automatically
generated by the Vob system, as discussed in the article.


[ Otsikko: Demo: Different Focus+Context views of GZigZag
]

The Vob system was developed originally for GZigZag and
we shall first discuss the views there.
GZigZag is an implementation of Ted Nelson's ZigZag structure,
where 
[[ Fade onto the vanishing view]]
all data is stored in small units called {{cells}}. Each rectangle
on the screen is one cell.

Cells are connected using {{dimensions}} which locally work like
a spreadsheet but there are no restrictions between connections
of cells globally.

For example, if we go ..XXX directions
[[
- In Vanishing:
  - Show the locally euclidean property
]]
we come to a different cell. However, we can go back .. XXX directions
and we end up where we were originally.

The view you see is a focus+context view of cells starting from the
cursor, on the center, an moving along different dimensions.
When moving around,
the Vob library is used to generate the animations: the views only
specify the discrete keyframes.
This makes the view code simpler.
[[
  - Move a bit around, 
]]
This is especially useful when moving more than one step: the
Vob interpolation produces natural-looking results which retain the user's
orientation.
[[then with the mouse  (XXX Note: the soundtrack should have clicks
			for keys and the mouse!!!)
]]


There are several different GZigZag views that can be used
to view the abstract space of cells in different ways.
[[
  - Move around a bit more in vanishing/revper
  - Go to 'blinkenlights'
- Show StretchVanishing just a little bit
]]
The views can be very different, not based on cells at all
[[
- In RankText:  XXX Show the animation back&forth between ranktext and normal
    several times!!!!
]]
here, we see a view that takes cells on a given rank and renders them
as a continuous stream of text. The interpolation works between this view
and the cellular views.

[[
  - Move around to show that the animation works with RT, too
]]

[[
- Switch to Presentation
- Back to Vanishing
]]

This concludes our demo of GZigZag. 

[ Demo: File Browser ]

Next, we shall see how Vobs can be used in the context of conventional
widget sets. 

[ 	Fade in.
 right pane:
  show a directory which will just fit on the pane in row view; animation
  turned off, connections turned off; column view, ordered by name ]

Here is a file
browser implemented using Vobs and the Java Swing toolkit. 
Note that this is just a simple proof-of-concept demo 
and most features of a real
file browser aren't implemented. 
Look at the right half of the window:
the files are ordered alphabetically. Let's order them by modification
date.

[ change right pane to "sort by date" ]

Now let's switch to a view that shows the files in rows instead of columns.

[ change to row view ]

Could you say what went where? It's the same problem as with the abstract
diagram we've seen before. Let's turn on the automatically generated
vob animation...

[ turn animation on ]

...and change back to the column ordering.

[ switch to column view ]

Much clearer, isn't it? 

[[ switch back and forth a couple of times !!! ]]

Now please turn your attention to the left
part of the window.

[ The left pane shows a directory with only a small number of entries,
  12 or so. It is in row view. They are ordered by date. ]

These files are ordered by date. Let's order them by size.

[ change to order by size ]

Other than with the non-animating view we saw before, here it is immediately
clear what went where. 

[[ Again, repeat a couple of times back&forth ]]

In our big directory in the right half of the window,
that isn't quite as clear ---

[ change order of right pane back to sort by name ]

but the animation still shows what is happening.

[ change right pane's view to rows ]

One important case is resizing when looking at a row view.
Let us first look at this case without animation.

[ turn animation off,
  resize using the JSplitPane's drag handle in the middle of the screen ]

Without animation, it is be completely unclear to the user which files
went where.

Let's do the same with animation

[ turn animation on, resize again.  XXX !!!]

Much bettter.

Now, let's move a directory up. Again, first without animation

[ in the right pane, turn animation off, move a directory up ]

With animation, this is again somewhat clearer:

[ turn animation on, move another level up ]

Note how the animation shows you where in the higer-level directory the
previous directory is shown. If we turn animation off--

[ turn animation on again ]

Now let's move up a level in the left half of the window.

[ move up in left pane; now both panes show the same directory, but in
  different views and orderings. The directory should fit on the screen
  entirely ]

We see the same directory in different views. Let's turn the connections on
which show us files that appear in both views.

[ turn connections on, move mouse cursor over the demo window ]

To see where a file is in the other view, simply move the mouse cursor close
to the file and the connection is shown.

Finally, let's open an image file.

[ open (double-click on) an image in the right window ]

This type of opening is common in modern OSes. [[Oh-Es-ies]]
However, the point here is that vobs are a general method that give this
as a special case easily.


# Hm... maybe leave it out. It doesn't look as good.
# Just put in a screenshot in the article, it's too static to be
# interesting.
# [ Referential media ]
# 
# Just move around a bit, as there is nothing else to do.
See more files for this project here