Getting a tiled image collection on the iPad (Deep Zoom)

Question

I have a set of tiled image collections created via Microsoft's Deep Zoom composer, and a Silverlight application that currently consumes them for display via MultiScaleImage - it's all working pretty well - I'd just like to get some experience with iPad programming and have a couple of ideas for some iPad applications. All my ideas rely on me being able to display/manipulate these tiled image sets (on the iPad).

I just picked up a iMac to facilitate this. I'm not seeing any Objective-C / Cocoa-touch libraries for this though, so am assuming I will have to roll my own. (I saw the Seadragon Ajax component, which is pretty slick, but I'm dealing with collections here, which it doesn't support. I would also like to roll this as a native application just to get the experience.)

The only open source project I found for displaying/manipulating the tiled image sets was Openzoom - a Flash component. I'm not to familiar with ActionScript either (Python, Java, C#, and c are the only languages I have really used), but briefly inspecting the code I didn't really have any issues with it and can probably use it for hints on how to swap the tiles in and out, etc. But, as I'm pretty new to Objective-C/Cocoa-touch, some pointers in the right direction would be appreciated.

1) Are there any other projects out there I am missing, or is OpenZoom my best bet for some reference?

2) Should I be trying to do this display in the UIKit framework, or should I do it as an OpenGL display?

3) Any other suggestions/pointers that I didn't think to ask.

Answer 1

I have just been working on a few apps that rely on tiling large images to allow for deep zooming. I found a couple of examples but the best and most useful for me was Apple's "PhotoScroller" sample code.

It relies on CATiledLayer to handle the tiling. The result is an extremely smooth and responsive interface even with very large images and its not too complex. (A little complex but not too bad).

So to answer your question directly:

1. PhotoScroller Code

2. QuartzCore Framework (which is part of the SDK)

3. There is a great, free little mac app for slicing images into tiles that I use a lot: "Tilen"

Answer 2

In the WWDC 2010 source samples, under iOS, there is a project in the ScrollView Suite called Tiling. It corresponds to WWDC10 session 104. It is probably the best image tiling example out there.

Answer 3

You can take a look at they way RouteMe library does this, the dynamic loading of higher resolution tiles, panning, etc. https://github.com/route-me/route-me

Answer 4

I can't believe nobody has told you about UIScrollview; the UIScrollView component is designed for this very purpose! (think Google Maps, which uses it).

Check out the class reference... UIScrollView

The delegate method you require is the following....

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView

This allows you to check the zoom level, offset etc and then provide a view for zooming. This way you can maintain your 'position' within the tiled landscape independently of the graphics used to represent it.

Don't roll your own UIScrollView, no need to!

Answer 5

Take a look at CATiled Layer. See my answer to a similar question here: Drawing in CATiledLayer with CoreGraphics CGContextDrawImage