MultiScaleImage:
Flex Deep Zoom Component
Ever since I published my proof of concept of Deep Zoom in Flash, many people from around the world got in touch with me and told me that they also wanted to play around with this technology. Therefore, for a couple of months now, I’ve been working on an SDK for ZUIs and multi-scale images for Flash called OpenZoom. The SDK is still work in progress and I won’t focus on it today. However, I promise you it will definitely be topic of many posts in the future.
Today I’d like to share with you a first preview of the MultiScaleImage component that I’ve built on top of the OpenZoom SDK.
Introducing the OpenZoom SDK
This stuff is really old and is only kept around here for archival purposes. Get the latest news and the first public release of the OpenZoom SDK in the official announcement.
Nomen Est Omen
MultiScaleImage? Sounds familiar? Well indeed, it is the same name Microsoft uses for their Deep Zoom Silverlight control. In spirit, the Flex MultiScaleImage component I’ve built and its Silverlight counterpart are very close. How close? Well, let’s look at a fictional code listing:
Code: Silverlight vs Flex
Microsoft Silverlight
<MultiScaleImage x:Name="image" Source="foo/bar.xml"/>Adobe Flex
<openzoom:MultiScaleImage id="image" source="foo/bar.xml"/>
Under the Hood
As much as the two look alike from the outside, they differ very much under the hood. Microsoft’s MultiScaleImage control is a native control of the Silverlight runtime and therefore has a very efficient implementation. On the contrary, the Flex MultiScaleImage component is built on top of ActionScript 3. Nonetheless, I am very pleased with the performance, considering I haven’t spent much time on tuning it yet.
Even though I can praise Microsoft for their Deep Zoom implementation, I dare to say they didn’t do their homework on API design. Shortly after Deep Zoom was introduced to the public with the fantastic Hard Rock Memorabilia showcase by Vertigo, dozens of bloggers wrote posts about how to program the Silverlight MultiScaleImage control to create something that somewhat comes close to the Hard Rock site. It was hard because the API is cumbersome and confusing. I’d speculate this is one of the reasons we haven’t seen a lot more inspiring Deep Zoom work since.
Flexibility, a powerful API and ease of use were the top priorities for my implementation of the MultiScaleImage component for Flex. Whether I’ve achieved my goals, I am eagerly waiting to hear from you.
Batteries Included
As the title of the article suggests, the Flex MultiScaleImage component has built-in support for Deep Zoom images. But not only that, it also comes with native support for Zoomify and OpenZoom images without you having to write one line of code. The latter is a new multi-scale image description format I’ve designed and will probably discuss another time.
To keep things clear, there is one thing that the Silverlight MultiScaleImage control supports that I do not (yet) support: Collections. Personally, I think this is one of the cases where it’s misleading that a MultiScaleImage (singular!) supports collections of images and suddenly has subimages. Therefore, once this functionality will be part of the OpenZoom SDK, it most certainly will have its own component.
In order to prevent a similiar incident to Silverlight’s introduction of their MultiScaleImage component where bloggers around the world had to write how to add mouse and keyboard navigation to Deep Zoom, I’ve architected the Flex component in a way that has plug & play support for this kind of functionality which is a nice application of the Strategy Pattern.
Getting Started
I could go on and on about how the Flex MultiScaleImage component works but instead I’ve prepared three demos that let you interactively explore the three core concepts of the component, namely transformers, controllers and constraints.
Demo #1: Transformers
The transformer controls the animation of the viewport. Currently, I’ve implemented one controller, TweenerTransformer, that is based on the fantastic Tweener animation library. Check out the demo to see how flexible the architecture is and how easily you can customize the animation of MultiScaleImage. You want to know what’s also great about transformers? If for whatever reason you don’t need them, you don’t pay a single kilobyte penalty for an animation library that is never used.
Demo #2: Controllers
Controllers are the glue between user input and viewport control. The OpenZoom SDK features two implementations of controllers at this point, namely a MouseController and a KeyboardController. Both have already built-in support for quite some customization but if you need more, feel free to implement your own controller based on IViewportController.
Demo #3: Constraints
The constraint controls what states the viewport can reach. Don’t want people to zoom out too much? Just add a ZoomConstraint and set minimum and maximum zoom. Don’t want them to lose the scene out of sight? Add a VisibilityConstraint. Doesn’t the component only support a single constraint? Yes, but the architecture is flexible enough to allow you to combine constraints in a CompositeConstraint which is an application of the Composite Design Pattern.
Demo #3½: Out of the Box
After having experienced all the advanced features of the component, let’s sit back and enjoy the elegance and purity of the MultiScaleImage component as it comes out of the box. In its plain form, a MultiScaleImage has only one purpose: Displaying images tack sharp no matter how big they appear on the screen. Try for yourself, click on the picture to go to the demo and there just keep on resizing your browser window and enjoy the beauty of simplicity how the image slowly appears sharper and sharper.
Download
If you’d like to play around with this component, please download the OpenZoom SDK (ZIP). If you want to find out more, I recommend you to read the OpenZoom SDK API documentation and if you feel particularly adventureous, take a look at the source code.
In case you have questions, feedback or you’ve found a bug, feel free to leave a comment down below or file a bug report at the OpenZoom Bug Tracking System.
Today, I’ve barely scratched the surface of what’s possible with the OpenZoom Flex MultiScaleImage component. In case you have suggestions for topics you would like me to talk more about, again, just leave a comment and I’ll see what I can do.
I can’t wait to see what you create with it. If you have a demo with the MultiScaleImage component, post a comment with a link to your demo.
Disclaimer
This is a preview release. Performance has not been optimized yet. All parts of the component, in particular the API are subject to change.
License
The OpenZoom SDK is licensed under the MPL 1.1/GPL 3/LGPL 3 trilicense.
08.12.2008
20:56
Hello Gasman,
This stuff is almost killing my CPU here. Nevertheless I like it
Great work!
09.12.2008
17:34
Gman
Thanks for your feedback. I suppose your CPU spikes when new tiles appear. The alpha blending of the tiles makes the Flash Player sweat quite badly. I will look into it, maybe there is some way to improve it.
Once again, thanks.
Cheers,
Daniel
10.12.2008
15:52
Congratulations! This work is really promising. It is already smoother than DeepZoom, ans seems at least as much as scalable.
17.12.2008
19:52
Hi,
First of all it’s very nice work you did there and I think it’s very promising. The only glitch I found is that when your minimum scale is reached, if you keep on trying to zoom out, the image keeps moving away. It’s no big deal but still, it may be considered as a problem (unless it’s intended that way and I just didn’t figure out the functionality). I encoutered such problem in my own work but and it was related to the positioning of the image based on it’s size modification. When the minimum or maximum scaled was reached, the function kept on trying to move the image to the right place.
Keep up the good work.
Rémi
18.12.2008
20:58
Rémi
Thanks for the feedback and bug report. Actually, I was aware of the glitch but didn’t spend much time on thinking about how to fix it. I know where the problem lies but it’s more of a architectural problem and I need some time to address the problem. So long, happy zoomin’!
Yours
Daniel
21.12.2008
13:22
[...] OpenZoom – fast. demos n download here: http://gasi.ch/blog/flex-multiscaleimage-component/ [...]
01.01.2009
18:40
sweeeeeeeeet, thanks for wonderful stuff.
04.01.2009
20:43
[...] (http://gasi.ch/blog/flex-multiscaleimage-component/) Komponenta urÄená pro Flash i [...]
05.01.2009
3:38
HiDaniel,
This is very interesting stuff. I have also created a deep image zoomer out of the Gigapan.org viewer and adapted it to use tiles that are entirely hosted on flickr. I put an extensive zoomable photo gallery up at http://www.odyex.com/php/services/windthumbs.php I am going to investigate using the openzoomer for this project!
Awesome,
Jason
06.01.2009
13:12
[...] – Demo: http://gasi.ch/blog/flex-multiscaleimage-component/ License: GPL [...]
07.01.2009
5:43
Really great stuff Daniel! A huge contribution to the Flash Community and I am very excited to start playing around with it and should have multi-touch working within a week or two
ZUI is sure a nice way to look at data… and with Flash we can really start experimenting with new ways to interact and control ZUI space… I would’nt be surprised if Microsoft’s Deep Zoom/Seadragon/Photosynth technologies were included somehow with Windows 7 future commercials
The fact that you opened this will greatly benifit many who wish to use Deep Zoom Composer to build images… also maybe we could work towards creating photoshop/illustrator templates/scripts that could mock what the DZ Composer does.
08.01.2009
0:37
can you post an example using a Flex datagrid target as source? can’t seem to make it work
08.01.2009
0:55
VC,
Well, at this point the OpenZoom framework doesn’t support zooming on Flex components like the DataGrid due to reasons how they are architected: They were not meant to scale when they are resized but they rather intelligently rearrange themselves.
However, if you want to use plain vectors in OpenZoom, you should have a look at my latest blog post: Z-Order Visualization.
Other than that, you can use the MultiScaleImage component, as its name implies, for multi-resolution images. The easiest way to create these images for use in the MultiScaleImage component is either with Deep Zoom Composer or Zoomify EZ.
Good luck!
Daniel
08.01.2009
13:14
Hi Daniel,
Looks very promising! Very sweet.
Is it also possible to use multiple images on one stage? Just like you did with tandem? Keep up the good work!
Good luck.
08.01.2009
13:53
JG,
Glad you like it. Yes, you can use multiple images on one stage. However, since this feature is experimental, it is only available in the latest code from the trunk at http://code.google.com/p/open-zoom/source/checkout. Have a look at the DeepZoomContainer component for example.
Regards,
Daniel
08.01.2009
23:40
OK, so I have been playing around with the component and I notice that there is a constraint on the bottom of the image so you cannot drag up to move down past the bottom border of the image. What does that relate to in the API? How can that be modified to go past that bottom constraint as equally as when you are dragging down to move up past the top border?
09.01.2009
11:02
VC,
Good catch! This is actually a bug in the VisibilityConstraint. I’ve even marked it with
Ah, I get it!
FIXME. Until I fix it, I suggest avoiding the VisibilityConstraint. Of course, if you can fix the error, I’d be super glad to receive a patch.Cheers,
Daniel
10.01.2009
1:49
I read the whole blog this evening and I am really impressed! I am very curious if is it possible with the OpenZoom framework to create something like this http://rchi.raskincenter.org/demos/zoomdemo.swf where we have multiple images in a single big image. The demo has e really good performance. I found the link in your blog and I’m wondering if it is opensource.
10.01.2009
2:10
Vladimir,
Wow, thanks, I am impressed. If you have any suggestions on what you’d like to read more about, feel free to leave a comment or send me an email, I am always looking for ideas and inspiration.
Regarding your question: Multiple images in a single big image?
Short answer: Yes!
Long answer: Although it is definitely possible to put this together with the latest code from the repository, you’ll have to do some digging while I am busy working on making this stuff available to everyone. Hint, hint.
As to whether the demo on the RCHI is open source: Believe me, it doesn’t matter, the demo is just that, a demo, there’s nothing smart about the implementation and it is very old, too. Don’t misunderstand me, the work they did is great and the certainly convey the message very well, but they state themselves that it’s just a demo.
Good luck!
Regards,
Daniel
P.S. Funny you mentioned that link. I don’t know how familiar you are with the Raskin Center but it was founded in the name of Jef Raskin, famous for starting the Macintosh project at Apple. Anyway, he also did a lot of research in the field of ZUIs and coincidentally, today I received my copy of his famous book The Humane Interface.
10.01.2009
9:59
I was wondering how showing multiple images in a single image is different. I mean, you still have one big image and display only what the user is able to see from it, or? Also, I’ll be really happy if you upload a demo (with source if possible) with many images in one when you are ready!
10.01.2009
23:41
Vladimir,
Yes, displaying multiple images basically happens the way you describe. However, getting the details right in terms of performance, memory usage, intersections tests, loading and unloading of tiles is very, very challenging. This is the main area where I’ll have to work on in the near-term.
As for your wish for a demo: Since the entire architecture and API for this stuff is still very in flux, I can only offer you to check out the OpenZoom source code from the trunk (one of the perks of an open source project) where there are in fact several demos/samples I internally use to test new stuff, e.g. DeepZoomContainer demo (you’ll have to create your own collections with Deep Zoom Composer as Subversion repositories are not meant for high-resolution image collections.) Hope this helps.
Regards,
Daniel
19.01.2009
14:27
Hi Daniel,
I’ve tried ur demo’s and it’s looking very good.
For now, with custom images, you have to use Deep Zoom Composer or Zoomify EZ. What about large amounts of images? Is there a possibility to batch it in the future? Looking forward for the upcoming version! Good luck with it.
Gr,
JG
22.01.2009
16:34
JG,
Actually, I’ve already implemented a Python-based tool for doing batch image decompositions. It’s based on the excellent script written by Kapil. I’ve extended it and changed the APIs to look more like the DeepZoomTools.dll APIs. You’ll find the Python DeepZoomTools in the trunk of the OpenZoom Google Code repository. They work pretty well. I’ve converted over 14GB images from my Flickr account with them. There’s also experimental support for creating Deep Zoom collections (DZC).
Cheers,
Daniel
23.01.2009
13:06
Hi daniel,
thanks for your reply! sounds really good.
Especially the flickr account thingy. Are you planning to post a demo ?
Well good luck with further development.
Grt,
Joost
25.01.2009
4:52
Czesc Daniel,
I’ve started implementing MosaicManiac’s Zoom viewer in Flash two days ago. Even though this is my first exposure to Flash and ActionScript, this is proving to be quite an easy task thanks to your OpenZoom library.
Thanks Daniel!
I do have one question though.
I’m unable to zoom in at the bottom line of the image. There seems to be some sort of constrain keeping the center of the image in view.
I looked at your examples and they seem to do the same.
Is there a way to turn this off?
You can see my work in progress here: http://mosaicmaniac.com/art/dz/flash.html
Thanks,
Piotr
25.01.2009
12:39
Piotr,
Well done! Regarding your question: It’s a known bug, see http://code.google.com/p/open-zoom/issues/detail?id=5. Until it is fixed, I suggest you not to use VisibilityConstraint.
May I give a small suggestion for your viewer: Use ExternalMouseWheel in OpenZoom to enable mouse wheel support on Mac OS. It’s really easy.
Cheers,
Daniel
29.01.2009
16:33
Hey! Great stuff!!
I’m wondering where you got the maps from?
Looks like google maps but still not quite!?
02.02.2009
12:33
Andrew,
The maps are provided through the wonderful OpenStreetMap project.
Cheers,
Daniel
02.02.2009
23:27
Hey, great zoom component.
I was trying to add a sprite and draw on that and set the zoom or not depending on what mode i am in. I cant seem to listen to the sprite. It’s like it is intercepting the the mouse clicks. Is there any way i can turn on the mouse events for the children of MultiScaleContainer?
Thanks
10.02.2009
16:44
Hi Daniel,
I have a Question about Zooming in Flex.
I have a Panel with a Chart in it.
On turning the mousewheel, the chart should zoom in / out.
And I also have to implement panning of the component.
Do you have a hint, which of your component I could use or which part of the methods could be helpful to me?
Its only about zooming an panning the Chart which I already placed in a Panel in my application.
Thanks
20.02.2009
18:51
Hi Daniel
I’ve really been blown away by OpenZoom, and have decided to use it for my latest project, I’ve run into a slight problem, my initial image is 63000px wide, when I look at it in the viewer it doesn’t load images past a certain point, is there a limit to the zoom level, and if so can I override it.
Thanks for sharing your fantastic work.
AQ
20.02.2009
19:00
Alan,
I am assuming you’re using the MultiScaleImage component in Flex. By default, there’s no limit for the zoom. Check out the constraints samples above to see how to control the limits. 63′000px is nothing compared to the 67′108′864px of OpenStreetMap. If you have further questions, please post them to http://getsatisfaction.com/openzoom, thanks.
Cheers,
Daniel
10.03.2009
13:39
Hi Daniel,
Great work on this component, works like a charm.
Will there be any support for transparant png’s in the near future?
Now they blur when tiled.. probably something to do with the bitmap class.. I would love such a feature!
Again keep up the good work!
Cheers,
Martijn
12.03.2009
0:39
Martijn,
Thanks for your feedback. Unfortunately, I don’t have access to a large transparent PNG sample to reproduce the bug right now. Would it be possible for you to publish an example of the issue you’re encountering and post a link to it here?
Thanks,
Daniel
12.03.2009
20:27
Excellent work thus far Daniel Gasienica. I have a quick question regarding the work, I am working on an example using your Flex MultiScaleImage, and I am trying to take a “snapshot” of a specified area within the viewport. Is this possible? Let’s say by creating a new Rectangle area and copying the pixel to a bitmap? I was going to give it a shot today but thought maybe knowing if it is possible at all would be a good place to start. Thanks.
12.03.2009
20:37
Verg,
Sure, this is very well possible since Flash, like you said, supports bitmap data manipulation. Either you take one of the existing methods, e.g. http://dougmccune.com/blog/2007/06/11/imagesnapshot-class-in-flex-3-sdk/ or simply do your own calculations based on the current viewport state.
Good luck!
Cheers,
Daniel
P.S. If you have any more questions, please join us at http://getsatisfaction.com/openzoom/
16.03.2009
11:02
Hi Daniel,
In order for you to do some testing I’ve included all deepzoom images of a transparant png.
You can download it here: http://www.grandjunction.nl/DeepZoom.zip
0000100.png is the original png
I’ve included some screens where transparancy gets blurred. Only when zooming in sometimes transparancy seems to be suddenly working.
However it blurs again when continuing zooming.
I hope this is helpful,
Again keep up the great work!
Cheers Martijn
Ps. could you let me know when you downloaded so i can delete the file?
16.03.2009
19:27
Martijn,
Thanks a lot for your sample! It perfectly reproduces what obviously is a bug. I’ve downloaded your file and you may remove it if you wish.
The reason for the blurry alpha channel is basically the Deep Zoom file format (DZI) in combination with the rendering engine of OpenZoom. The lowest DZI levels – 1×1, 2×2, 4×4 pixels, etc. – have obviously a very inaccurate alpha channel and therefore produce this weird halo effect when scaled up. I will think about a way on how to solve the problem. Until then, you might get better results by using the Zoomify tile format which starts with 256×256 pixel tiles.
Cheers,
Daniel
P.S. I’ve opened a bug report at the OpenZoom project site where you can track the issue until it is resolved:
http://code.google.com/p/open-zoom/issues/detail?id=7
13.04.2009
18:13
this is very cool, though i have to ask, when maps are zoomed in to street level are they supposed to wobble?
adam
13.04.2009
23:04
Adam,
This comes from the precision limitation of floating point numbers. I’m sure the situation could be improved but I haven’t figured out how to do it in a simple way yet.
No, it shouldn’t wobble
Cheers,
Daniel
14.04.2009
21:25
Hi,
I am trying to use your flex deep zoom component to display an image on an external site, and I’m getting a security sandbox exception. Do you know what I need to do in order to use the component on an external image, e.g. this one?
http://1.static.getsatisfaction.com/uploaded_images/0264/7475/foto_account_medium.jpeg
14.04.2009
23:21
Edith,
First of all the image you refer to is not in particular usable with the MultiScaleImage component as it’s a plain old JPEG. You’ll have to use either Zoomify, Deep Zoom, or OpenZoom images.
Second, the Flash Player Security Sandbox does indeed not allow loading images from an external domain, except if you have a special
crossdmain.xmlfile. Flash Player security is quite a broad topic. Learn more about it on the Adobe Flash Player Developer Center: Security.If you have more questions, please join us on the OpenZoom Get Satisfaction support site.
Cheers,
Daniel
22.07.2009
15:14
Hi Daniel,
Like to check whether openzoom-preview-111 support Collections yet ?
I try to load a xml with collection tags, it gives some errors.
22.07.2009
15:27
Ulysses,
Deep Zoom collections are not supported (yet). I suggest you to keep an eye on the DeepZoomContainer component in the OpenZoom code repository.
–Daniel
22.07.2009
15:34
Many Thanks, could I check out from the repoistory or it is still under close door development.
22.07.2009
15:36
Thanks, I’ll check out a copy from the repository