Merge pull request #10756 from gregvonkuster/osdragon

Add the OpenSeadragon viewer for deep zoom images
2026-09-21 13:50:20 +08:00 · 2020-12-02 11:31:36 -05:00
parent 0669b700c9 f744bfa3ab
commit 18f519c029
5 changed files with 96 additions and 0 deletions
@@ -20,6 +20,7 @@ const PLUGIN_BUILD_IDS = [
    "mvpapp",
    "ngl",
    "openlayers",
+    "openseadragon",
    "pv",
 ];

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE visualization SYSTEM "../../visualization.dtd">
+<visualization name="OpenSeadragon">
+    <description>Viewer for high-resolution zoomable images.</description>
+    <data_sources>
+        <data_source>
+            <model_class>HistoryDatasetAssociation</model_class>
+            <test type="isinstance" test_attr="datatype" result_type="datatype">images.Jpg</test>
+            <test type="isinstance" test_attr="datatype" result_type="datatype">images.Png</test>
+            <test type="isinstance" test_attr="datatype" result_type="datatype">xml.Dzi</test>
+            <to_param param_attr="id">dataset_id</to_param>
+        </data_source>
+    </data_sources>
+    <params>
+        <param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
+    </params>
+    <entry_point entry_point_type="mako">openseadragon.mako</entry_point>
+</visualization>
+
@@ -0,0 +1,12 @@
+{
+    "name": "openseadragon",
+    "version": "2.4.2",
+    "license": "New BSD",
+    "dependencies": {
+        "cpy-cli": "^3.1.1",
+        "openseadragon": "^2.4.2"
+    },
+    "scripts": {
+        "build": "cpy --cwd='node_modules/openseadragon/build/openseadragon' --parents './' '../../../../static/dist'"
+    }
+}
@@ -0,0 +1,64 @@
+<%
+    default_title = "OpenSeadragon Viewer"
+
+    # Use root for resource loading.
+    root = h.url_for("/static/")
+    app_root = root + "plugins/visualizations/openseadragon/static/"
+%>
+
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <!-- OpenSeadragon Viewer is a web-based viewer for high-resolution zoomable images. -->
+        <title>${hda.name | h} | ${visualization_name}</title>
+
+        ## external scripts
+        ${h.javascript_link(app_root + "dist/openseadragon.min.js")}
+    </head>
+    <body>
+        <!-- Div which will hold the Output -->
+        <div id="seadragon-viewer" style="width: 800px; height: 600px;"></div>
+        <script type="text/javascript">
+
+            // Galaxy hda stuff.
+            const hda_ext = "${hda.ext}";
+            const hda_id = "${trans.security.encode_id(hda.id)}";
+            // OpenSeadragon stuff.
+            const dzi_image_url = "${h.url_for(controller='/datasets', action='index')}/" + hda_id + "/display/";
+            const viewer_id = "seadragon-viewer";
+            const prefixUrl = "//openseadragon.github.io/openseadragon/images/";
+            const simple_image_url = "${h.url_for(controller='/datasets', action='index')}/" + hda_id + "/display";
+            const xmlns = "http://schemas.microsoft.com/deepzoom/2008";
+
+            if (hda_ext == 'jpg' || hda_ext == 'png') {
+                var viewer = OpenSeadragon({
+                    id: viewer_id,
+                    prefixUrl: prefixUrl,
+                    tileSources: {
+                        type: "image",
+                        url:  simple_image_url
+                    }
+                });
+            } else if (hda_ext == 'dzi') {
+                var viewer = OpenSeadragon({
+                    id: viewer_id,
+                    prefixUrl: prefixUrl,
+                    tileSources:   {
+                        Image: {
+                            xmlns:    xmlns,
+                            Url:      dzi_image_url,
+                            Format:   "${hda.metadata.format}",
+                            Overlap:  "${hda.metadata.overlap}",
+                            TileSize: "${hda.metadata.tile_size}",
+                            Size: {
+                                Height: "${hda.metadata.height}",
+                                Width:  "${hda.metadata.width}"
+                            }
+                        }
+                    }
+                });
+            }
+        </script>
+    </body>
+</html>
+