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

Slide 1

Slide 1 text

A web-based document viewer for high-resolution images A web-based document viewer for high-resolution images Wendy Liu Wendy Liu 1 / 41

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

What it is What it is 3 / 41

Slide 4

Slide 4 text

Manuscript: Salzinnes Antiphonal Manuscript: Salzinnes Antiphonal 4 / 41

Slide 5

Slide 5 text

High resolution High resolution 5 / 41

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

8 / 41 Free tool Free tool

Slide 9

Slide 9 text

9 / 41

Slide 10

Slide 10 text

10 / 41 Distribution? Distribution?

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

13 / 41 Enter Diva.js Enter Diva.js

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

16 / 41 Zooming in and out Zooming in and out

Slide 17

Slide 17 text

17 / 41 Grid view Grid view

Slide 18

Slide 18 text

18 / 41 Image manipulation Image manipulation

Slide 19

Slide 19 text

19 / 41 Extremely fast Extremely fast

Slide 20

Slide 20 text

20 / 41 Selective downloading Selective downloading

Slide 21

Slide 21 text

21 / 41 How it works How it works

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

24 / 41 Image server: IIPImage Image server: IIPImage

Slide 25

Slide 25 text

25 / 41 Setup frontend scripts Setup frontend scripts

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

28 / 41 Download plugin Download plugin

Slide 29

Slide 29 text

29 / 41 Image manipulation plugin Image manipulation plugin

Slide 30

Slide 30 text

30 / 41 Canvas: HTML5 feature Canvas: HTML5 feature

Slide 31

Slide 31 text

31 / 41 Canvas: HTML5 feature Canvas: HTML5 feature

Slide 32

Slide 32 text

32 / 41

Slide 33

Slide 33 text

33 / 41

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

37 / 41 MIT license MIT license

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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)

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

41 / 41 Thanks. Thanks.