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
   

   View Slide

2. Outline
   Outline
   2 / 41
   What it is
   What it is
   How it works
   How it works
   Image manipulation features
   Image manipulation features
   

   View Slide

3. What it is
   What it is
   3 / 41
   

   View Slide

4. Manuscript: Salzinnes Antiphonal
   Manuscript: Salzinnes Antiphonal
   4 / 41
   

   View Slide

5. High resolution
   High resolution
   5 / 41
   

   View Slide

6. Preserve document structure (scrolling)
   Preserve document structure (scrolling)
   6 / 41
   

   View Slide

7. 7 / 41
   Fast and easy to use
   Fast and easy to use
   

   View Slide

8. 8 / 41
   Free tool
   Free tool
   

   View Slide

9. 9 / 41
   

   View Slide

10. 10 / 41
    Distribution?
    Distribution?
    

    View Slide

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
    

    View Slide

12. 12 / 41
    180 MB × 479 images ≈ 86 GB
    180 MB × 479 images ≈ 86 GB
    

    View Slide

13. 13 / 41
    Enter Diva.js
    Enter Diva.js
    

    View Slide

14. 14 / 41
    From manuscript ...
    From manuscript ...
    

    View Slide

15. 15 / 41
    To browser-based document viewer.
    To browser-based document viewer.
    

    View Slide

16. 16 / 41
    Zooming in and out
    Zooming in and out
    

    View Slide

17. 17 / 41
    Grid view
    Grid view
    

    View Slide

18. 18 / 41
    Image manipulation
    Image manipulation
    

    View Slide

19. 19 / 41
    Extremely fast
    Extremely fast
    

    View Slide

20. 20 / 41
    Selective downloading
    Selective downloading
    

    View Slide

21. 21 / 41
    How it works
    How it works
    

    View Slide

22. 22 / 41
    Tiled images (JPEG2000 or pyramidal TIFF)
    Tiled images (JPEG2000 or pyramidal TIFF)
    

    View Slide

23. 23 / 41
    Multiple resolutions in one file
    Multiple resolutions in one file
    

    View Slide

24. 24 / 41
    Image server: IIPImage
    Image server: IIPImage
    

    View Slide

25. 25 / 41
    Setup frontend scripts
    Setup frontend scripts
    

    View Slide

26. 26 / 41
    Demo
    Demo
    http://coltrane.music.mcgill.ca/salzinnes/experiments/diva-cci-tif/
    

    View Slide

27. 27 / 41
    New feature: plugin system
    New feature: plugin system
    

    View Slide

28. 28 / 41
    Download plugin
    Download plugin
    

    View Slide

29. 29 / 41
    Image manipulation plugin
    Image manipulation plugin
    

    View Slide

30. 30 / 41
    Canvas: HTML5 feature
    Canvas: HTML5 feature
    

    View Slide

31. 31 / 41
    Canvas: HTML5 feature
    Canvas: HTML5 feature
    

    View Slide

32. 32 / 41
    

    View Slide

33. 33 / 41
    

    View Slide

34. 34 / 41
    Working with large images: slow.
    Working with large images: slow.
    

    View Slide

35. 35 / 41
    More pixels → more operations
    More pixels → more operations
    

    View Slide

36. 36 / 41
    Solution: thumbnail preview.
    Solution: thumbnail preview.
    

    View Slide

37. 37 / 41
    MIT license
    MIT license
    

    View Slide

38. 38 / 41
    Download from ddmal.music.mcgill.ca/diva
    Download from ddmal.music.mcgill.ca/diva
    

    View Slide

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)
    

    View Slide

40. 40 / 41
    Sponsored by
    Sponsored by
    Swiss National Science Foundation
    Swiss National Science Foundation
    

    View Slide

41. 41 / 41
    Thanks.
    Thanks.
    

    View Slide