Monday, January 12, 2009

Who knew JPG's could be so bloated?

Thanks to Akishore's comment on my previous post, I re-exported the lovepixel Deep Zoom data in PNG format rather than JPG. The total data size shrank from 93mb to just 25mb! I knew JPG's were primarily for photographic data, but I didn't realise there'd be this much of a difference in size.

I'd already decreased the size of the zoom window to help performance in low-bandwidth situations. But changing from JPG to PNG made an immediate and significant difference - Lovepixelzoom runs much faster now.

I'm glad I put it on App Engine and not biz.nf, since I blew through 4gb data-transfer in a few hours after posting it to the App Engine discussion group.

I haven't really had much time to play around with the Seadragon API, but the docs were great. I was happy to see that openDzi was just a helper function that I could bypass and directly use the DziTileSource constructor.

If I remember correctly, I did notice that:

viewer.viewport.zoomTo(z, new Seadragon.Point(x, y), true);

didn't do what I wanted, but this did:

viewer.viewport.panTo(new Seadragon.Point(x, y), true);
viewer.viewport.zoomTo(z, null, true);

I had a quick shot at making zoom-in animations for when you clicked on the presets at the bottom of the screen. I seemed to be able to control how long the pan took using Config.animationTime, but the zoom-in always seemed to happen really quickly regardless of how long the animation took. There's probably something else there that I'm missing.

When I get time I'd like to look to see if it's possible to insert one set of dzi data into another at runtime and do recursive infinitely zoomable images - perhaps something like this?

Friday, January 9, 2009

Lovepixel Mashup

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.