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

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.