update iipmooviewer / IIIF-compatible-server examples: Zenodo

[abubelinha]

~3 years ago I opened iipsrv #204 issue , where other issue about iipmooviewer-IIIF compatibility was risen.
I think it was never solved, so I reproduce it here (with updated image links, according to current Zenodo's api responses):

@abubelinha :

I adapted your IIIF example and tried it with this image, served directly from that link (so, I am not using iipsrv, just iipmooviewer).

It does not work properly.
Although it loads the tiles, they are wrongly assembled to the right part of the viewer (i.e., there are "cuts" in the viewer, one vertical and another one horizontal).

I am trying it in localhost. Could you try it yourself?
These are the only things you need to change in iiif.html:

var server = "https://zenodo.org/api/iiif/";
var image = 'record:2869800:BR0000012078165.jpg';
Plus I touched iiif.js file and replaced the strings native.jpg by default.jpg, since that server uses IIIF 2 quality

A similar adaptation of OpenSeadragon viewer works almost perfectly, so I guess there is nothing wrong with the server.

@ruven :

I tried pointing to the Zenodo IIIF end-point with your example image and there are indeed problems with the edge tiles:
https://merovingio.c2rmf.cnrs.fr/iipimage/iipmooviewer/zenodo-iiif.html.

iipmooviewer should handle these kinds of info.json files better - I'll fix it shortly

Unfortunately, the zenodo-iiif.html link you mentioned is not working.
Could you please take a look and update the example with current Zenodo IIIF image end-point?

I really love using iipmooviewer but I need to move image files from my institution server to Zenodo repository.
I hope you can make it work again.

Thanks a lot in advance
@abubelinha

[Ruven]

The Zenodo demo link is no longer working because Zenodo seem to have changed their image paths and also their IIIF implementation.

The info.json file for your image has moved and is now here: https://zenodo.org/api/iiif/record:2869800:BR0000012078165.jpg/info.json
But, if you take a closer look at the contents, you'll see it's missing key information such as the width and height of the image, which if I recall correctly were included in their previous version.

IIIF doesn't seem to be mentioned anywhere in the Zenodo documentation. Is this something that is officially supported by them? If you go the page for your image (I think this one? https://zenodo.org/records/2869800), I don't in fact see any mention of IIIF.

[abubelinha]

Thanks for commenting @ruven.

As your demo didn't work, I wasn't sure whether you had ever got it working or not (I vaguely recall some problems with wrongly computed tiles at bottom/right sides).

it's missing key information such as the width and height of the image, which if I recall correctly were included in their previous version

That was my guess too (see I had already linked other issues about that). So thanks for confirming.

IIIF doesn't seem to be mentioned anywhere in the Zenodo documentation. Is this something that is officially supported by them?

Not officially, and not yet documented.
But based on other previously working implementations (your iipmooviewer demo and this repo) I assumed Zenodo-IIIF to be already working properly 2-3 years ago.
So their recent api changes caused a step back (missing width & height from info.json), but I guess that was just a bug they can easily solve.

If you go the page for your image (I think this one? https://zenodo.org/records/2869800), I don't in fact see any mention of IIIF.

It is indeed there, but you need to use the files api to see it: https://zenodo.org/api/records/2869800/files

I really want to use Zenodo as image repository, and iipmooviewer is my top 1 preferred client.
So, let me modify a little bit the original question into a temporary hack until Zenodo's api is fully IIIF-compatible:

Is there an easy way to pass width & height from the script, so iipmoviewer stops looking for them in Zenodo's info.json?

Basic OpenSeadragon configuration IIIF example is setting width & height directly from client. Adapted from 1st sample code in that link, this is enough to browse the aforementioned zenodo image (provided you know image dimensions in advance, which I do):

OpenSeadragon({
    ...
    tileSources:   [{
      "@context": "http://iiif.io/api/image/2/context.json",
      "@id": "https://zenodo.org/api/iiif/record:2869800:BR0000012078165.jpg",
      "height": 7167, // <--------- THIS IS THE TRICK
      "width": 4900, // <--------- THIS IS THE TRICK
      "profile": [ "http://iiif.io/api/image/2/level2.json" ],
      "protocol": "http://iiif.io/api/image",
      "tiles": [{
        "scaleFactors": [ 1, 2, 4, 8, 16, 32 ],
        "width": 1024
      }]
    }
    ]
});

Sorry for proposing such an awful idea, but I do so much prefer using iipmooviewer, specially because of its nice draggable measure tool.
Thanks in advance for any help you can give me.

EDIT:
I tried to change the "width": 1024 setting in above code, which apparently refers to requested tile sizes.
Some tests with my sample image:

• 1024 x 1024 tiles weigh up to 225 KB
• 512 x 512 tiles weigh up to 70 KB
• 256 x 256 tiles weigh less than 30 KB, but if I try to quickly zoom and move across the viewer, I start getting these responses from Zenodo server: "429 (TOO MANY REQUESTS)"

So I guess it is better to keep this value high for now.

[abubelinha]

I tried to hack iipmooviewer's IIIF requests myself, as a temporary workaround for browsing images at Zenodo.
I need to control from client's side:

• full image width and height (until Zenodo exposes them again in info.json)
• tilesize (tiles width and height), to avoid sending too many tile requests (see my above OpenSeadragon-Zenodo tests)

I defined those variables at client side, just before creating iipmooviewer object in iipmooviewer.html page.

    server = "https://zenodo.org/api/iiif/";
    image = 'record:2869800:BR0000012078165.jpg';
    var client_w = 4900, client_h = 7167, client_tw=512, client_th=512;
    new IIPMooViewer( "viewer", {
	server: server,
	image: image,
	protocol: "IIIF",
	credit: credit,
	scale: 23.9 // set it according to your image scale if you wish
    });

In iiif_zenodo.js I read those values in parseMetaData() function to override expected IIIF server values.

I think it mostly works, but some of the bottom row tiles are a bit narrow (black lines between them).
This only happen sometimes (depends on which image and zoom level) but the example above is one of those cases.
I didn't modify any calculations so I guess this is still a small iipmooviewer's bug (too complex for me to understand).

Some other small changes are still related to old IIIF version, so they may be useful for default iiif.js protocol file.

Could you @ruven please take a look ?
Thanks a lot!

[Ruven]

Yes, a custom loader for Zenodo is a very good way to do this.

To eliminate the black lines, try changing this in your iiif_zenodo.js file:

    // Handle bottom edge tiles that may be smaller than the standard tile size
    if( this.resolutions && (t.y+1) * this.tileSize.h > this.resolutions[t.resolution].h ){
      src += "/," + (this.resolutions[t.resolution].h - t.y * this.tileSize.h );
    }

to this:

  // Handle bottom edge tiles that may be smaller than the standard tile size                                                                         
   if( this.resolutions &&                                                                                                                             
       (t.x+1) * this.tileSize.w > this.resolutions[t.resolution].w &&                                                                                 
       (t.y+1) * this.tileSize.h > this.resolutions[t.resolution].h ){                                                                                 
     src += "/" + (this.resolutions[t.resolution].w - t.x * this.tileSize.w) + ","
   }   

In fact, it's only the bottom right tile that needs special handling, not the whole bottom row.

[abubelinha]

Thanks a lot, it works great now !!