@captaincodeman/hydra

Hydra

Tiled Image Viewer inspired by OpenSeadragon.

Demo

I developed this as a smaller (5.4Kb) light-weight alternative to OpenSeadragon (52.9Kb) because I didn't need all the features it provided and had some problems using it inside of Web-Components / shadowDom.

It doesn't do everything that OSD does but it's only 10% of the size and provides all the fundamental features for viewing single zoomable images at 60 FPS:

• Efficient rendering of tiled image pyramids
• No broken images (partial layer tiles rendered over incomplete layer)
• Support for pyramid image Tile Size & Overlap
• Panning / Zooming with mouse or touch
• Smooth transition between layers (vary opacity during zoom)
• Smooth fade-in of newly loaded tiles (animate opacity when loaded)
• Throttling of concurrent tile requests
• Foviated rendering (prioritize loading of image tiles from center)
• Cancelling of queued tiles if the scene changes
• Inbuilt 'busy' loading spinner

References

The following references were helpful during development:

http://www.gasi.ch/blog/inside-deep-zoom-2 https://www.quora.com/What-is-Seadragon-used-for-and-how-does-it-work-in-really-simple-laymen-terms http://benvanik.tumblr.com/post/14222411302/drawing-an-image-pyramid http://benvanik.tumblr.com/post/14176690650/clipping-and-lod-in-2d https://gist.github.com/benvanik/1475466

Planned Changes

• Configurable tile fade-in duration, loading concurrency and min / max tile zoom limits
• Support for multiple image source types
• Use zoom point as focus for foviation (tile load priority)
• Overlays and watermarks
• UI buttons for desktop users (zoom-in, zoom-out, reset)
• Rendering options: immediate vs wait for parent tile fade-in
• Better tile load error handling (throttle or delay failed requests)