Hydra
Tiled Image Viewer inspired by OpenSeadragon.
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:
- [X] Efficient rendering of tiled image pyramids
- [X] No broken images (partial layer tiles rendered over incomplete layer)
- [X] Support for pyramid image Tile Size & Overlap
- [X] Panning / Zooming with mouse or touch
- [X] Smooth transition between layers (vary opacity during zoom)
- [X] Smooth fade-in of newly loaded tiles (animate opacity when loaded)
- [X] Throttling of concurrent tile requests
- [X] Foviated rendering (prioritize loading of image tiles from center)
- [X] Cancelling of queued tiles if the scene changes
- [X] 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)