How to Use OpenZoom for Images on GigaPan.org?

thanks Christian!

I've been fishing the latest SDK for an example of an XML file using openZoom for GigaPan.org. No luck. Help?

Daniel,

Thanks for the quick response. I understand I will not be able to store my GigaPixel image tiles on GigaPan.org's server and access them from my website. In that case, I'd like to get some advice from you with the following problem:

I shot a GigaPixel image and would like to cut it into tiles. In the past I successfully used deepZoom tools for this task. This time, the image is quite large (1.3GB uncompressed TIF, view here ) and deepZoom tools can't quite do the job on my 3GB physical memory computer. It screams memory error. Since GigaPan's stitcher can slice it into their tiles, I was hoping to display the image with the lovely OpenZoom viewer using their tiles.

I have the descriptor, but I don't have an example of an XML file which should be given to "image.source". I will place their tiles on my server, so there won't be a cross-domain issue.

Do you have an XML example? Or alternitavely, do you think deepZoom tools will be able to handle bigger files with standard memory size in the future? Or do you have a better solution for me?

Many thanks,
Michael

Michael,

You can use Gigapan's tiling software to stitch and tile your raw images into a pyramidized structure. You can then host those tiles on your own web server.

IIRC, I had to duplicate the GigapanDescriptor class file rather than extending it, because the variables and methods I had to manipulate were private, but it's a relatively simple change to make, and then you can feed the top level URI of your gigapan structure to OpenZoom and it just works.

Here's a demo using local gigapan tiles:
http://www.mars.asu.edu/~cyates/zoome...

I'll dig up the source code and post it. I'll warn you that it's not using the most recent code from SVN, so Daniel may have already made improvements.

Ok, basically what I'm doing is allowing you to feed a URL, width and height:


var descriptor:GigaPanUrlDescriptor = new GigaPanUrlDescriptor("http://mars.asu.edu/~cyates/moeur_south.data", 111180, 13481)


You can look at http://mars.asu.edu/~cyates/moeur_sou... and see that it's just the directory structure that the GigaPan stitcher software creates.

The revised class is as follows:


/**
* Support for GigaPan panoramas not hosted at gigapan.org
*
* Replaces id param with a URL param
*
* We are replacing the org.openzoom.flash.descriptors.gigapan
* package because method extension will not work in this case,
* as several methods are defined as private.
*
*/

package edu.asu.mars.gigapan
{

import flash.utils.Dictionary;

import org.openzoom.flash.descriptors.IMultiScaleImageDescriptor;
import org.openzoom.flash.descriptors.IMultiScaleImageLevel;
import org.openzoom.flash.descriptors.MultiScaleImageDescriptorBase;
import org.openzoom.flash.descriptors.MultiScaleImageLevel;
import org.openzoom.flash.utils.math.clamp;

/**
* Descriptor for the GigaPan.org project panoramas.
* Copyright GigaPan.org, http://gigapan.org/
*/
public class GigaPanUrlDescriptor extends MultiScaleImageDescriptorBase
implements IMultiScaleImageDescriptor
{
//--------------------------------------------------------------------------
//
// Class constants
//
//--------------------------------------------------------------------------

private static const DEFAULT_BASE_LEVEL:uint = 8
private static const DEFAULT_TILE_SIZE:uint = 256

//--------------------------------------------------------------------------
//
// Constructor
//
//--------------------------------------------------------------------------

/**
* Constructor.
*/
public function GigaPanUrlDescriptor(url:String, width:uint, height:uint)
{
this.url = url

_width = width
_height = height
_numLevels = computeNumLevels(width, height)

_tileWidth = DEFAULT_TILE_SIZE
_tileHeight = DEFAULT_TILE_SIZE

_type = "image/jpeg"

levels = computeLevels(width, height, DEFAULT_TILE_SIZE, numLevels)
}

//--------------------------------------------------------------------------
//
// Variables
//
//--------------------------------------------------------------------------

private var url:String
private var extension:String = ".jpg"
private var levels:Dictionary

//--------------------------------------------------------------------------
//
// Methods: IMultiScaleImageDescriptor
//
//--------------------------------------------------------------------------

/**
* @inheritDoc
*/
public function getTileURL(level:int, column:uint, row:uint):String
{
var url:String = url + "/tiles"
var name:String = "r"
var z:int = level
var bit:int = (1 << z) >> 1
var x:int = column
var y:int = row

while (bit > 0)
{
name += String((x & bit ? 1 : 0) + (y & bit ? 2 : 0))
bit = bit >> 1
}

var i:int = 0
while (i < name.length - 3)
{
url = url + "/" + name.substr(i, 3)
i = i + 3
}

var tileURL:String = [url, "/", name, extension].join("")
return tileURL
}

/**
* @inheritDoc
*/
public function getLevelAt(index:int):IMultiScaleImageLevel
{
return IMultiScaleImageLevel(levels[index])
}

/**
* @inheritDoc
*/
public function getMinLevelForSize(width:Number, height:Number):IMultiScaleImageLevel
{
var maxDimension:uint = Math.max(width, height)
var level:uint = Math.ceil(Math.log(maxDimension) / Math.LN2)
var actualLevel:uint = level - DEFAULT_BASE_LEVEL
var index:int = clamp(actualLevel, 0, numLevels - 1)

return IMultiScaleImageLevel(getLevelAt(index)).clone()
}

/**
* @inheritDoc
*/
public function clone():IMultiScaleImageDescriptor
{
return new GigaPanUrlDescriptor(url, width, height)
}

//--------------------------------------------------------------------------
//
// Methods: Debug
//
//--------------------------------------------------------------------------

/**
* @inheritDoc
*/
override public function toString():String
{
return "[GigaPanUrlDescriptor]" + "\n" + super.toString()
}

//--------------------------------------------------------------------------
//
// Methods: Internal
//
//--------------------------------------------------------------------------

/**
* @private
*/
private function computeNumLevels(width:uint, height:uint):uint
{
var maxDimension:uint = Math.max(width, height)
var actualLevels:uint = Math.ceil(Math.log(maxDimension) / Math.LN2)
var numLevels:uint = Math.max(0, actualLevels - DEFAULT_BASE_LEVEL + 1)
return numLevels
}

/**
* @private
*/
private function computeLevels(originalWidth:uint, originalHeight:uint,
tileSize:uint, numLevels:int):Dictionary
{
var levels:Dictionary = new Dictionary()

var width:uint = originalWidth
var height:uint = originalHeight

for (var index:int = numLevels - 1; index >= 0; index--)
{
levels[index] = new MultiScaleImageLevel(this, index, width, height,
Math.ceil(width / tileWidth),
Math.ceil(height / tileHeight))
width = Math.ceil(width / 2)
height = Math.ceil(height / 2)
}

return levels
}
}

}


Daniel,

I had to put that together quickly for a demo, but I planned to submit a patch before it went to the production stage ... then I got diverted to other projects and never went back to it.

So it looks like the 0.4.2 descriptor allows the custom URL out of the box, so Michael ought to be all set. The directory structure should be the same whether it's on your own server or GigaPan's.

Excellent! Thank you both!

Everything is working great now.

Michael

Sorry for the delay.. I did some fine tuning.
Here's the final product:
http://chili-media.co.il/gp/oaka/

Thanks again for helping me out!

Hi Daniel.
How Do I put a Icon "loading titles" (progress bar) in my viewer as in http://gigapan-mobile.appspot.com/gig... (top-right)

I use this form "image.source = new GigaPanDescriptor(CUSTOM_TILES_URL, ...)" for load the image.

sorry by my english...

Regards from Canary Island's (Spain)

Hi Christian / Hi Michael

could you make the sourcecode for gigapanviewer (http://mars.asu.edu/~cyates.. or http://chili-media.co.il/gp/oaka/) downloadable as a zip file.

I'm completely new to flex and would prefer if I had a casestudie like yours to get in touch with flex.

Daniel,

I could manage to get Nano work with GigaPan. But now got stuck with the extended Buttons like `ZoomIn`, `ZoomOut`, etc. Are the some default classes in the sdk or do I have to write it (ZoomInButton extends SimpleButton....)?

Could solve this porblem
import org.openzoom.nano.ui.ZoomInButton;

And which function posotions the viewport. I have to position (top,left) of viewport ot (center,center) of the stage.

Could you give me some hints.

Cheers,

Hi everybody,

@Daniel: The trick with IViewport.panCenterTop() didn't work. But i found out that problem was solved when I entered an appropriate height and width. [I still need a solution how to resolve width and height of gigapanimage]

At the moment I'm trying to add zoomin to mousepointerposition (the same function as mouse_click) when I press shift & mouse_down, so i only have to keep the combination pressed to get to the highest resolution. Where do i find the function zoom to mousepointer?

Hi Daniel,

I don't want to roll my own zoom. What I'm trying to implement is, when the user presses "CTRL" or "SHIFT" then the zooming Process will continue until the key is released.

so far i got this, i just extended the code like following.

private function shift_zoomHandler():void
{
if(mouseDown && shiftKey && shiftMouseDown == false) {
shiftMouseDown = true;
trace("Shift MouseDown");
//zoomInterval = setInterval(zoomInImage,10);
}else if(mouseDown && controlKey && controlMouseDown == false) {
controlMouseDown = true;
trace("Ctrl MouseDown");
//zoomInterval = setInterval(zoomOutImage,10);
}
}

/**
* @private
*/
private function stage_keyDownHandler(event:KeyboardEvent):void
{
// Check which Key ist pressed Ctrl or Shift
if(event.keyCode == 16) {
shiftKey = true;
//trace("SHIFT ON");
}else if(event.keyCode == 17) {
controlKey = true;
}else if (event.keyCode == DEFAULT_MEMORY_MONITOR_KEY) {
toggleMemoryMonitor()
}
}

/**
* @private
*/
private function stage_keyUpHandler(event:KeyboardEvent):void
{
if(event.keyCode == 16) {
shiftKey = false;
shiftMouseDown = false;

clearInterval(zoomInterval);
//trace("SHIFT OFF");
}else if(event.keyCode == 17) {
controlKey = false
controlMouseDown = false;

clearInterval(zoomInterval);
}
}
[...]
private function stage_mouseDownHandler(event:MouseEvent):void
{
mouseDown = true;
shift_zoomHandler();
}

/**
* @private
*/
private function stage_mouseLeaveHandler(event:Event):void
{
mouseDown = false;
shiftMouseDown = false;
controlMouseDown = false;
clearInterval(zoomInterval);

hideChrome()
}


The Player recognizes that which key i pressed. But it always zooms to the center of the picture even when i e.g. click to righttopcorner.

Do you got a clue where the problem is?