Please help with logic of Seadragon deep zoom viewer.

  • 1
  • Question
  • Updated 8 years ago
Hello!

I am a bit lost with the logic of Java Script which shows the Seadragon image.

Particularly: how does it trerat missing tile files in "..._files" directory?

I have 9 zoom levels, so my sub-directories are: 0, 1, 2, ..., 8.
My tile size is 256x256.
My picture size is 65536 x 65536 (i.e. width/height is 256 x 256).

I don't want to create this huge picture at once, but to upload its parts to my web-site from time to time (I wrote a PHP script that given image and its x,y coordinates inside my 65536 x 65536 picture, it cuts this image into tiles and propagates through the image pyramid.

Currently I have only the first 256x256 square of the whole picture, so my "..._files" directory is like this:

_files/0: 0_0.png
_files/1: 0_0.png
...
_files/8: 0_0.png

each zoom level contains only one tile.

When I start the deep zoom (java script) viewer, I expect to see a large black square (with tiny subsquare at the top-left) which is my 256x256 image with very low resolution.

I.e. I expect it to start with the lowest resolution.

Why does it not do this? Why does it display my 256x256 sub-image of the whole 65536 x 65536 picture on the whole screen?

How does it treat missing .png files - does it just create black squares for them?

Maybe I need first to create all the 65536 x 65536 picture pyramid and fill it with black-color tiles?

Thanks in advance...
Photo of Leo

Leo

  • 11 Posts
  • 0 Reply Likes

Posted 10 years ago

  • 1
Photo of Bill Crow

Bill Crow, Seadragon Group Manager

  • 100 Posts
  • 38 Reply Likes
Hi Leo,

Seadragon will (ideally) never display a "black hole" where there are missing tiles. As long as it has a single 1x1 image at level 0, it has something to display for absolutely every portion of the image. As more levels are provided, it has more detail. Whenever tiles are missing, Seadragon will use the content from the previous (lower resolution) levels.

So, the behavior you describe is exactly what I would expect should happen. Since you have tiles through level 8, you have a representation of the entire image at a resolution of 256x256. There is no reason to leave gaps in any portion of the image. As you add new tiles to lower levels, those corresponding areas of the image will be available at increasingly higher levels of resolution. For the areas where the higher resolution tiles aren't present, the lower resolution content is used.

Your 256x256 representation (at level 8) is not a sub-image. It's the entire image at a lower resolution, Since the entire image is available, it's displayed to fill the entire view window. Adding higher resolution tiles adds more detail; it does not cause the zoom level of the image to change.
Photo of Leo

Leo

  • 11 Posts
  • 0 Reply Likes
Hi Bill,

Thanks for your response!

Actually my aim is to create initially empty (black) large image (65536 x 65536) and later on to upload portions of it.

If I've understood you right, initially I need to create 256x256 black image on level 0 and leave all other levels empty (with no files).

Now If I want to upload a new part (say of size 256x256) of the huge (65536 x 65536) image and put it, say for simplisity into coordinates (0,0), I do the following:

Go to level 8 and put this image to 0_0.png.

Unzoom it by factor 2 (now it is 128x128) and put in level 7 in 0_0.png.

Etc. untill I reach level 0. Here the image size will be 1x1 and I take the original 256x256 black image of level 0 (which I created at the benining) and update only its top-left pixel to hold the new 1x1 image).

Each time I upload new small image, I need to correctly insert it into the whole zoom pyramid.

Am I right?

Is my understanding correct: each x_y.png file (in all levels) should be of size 256x256, except the files at the edge of picture which can have smaller dimentions?

Also: is it not the way how many people actually work with deep zoom?
If the image is large, you cannot download the whole pyramid into web-site at once. It is much better to download by parts, so in deep zoom viewer you will see those parts already there and the rest black. It also allows to change only particular part of the whole image.
Photo of Leo

Leo

  • 11 Posts
  • 0 Reply Likes
Bill, sorry I am probably still not understanding the file format correctly

My image is of size 65536 x 65536 (I set it in .dzi file) and in level 8 (highest resolution level) I have only one file 0_0.png of size 256x256.

This does mean that I have only one small part of the whole picture, because level 8 should actually contain 256x256 files like: 0_1.png, 0_2.png,... 0_255.png, 1_0, ..., .......

While level 0 (lowest resolution) should contain only one file 0_0.png 256x256 pixels.

???
Photo of Bill Crow

Bill Crow, Seadragon Group Manager

  • 100 Posts
  • 38 Reply Likes
The version of your image at level 0 should be the lowest possible resolution of the image: 1x1 pixel. This is stored as 1x1 image, not a single pixel in a 256x256 image. Level 2 is 2x2, level 3 is 4x4, etc. So, level 8 is 256x256. After level 8, the image will no longer fit in a single 256x256 tile. So, it now takes 4 tiles of 256x256 each to represent the 512x512 version of the image. This continues on all the way to level 16 to be able to represent the entire 65536x65536 using 65,536 tiles (256 tile rows, with 256 tiles per row.) Each of those tiles is 256x256 pixels in size.

Seadragon progressively loads an image by increasing the resolution. It does not progressively load an image by area. So, from the very first tile access, Seadragon is able to display a version of the entire image. As more tiles are retrieved, it simply continues to fill in more details.
Photo of Leo

Leo

  • 11 Posts
  • 0 Reply Likes
Thanks!

Now I understood my mistake: Seadragon starts from resolution 1x1 while I thought it would be more reasonable to start from resolution of single-tile image.

Now I understand that Seadragon viewer does not deal with rendering - does it?

My mistake was because previously I wrote my own deep-zoom viewer (in Java). The lowest resolution image I used was 256x256 - you don't need smaller images, because you can always use your 256x256 one and decrease its resolution.

Actually Seadragon increases number of files by 7: there are 7 zoom levels (from 1x1 to 128x128) which are unnecessary loaded from web-site.
Photo of Aseem Kishore

Aseem Kishore, Former Employee

  • 702 Posts
  • 124 Reply Likes
Official Response
Hey Leo,

I don't have the full context and haven't read your detailed questions, but I heartily recommend reading this two-part primer by our excellent former intern, Daniel Gasienica, that explains the exact numbers and format behind Deep Zoom:

http://gasi.ch/blog/inside-deep-zoom-1/
http://gasi.ch/blog/inside-deep-zoom-2/

I have a feeling this primer -- particularly part 2 -- will answer all of your questions. ;)
Photo of Leo

Leo

  • 11 Posts
  • 0 Reply Likes
Hi Aseem,

Thank you!
These articles really help.

That's pity I didn't see these articles before: I had to understand by myself why tile sizes are not exactly 256x256.

I used to work with image pyramid two years ago and I created then my own Java application for displaying the zoom image and php upplication for uploading images to web site.

Now I came back to this subject and saw there are more existing powerful tools now than there were at that time.

I found my mistake in understanding Seadragon file format, but I still don't understand why does Seadragon deep zoom need to keep directories and files in them for zooms up to 1x1 pixel.

If your tile size is 256x256, the lowest zoom you need to keep is 8, as 256 = 2^8. If you want to display zooms less than 8 - just load zoom 8 (one tile) and rescale it to lower resolution.
Photo of Bill Crow

Bill Crow, Seadragon Group Manager

  • 100 Posts
  • 38 Reply Likes
Technically, you are correct. For a single image, a 256x256 tile could be used for the lowest resolution. There are a bunch of reasons why we don't do this (and some of it is just historic.)

Seadragon was built around the idea of not just single zoomable images, but collections of images. For a Deep Zoom Collection (DZC), each tile level represents all items in the colleciton in the smallest number of tiles. So, the collection tile at level 0 contains a 1x1 pixel representation of up to 65k items in the collection. The level 1 tile contains a 2x2 representation of up to 8k items. (If there are more than 8k items in the collection, there will be a second level 1 tile.) This continues all the way to level 8, where (typically) each tile represents one item in the collection. So, when Deep Zoom is displaying collections, it never even reads tile levels 0-8 from the DZI; it gets that information from the DZC. It's only when it goes to a greater resolution than 256x256 that it needs to start reading DZC tiles.

So, why do we even have levels 0-7 in a DZI? One reason is that it lets you create Deep Zoom images that may have different content at different resolution levels. If you ever zoomed on Bing Maps, it will give you a good idea of when you use this. If Levels 0-7 are always created algorithmically (by downsampling level 8) then they can never have different content. Second, it makes the logic of building Deep Zoom Collections from Deep Zoom images simpler and more memory efficient. Finally, reading that first 1x1 pixel tile (and the next couple levels) is very fast because they are very small, so it minimizes the latency before we have something to display. That's one of our goals with Deep Zoom - to be able to display the first representation of an image with the least possible delay.

Bill
Photo of Ken Yee

Ken Yee

  • 3 Posts
  • 0 Reply Likes
What happened to Deep Zoom Collection (DCZ) support in Seadragon? Sounds like it was supposed to be there, but it's still not.... :-P
Photo of Bill Crow

Bill Crow, Seadragon Group Manager

  • 100 Posts
  • 38 Reply Likes
Collection support was never implemented for the JavaScript version of Seadragon. Collections require the ability to crop images (to extract tiles for a specific collection item from a tile that represents the entire collection.) At the time we were working on this stuff, there was no performant way to do this in HTML. Today, with the tag in HTML5 (especially with the hardware acceleration provided by IE9), it is certainly possible. While our team did create working proof-of-concept implementations, none of this was developed to a release quality level. There is no longer a Seadragon team to work on this, but since the Seadragon control in the ASP.Net Ajax Control Toolkit is all open source, it's wide open for anyone to dive in and contribute this capability.
Photo of Ken Yee

Ken Yee

  • 3 Posts
  • 0 Reply Likes
Thanks, Bill.

Which HTML5 tag would you use?
Any chance you guys might post the proof of concept to give us a start at updating the code? I understand it'd have to be rewritten to use HTML5, but would provide a good pointer as to what parts of seadragon would need to be changed... ;-)
Photo of Bill Crow

Bill Crow, Seadragon Group Manager

  • 100 Posts
  • 38 Reply Likes
Ha, ha. the Get Satisfaction software edited it out of my reply above, most likely because I included the brackets. The sentence in my previous post originally said:

Today, with the "canvas" tag in HTML5 (especially with the hardware acceleration provided by IE9), it is certainly possible. The canvas tag lets you specify sub-regions for display, which can effectively be used to crop a portion out of a larger image. This is essential to extract individual item textures from collection tiles.

Bill
Photo of Ken Yee

Ken Yee

  • 3 Posts
  • 0 Reply Likes
You mean like this? :-)
http://www.akademy.co.uk/blog/2010/06...

The problem is MSIE doesn't support the tag....grrrr...or at least MSIE 8 doesn't which is still popular on WinXP systems :-(