You are viewing an archive page. Click here to go to the current Open Exhibits website.
Log-in is disabled for the archived site
Software

Software: Modules

Templates allow novices to create their own floor or Web based exhibits. Universal Modules allow more advanced developers to combine, branch, and write their own modules that can act as building blocks for new Exhibits.

Giga Pixel Viewer

Giga Pixel Viewer

First Posted: January 20, 2011
v1.1.1-beta Updated: January 31, 2012

Project Summary

This multitouch module gives the ability to view and explore giga pixel images. It uses image tiles to dynamically re-create the giga pixel image at various zoom levels. Users can pan around the image using the drag gesture, zoom stepwise using the double tap gesture and zoom continuously using the two finger zoom gesture.

ABOUT THIS CONTRIBUTOR

Profile picture for Paul Lacey

Paul Lacey

Dir Multitouch Engineering
Open Exhibits Staff
RSS Feed

Total Activity:  1K
Downloads:  20
Article Views:  1K
Shared:  1
Tweets:  0

Uploads:  7
Comments:  4
Favorites:  8
Likes:  3
Emails:  0

Profile picture for Marc Matteo
Marc Matteo commented
7 years ago
I love this. I am just wondering if this can be modified so that when the image is tapped that it doesn't zoom in. Rather it skips to another image.
Profile picture for Paul Lacey
Paul Lacey commented
Open Exhibits Staff
7 years ago
I will include that option in the XML for the next release of the module. As well as the option to simply disable double tap. If you want to explore the source code provided, you can modify the TouchController class in the folder: src>org>openzoom>flash>viewport>controllers so that double tap does not trigger a fly in zoom. Adding the double tap gesture to the GigaPixelDisplay class in the folder: id>component would allow you to include provisions for loading a second image or cycle through a list of images.
Profile picture for Marc Matteo
Marc Matteo commented
7 years ago
That would be great if you can do that Paul. I think it would be awesome to have the ability to either swipe or double and cycle through individual images.
Profile picture for jose antonio cordova hernandez
7 years ago
Hello paul it is very interesting your app... i tried to re-compiled with flash cs5 and have 3 errors... i do the instructions like the document read_me.pdf says but have thats result how can i fix it??? i already download this package fromgiga pixel viewer v1 regards
Profile picture for Caroline A.
Caroline A. commented
7 years ago
I have a similar issue as Jose. The exact compilation errors are as follows: C:\Users\eve\Desktop\GigaPixelViewer1.0\gigapixelViewer_source\Main.as, Line 12 1017: The definition of base class Application was not found. C:\Users\eve\Desktop\GigaPixelViewer1.0\gigapixelViewer_source\Main.as, Line 28 1020: Method marked override must override another method. C:\Users\eve\Desktop\GigaPixelViewer1.0\gigapixelViewer_source\Main.as, Line 1 5000: The class 'Main' must subclass 'flash.display.MovieClip' since it is linked to a library symbol of that type. I attempted to add the SWC file (this is for GigaPixel viewer, which has 2 .swc files in that folder, which flash cannot add both), but since this readme is a general readme for modues (which is poorly documented with numerous typos and unspecific, not standarized instructions). Any help would be appreciated.
Profile picture for Caroline A.
Caroline A. commented
7 years ago
Well, after including every folder with .as files in the Publish Settings>Flash (tab)> Settings (next to Actionscript 3.0 > Source Path (tab) the compile errors go away. However, I publish the .as file after also including the folder that has both swc fles (lib), but the images from the resource folder do not show up.


Summary

This GigaPixelViewer module gives the ability to view and explore giga pixel images. It uses a image tiles to dynamically re-create the giga pixel image at various zoom level. Users can pan around the image using the drag gesture, zoom stepwise using the double tap gesture and zoom continuously using the two finger zoom gesture. The map windows can be moved, scaled and rotated using multitouch gestures which can be activated and deactivated using the module XML settings.

The giga-pixel viewer uses the openZoom library to construct and manage image tile sets: openzoom.org The giga-pixel component utilized in the examples provided in this module uses image tiles processed according to the deepzoom protocol . OpenZoomAPI

If you have a high resolution image that you wish to split into tiles we recommend using the free deepzoom composer tool to format and organize your image files. For more information see: Deepzoom

 

Features

  • Multiple independent giga-pixel image windows
  • Customizable window appearence
  • Configurable window gesture interactions

Example Code

Using this

package id.module{

 import flash.events.Event;
 import id.core.TouchComponent;
 import id.component.GigaPixelDisplay;
 import id.element.GigaPixelParser;

 public class GigaPixelViewer extends TouchComponent {

 private var gpixDisplay:GigaPixelDisplay;
     public function GigaPixelViewer(){

     super();
     GigaPixelParser.settingsPath="GigaPixelViewer.xml";        
     GigaPixelParser.addEventListener(Event.COMPLETE,onParseComplete);       
   }
     private function onParseComplete(event:Event):void{

         gpixDisplay = new GigaPixelDisplay();
         gpixDisplay.id = 0;            
         addChild(gpixDisplay);
      }    
 
    }
}

Properties and Customization

Included XML tags and functions:

Name Description Notes
<Content> Contains the parameters for each giga-pixel object populated to the application
<FrameGestures> Sets which gestures can be used to manipulate the window/frame object on the stage
<FrameStyle> Sets the style of the frame that surrounds each object window
<GlobalSettings> Sets vars that effect all objects on stage
<ImageGestures> Sets which gestures can be used on the image itself.
<Source> Defines each giga-pixel image object populated by the application. Each source must have a unique ID.
<amountToShow> Sets the number of giga-pixel image objects to display on stage
<cornerRadius> Sets the radius of the frame's corners. Set to "0" for angular corners To make corners angular, set to "0"
<fillAlpha> Sets the opacity of the frame. 0 is completely transparent, 1 is fully opaque, .5 is half opaque, etc.
<fillColor1> Sets the fill color of the frame. Input a hex color value after 0x
<frameDraw> Sets whether or not an external frame is drawn
<imageWidth> Sets the display width of the image area in pixels
<imageXML> Sets the image xml source path
<imagebgColor> Sets the background color of the image area
<outlineColor> Sets the outline color of the frame border
<outlineStroke> Sets the thickness of the border line in pixels
<padding> Sets the padding (thickness) of the frame around the window

Included AS3 Classes and customization:

Name Superclass Notes
GigaPixelViewer TouchComponent
Name Type Description Notes
COMPLETE String String utilized for a dispatch event when module has loaded. Public Static
displayObject Array The object holder for the GigaPixelViewer Class Public
gpDisplay GigaPixelDisplay The main display class for the GigaPixelViewer Private
id int The identification number of an object within a module. Public
moduleName String The module name is the same as its class name Public
Name Description Notes
GigaPixelViewer() The function called after the module xml has been parsed Public
callNewObject(int):void The Constructor. Public
onParseComplete(event:Event):void Calls an new object to the stage and passes an int as its argument Private
updateUI():void Calls to the callNewObject() function. Protected
Name Description Notes

This material is based upon work supported by the National Science Foundation under Grant Number Division of Research on Learning in formal and informal settings #1010028. Any opinions, findings, and conclusions or recommendations expressed in this material are those of the authors and do not necessarily reflect the views of the National Science Foundation.


Open Exhibits was developed by Ideum, makers of GestureWorks. Open Exhibits SDK is free for non-commercial use.

Connect
YouTube Twitter Flickr