[WARNING! This is an archived post and as such there may be things broken/missing here.. you have been warned.]
This is the first post in my series on how I built the Hooters mosaic. It wasn’t entirely me; I did have a team of designers helping me not to mention the awesome team of .Net developers who built the ASP.NET MVC site which actually does the work; I like to think of the mosaic as the icing on the cake, but what they did was the “steak” part of the project without their work there would be very little point to the whole project.
In this post I’ll give you the reader the background info on what you need to do you get started building a mosaic. Much of this blog series will focus on the other stuff in the project and not necessarily about how to build mosaic. This will be the only post that has anything to do with the mosaic building process. Here it is zoomed out if you haven’t seen it:
I know that one doesn’t normally start with the references, but the very first part of all this is that you need to know how to produce a mosaic.
- The first and most important link you should look at is this one: NZ Synth.
- The video in that link recommends using AndreaMosaic (which is what I used) to create a mosaic(if you want a searchable mosaic you’ll need this too); BTW, you want to spend the money on the Pro version… nd you want to mess with the megapixel settings (forget trying to figure everything else.. simply tell it “1000 megapixel” –or more with a PPI of 600)
- He also mentions (in a blog post) the command-line utilities of HDView/HDMake (from MS Research) to generate your DeepZoom files (I recommend that as well.. I found DeepZoom composer was unable to deal with the extremely large image that I had produced). I actually created a .Bat file and had that plus the command-line utility in a zip file that dropped in with the image and ran.. it automatically produced a simple web page that hosted a generated silverlight app I could use to browse the mosaic locally.
- The only other things you’ll need is lot’s of images (and if you want a decent looking mosaic you want to use 5000 images at a minimum.. AndraMosaic will re-use your images if you tell it, but that gets a little difficult to get right)
- Oh yeah, you need to practice using AndreaMosaic. Trust me getting the settings right takes patience and a lot of practice.
- After you have used all that you have a way to find images in your mosaic as well as you have a Deep Zoom folder with files that can be connected to the MultiScaleImage control (we will be talking about that in a later post).
If you haven’t figured it out the answers to how to build a mosaic are mostly out in the wilds of the Internet. Study the NZSynth info and source code and that will get you headed in the right direction.
I mentioned earlier that the image is large. Well, if you do it right, you’ll have a 1+gb image (our source image was around 1.6gb). Our image is 54000 x 37000 (it’s actually a little bigger than that.. I’m estimating). We used 1000 images for the mosaic and had it duplicate so we had over 10000 images (so images were duplicated many, many times). We also let the AndreaMosaic app play with the colors considerable because when you land on an actual girl we pop up the original image. In a future post we will explore the coordinate system in the MultiScaleImage (MSI) control.
Additionally if you monitor the network traffic you will see that we don’t do any actual service calls except for images because the data is all contained within the application. I used T4 templates to parse the various pieces of data and push it into programming constructs, so were able to use LINQ against classes in the UI to do searches against the data that we show on screen which means we could have made a richer search mechanism –we didn’t have time to do that this time.
Additionally the mosaic uses both MEF and MVVM Light (both of which we’ll be exploring in future posts). If you are nearby I will be speaking at the Pasco .NET Users Group on July 15th (2010) on the internals of the Hooters Mosaic.