Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Presented at the SIMSSA workshop held at McGill University.

0826c9e6449c9a08230ac6d40a3cde4d?s=128

Wendy Liu

July 28, 2012
Tweet

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.