Merge pull request #77 from gdcc/Voyager3D

Voyager 3D support for *glb files
gdcc · Aug 12, 2024 · 23df48d · 23df48d
2 parents 32864e5 + 353e9c8
commit 23df48d
Show file tree

Hide file tree

Showing 5 changed files with 479 additions and 1 deletion.
diff --git a/6.1curlcommands.md b/6.1curlcommands.md
@@ -1753,5 +1753,39 @@ curl -X POST -H 'Content-type: application/json' http://localhost:8080/api/admin
   ]
 }'
 ```
+### Smithsonian Voyager 3D model Previewer (beta)
 
+__Note:__ Voyager supports multiple formats. Only *.glb (model/gltf-binary) is currently supported by the Previewer.
+Also note that with current styling the Voyager app fills the window when launched as a separate page, so the usual 
+preview header/footer information doesn't show (and therefore isn't even requested from Dataverse).
+
+```bash
+curl -X POST -H 'Content-type: application/json' http://localhost:8080/api/admin/externalTools -d \
+'{
+  "displayName":"View 3D model",
+  "description":"Explore the 3D model file using Voyager.",
+  "toolName":"voyagerPreviewer",
+  "scope":"file",
+  "types":["preview"],
+  "toolUrl":"https://gdcc.github.io/dataverse-previewers/previewers/betatest/VoyagerPreview.html",
+  "toolParameters": {
+      "queryParameters":[
+        {"fileid":"{fileId}"},
+        {"siteUrl":"{siteUrl}"},
+        {"datasetid":"{datasetId}"},
+        {"datasetversion":"{datasetVersion}"},
+        {"locale":"{localeCode}"}
+      ]
+    },
+  "contentType":"model/gltf-binary",
+  "allowedApiCalls": [
+    {
+      "name": "retrieveFileContents",
+      "httpMethod": "GET",
+      "urlTemplate": "/api/v1/access/datafile/{fileId}?gbrecs=true",
+      "timeOut": 3600
+    }
+  ]
+}'
+```
 
diff --git a/README.md b/README.md
@@ -72,7 +72,8 @@ The image previewer only works with image/tiff files on some browsers (as of ~Ja
 
 The original tools were developed through the [Qualitative Data Repository](https://qdr.syr.edu) but are being offered to the Dataverse community at large.
 
-[qqmyers](https://github.com/qqmyers) - developer of the original previewer framework, contributions to the Rich Html Previewer 
+[qqmyers](https://github.com/qqmyers) - developer of the original previewer framework, contributions to the Rich Html Previewer, Voyager Previewer, updating to use signed URLs
+
 The Spreadsheet Previewer was contributed by [anncie-pcss](https://github.com/anncie-pcss).
 
 [pdurbin](https://github.com/pdurbin) updated the retriever.js script to allow previewers to be embedded directly in the Dataverse file pages.

diff --git a/previewers/betatest/VoyagerPreview.html b/previewers/betatest/VoyagerPreview.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title class="voyagerPreviewText">Voyager 3D Preview</title>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="lib/jquery.i18n.js"></script>
+    <script src="lib/jquery.i18n.messagestore.js"></script>
+    <script src="lib/jquery.i18n.language.js"></script>
+    <script type="text/javascript" src="js/retriever.js"></script>
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
+    <!-- Optional theme -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
+    <link type="text/css" rel="stylesheet" href="css/preview.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title class="voyagerPreviewText">Voyager Explorer v0.12.3</title>
+    <link href="https://3d-api.si.edu/resources/fonts/fonts.css" rel="stylesheet">
+    <script type="text/javascript" src="js/voyager.js"></script>
+    <style>
+        body {
+            background: #303030;
+        }
+    </style>
+</head>
+
+<body class="container">
+    <main> <img id='logo' alt='Site Logo'>
+        <h1 class="page-title voyoagerPreviewText">Voyager 3D Preview</h1>
+        <div class='preview-container'>
+            <div class='preview-header'></div>
+            <div class='preview' width='1200'>
+                <!--voyager-explorer resourceRoot="https://3d-api.si.edu/resources/" root="http://ec2-3-238-245-253.compute-1.amazonaws.com/Voyager/" model="388?gbrecs=true&until=2024-08-10T06:47:04.074&user=dataverseAdmin&method=GET&token=df9f31ce5231890a7f88499c06886d1c4c5e6fe15a46ba300e817e806252632b9a3f848b31365e0c453ac4ecb20c23486b701c86bf49288e8e7eb490f84d210c"></voyager-explorer!-->
+                <voyager-explorer resourceRoot="https://3d-api.si.edu/resources/"></voyager-explorer>
+            </div>
+        </div>
+    </main>
+</body>
+
+</html>
diff --git a/previewers/betatest/js/voyager.js b/previewers/betatest/js/voyager.js
@@ -0,0 +1,21 @@
+$(document).ready(function() {
+    startPreview(false);
+});
+
+function translateBaseHtmlPage() {
+    var videoPreviewText = $.i18n("videoPreviewText");
+    $('.videoPreviewText').text(videoPreviewText);
+}
+
+function writeContent(fileUrl, file, title, authors) {
+    // Currently the styling of Voyager hides this info anyway.
+    //    addStandardPreviewHeader(file, title, authors);
+    const lastIndexOfChar = fileUrl.lastIndexOf("/");
+    const rootUrl = fileUrl.substring(0, lastIndexOfChar + 1);
+    const fileName = fileUrl.substring(lastIndexOfChar + 1);
+    console.log(fileUrl);
+    $("voyager-explorer").attr("root", rootUrl).attr("model", fileName);
+    //For Dataverse 6.4+, this can use the standard script:
+    //$.getScript("https://3d-api.si.edu/resources/js/v0.42.1/voyager-explorer.min.js");
+    $.getScript("lib/voyager-explorer.v0.42.1.gdcc.min.js");
+}
diff --git a/previewers/betatest/lib/voyager-explorer.v0.42.1.gdcc.min.js b/previewers/betatest/lib/voyager-explorer.v0.42.1.gdcc.min.js