Think Google Street View, for browsing library stacks

Stack view takes Google Street View (where you can go down nearly every urban street for a look, virtually) but gives you a view of the library stacks.

You can't take a book off the shelf. What you can do is acquaint yourself with titles you may be interested in, books to enter into Google to learn more.

Stack view helps the serendipitious discoveries of browsing the physical shelves online. It's for when you're looking for something new; you can think of it this way:

        searching is for when you know what you're looking for, browsing's for when you don't.”

This was the original pitch video to the EdLab the host of the residency:

Get the Flash Player to see this player, or
Allow blocked content



      Systematically capture something 36ft long x 8ft high, from a distance of 20"


      Stitch the image into a single composite


       Serve it over the web


Panoramas vs. What this is

Creating large panoramas, where a camera rotates about a fixed point, is a common method of stitching multiple images to create a larger image, uncapturable by a single photo. This strategy couldn't work here, I needed to traverse the stacks - take a look:

Get the Flash Player to see this player, or
Allow blocked content



To get the best stitched result, it's necessary to take a slit-scan approach. Only in the center ~10% of each photo are the books orthogonal to the photo plane. As you look to either side of a particular snapshot, you begin to view the books obliquely (see the curvature in the movie preview below, and be sure to hit play for a narrated description). We only want to see each book as though we're standing directly in front of it.

Get the Flash Player to see this player, or
Allow blocked content


Every two inches I took a snapshot with the custom rig. With these ~1500 images, I cropped them into slits with the batch processor function. I then stiched these together in a semi-automated fashion. Of all of the available tools, Photoshop CS3's Photomerge tool produced the best stitched results. I went through a series of photomerging stages, merging neighbors, first in batches 5, then merged those results together in 2's, repeating, in a tree like fashion, until the row was complete.

A scalable, automated solution to this problem can be found in the work of Aseem Agarwala, et. al. There is a very interesting paper describing their work, which yielded some fantastic results (see below), though there isn't currently an available implementation.

Click Here:


Google Maps and Image Serving

Google maps, or something like Seadragon, solve the problem of rapidly loading and smoothly presenting massive images, regardless of internet connection speed. "Under the hood," all these strategies break the loading task into zoom levels, each of which is made up of 256px x 256px tiles. Your computer only loads what you can see in your viewing window. Nothing else. To better understand this multiscale image pyramid protocol, go here.

I chose Google Maps because its everywhere and there's a big community around it (but Seadragon is clearly slicker). There's also the great Image Cutter tool put out by the Centre for Advanced Spatial Analysis, University College London, to make life easier (see below). The Google Maps API serves the stack view image. Any image can be a "map" from through the eyes of the API. There are two ways to customize it:

1) Create your own tile layer which sits on top of Google's standard map tiles, (like The Mannahatta Project)

2) Or provide all the tiles yourself, as though you've created your own satellite image or something

Create Your Own GMap

0) Grab an image you want to turn into a map, here's a good test one

1) Get a key to run google maps from your web address: Google Maps API sign up

2) Got to CASA and download their Image Cutter (it also generates the code for you)

3) Insert your sign up key (see step 1) in CASA's code and test it locally in firefox (I like to set imageWraps=false)

Gmaps Resources

* Google Docs - concepts and some nice UI methods
* Google Groups - The forum to search for answers
* Mapki - lots of examples and discussion
* Econym - great tutorials
* Daniel Gasienica - image pyramid explanation
* Google Maps Mania - unofficial gmaps blog
* Powerhut - custom marker creator
* Marc Grabanski - integrating jquery with gmaps
* CASA - the amazing Image Cutter & code generator
* Some inspiration - design portfolios and art collections