diva.js: A web-based document viewer for high-resolution images

Presented at the SIMSSA workshop held at McGill University.

Transcript

1. A web-based document viewer for high-resolution images A web-based document viewer for high-resolution images Wendy Liu Wendy Liu 1 / 41
2. Outline Outline 2 / 41 What it is What it is How it works How it works Image manipulation features Image manipulation features
3. What it is What it is 3 / 41
4. Manuscript: Salzinnes Antiphonal Manuscript: Salzinnes Antiphonal 4 / 41
5. High resolution High resolution 5 / 41
6. Preserve document structure (scrolling) Preserve document structure (scrolling) 6 / 41
7. 7 / 41 Fast and easy to use Fast and easy to use
8. 8 / 41 Free tool Free tool
9. 9 / 41
10. 10 / 41 Distribution? Distribution?
11. 10 / 41 TIFF, ~30 megapixels (~180 MB) per photo TIFF, ~30 megapixels (~180 MB) per photo TIFF, ~30 megapixels (~180 MB) per photo TIFF, ~30 megapixels (~180 MB) per photo
12. 12 / 41 180 MB × 479 images ≈ 86 GB 180 MB × 479 images ≈ 86 GB
13. 13 / 41 Enter Diva.js Enter Diva.js
14. 14 / 41 From manuscript ... From manuscript ...
15. 15 / 41 To browser-based document viewer. To browser-based document viewer.
16. 16 / 41 Zooming in and out Zooming in and out
17. 17 / 41 Grid view Grid view
18. 18 / 41 Image manipulation Image manipulation
19. 19 / 41 Extremely fast Extremely fast
20. 20 / 41 Selective downloading Selective downloading
21. 21 / 41 How it works How it works
22. 22 / 41 Tiled images (JPEG2000 or pyramidal TIFF) Tiled images (JPEG2000 or pyramidal TIFF)
23. 23 / 41 Multiple resolutions in one file Multiple resolutions in one file
24. 24 / 41 Image server: IIPImage Image server: IIPImage
25. 25 / 41 Setup frontend scripts Setup frontend scripts
26. 26 / 41 Demo Demo http://coltrane.music.mcgill.ca/salzinnes/experiments/diva-cci-tif/
27. 27 / 41 New feature: plugin system New feature: plugin system
28. 28 / 41 Download plugin Download plugin
29. 29 / 41 Image manipulation plugin Image manipulation plugin
30. 30 / 41 Canvas: HTML5 feature Canvas: HTML5 feature
31. 31 / 41 Canvas: HTML5 feature Canvas: HTML5 feature
32. 32 / 41
33. 33 / 41
34. 34 / 41 Working with large images: slow. Working with large images: slow.
35. 35 / 41 More pixels → more operations More pixels → more operations
36. 36 / 41 Solution: thumbnail preview. Solution: thumbnail preview.
37. 37 / 41 MIT license MIT license
38. 38 / 41 Download from ddmal.music.mcgill.ca/diva Download from ddmal.music.mcgill.ca/diva
39. 39 / 41 Development coordinated by Development coordinated by Ichiro Fujinaga (DDMAL) Andrew Hankinson (DDMAL) Laurent Pugin (Swiss RISM) Ichiro Fujinaga (DDMAL) Andrew Hankinson (DDMAL) Laurent Pugin (Swiss RISM)
40. 40 / 41 Sponsored by Sponsored by Swiss National Science Foundation Swiss National Science Foundation
41. 41 / 41 Thanks. Thanks.