AndreaMosaic is an amazing tool for creating images from lots of other images, DeepZoom composer is a tool for publishing large images on the web from Microsoft and Seadragon AJAX is one way to view these massive images with no plug-ins at all. What do these three things have in common? They work seamlessly together and they are all free.
Lets go through step by step how to create your first Seadragon AJAX AndreaMosaic.
Step 1 – Install the software.
You will need two pieces of free software:
AndreaMosaic – http://www.andreaplanet.com/andreamosaic/
This program is simply awesome, Andrea is continuously improving this application, adding new features and improving performance. Way back in May I had this running on my Vista 64bit machine without issue. The latest version supports writing the DeepZoom XML file automatically.
If you like the program you should consider a donation to help Andrea, in return you get access to the unlocked professional version and can create mosaics greater then 200MP.
DeepZoom Composer. http://www.microsoft.com/downloads/details.aspx?familyid=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en
This program from Microsoft allows you to import large images, arrange on the canvas and export to the many compatible viewers. Again this program is getting continuous improvements and features, make sure you download the latest version.
Step 2 – Source your content
You will then need a suitable image to be the mosaic and a folder of images to be the tiles. This will be the most challenging aspect of your project. For this example I will use the 600 odd photos we took on holiday in Peru a few years ago. Ideally you want thousands of images to get the best match for each tile.
AndreaMosaic can also use frames from an AVI file, this works extremely well and I will get a non-copyright example for a later post so I can share the results online.
Step 3 – Set the original image
The little plus button under the section “Original Images” will let you explore to find the main image. This main page is very logically laid out letting you choose the final size, resolution, number of tiles and the important duplication options. Andrea has published a help document that explains all of this in detail, tutorials and support forums for questions.
Step 4 – Select Tiles
Here you create a archive of images to use as source tiles for your mosaics, you can many folders and set some complex usage rules. You save this and these images are parsed into an archive ready to be used.
Step 5 – Options
The “More Options” button from the main screen pops up this dialogue. We will want to tick the option “Deep Zoom Composer”. If you’re creating a large mosaic it is necessary to also tick “Split Mosaic” to break the final image into some more manageable pieces.
Step 6 – Create the mosaic
With all the settings configured you are ready to create the mosaic, this could take a few seconds or many hours depending upon how massive a mosaic you are creating and the performance of your hardware. The detailed status bar lets you know exactly where you are up to.
I have installed this software on my media centre and remote desktop into the machine. This machine has a large and fast hard drive, memory and CPU and spends most of its life dormant. I have found my laptop hard drive a little slow and small for gigapixel images, especially the next step of creating the tiles for DeepZoom.
Step 7 – Open the file in DeepZoom Composer
On completion of the mosaic you are prompted to be taken to the image folder, navigate one folder up and you will find the DeepZoom file. When you open this you will get the Deep Zoom Composer splash screen but then it can take a few minutes to open. What is happening in the background is the composer is generating all the deepzoom layer tiles so it can effectively navigate the super large image. Patience is needed here.
When it does open you will have imported the mosaic images and composed them onto the canvas, use the tabs at the top to navigate. The final tab will allow us to export our creation.
If your mosaic is too big composer may crash at this point, since we are just creating one image I’ve found the export tool from Photoshop to handle larger images (gigapixel) much better. You will have to manually change the HTML file (shown later) to point to your xml file.
Step 8 – Create the Seadragon AJAX export
In the export tab choose “Custom”.
For the output type choose Seadragon AJAX for this plugin free viewer example. Silverlight DeepZoom offer a superior experience and supports collections. I highly recommend you also check this out but it will require your visitor install the common Silverlight runtime. In a later post I’ll show you how to provide both in a seamless experience.
Give your export a name, choose a location.
Seadragon AJAX at the time of writing only supports a composition (single image) export.
Click Export and sit back. When it is complete you can choose preview in browser to see the final result.
Step 9 – Edit the HTML file, add reference to AndreaMosaic
The generated HTML file has a bunch of things you do not need, you can remove these.
As part of the terms of use for AndrewMosaic you need to provide a line of text to link back to the creator:
“Artwork created with AndreaMosaic”
I want my mosaic to be a specific size so I can embed this easily in my blogging software as an iframe, this is my final HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>AndreaMosaic Seadragon Ajax Example</title> <script type="text/javascript" src="http://seadragon.com/ajax/0.8/seadragon-min.js"></script> <script type="text/javascript"> var viewer = null; function init() { viewer = new Seadragon.Viewer("container"); viewer.openDzi("Peru1G.xml"); } Seadragon.Utils.addEvent(window, "load", init); </script> <style type="text/css"> body {margin: 0px;} #container {width: 600px;height: 400px;background-color: Black;} </style> </head> <body> <div id="container"></div> <p style="font:11px Tahoma;text-align:center;">Artwork Created with <a href="http://www.andreaplanet.com/andreamosaic/" target="_blank" >AndreaMosaic</a></p> </body> </html>
Step 10 – Upload to web server
In order to share this with the world you need to upload this to your server. I recommend zipping the tiles into one file to make the transfer faster.
If you do use the silverlight control you can host your application and tiles in the silverlight streaming service for free or using the photozoom option.
The AJAX control uses the exact same assets (xml and folders of tiles) as the Silverlight version.
Step 11 – embed into your blog
Once your html page and tiles are publically available on the web you can embed this as a simple Iframe on your site or blog, for example:
<iframe src="http://www.soulsolutions.com.au/silverlight/perumosaic/" frameborder="0" width="600" scrolling="no" height="450"></iframe>
And this is the final result:
I look forward to seeing your creations posted on Andrea’s forums: