A couple of days ago I browsed my way into Seadragon and decided to have a play around with it. I found a perfect image to put it through its paces over at LovePixel. It's a fantastic 100 megapixel image with lots of interesting detail. It's composed from 10mb of source data spread across 25 png files.
I ran it through Deep Zoom Composer and it generated 93mb of data spread across 2147 jpg files. Next I put it together with some code generated by Seadragon Ajax, and added the ability to link to specific places in the image. I took it into work and sent it around, and people found all sorts of crazy stuff.
Next I thought I'd put it up on the net for everyone to see. I recently ported my old travel journal from running on ASP.Net over to Google App Engine. This was an execuse to check out Python, but mostly I just didn't want to pay for my WebHost4Life hosting anymore. I'm no web developer, but App Engine was stupidly easy to get started on.
I could have just uploaded my mashup to biz.nf - they offer 150mb of data storage and I only needed 93mb. But they only give you 4gb of transfer a month, and it'd be pretty easy to blow through that if a ton of people checked it out.
The quotas and limits imposed by App Engine can be pretty tricky, but I figured it was perfect for my lovepixel mashup. The 500mb of data storage is more than I needed, but they give you 10gb of transfer a day! There's a catch though - you're limited to 1000 static files, and no file can be larger than 1mb.
None of the images I needed to store were over 1mb, but I had over 2000 of them. Thankfully the 1000 limit doesn't apply to blobs in the datastore. So I wrote a small python module that lets me put and get files directly to and from the datastore using a normal path syntax. I then wrote a simple C# application that lets me select a directory on my hard drive and upload the whole folder automatically.
Once the Lovepixel Deep Zoom data was up in the database, I changed the Seadragon javascript to pass in the url to the root of the folder. Finally, I added links to some of the stuff my workmates found - try and find stuff for yourself first though, it's more fun.
I've tried it in Chrome, Firefox and IE. It seems to be fastest in Chrome, and then Firefox, with IE chugging sometimes. The nice thing about IE is that it doesn't do anti-aliasing on the images - it is meant to be pixel art after all. Your experience will probably be affected more by the speed of your internet connection.
So go check out lovepixelzoom - hope you like it.
Blog Archive
3 comments:
That's awesome! Very nice work!
I agree -- awesome work! =) I'm glad you used/liked Seadragon in particular. Disclosure: I'm the main developer on Seadragon Ajax. On that note, if you have any feedback from using the library, feel free to pass it on.
By the way, not sure you'd want to re-build the DZI, but if you export as PNG instead of JPEG, the file sizes should be much smaller since, for these types of images (large regions of solid color), PNG compresses much better than JPEG. This is generally the opposite -- JPEG usually compresses better than PNG.
I'm not sure how switching to PNG will affect perf of your app. Generally, browsers decode JPEG faster than PNG, but your case might be the opposite with perf too. =)
Nice work again!
I love the treasure hunt aspect of it. I've posted a link at:
http://dragonosticism.wordpress.com/2009/01/13/lovepixel-zoom/
As for maintaining the purity of the pixel art, one thing you can do is tell Seadragon Ajax to not let people zoom in further than 1:1, using Seadragon.Config.maxZoomPixelRatio.
Post a Comment