Resumé

Seadragon UniformToFill Resize

Cristian Merighi () 0.00

How to get a perfectly-fitting cropped composition using Seadragon's ajax API's and listening to layout changes.
This article is obsolete. Some functionalities might not work anymore. Comments are disabled.

I'm now implementing a framework meant to manage a web application layout in a more ergonomic fashion, its goal is to use every pixel of a client monitor. A so named liquid layout.

While challenging the images' "matter" (talking 'bout resizing here) I've been thinking about exploiting the funcionalities exposed by Seadragon (ajax) API's.
Seadragon allows (in a basic utilization), thanks to its tile-sources, to automatically scale a picture depending on the size of its containing DOM element.
Insidious trap along the way was the particular normalized coordinate system used in Seadragon's world together with the default resizing policies. Image shows up so that it can be "entirely" seen inside the viewport. My idea was however more of a cropped view, to avoid empty areas inside the viewport itself.

Easier said tha done, until you don't properly just know, as said, Seadron's coordinate system: in a nutshell, the width value get normalized to 1 while the height depends on the aspect ratio of the source image. (0,0) is the top-left point of the image, always.

Ok. Fair enough now. I'm ready to write down a utility javascript class that fits my needs (demo):

Seadragon resizing "UniformToFill" style
  1. if (!window.Pacem)
  2.     window.Pacem = {};
  3. Pacem.Seadragon = function (containerID, dzi, resizeCallback) {
  4.     if (!window.Seadragon) return;
  5.     this.viewer = new Seadragon.Viewer(containerID);
  6.     this.viewer.setDashboardEnabled(false);
  7.     this.viewer.setMouseNavEnabled(false);
  8.     this.viewer.openDzi(dzi);
  9.     this.resize = function () {
  10.         var viewer = this.viewer;
  11.         if (!viewer || !viewer.viewport) return;
  12.         // container size in pixels
  13.         var vport = viewer.viewport.getContainerSize();
  14.         var vport_ratio = viewer.viewport.getAspectRatio();
  15.         // image size in pixels
  16.         var img = viewer.source.dimensions;
  17.         var img_ratio = 1.0 * img.x / img.y;
  18.         var x, y, w, h;
  19.         if (img_ratio > vport_ratio) {
  20.             // clip horizontally
  21.             w = vport_ratio / img_ratio;
  22.             h = 1.0 / img_ratio;
  23.         } else {
  24.             // clip vertically
  25.             w = 1.0;
  26.             h = (img_ratio / vport_ratio) / img_ratio;
  27.         }
  28.         x = .5 * (1 - w);
  29.         y = .5 * (1.0 / img_ratio - h);
  30.  
  31.         var rect = new Seadragon.Rect(x, y, w, h);
  32.         viewer.viewport.fitBounds(rect, true);
  33.         if (resizeCallback && typeof resizeCallback == 'function') {
  34.             resizeCallback(x, y, w, h);
  35.         }
  36.     }
  37.     var resizeHandler = Seadragon.Utils.createCallback(this, this.resize);
  38.     this.viewer.addEventListener('open', resizeHandler);
  39.     this.viewer.addEventListener('resize', resizeHandler);
  40.     this.resize();
  41. };

Hope it helped.

Take care. Bye.

feedback
 

Syndicate

Author

Cristian Merighi facebook twitter google+ youtube

Latest articles

Top rated

Archive

Where am I?

Author

Cristian Merighi facebook twitter google+ youtube

I'm now reading

Feeds