From c936d632e97296f214b860dcfb69e14f106c8e52 Mon Sep 17 00:00:00 2001
From: dnoneill <noneill@stanford.edu>
Date: Wed, 29 May 2024 18:29:25 -0400
Subject: [PATCH] cleanup, add openseadragon

---
 dhsi/SUMMARY.md                     |  2 +-
 dhsi/day-three/annotorious.md       | 10 ++++--
 dhsi/day-two/configuring-viewers.md |  3 ++
 dhsi/day-two/openseadragon.md       | 52 +++++++++++++++++++++++++++++
 4 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 dhsi/day-two/openseadragon.md

diff --git a/dhsi/SUMMARY.md b/dhsi/SUMMARY.md
index 08606f80..41987c4a 100644
--- a/dhsi/SUMMARY.md
+++ b/dhsi/SUMMARY.md
@@ -18,6 +18,7 @@
 ## Tuesday, Session 3: 9:00am-10:15am**
 
 1. [Reflection on using the IIIF Image API](day-two/reflections.md)
+2. [OpenSeadragon](day-two/openseadragon.md)
 2. [IIIF Presentation API Overview](day-two/presentation-api.md)
 3. [Exercise - Create a Manifest](day-two/manifest-exercise.md)
       1. [Bodleian (V2)](day-two/bodleian-editor/README.md)
@@ -55,7 +56,6 @@
    3. [Annona](day-two/annona.md)
    4. [Clover](day-two/clover.md)
    5. [Navplace viewer](day-two/navplace.md)
-   6. [OpenSeadragon](day-two/openseadragon.md)
 2. [Work Period]((day-two/configuring-viewers.md#work-period))
 
 ## Wednesday, Session 7: 9:00am-10:15am
diff --git a/dhsi/day-three/annotorious.md b/dhsi/day-three/annotorious.md
index 611ec6fe..c2ec8b66 100644
--- a/dhsi/day-three/annotorious.md
+++ b/dhsi/day-three/annotorious.md
@@ -4,10 +4,9 @@ Annotorious is a JS library you can easily build into a browser. Slightly differ
 ## Using Annotorious
 This view is making use of three plugins (toolbar, georeference and extended shapes beyond polygon and rectangle). Configuration is VERY well documented for the [out of the box Annotorious](https://annotorious.github.io/api-docs/osd-plugin/) including configuration and custom events and the [plugins](https://annotorious.github.io/plugins/). 
 
-<iframe src="annotorious-embed.html" style="width: 100%; height: 600px">
 
-```
 
+```
 <!-- CSS stylesheet -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious-openseadragon@2.7.14/dist/annotorious.min.css">
 
@@ -38,4 +37,9 @@ This view is making use of three plugins (toolbar, georeference and extended sha
     Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'), {'withMouse': true});
   }
 </script>
-```
\ No newline at end of file
+```
+<a href="annotorious-embed.html" target="_blank">Annotorious page</a>
+
+<iframe src="annotorious-embed.html" style="width: 100%; height: 600px">
+
+
diff --git a/dhsi/day-two/configuring-viewers.md b/dhsi/day-two/configuring-viewers.md
index 3535945f..61ae55ed 100644
--- a/dhsi/day-two/configuring-viewers.md
+++ b/dhsi/day-two/configuring-viewers.md
@@ -12,6 +12,9 @@ For example:
 
 There are many options here. We're going to focus on two highly customizable viewers: Mirador and Universal Viewer. First, we're going to look at how to embed a viewer in your own project (to do this, we'll continue to use or "Custom Image Viewers" projects). Then we'll walk through several of the configuration option. Then we'll turn this into a work period, where you can start embedding a viewer into your project and adjust the configuration settings as needed. We'll come around and help you customize your project any way you want.
 
+## Viewers not covered
+Tify, IIIF Curation Viewer and Diva.js all have videos and demo pages to play with at [https://iiif.io/guides/using_iiif_resources/#tools-for-viewing-manifests](https://iiif.io/guides/using_iiif_resources/#tools-for-viewing-manifests).
+
 ## Mirador
 
 ### Embedding Mirador
diff --git a/dhsi/day-two/openseadragon.md b/dhsi/day-two/openseadragon.md
new file mode 100644
index 00000000..7be8c16b
--- /dev/null
+++ b/dhsi/day-two/openseadragon.md
@@ -0,0 +1,52 @@
+# OpenSeadragon
+OpenSeadragon is a zoomable image viewer that will work with almost any kind of image including a IIIF image. It is also used in almost every IIIF viewer we are going to show you in this class.
+
+OpenSeadragon also has a [plethora of plugins](https://openseadragon.github.io/#plugins) which we will not be covering in this class. There is also a [OpenSeadragon codepen](https://codepen.io/collection/APoyjJ/) which displays various configurations and the code to create them.
+
+There are two sets of documents you will want to know in order to work with OpenSeadragon. [https://openseadragon.github.io/docs/](https://openseadragon.github.io/docs/) which has everything from simple to complicated implementation docs for OpenSeadragon and the examples listed on the [homepage](https://openseadragon.github.io/) which will provide different implementations for types of images, etc.
+
+## Implementation
+All you need for OpenSeadragon to work is a [IIIF image(s)](https://openseadragon.github.io/examples/tilesource-iiif/). The example below is built to work with both a single image and multiple. Make sure your container has a width and height otherwise it will not render properly.
+
+
+
+```
+<div id="openseadragoncontainer" style="width: 800px; height: 600px;"></div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/4.1.1/openseadragon.min.js"></script>
+<script type="text/javascript">
+    var viewer = OpenSeadragon({
+        id: "openseadragoncontainer", //this id matches the container id
+        prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/4.1.1/images",
+        sequenceMode: true,
+        tileSources: [
+          "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000001.jp2/info.json",
+          "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000002.jp2/info.json",
+          "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000003.jp2/info.json",
+          "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000004.jp2/info.json",
+          "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000005.jp2/info.json",
+          "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000006.jp2/info.json",
+          "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000007.jp2/info.json"
+        ]
+    });
+</script>
+```
+
+<div id="openseadragoncontainer" style="width: 800px; height: 600px;"></div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/4.1.1/openseadragon.min.js"></script>
+<script type="text/javascript">
+    var viewer = OpenSeadragon({
+        id: "openseadragoncontainer", //this id matches the container id
+        sequenceMode: true,
+        prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/4.1.1/images/",
+        tileSources: ["https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000001.jp2/info.json",
+        "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000002.jp2/info.json",
+        "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000003.jp2/info.json",
+        "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000004.jp2/info.json",
+        "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000005.jp2/info.json",
+        "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000006.jp2/info.json",
+        "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000007.jp2/info.json"]
+    });
+</script>
+
+## Exercise
+Place your images in OpenSeadragon. What are the limitations of this approach?
\ No newline at end of file