
OpenSeadragon: A pure JavaScript high-resolution zoomable image viewer - arunc
https://openseadragon.github.io/
======
jrochkind1
A pretty nifty (if I do say so myself) project I implemented with
OpenSeadragon.

[http://beehivecollective.org/posterViewer/?poster=mr](http://beehivecollective.org/posterViewer/?poster=mr)

I am NOT responsible for the art or narrative, just for putting it online with
an OpenSeadragon-based implementation.

Source:
[https://github.com/jrochkind/beehive_poster_viewer](https://github.com/jrochkind/beehive_poster_viewer)

The Mesoamerica Resiste poster is an incredibly large high-res image, and
OpenSeadragon works well for allowing very high-res zoom-in, with quick
initial load. I had to fight with OSD a bit to get the UI I wanted, but once I
spelunked through the source a bit I could usually figure out how to hook in
to do what I needed. (And Javascript is not my most fluent language, which
perhaps shows in my source). I'm pretty happy with OSD. Still a couple things
that aren't quite right in my implementation, it gets confusing to figure out
what's going on with high-res images and maintaining proper resolution (also
not in my wheelhouse), and the version of OSD I was using didn't neccesarily
always do the right thing with high-res "retina" displays (there were some
improvements to this in master, not sure if they've been released yet). But
overall, OSD is pretty amazingly high quality software, for free.

[http://beehivecollective.org/posterViewer/?poster=mr#s=An%20...](http://beehivecollective.org/posterViewer/?poster=mr#s=An%20Alternative%20Economy%3A%20Exchange)

~~~
hawleyal
Nice. However, the animation/easing when selecting next/previous causes some
eye strain. Maybe it's just me.

~~~
jrochkind1
Thanks for the feedback.

Yeah, I think it could be better. I had a lot of trouble getting it right, and
it required hacking with OpenSeadragon a bit to adjust from the default
easing, which was meant for applying to user-drag actions not automated pan-
and-zoom, and was definitely inappropriate by default.

Do you have any suggestions as to what characterstics of the animation/easing
are causing eye strain or what sorts of changes would result in better?

~~~
324239042390
I think that its too slow. Also, to prevent the eye focusing on things as they
rush past, I would zoom out to view (most of) the poster and then zoom back in
to the new detail.

~~~
jrochkind1
Cool, thanks for the advice.

It's tricky to figure out good algorithms for moving from any arbitrary view
to any other, with easing and timing etc. Sometimes the pan/zoom is just
moving a little bit, in those cases zooming all the way out and back in again
would be wrong. So you've got to take all of that into account with some good
heuristics in an algorithm.

Tricky, but also kind of fun, I'll take another go at it sometime.

------
ygra
One thing I did with a friend back when XKCD 1110 came out:
[http://dump.ventero.de/xkcd1110/open.html](http://dump.ventero.de/xkcd1110/open.html)

IMHO Seadragon _feels_ much nicer and fluid compared to the host of Leaflet-
based viewers that appeared on that day. But maybe I'm biased because I was
involved in this viewer ;)

------
jeremytubbs
We use OpenSeadragon for our collection pages at:
[http://collection.imamuseum.org/](http://collection.imamuseum.org/)

We use have a Python tile_generator:
[https://github.com/IMAmuseum/tile_generator](https://github.com/IMAmuseum/tile_generator)

Also, I just developed a PHP composer package:
[https://github.com/jeremytubbs/deepzoom](https://github.com/jeremytubbs/deepzoom)

~~~
iangilman
Wow, beautiful integration! Great content, too :-)

------
kevincox
Really nice. The only thing I would change is to remove the "smooth" drag. It
just makes it feel like it is lagging behind. Just stick it to my mouse.

~~~
hawleyal
The smooth drag reduces eye strain caused by animating/easing a detailed image
with low FPS.

------
carlodelmundo
Can anyone provide any insight on how OpenSeadragon is blazingly fast? Compare
this to websites that have to rerender pixelated zoomed-in views after each
zoom command.

~~~
ygra
At its core it's just a quadtree of tiles, just like any other such
application. This means that the data to transmit or keep in memory is just
proportional to what fits on the screen.

Furthermore, Seadragon employs animations to bridge perceptible performance
gaps, e.g. loading new tiles. You get the blurry mess when zooming in as well,
it gets slowly replaced by the sharper versions as new tiles get loaded. The
use of the fading animation here helps mask the actual change, which makes it
less visually jarring.

Another thing is that zooming uses a bit of inertia for the animation, with an
easing effect. This takes much longer than Google Maps' or Leaflet's immediate
zoom but (a) again, reduces the effect that the new frame upon interaction is
totally different from the previous, and (b) during the animation new tiles
are loaded already and replaced. This often means that by the time the zoom
animation ends you already have the sharper tiles on your screen _and_ the
blurry ones were used predominantly during the animation during which you
didn't notice the blurryness.

Panning also uses a spring to have some sort of easing for drags which means
things are animated longer, thus more time for tiles to load without you
noticing. Some people dislike that behaviour, I actually like it. It feels
less "stiff" than what other tile-based viewers usually do.

In general, it's _not_ blazingly fast, or at least not faster than other
technologies. It just makes good use of animations and a few perceptual tricks
to make it _feel_ fast. Which is actually, what user-facing applications
should concentrate much more, in my opinion. Raw performance matters much less
than what users perceive (for interactive things anyway).

~~~
iangilman
Well put!

------
orless
This looks nice, but my question is, why not LeafletJS or OL3? What are the
unique features?

~~~
jrochkind1
I actually wasn't previously familiar with Leaflet, but when I look at it's
demo's now, I generally find it's UI not quite as good as OpenSeadragon's.
Another commenter below agrees with me.

It also looks like Leaflet may be focused on geographic data? OSD is not, it
has no special geo features (which would be a problem if you need them), but
is focused on _images_, which may end up giving it the sort of features (back-
end and UI) and API suitable for people concered with high-res images as
images, rather than maps. (Does Leaflet actually have facility for dealing
with multi-resolution-level tiling? I would assume so, but it's not clear from
a quick skim of the docs...)

Or it could just be that there are multiple products with overlapping feature
sets. I don't think OpenSeadragon is neccesarily _newer_ than Leaflet, as I
think you imply.

Looks like the first commit in Leaflet repo is Aug 2010; the first commit in
OpenSeadragon is Nov 2011. I imagine both took a while to reach maturity. It's
also worth pointing out that OpenSeadragon is the open source continutation of
an originally proprietary Microsoft product. I'd say they were both developed
relatively simulataneously, neither one was developed after a mature
competitor already existed.

It does seem from this thread that OpenSeadragon was news to many people who
already knew about Leaflet, so I guess Leaflet is better known? A year ago
when I was looking for an open JS tiling image viewer, I found OpenSeadragon,
and somehow didn't even come accross leaflet!

------
giancarlostoro
I think this is amazing, I wish more services would adopt this. I hate when
I'm on Amazon or Newegg and I'm zoomed in just enough to where I can read
things, but as I drag my way around an image it has to re-render it numerous
times (even if I "go back" to a spot). I guess Amazon and Newegg are
attributing for bandwidth wasted loading an entire image that may not be
looked at? Not sure. Still love this.

------
stasm
A similar project created by the National Library of Poland:
[https://github.com/Polona/malakh](https://github.com/Polona/malakh)

Example: [http://polona.pl/item/8214762/2/](http://polona.pl/item/8214762/2/)

~~~
iangilman
Nice! Looking at the code, it seems that it's a very old version of
OpenSeadragon, back when it was just called Seadragon. It's still looking
good, so perhaps they've been adding their own extensions to it.

Thanks for pointing to it!

------
Intermernet
Love the mouse-wheel scrolling! Very nice :-)

Unfortunately, I was thinking it was going to be a crowd-sourced version of a
sea-launched space vehicle...
[https://en.wikipedia.org/wiki/Sea_Dragon_(rocket)](https://en.wikipedia.org/wiki/Sea_Dragon_\(rocket\))

Ah well, this is pretty awesome too.

------
Mieroels
Openslide has a nice demo using OpenSeadragon. The histological slides can
easily be > 100,000 pixels in width and height
[http://openslide.org/demo/](http://openslide.org/demo/)

------
PlzSnow
On my Macbook the swipe to zoom in/out works beautifully well.

------
nkuttler
Very interesting, and quite impressive. I've used iipsrv in the past
[https://github.com/ruven/iipsrv](https://github.com/ruven/iipsrv)
[http://iipimage.sourceforge.net/](http://iipimage.sourceforge.net/)

~~~
iangilman
FYI, I believe it is possible to use OpenSeadragon on the front-end and
IIPImage on the backend, since they both support IIIF.

------
alistproducer2
That is some impressive JS. Well written and organized.

------
loftux_
We have built a Java based tile generator with OpenSeaDragon Zoomable viewer
integration.

You can have a look here.

[https://loftux.com/en/blog/announcing-the-zoomable-image-
vie...](https://loftux.com/en/blog/announcing-the-zoomable-image-viewer-for-
alfresco#sthash.XswkBIy3.dpbs)

Some examples below.

Envisat Radar Image of Netherlands, European Space Agency (8346 x 8525) \-
[https://loftux.nu/share/s/zN6D_rbTT2GgAs4Ih4onHA](https://loftux.nu/share/s/zN6D_rbTT2GgAs4Ih4onHA)

Mountain View in High Resolution - Markus Spiske (2912 x 4368) \-
[https://loftux.nu/share/s/c7V-c8zXRti_crqaTz_OJw](https://loftux.nu/share/s/c7V-c8zXRti_crqaTz_OJw)

KTM Motorcycle - Markus Spiske (2912 x 4368) \-
[https://loftux.nu/share/s/UXgpPaEZSYOe22qTtukWJQ](https://loftux.nu/share/s/UXgpPaEZSYOe22qTtukWJQ)

Xmas Tools - Markus Spiske (4368 x 2912) \-
[https://loftux.nu/share/s/YSO4OsW4Sbux8OASRLPf7A](https://loftux.nu/share/s/YSO4OsW4Sbux8OASRLPf7A)

Horse Eye - Markus Spiske (4368 x 2912) \-
[https://loftux.nu/share/s/qCBsbvgkT3eIcsmSepHwYA](https://loftux.nu/share/s/qCBsbvgkT3eIcsmSepHwYA)

Hurricane Isabel - National Aeronautics and Space Administration (NASA) (11600
x 8800) \-
[https://loftux.nu/share/s/ntxyIcfhS1OoZimvlJn69Q](https://loftux.nu/share/s/ntxyIcfhS1OoZimvlJn69Q)

360 Degree Panorama of the Southern Sky - European Southern Observatory
(ESO)/H.H. Meyer (15204 x 4620) \-
[https://loftux.nu/share/s/UE8ldF3rRN2TjthaTVhL_w](https://loftux.nu/share/s/UE8ldF3rRN2TjthaTVhL_w)

When resolution becomes Counter Productive - Lies Through a Lens (3337 x 5000)
\-
[https://loftux.nu/share/s/KAVzW5HcS_ixdsmmk1tvnw](https://loftux.nu/share/s/KAVzW5HcS_ixdsmmk1tvnw)

PIA16568 - First Drilling Target of Curiosity Rover - Jet Propulsion
Laboratory/NASA (12858 x 6312) \-
[https://loftux.nu/share/s/PzaaDz10T9-wRru7rcxSeA](https://loftux.nu/share/s/PzaaDz10T9-wRru7rcxSeA)

USS Vulcan (Engineering Drawing) (17600 × 13600) \-
[https://loftux.nu/share/s/Kx9pmszJT6GyX7sdn-4hDw](https://loftux.nu/share/s/Kx9pmszJT6GyX7sdn-4hDw)

