This extension makes use of IIIF and the panel-truck (v0.1) viewer, created by the Leventhal Map and Education Center at the Boston Public Library. The panel-truck viewer is a web UI tool which allows users to present interactive storylines using images and maps. It is an example of a special page that can be added to the pages.json file.
For this extension to work the class variable needs to be set to paneltruck and the file variable needs to give the name of the additional json file including the panel-truck script details as shown below.
The details included in the content and content right variable will be presented as previously described, however the data included in the named file, in this case test-screenplay.json will be processed and displayed in the panel-truck viewer.
As with the other JSON files the panel-truck data needs to be organised in a series of JSON objects, an example of which is provided below, for a live presentation of the example of code please see the test-screenplay.json file.
The required and optional json variables have all been described as part of the standard panel-truck documentation, but for any more information please get in touch with the original project.
{
"parent": "extensions",
"class": "paneltruck",
"file": "https://gist.githubusercontent.com/garrettdashnelson/73b32f40cccbe30239838dd3bd63988a/raw/7d4f7efc52ee0bb0929110a4438c37d8c98f0aa5/test-screenplay.json",
"title": "Simple Site - The <b>Panel-Truck (IIIF) Extension</b>",
"content": "<p>This extension makes use of [IIIF|https://iiif.io] and the [panel-truck (v0.1)|https://geoservices.leventhalmap.org/cartinal/documentation/panel-truck.html] viewer, created by the <a href=\"https://leventhalmap.org\">Leventhal Map and Education Center</a> at the Boston Public Library. The panel-truck viewer is a web UI tool which allows users to present interactive storylines using images and maps. It is an example of a special page that can be added to the [pages.json|pages.json.html] file.</p>\r\n\r\n<h3>The Example</h3>\r\n[##]\r\n<br/>\r\n<h3>Summary</h3>\r\n<div class=\"alert alert-info\" role=\"alert\"><h4 class=\"alert-heading\">Extension Variables</h4><p>For this extension to work the <b>class</b> variable needs to be set to <b>paneltruck</b> and the <b>file</b> variable needs to give the name of the additional json file including the panel-truck script details as shown below.</p></div>\r\n\r\n<p>The details included in the <b>content</b> and <b>content right</b> variable will be presented as [previously described|pages.json.html], however the data included in the named file, in this case <b>test-screenplay.json</b> will be processed and displayed in the panel-truck viewer.</p>\r\n\r\n<h3>Panel Truck JSON file</h3>\r\n\r\n<p>As with the other JSON files the panel-truck data needs to be organised in a series of JSON objects, an example of which is provided below, for a live presentation of the example of code please see the [test-screenplay.json|https://gist.githubusercontent.com/garrettdashnelson/73b32f40cccbe30239838dd3bd63988a/raw/7d4f7efc52ee0bb0929110a4438c37d8c98f0aa5/test-screenplay.json] file.</p>\r\n\r\n<p>The required and optional json variables have all been described as part of the standard [panel-truck documentation|https://geoservices.leventhalmap.org/cartinal/documentation/panel-truck.html#creating-a-screenplay], but for any more information please [get in touch|https://www.leventhalmap.org/about/people/garrett-nelson/] with the original project.</p>",
"content right": "",
"copy": false,
"displayName": "Panel Truck Viewer",
"aliases": "Panel Truck viewer",
"displaycode": true
}{
"metadata": {
"author": "Garrett Dash Nelson",
"title": "Narrating maps and images with panel-truck",
"subtitle": "An interactive tool from the Leventhal Map & Education Center",
"publishedDate": "2020-12-30"
},
"scenes": [
{
"sceneSource": {
"sourceType": "iiif",
"iiifManifest": {
"manifest": "https://www.digitalcommonwealth.org/search/commonwealth:6969z354f/manifest.json",
"sequence": 0,
"canvas": 0,
"image": 0
}
},
"extent": [
1983,
-2568,
2831,
-1837
],
"moreInfo": "https://collections.leventhalmap.org/search/commonwealth:6969z354f",
"caption": {
"title": "A caption may have a title",
"text": "And descriptive text telling the reader what we're looking at. This image is loaded from a IIIF Manifest, by passing the Manifest URL together with a sequence, canvas, and image indices."
}
},
{
"sceneSource": {
"sourceType": "iiif",
"iiifManifest": {
"manifest": "https://www.digitalcommonwealth.org/search/commonwealth:6969z354f/manifest.json",
"sequence": 0,
"canvas": 0,
"image": 0
}
},
"extent": [
2395,
-3374,
4168,
-2155
],
"moreInfo": "https://collections.leventhalmap.org/search/commonwealth:6969z354f",
"caption": {
"title": "Taking a tour",
"text": "We can tour around the image by changing the extent that we want featured in the view."
}
},
{
"sceneSource": {
"sourceType": "IIIF",
"iiifManifest": {
"manifest": "https://www.digitalcommonwealth.org/search/commonwealth:6969z354f/manifest.json",
"sequence": 0,
"canvas": 0,
"image": 0
}
},
"moreInfo": "https://collections.leventhalmap.org/search/commonwealth:6969z354f",
"caption": {
"text": "A caption doesn't need a title; only the text is required. **Markdown** _is also_ supported, and we can [insert links](https://leventhalmap.org)"
}
},
{
"sceneSource": {
"sourceType": "IIIF",
"iiifManifest": {
"manifest": "https://www.digitalcommonwealth.org/search/commonwealth:6969z354f/manifest.json",
"sequence": 0,
"canvas": 1,
"image": 0
}
},
"extent": [
5434,
-4641,
7566,
-3015
],
"moreInfo": "https://collections.leventhalmap.org/search/commonwealth:6969z354f",
"caption": {
"title": "Jumping to a new image in the same Manifest",
"text": "Now we've jumped over to another image from the same Manifest."
}
},
{
"sceneSource": {
"sourceType": "IIIF",
"iiifManifest": {
"manifest": "https://www.digitalcommonwealth.org/search/commonwealth:6969z354f/manifest.json",
"sequence": 0,
"canvas": 1,
"image": 0
}
},
"extent": [
50,
-1300,
1200,
-800
],
"moreInfo": "https://collections.leventhalmap.org/search/commonwealth:6969z354f",
"caption": {
"text": "And now we're panning around that image. You can pan around as much as you like, at any zoom level."
}
},
{
"sceneSource": {
"sourceType": "IIIF",
"iiifImage": {
"image": "https://digital.library.unt.edu/iiif/ark:/67531/metadc891/m1/1/info.json"
}
},
"moreInfo": "https://digital.library.unt.edu/ark:/67531/metadc891/m1/1/",
"caption": {
"title": "IIIF Single Image",
"text": "If we don't want to load from a Manifest, we can pass an Image endpoint directly, instead"
}
},
{
"sceneSource": {
"sourceType": "image",
"imageSource": "https://img1.grunge.com/img/gallery/the-worst-things-captain-picard-has-ever-done/intro-1570819077.jpg"
},
"moreInfo": "https://patrickstewartsong.ytmnd.com",
"caption": {
"title": "But not everybody uses IIIF!",
"text": "That's true ... which is why we can also pass in a static image"
}
},
{
"sceneSource": {
"sourceType": "image",
"imageSource": "https://img1.grunge.com/img/gallery/the-worst-things-captain-picard-has-ever-done/intro-1570819077.jpg"
},
"moreInfo": "https://patrickstewartsong.ytmnd.com",
"extent": [
300,
200,
700,
450
],
"caption": {
"text": "Image extents are in positive pixel coordinates from the lower left corner"
}
},
{
"sceneSource": {
"sourceType": "geoMap"
},
"extent": [
-7913969.8286,
5225321.2452,
-7908050.7362,
5231737.1783
],
"caption": {
"text": "We can also use real world maps; this one is from OSM"
}
},
{
"sceneSource": {
"sourceType": "geoMap"
},
"extent": [
-7911817.6485,
5229372.4077,
-7910337.8754,
5230976.391
],
"caption": {
"text": "And now we're zooming the map to a new extent"
}
},
{
"sceneSource": {
"sourceType": "geoMap",
"tileJSON": "https://s3.us-east-2.wasabisys.com/urbanatlases/39999059012052/tileset.json"
},
"extent": [
-7910381.833063327,
5214743.9101842595,
-7909811.426519942,
5215200.235418969
],
"caption": {
"text": "If we have a custom web map, we can pass it in using either a TileJSON ..."
}
},
{
"sceneSource": {
"sourceType": "geoMap",
"tileXYZ": "https://a.tile.opentopomap.org/{z}/{x}/{y}.png"
},
"extent": [
-7910896.224,
5214033.0488,
-7910156.3375,
5214835.0404
],
"caption": {
"text": "... or as a standard XYZ schema. Map scenes use EPSG:3857 (Web Mercator) coordinates for their extents."
}
},
{
"sceneSource": {
"sourceType": "geoMap",
"tileXYZ": "https://a.tile.opentopomap.org/{z}/{x}/{y}.png"
},
"caption": {
"text": "If you don't provide an extent for a geographic map, it will zoom to the entire world."
}
}
]
}