Interactive Museum Exhibit Display

Interactive Museum Exhibit Display

Client:  Oakland Museum of California
Tools:  JavaScript, jQuery, HTML5, CSS3, XML, HTML Application

"Land Grab", a permanent exhibit in Oakland Museum's Gallery of California History, portrays the rapid growth sparked by the Gold Rush era of the mid-19th century. VG collaborated with the museum to create an interactive kiosk display featuring a rich set of scanned maps and documents from that time. Through the touchscreen display, visitors can explore a map of California and closely examine the images and compare them side-by-side.

VG designed a simple two-part interface that puts the focus on the detailed imagery. A map of California provides the geographic context and a custom image viewer allows for careful study of the maps and documents. Thumbnails of each image are located on the map. Touching the map zooms down to the next level and users can pan through the map and see what images are located in different areas.

Touching a thumbnail opens it in a viewer. Multiple viewers can be opened, moved around the display, and resized allowing for inspection and comparison in a manner similar to a light table. Within the viewer, tapping the image zooms in to reveal the fine detail, careful linework and labeling, and the vintage colors found in these maps and documents.

In several areas there are overlapping thumbnails. To aid the user, thumbnails can be moved around and a connecting line is displayed from the thumbnail back to its location point.

The kiosk application designed by VG uses a unique combination of software development tools. The application integrates the Windows 7 touch screen environment with a browser-based framework. HTML5, JavaScript, jQuery, and VBScript modules support the user interface and application functions.

Initial screen showing the mid-19th century map of California with thumbnails positioned by geographic location.

Touching a thumbnail displays the high-resolution image which can be resized and moved around the display.

Thumbnails can be moved around the map for better viewing. An anchor line connects the thumbnail with its location.

Within the popup display you can zoom in and out to closely examine the intricate details of these historical artifacts.

The Info button displays detailed information about the image.

Detail of an image showing a colored sketch of a rancho property.