Illustration and Part of Its History
Panel Showing Multiple Copy Commands
Panel Showing Part of Scene and Subdued Colors for Context
Initial Scene
Editing the History
The Final Scene
Overview

Most graphical editors provide no visual representation of the editing operations performed in a session. This makes multi-step undo somewhat precarious, and complicates re-using sequences of commands. Editable Graphical Histories is a visual representation of graphical editing commands that uses a comic-strip metaphor to show the history of the editing session.

With Editable Graphical Histories, related commands are coalesced into a single frame. Additional scene context is provided to show where the action is happening, and the context is visually de-emphasized. Any panel in the history can be edited directly in place (each is its own editing canvas!) to change the sequence of commands in the session.

Examples

The top picture (yellow) on the left shows an example of an illustration and part of its editable graphical history. The illustration is of a postcard celebrating New York State, and below it are five panels from the graphical history. The steps shown in the graphical history depict these steps: closing the polygon which forming the mountain's snowcap, setting its fill-color to be white, copying the mountain an additional four times, flipping the mountains about their Y axis, and adding the text "Adironondacks".

Editable graphical histories use several techniques to make the histories more compact and understandable. Related commands are coalesced into individual panels. For example, the second picture (green) on the left shows five related commands: the selection of the initial mountain and the following four copy commands. The number shown in the panel label is the number of commands grouped in the panel. To see these commands in more detail, the user can expand the panel to show the individual commands. Also, a history granularity setting controls how aggressively the panels are combined.

As you can see in the third (pink) picture on the left, the entire scene is not depicted in each panel. In this panel, the text label "Adirondacks" is added to the postcard. Any arguments to the commands, as well as the results of the commands, are included in the panel. Some nearby objects are included as context, indicating where in the scene the label is added. The context and command-objects can be rendered in different styles to highlight the result of the command. Here the colors of the contextual objects are subdued.

The histories themselves can be made editable - each panel can become an editable scene unto itself, and changes made to these panels can be propagated forward into the history. The fourth (blue) picture on the left shows part of a larger graphical editor scene, which was partially created by taking one of the "Fuel Filter" circles and copying it three times. We can scroll back in the history to the panel before the copying and make the panels editable. We then change the text to white and the circle to black directly in the history window, and propagate these changes forward. This generates the two new history panels shown in the purple picture to the left. The resulting scene is shown in the final orange picture on the left - all of the copies of the fuel filter inherit these changes.

History

In 1988, David (DJ) Kurlander implemented editable graphical histories for his Chimera editor. The technique was first published as an IEEE Visual Languages Workshop paper that year. The visual representation changed over time, as described in the second publication below. Editable graphical histories became the sixth chapter in DJ's doctoral dissertation, Graphical Editing by Example.

Publications

David Kurlander and Steven Feiner. Editable Graphical Histories.  Visual Programming Environments: Applications and Issues. E.P. Glinert (ed.). IEEE Press, Los Alamitos, CA. pp. 416-423. 1990. Reprinted from 1988 IEEE Workshop on Visual Languages. pp. 127-134. October 1988. Pittsburgh, PA..

David Kurlander and Steven Feiner. History of Editable Graphical Histories.  Watch What I Do: Programming by Demonstration. Allen Cypher (ed.). MIT Press. 1993. pp. 405-413.

David Kurlander. Graphical Editing by Example. Doctoral Dissertation, Computer Science Department, Columbia University. July 1993.

Videos

David Kurlander and Steven Feiner. Editable Graphical Histories: The Video. SIGGRAPH Video Review, issue 63. 1991. Extended abstract in CHI ‘91 Proceedings, pp. 451-452. Click here for the video, or here for the abstract.

David Kurlander. Graphical Editing by Example: A Demonstration. SIGGRAPH Video Review, issue 89. 1993. Extended abstract in INTERCHI ‘93 Proceedings, p. 529. Click here for the video, or here for the abstract.

Also See