Image comparison viewer with linked view areas

[jwarren]

Hi

I'm developing a plugin for omero using django as per the docs. I already have close to what I want but in .jsp and javascript here: https://dev.mousephenotype.org/data/ima ... ImgId=8415

What I would like to do is be able to link the two images left and right so if you zoom in on one - the other zooms in by the same amount, scroll left by the same etc.

Just wondered if there is an example that has this already somewhere? or some tips on the best way to do this? My approach currently is to have a modified omero_image.html template to get rid of some of the buttons we don't want on the left and then call this new view from javascript with the same x y coordinates as parameters for both images?


Thanks

Jonathan.

[wmoore]

Hi Jonathan,

You're going to have to play with this a bit, since the current code doesn't support your use case particularly well, and I haven't tested everything I'm going to suggest here....

I think you'll need to add global methods (on the window object) which can be called from between iframes. I don't have much experience of iframes, but presumably you have some way to call functions in one viewer iframe from the other viewer iframe.

Handling zoom changes should be pretty straight forward.
In the section of javascript after the viewport initialisation, you can add your
own listener for zoom changes.

Code: Select all

viewport.bind('zoom', function(e, percent) {
    // if this window is the 'control' window
    // call setZoom(percent) on the "experimental" window
    // and vice versa
});


Add a setZoom() method to your global window object for each viewer;

Code: Select all

window.setZoom = function(percent) {
    if (viewport) {
        viewport.setZoom(percent)
    }


Handling panning of the image is slightly less nice, since we don't trigger any events you can listen to.
Either you can go in and edit ome.viewportImage.js, adding a line right at the end of the this.doMove function:

Code: Select all

image.trigger('move', [left, top]);


Then you can listen for 'move' events in the same way as 'zoom' above.
Alternatively, if you don't want to edit ome.viewportImage.js you can add a listener
for the mousemove events when the user is dragging the image, then grab the
top and left offsets.
NB: you have to wait for the viewport to load and the draggable div to be created
before you bind mousemove events to it:

Code: Select all

viewport.bind('imageLoad', function() {
    $("div.draggable").mousemove(function (e) {
      var $dragdiv = $(this);
      if ($dragdiv.hasClass('ondrag')) {
         var top = $dragdiv.css('top');
         var left = $dragdiv.css('left');
         // now call window.setMove(left, top) on the other viewer
      }
    });
});


Finally, you'll need to add a window.setMove(left, top) method to the viewer.
You should be able to directly apply the offsets to the draggable div:

Code: Select all

window.setMove = function(left, top) {
    $("div.draggable").css( {'left': left, 'top':top});


Hope that helps. Good luck!

Will.