Documentation for tile-drawing event

The new tile-drawing functionality isn’t documented. I’ve been giving it a go via guesswork, looking at the source, and using a debugger, and so far I’ve got:

sd.addHandler(‘tile-drawing’, function(viewer){

        ctx = viewer.rendered;

        if(ctx){                                                     
            var width=viewer.tile.size.x ;
            var height=viewer.tile.size.y ;
            width*=2 ; // ?? tile size is not necessarily canvas size??
            height*=2 ; // ?? tile size is not necessarily canvas size??

            if(width>0 && height>0){
                var imgd = ctx.getImageData(0, 0, width, height);

               // Do some Simple image processing


                // Draw the ImageData at the given (x,y) coordinates.
                ctx.putImageData(imgd, 0, 0);
            }

        }
    }

});

I have 2 issues:

i) Surely there is a better way of setting the width/height of the canvas than multiplying the tile size by 2 (certainly if you just set it to the tile size you don’t process the whole tile canvas … presumably due to tile scaling).

ii) While it works fine at low zoom, it is really slow when you zoom in. Surely the same number of tiles should be rendered (approximately) whatever the zoom?

I presume this is mainly down to me not having any documentation, so thanks in advvance for the help!

Derek

[avandecreme]

I have been developing a filtering plugin the last few days. (I hope to be able to publish it soon)

I discovered that you shouldn’t flag the tile as already processed but the context. The reason being that OSD will discard some rendered context to free up memory. When the rendered context of a tile get re-created, you will need to re-perform whatever operation you are doing on it.

So, your code should look like:

osd.addHandler('tile-drawing', function(event){
   var context = event.rendered;
   if (context._alreadyProcessed) {
      return;
   }

   // do stuff
   context._alreadyProcessed = true;
}

[iangilman]

Good point… this should definitely be better documented.

Looking at https://github.com/openseadragon/openseadragon/blob/master/src/tile.js#L275-L294 I’d say you want to say var width = ctx.canvas.width, which should obviate the need for the *= 2.

Regarding the speed, one possible issue is continually processing the same tiles every frame. You can add a flag to the tile (viewer.tile._alreadyProcessed = true or somesuch), and only process tiles that don’t have that.