A few weeks ago at Remix Australia I launched an open source project called Eventr which is a reference application for using Silverlight’s deep zoom technology. Check out the sample application here.
The project is composed of the SuperDeepZoom control, an adaptable wrapper around the MultiScaleImage control (which is how Deep Zoom is implemented in Silverlight) – and a sample application which hosts the control and handles the data loading, templates and general behaviour).
Together the SuperDeepZoom control and host application can do some pretty cool things – think of this project as Hard Rock Cafe Memorabilia deep zoom on steroids – but you get all the code!
You can :
- Use fully templatable[sic] individual image overlay templates. Zoom in on an image and see data about that image overlaid on top. Hell, even show video as you zoom in to the image if you like!
- Show general overlays. Zoom in and see data up the side or across the bottom about the screen… a bit like zooming in to an image in the Hard Rock demo.
- Filter the images by pre-defined categories…
- Track your progress as you navigate around the control. Send a personalised “fly-though” to a friend using deep linking. See the fly through on the screen (press F on yours, or load one through the URL).
- Keep simple metrics of image views… show a count of most popular images.
- Rotate and ad, cause ad impression for each separate image view.
- … plus much much more.
MultiScaleImages can be made up from a set of individual sub images – allowing the individual images to be re-arranged by the control at run time… this is how the SuperDeepZoom control can show overlay data that is linked to the viewed image, and also how it arranges the images when the control is resized or a filtered image list is selected.
The SuperDeepZoom control supports templated overlays for both image data and also fly though viewing. Fly through view allows you to see your path through the composition (press F)- which can be passed in from the URL (for deep linking from a friend). You can easily manipulate the fly through/overlay templates to your liking. You pass the templates in to the control from your XAML and it handles the rest.
The templated overlay is a special ItemsControl where each of its items are overlaid directly over the corresponding sub image. This means you can show text, video, anything(!) over the images – its entirely up to the template.
The SuperDeepZoom control concentrates on looking after the actual MultiScaleImage, aligning the overlays etc, fly through, sub image arrangement etc – but it does not try and handle the application stuff: Controls to start/stop slideshows, back and next buttons, zoom in and out buttons, filter lists etc. The other thing the SuperDeepZoom control doesn’t handle is the overlay data source.
As you zip between images in the deep zoom composition the control keeps track of which images you are looking at. It notifies the host application when an image is zoomed enough – “hey, they are looking at an image”. What’s especially cool is what else it can give the host app.
Your host app can load in any POCO (plan on C# object – classes etc) in to the SuperDeepZoom control and associate it with a particular sub image. When the user zooms in on an image, the control hands this object back to the host application… it can then be shown using a template with databinding or what ever you like!
The same goes for the per image overlays. Each item in the image overlay ItemsControl is associated with one of your data objects… they are then shown using the ItemTemplate that you feed in from the host app – it’s so easy to change around this template, and also to add more functionality to the objects themselves (i.e. customisation is sweeet).
This all means that the SuperDeepZoom control manages only the MultiscaleImage, aligning overlays etc – all the rest is handled through databinding and events from the control in your host application.
Composing deep zoom …erm… compositions
Included in the project is a tool which you can use to suck in a directory of images and automatically output a deep zoom composition compatible with the SuperDeepZoom control (i.e. it has sub images, rather than being one big deep zoomable image).
Usage of the SuperDeepZoom control is pretty simple… at it’s most basic level you can just drop it in, configure the path to the deep zoom composition and start using it.
The real fun comes when you start databinding values, customising templates and passing in your own data.
Pulling apart the sample application is your best bet for quickly getting up to speed on this stuff, but for posterity I’ll run through the basic set up for relatively simple deep zoom application. In coming posts I will describe in more detail how to go about customising overlays and other cool bits.
Start off by creating a new Silverlight application in Visual Studio – ensure you create a web site with it as you will need somewhere to host the deep zoom composition.
Next, you’ll need to download the source code from the Codeplex project here. Once you have that, include the SuperDeepZoom project in your solution and add a project reference to it by right clicking on References in your Silverlight project and select Projects tab…
Creating some deep zoom imagery
Before you can start you need something to deep zoom. Fire up the Eventr source code and start the DZCollectionCreator project (sorry not compiled in the distro :)). From here you can select an input directory to source your images from (JPG or PNG should be okay). Select an output directory. Once the process completes (should be pretty quick, about 2 seconds per image) navigate to the output directory and copy the entire contents. Next cruise to the directory of your *web* project and create a folder (call it MyDeepZoomComp) or something, and copy the stuff in. There will be a heap of files (far more than the number of images you input). This is part of the magicery behind how deep zoom works.
Now you have something to zoom.
Why not use deep zoom composer? This tool uses the deep zoom composition API internally, but it automatically lays out the images for you… saving you time!
Getting something going
We’ll now insert the SDZ control in to your page. First you’ll need to include a namespace to the control:
I also took out the width and height properties so the control will fill the browser window.
With the SDZ namespace in you’ll be able to insert the control.
This is pointing to a deep zoom comp in the root of the web site in the SampleDeepZoom folder. Note this path is relative to the Silverlight XAP package, which is usually stored in ClientBin – hence the ../ on the front (the SDZ control has some smarts to calculate relative paths).
Run your app! you will see you fully functional deep zoom composition, complete with double click to zoom and mouse wheel support! Too easy eh?
More to come
I’ll be blogging a lot more on this project over the coming weeks and months (as time permits!). Next time I will describe how to make some simple overlays (complete with your own custom data).
Until then, I hope you enjoy my little project, and please keep those comments flowing with your ideas and suggestions 🙂
P.S. A big thanks to the delicate genius himself Michael Kordahi for helping me get this off the ground 🙂