Monday, December 06, 2010
DeepZoom Tips and Techniques

Deep Zoom Composer allows you to create graphic images that people can zoom in on interactively.

Typically, people use DeepZoom to make collages (collections of images arranged irregularly) or tabular, grid-like arrangements of equal-sized images so viewers can choose an image to zoom in and see more detail. The Hard Rock Café memorabilia site created by Vertigo is an example of a large collection of individual graphics arranged on one page. Another use of DeepZoom is to show a photograph of a large area, such as a panorama of Yosemite, so people can click a selected feature to examine it in detail. DeepZoom is also useful for showing a map of a large area that someone could zoom down to street level.

But you could also use DeepZoom to allow exploration of a single image. I created a website for an engineering services company (www.maddenPCBdesign.com). They take schematic diagrams of circuits from electrical engineers (a logical view of a circuit) and arrange where the actual physical components should be placed on the rectangular area the actual circuit board size and wire up their interconnections along with power and ground connections.

This process of determining where to place the interconnections between components is sometimes aided by autorouting software, but a skilled PCB designer is still needed for laying out complex dense digital circuitry on a small area circuit board. So the idea was to show samples of the company's work so that engineers could see the type of work the company was capable of doing for them.

I did a slideshow of a board design in progress and another showcasing their finished work. But I thought that a design that engineers could explore interactively would give them a better idea of the company's workmanship (and get them involved, not just as passive viewers), so I created a DeepZoom image of one of the finished designs.


On the finished page, you can zoom to an astonishing detail. You can fill your screen with one of the tiny red dots. But my first attempts were unsatisfactory. The image began looking jaggedy after one or two clicks. The problem is that the source image is a JPEG or PNG file, which is not resolution-independent (i.e., not a vector graphic).

To solve the problem, I asked for a series of screen captures of the upperleft, upperright, lowerleft, lowerright portions of the design. They could zoom in using their design software and keep the edges and lines sharp. I used Photoshop to create a new blank image with a very large area and pasted the parts of the whole image in place.

There were several places where the images didn't quite line up due to inconsistencies rounding off to the nearest pixel, but these would be overlooked as refresh problems on the screen. Once I had a large stitched-together unified image exported as a PNG file, I was ready to open DeepZoom Composer to place it on the design surface.

The DeepZoom Composer provides you with an HTML page with a zoomable image in the top left corner. But this is just a starting point. I added large text to serve as a title and smaller text to alert the viewer that this was not merely a static image on the page. Underneath the image, I added additional instructions suggesting that viewers should consider viewing the image full screen. There are 4 small round buttons by default in the lower-right corner of the image when you mouse over it, but they do not prominently advertise their functionality. Since full screen allows a viewer to take in the scope of the whole design, I decided to reinforce this capability with explicit textual instructions.

A graphic design principle when choosing colors is to use color purposefully. I wanted viewers to focus on the graphic, not the text, so instead of attention-getting white text I used a less prominent gray text color. I chose a sans serif font because the little serifs on letters might be disconcerting to an engineer because on a circuit board design, these would be weak points susceptible to breakage of the circuit (or simply because they would appear too fancy juxtaposed to the rectilinear lines and shapes of the image).

On the actual company website, I ended up using a Photoshop "zoomit" representation of the circuit board because potential customers might not want to download Silverlight if they didn't have it installed already. If that weren't available, I would've displayed a static image of the circuit board with a message explaining that they could explore the design in detail by clicking to install Silverlight (giving them an incentive to download Silverlight to get the full interactive experience).

Tim Heuer's Silverlight Firestarter presentation has more information on customizing the Silverlight installation experience. 

Words about people and things and ideas that you might find useful, interesting and enjoyable.

December 2003 / July 2005 / August 2005 / September 2005 / October 2005 / November 2005 / March 2006 / May 2006 / June 2006 / July 2006 / August 2006 / September 2006 / October 2006 / November 2006 / December 2006 / January 2007 / February 2007 / March 2007 / April 2007 / May 2007 / June 2007 / July 2007 / August 2007 / September 2007 / October 2007 / November 2007 / December 2007 / January 2008 / February 2008 / March 2008 / April 2008 / May 2008 / June 2008 / July 2008 / August 2008 / September 2008 / October 2008 / November 2008 / December 2008 / February 2009 / March 2009 / May 2009 / July 2009 / August 2009 / September 2009 / October 2009 / November 2009 / December 2009 / January 2010 / February 2010 / March 2010 / April 2010 / May 2010 / December 2010 / September 2011 /


Paste this into in your newsreader URL and choose "Subscribe":

Powered by Blogger