Overlay Extension For OpenZoom SKD Released :: labs.ghostinteractive.net

Overlay Extension For OpenZoom SKD Released

April 13th, 2009 | Published in ActionScript | by Jeremy | 27 Comments

The Overlay Extension for the OpenZoom SDK is light-weight set of Actionscript 3 classes that provide mapping-like functionality for use with the OpenZoom ZUI ( zoomable user interace) framework. These classes provide functionality for adding “hotspots” and “point to point paths” to the Open Zoom MultiScaleImage component. These classes use standard x & y coordinates relative to the original size of the source image to plot points of interest and paths over a zoomable image.

Hotspot Examples
Polyline Example

Download Source Code And Examples:

http://code.google.com/p/ghostinteractive/

Overlays

I have been using the term “overlay” as a catch-all for the different types of visual elements I’ve been working on. Currently there are two types of overlay classes:

Hotspot:
This element is meant to be used as a base class for “marker” elements. These are typically clickable points of interest which when clicked pan, zoom or pan and zoom the image to a specific position and/or depth.

PolylineSegment:
This element uses the flash.display.Graphics class to draw paths around a zoom image. The paths can be used for a number of things including map routes, path based navigation, relational links( think node based graphical displays ), etc… Each connecting line can have unique attributes such as color, thickness, alpha, caps style and others properties related to the Graphics line-style.

Layers

To display the different types of “overlays” each type is managed by a unique “layer” class. This is somewhat of a departure from typical mapping software models. Most mapping software implements a single overlay layer to which any type of overlay can be added. As we add classes to the overlays package we may adopt a similar system but for now we are more interested in a lean implementation than the overhead of unneeded abstraction. Below is a short description of each layer type.

HotspotLayer:
The HotspotLayer manages the positions, depths and visibility of Hotspot sub-classes. It also provides the functionality for zooming and panning to specific points within the image.

PolylineLayer:
This layer contains a list of PolylineSegment sub-classes and draws them. Each time the zoom image pans or zooms the layer redraws the shapes relative in size and position to the original image size.

Simplified code example:

var msImage:MultiScaleImage = new MultiScaleImage();
var hsLayer:HotspotLayer = new HotspotLayer( msImage );
var plLayer:PolylineLayer = new PolylineLayer( msImage );

hsLayer.addHotspot( new CustomHotspot( params:Object ) );

plLayer.addSegment( new PolylineSegment( new Point( 1200, 300 ) );

addChild( msImage );
addChild( hsLayer );
addChild( plLayer );

Download the examples for complete code and further explanation. If you happen to find these classes useful or have suggestions for additions and/or changes leave a comment and let me here about it. If you would like to contribute to the project drop a line at ghostinteractive@gmail.com.

Responses

Feed Trackback Address

Daniel Gasienica says:

April 15th, 2009at 11:31 pm(#)

Jeremy,

This is awesome stuff! Congratulations, your examples look grrreat! I’ll write you soon with more feedback.

Keep up the good work!

Cheers,
Daniel
Pawel says:

May 5th, 2009at 10:19 am(#)

Is great, but I don’t use it for Flex project.
Who knows how use HotspotLayer in Flex (examples)?
Kurtis Lanovaz says:

July 5th, 2009at 3:01 pm(#)

Great work! Very nice looking.

I was curious as to whether this will load the hotspots directly from the overlays.xml or they are hard coded?

Looking for a solution to plug co-ordinates in at runtime
Jeremy says:

July 5th, 2009at 4:11 pm(#)

Hi Kurtis,

With the HotspotLayer class you can easily add hotspots dynamically. The overlays.xml file is an example of how you might store hotpsot data. That data could come from anywhere or it could just be hard-coded. The implementation is up to the coder.

A HotspotLayer can be re-used too. If you are loading multiple images you can remove all of the current hotspots and add a new set at run-time.

Hope that is helpful and thanks for you interest!
Kamlesh Kumar says:

August 18th, 2009at 10:17 am(#)

Hi Jeremy,

Good work!

I have few queries:

1. Can the similar thing be developed using Flex libraries?

2. This overlay extension as3 library has been developed in flash, can it be used in a flex project?

3. What are the commercial implications of using the overlay extension library?

Regards,
Kamlesh
Jeremy says:

August 20th, 2009at 2:04 am(#)

Thanks for your interest! The overlay code as it is now can not be used in a Flex project. The base overlay classes extends Sprite and as I understand it, all display objects in a Flex project must extend UIComponent. I don’t think it would be difficult to port over the current code to work with Flex. If you are feeling adventurous, give it a shot and if things work out perhaps we can add it to the code base. As for the commercial implications, the overlay code is released under the MIT license. The MIT license only applies to the overlay code released by ghostinteractive.net! The OpenZoom SDK is released under it’s own license so make sure you read it carefully!
Kamlesh Kumar says:

September 14th, 2009at 11:59 am(#)

Hi Jeremy,

I am playing with the Hotspot example code and in turn made few changes in the same. I wanted to have the BuildingHotspot generated on mouse click (assuming I have to display the mouse co-ordinates to the user only) rather than fetching it from overlays.xml. I have added the code to create the BuildingHotspot in onImageMouseDown method, with some changes in code of Hotspots.as. I have also changed the image and frame size accordingly. I have changed BuildingHotspot constructor to take event object and passing it the same from the method where I am creating it. Everything is working fine, except the building hotspot is not being created where the mouse is being clicked. It seems it is considering some kind of offset depending on the size of image.

Please let me know what I am missing? Any pointer will be helpful.

Thanks,
Kamlesh
John says:

September 15th, 2009at 5:57 pm(#)

Nice work Jeremy,
1) Is there a way to get the hotspots themselves to resize when zooming. I notice they stay the same size regardless of the zoom depth?

2) When I add hotspots to an image they are cut off at a certain point before the edge of the image. Any idea why this is occurring?

Thanks,
John
Jeremy says:

September 16th, 2009at 9:52 pm(#)

Hi Kamlesh,

Are you passing in the coordinates of the mouse when the press occurs or are you interpolating them to the relative position in the zoom image. All x and y hotspot positions should be relative to the original image dimensions. You might look into the sceneToLocal() and localToScene methods in the IViewport class to help determine the interpolated values. If that doesn’t lead you in the right direction, ping me again and I’ll look into it.

Thanks,
~Jeremy
zavior nemeth says:

October 26th, 2009at 10:30 pm(#)

I downloaded and read up on the hotspot and polyline examples. very cool. I am not the best programmer in the world…stick to the flash gui as much as I can…but kinda get the flow of things…
I have a map that I need to use ‘overlays’ on that I have already imported into flash….they are about 8 layers of polygons and lines that are very specific (from CAD).. Please tell me there is a way to get this on top of the map (which I have and can get broken up by zoomify) and within the zoom and pan functions!!
I noticed with your code, you actually plot the locations of the points in the code….well, I have predetermined polygons and polylines that I currently have on separate layers in my flash document….. I am planning on making an interface where the user can turn layers on and off to see different utilities, features, etc…..Just need them to be within the zoom/pan area…..THANX!!
Luigi Tommaseo says:

November 19th, 2009at 7:26 pm(#)

Hi,
great work on the framework, I have a slight problem with it and I can’t figure it out.
when I pan around in the openzoom image the overlay moves with it but there is a delay so they get offset while moving. they do catch up after the image has stopped panning.

what could be causing this?

thanks

Luigi
Jeremy says:

November 20th, 2009at 2:20 pm(#)

Hi Zavior,

What you are attempting to do is entirely possible. The framework is set up so that you can externalize any data you need to populate your own custom overlay objects. The examples have the data hard-coded for convenience. As for having multiple layers of poly-lines you can instantiate as many new PolyLineLayer objects as you need and create logic for setting their visibility. Make sense?

Thanks for you comments and good luck!
~Jeremy
Jeremy says:

November 20th, 2009at 5:07 pm(#)

Hi Luigi,

Glad you are finding the framework useful. I have not encountered the issue you are seeing. What kind of system are you running? Are you seeing the same kind of behavior in the online examples?

Thanks,
~Jeremy
Luigi Tommaseo says:

November 26th, 2009at 2:49 pm(#)

no, I am not seeing the same behaviour in the online examples that’s why I know there is something wrong in my code, could it be because I am using a TweenerTransformer ??

any help is seriously appreciated.

Luigi
Jeremy says:

November 30th, 2009at 5:50 pm(#)

Hi Luigi,

You should keep in mind that the HotspotLayer updates itself based on events it receives from the MultiScaleImage. Maybe you could put some trace statments in the onTransformUpdate() method of the HotspotLayer to make sure that it is receiving events as expected. If not, perhaps you are calling methods on the MultiScaleImage that don’t invoke an ViewportTransEvent.

What properties of the image are tweening?

Thanks and good luck,
~Jeremy
Luigi Tommaseo says:

December 1st, 2009at 4:39 pm(#)

Hi,
yes the layer is receiving the event, I am using a simple mouse controller on the openzoom layer. if anything it looks like the hotspots move ahead of the openzoom layer.
Luigi Tommaseo says:

December 1st, 2009at 4:50 pm(#)

if I remove the TweenerTransformer the hotspot layer behaves as expected what’s going wrong?
Alwyn says:

December 11th, 2009at 9:14 am(#)

Hi Jeremy, great work on the hotspot layer. I used it recently in a project to show GPS positions on a map so I had to write some additional code to translate long/lat into x/y. If you are interested, maybe you can add a new function addHotspotGPS(long:Number, lat:Number) to the hotspotlayer. Mail me for sources
Jeremy says:

December 14th, 2009at 7:14 pm(#)

Hi Alwyn,

Glad to hear the overlay extension is being put to use! It would be great to update the existing code with GPS functionality. I’ll e-mail you to get the code. Can you post a link to the project you built?

Thanks,
~Jeremy
Bada says:

March 10th, 2010at 6:35 pm(#)

Hey Jeremy! Nice work man!
Its simple, and very effective, i want to know if have some way to make the hotspots resize themselfs with the zoom, like Jhon said up there.

Have any idea of how do that?
Jeremy says:

March 10th, 2010at 6:44 pm(#)

Hi Bada,

Scaling hotspots would be very cool, however the current implementation doesn’t support it. I haven’t worked on a project yet that required this, so it hasn’t been added. If I were to add it, I would probably create a new Layer class, something like a “MarkerLayer” and instead of adding “Hotspots” I would create a new class called “Marker”. Each marker would define it’s min and max scale and when the “MarkerLayer” updated in response to view-port transformations, it would tell each “Marker” in the layer to update accordingly. I think it would be a very cool feature. If you end up writing it, let me know how it turns out and hopefully we can add it to the extension.

Thanks!
~Jeremy
Bada says:

March 10th, 2010at 7:35 pm(#)

@Jeremy

i made one workaround to do what i want in this project! At home i work on a MarkerLayer.

If someone need want fast, at the funcion:
protected function onTransformUpdate( event:Event = null ):void

in the HotspotLayer i resize the hotspot for the inverse proportion of my image:
var targetScale:Number = (image.zoom/10)+.4;

hotspot.scaleX = hotspot.scaleY = targetScale;
Jeremy says:

March 10th, 2010at 10:20 pm(#)

Nice work Bada. Looking forward to seeing what you come up with!
island says:

March 11th, 2010at 9:15 pm(#)

I am working on this same thing (adding scalability to the markers). Jeremy I was planning on extending HotspotLayer to ScalableHotspotLayer. I think all the functionality needed can be wrapped up into this class.

I do have one question. Luigi had an issue with the Hotspots “moving in front” of the image when the image tweens. I am having this same issue. It looks like the Hotspots are being positioned where the image WILL BE in the next frame instead of the current location. Any ideas?

Great work, by the way, thank you so much for your contribution!
Jeremy says:

March 12th, 2010at 4:01 am(#)

Hi Island,

I have not seen this behavior before. It does sound similar to the problem that Luigi had. Perhaps you could try to set up your MultiScaleImage in the same manner as the overlay demos ( min and max zoom, scale factor, transformer, ect.. ). If you try that and the bug persists, let me know and I’ll e-mail you personally. Perhaps you can send me your code and I can take a look. I’d like to get to the bottom of this glitch.

Thanks,
~Jeremy
island says:

March 12th, 2010at 5:10 am(#)

I found out where the problem is occurring but I haven’t found a solution yet. It turns out the issue exists when using the newest version of the OpenZoom code (0.4.2.1) . If i replace my OpenZoom source folder with the one in your example they stay together.

If you replace your openzoom source folder with the latest you can see the issue in your world map example. I had to change line 76 of ZoomImage to get the new code to work. Feel free to shoot me an email if you have any questions or would like to shoot some ideas around.

island
Bada says:

March 12th, 2010at 2:43 pm(#)

Jeremy, more one thing i need your help!

I’m doing one job and its 100% flash and this is 100% of html page, so i want to do something based on the resolution of each monitor, my deepzoom image have much more height than width, so what i need is: The starting zoom, and min zoom, is always the exactly fit of width on the screen.

Have some ideas of how i can do that?