0540 link for opening multiple canvases

_includes/links.md

@@ -78,6 +78,7 @@
 
 [0434]: {{ site.cookbook_url | absolute_url }}/recipe/0434-choice-av/ "Multiple Choice of Audio Formats in a Single View (Canvas)"
 [0489]: {{ site.cookbook_url | absolute_url }}/recipe/0489-multimedia-canvas/ "Rendering Multiple Media Types on a Time-Based Canvas"
+[0540]: {{ site.cookbook_url | absolute_url }}/recipe/0540-link-for-opening-multiple-canvases/ "Sharing a link for opening two or more Canvases"
 
 [cookbook-process]: {{site.cookbook_url | absolute_url }}/recipe
 

index.md

@@ -137,11 +137,13 @@ _(leading on to segmentation examples later)_
 * [Linking to Structured Metadata][0053] (8)
 
 
-## Sharing IIIF content 
+## Sharing IIIF content
 Recipes using [Content State API](https://iiif.io/api/content-state/1.0/)
 
 * [Loading a manifest with a viewer using a link][0466]
 * [Open a specific region of a canvas in a viewer][0485]
+* [Sharing a link for opening two or more Canvases][0540]
+
 
 
 ## Technical

recipe/0540-link-for-opening-multiple-canvases/annotation.json

@@ -0,0 +1,28 @@
+{
+   "@context": "http://iiif.io/api/presentation/3/context.json",
+   "id": "{{ id.url }}",
+   "type": "Annotation",
+   "motivation": ["contentState"],
+   "target": [
+       {
+           "id": "https://iiif.io/api/cookbook/recipe/0318-navPlace-navDate/canvas/2",
+           "type": "Canvas",
+           "partOf": [
+               {
+                   "id": "https://iiif.io/api/cookbook/recipe/0318-navPlace-navDate/manifest-2.json",
+                   "type": "Manifest"
+               }
+           ]
+       },
+       {
+           "id": "{{ id.path }}/canvas/p2",
+           "type": "Canvas",
+           "partOf": [
+               {
+                   "id": "{{ id.path }}/manifest",
+                   "type": "Manifest"
+               }
+           ]
+       }
+   ]
+ }

recipe/0540-link-for-opening-multiple-canvases/index.md

@@ -0,0 +1,49 @@
+---
+title: Sharing a link for opening two or more Canvases
+id: 540
+layout: recipe
+tags: [annotation, content-state]
+summary: "Allows users to use Content State API to open two canvases at the same time."
+viewers:
+topic:
+ - content-state
+---
+
+## Use Case
+
+I want to compare pages from two different manuscripts and share a link to open both on the same view. I want to share a link to a colleague showing two similar paintings in two different collections. I want to save my current workspace (open Canvases in the current viewer) for later use. I want to open my current workspace with another viewer.
+
+## Implementation Notes
+
+Some viewers already implement custom formats for exporting the current workspace for sharing or later use. Content State API could be used for the same purpose, adding the advantage of direct loading of the workspace using a crafted link with the `iiif-content` query parameter. The [multiple targets for a comparison view section](https://iiif.io/api/content-state/1.0/#53-multiple-targets-for-a-comparison-view) describes a method for targetting two Canvases at the same time; each Canvas could be from a different Manifest.
+
+For this purpose, we create an Annotation with `motivation` set to `["contentState"]`.
+The value of the the `target` attribute of the Annotation is a list containing the `id` of the Canvases and a `partOf` attribute with the `id` of the Manifests they belong to.
+
+We can hence encode the Annotation as explained in the [Content State encoding guidelines](https://iiif.io/api/content-state/1.0/#6-content-state-encoding), and then pass the encoded string to the viewer as the value of the `iiif-content` query parameter.
+
+## Restrictions
+
+None known.
+
+## Example
+In this example we want to compare two painting of the Colosseum from two different Manifests.
+One of the two Manifest is available at the following [link](manifest.json). We can notice that the Colosseum painting is in the second Canvas. The other Manifest is from another recipe, and can be [accessed here](https://iiif.io/api/cookbook/recipe/0318-navPlace-navDate/manifest-2.json).
+
+The Annotation will target the `id` of the two Canvases we want to compare and contain a reference to the two Manifests as shown in the example:
+
+{% include content-state-viewers.html iiif-content="annotation.json" viewers="" %}
+
+{% include jsonviewer.html src="annotation.json" %}
+
+The expected result should show the two Canvases of the two Manifest depicting the Colosseum.
+
+## Related Recipes
+
+* [Simplest Manifest - Image][0001] shows the basic structure of a IIIF Manifest using Presentation API 3.0.
+* [A simple book][0009] shows the manifest structure.
+* [Link for loading a manifest][0466] another example of Content State API.
+
+{% include acronyms.md %}
+{% include links.md %}
+

recipe/0540-link-for-opening-multiple-canvases/manifest.json

@@ -0,0 +1,76 @@
+{
+    "@context": "http://iiif.io/api/presentation/3/context.json",
+    "id": "{{ id.url }}/manifest.json",
+    "type": "Manifest",
+    "label": {
+      "en": [
+        "Two monuments in Rome"
+      ]
+    },
+    "items": [
+      {
+        "id": "{{ id.path }}/canvas/p1",
+        "type": "Canvas",
+        "label": {
+          "en": [
+            "The Temple of Vesta Rome"
+          ]
+        },
+        "height": 1464,
+        "width": 2048,
+        "items": [
+          {
+            "id": "{{ id.path }}/page/p1/1",
+            "type": "AnnotationPage",
+            "items": [
+              {
+                "id": "{{ id.path }}/annotation/p0001-image",
+                "type": "Annotation",
+                "motivation": "painting",
+                "body": {
+                  "id": "https://fixtures.iiif.io/images/Yale/ycba/The_Temple_of_Vesta_Rome.jpg",
+                  "type": "Image",
+                  "format": "image/jpeg",
+                  "height": 1464,
+                  "width": 2048
+                },
+                "target": "{{ id.path }}/canvas/p1"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "{{ id.path }}/canvas/p2",
+        "type": "Canvas",
+        "label": {
+          "en": [
+            "The Colosseum"
+          ]
+        },
+        "height": 1302,
+        "width": 2048,
+        "items": [
+          {
+            "id": "{{ id.path }}/page/p2/1",
+            "type": "AnnotationPage",
+            "items": [
+              {
+                "id": "{{ id.path }}/annotation/p0002-image",
+                "type": "Annotation",
+                "motivation": "painting",
+                "body": {
+                  "id": "https://fixtures.iiif.io/images/Yale/ycba/The_Colosseum_Rome2.jpg",
+                  "type": "Image",
+                  "format": "image/jpeg",
+                  "height": 1302,
+                  "width": 2048
+                },
+                "target": "{{ id.path }}/canvas/p2"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }