CPSC 581/599.81
Interaction Design

Saul Greenberg (instructor)

Back to Student Work Repository

Project Main Page


a visual summary

Photoscape Overview

Photoscape is a visual photo management system which makes use of a set of maps to locate, place, and arrange photos. These maps can be seen in the "Map Area" pane. A continental map provides a world-wide overview, the regional map below it shows a more detailed region of the world, while the main map area provides the fully detailed workspace on which photos may be manipulated. A filter pane on the right hand side allows dynamic queries of the pictures. The filter criteria include year, hits (how many times a photo has been viewed), and keywords. Results of the queries get displayed directly in the map workspace (photos not matching the queries are hidden from view). Uncheck the "On" checkbox to turn off filtering. Click it once more to enable filtering with the previously used filter criteria.

The "File System" pane allows groups of photos to be loaded from a directory. These photos will be placed in the "Unplaced Photos" panel, where they will await placement onto the map workspace. At the present time, loading picture from a directory is not implemented, and all photos in the demonstration are hard coded. The "Photo Information" pane in the lower right displays detailed information about a selected photo.

Just Dragging and Dropping

Manipulating photos on the map is as simple as dragging and dropping. To place a photo in the "Unplaced Photos" panel, drag it onto the desired location in the map workspace. Photos already on the map workspace can be repositioned by dragging them around.

Zooming and Sizing

We can zoom into the workspace map by adjusting the map zoom slider. Because the map is PDF, zooming does not compromise map quality, so lines and text maintain their sharpness. On the other hand, the zooming operation is very processor intensive, and there may be considerable lag. During zooming, the size of photos stays the same (or shrinks relative to the expanding background, depending how you look at it). Therefore, if we are viewing a group of photos that are clustered together, we can zoom into the cluster and the photos will gradually spread out.


The photo size slider allows us to resize the photos. Sliding it to the extreme left will display barely visible thumbnails, while sliding it to the extreme right presents large views.


Fanning Photos: Get out of my Way!

If photos are resized too large or if they are placed too close together, they will begin to overlap, hiding the photos underneath. When the mouse cursor moves overtop a cluster of photos, they will fan out, revealing any hidden photos. Once the cursor moves away from the cluster, the photos snap back into their original position.


Panel Resizing: I Need More Space!

If the map workspace is too limiting, we can resize or completely hide the "Unplaced Photos" and "Filter" panels by dragging the divider bar lower (or further to the right). Alternatively, clicking the "Unplaced Photos" tab will instantaneously collapse the panel. Clicking it once more will restore the panel to its previous dimensions.


Hit Count

The blue border around each photo thumbnail is a visual variable indicating its hit count - how many times it has been selected for viewing. Each time the photo is clicked or dragged into the Information Pane, its hit count is increased. Photos with a dark blue border have been visited many times and may therefore be more important (hence the dark border causes them to stand out); those with a light border have rarely been visited.

Keyword Searching Made Easy

One of the filter criteria available for dynamic queries is keyword. Entering keywords can be a tedious process, especially if we use several keywords for each query or if we are having a difficult time remembering what keywords are valid. To alleviate these problems, the keyword entry implements auto-complete.

For example, we can begin typing the word "glacier" for the first keyword, and the remainder of the word is automatically filled in. We can then press "Enter" or click in the empty space below the current keyword field, and a new field appears, ready for the next keyword entry.

Note that keyword searches can be "anded" or "ored" by clicking the appropriate radio button.

Need More Information?

The Information Pane both displays and allows editing of information for a selected photo on the map or in the "Unplaced Photos" panel. To select a photo, simply click on it or drag it into the picture frame above the "View" button. The photo's date, description, and associated keywords appear for viewing or editing (currently editing of information is not implemented).

Clicking on the Date menu brings up a calendar for making a quick date selection. Clicking the "View" button brings up a full screen view of the photo.

CPSC 581/599.81
Interaction Design

Saul Greenberg (instructor)

Back to Student Work Repository

Project Main Page

Submitted on April 24, 2001