Add the OpenSeadragon viewer for deep zoom images

2026-09-24 16:30:27 +08:00 · 2020-12-02 09:57:56 -05:00
parent 4a90627bae
commit 680357ef5f
3 changed files with 83 additions and 0 deletions
@@ -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,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 + "scripts/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>
+