Mercurial > hg > orthanc-wsi

changeset 368:60100f5effee

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
upgraded to OpenLayers 10.4.0
author Sebastien Jodogne <s.jodogne@gmail.com>
date Mon, 17 Mar 2025 11:34:33 +0100
parents c2e9c4fbfb0b
children 3adb57efc32f
files NEWS ViewerPlugin/CMakeLists.txt ViewerPlugin/Plugin.cpp ViewerPlugin/viewer.html ViewerPlugin/viewer.js
diffstat 5 files changed, 50 insertions(+), 29 deletions(-) [+]
line wrap: on
line diff
--- a/NEWS	Thu Mar 13 17:31:04 2025 +0100
+++ b/NEWS	Mon Mar 17 11:34:33 2025 +0100
@@ -1,8 +1,12 @@
 Pending changes in the mainline
 ===============================
 
+* Upgraded to OpenLayers 10.4.0 (was previously 3.19.0)
 * Fix handling of "Image Type" in the viewer for compatibility with other vendors
 
+Compatibility notes about the viewer
+------------------------------------
+
 * Compatibility tested against sample DICOM images shipped by OpenSlide:
   3DHISTECH-1.zip, CMU-1-JP2K-33005.zip, JP2K-33003-1.zip, and Leica-4.zip:
   https://openslide.cs.cmu.edu/download/openslide-testdata/DICOM/
--- a/ViewerPlugin/CMakeLists.txt	Thu Mar 13 17:31:04 2025 +0100
+++ b/ViewerPlugin/CMakeLists.txt	Mon Mar 17 11:34:33 2025 +0100
@@ -145,13 +145,13 @@
 
 if (STATIC_BUILD OR NOT USE_SYSTEM_OPENLAYERS)
   DownloadPackage(
-    "77e57aad873c2d4deea8bb1446e9b87a"
-    "https://orthanc.uclouvain.be/downloads/third-party-downloads/openlayers-3.19.0-dist.zip"
-    "v3.19.0-dist")
+    "e15da1e1f803e69a8ca1e0ed11f0cf24"
+    "https://orthanc.uclouvain.be/downloads/third-party-downloads/WSI/openlayers-10.4.0-package.tar.gz"
+    "openlayers-10.4.0-package")
   
   set(OPENLAYERS_RESOURCES
-    OPENLAYERS_CSS  ${CMAKE_CURRENT_BINARY_DIR}/v3.19.0-dist/ol.css
-    OPENLAYERS_JS   ${CMAKE_CURRENT_BINARY_DIR}/v3.19.0-dist/ol.js
+    OPENLAYERS_CSS  ${CMAKE_CURRENT_BINARY_DIR}/openlayers-10.4.0-package/ol.css
+    OPENLAYERS_JS   ${CMAKE_CURRENT_BINARY_DIR}/openlayers-10.4.0-package/dist/ol.js
     )
 
 else()
--- a/ViewerPlugin/Plugin.cpp	Thu Mar 13 17:31:04 2025 +0100
+++ b/ViewerPlugin/Plugin.cpp	Mon Mar 17 11:34:33 2025 +0100
@@ -374,10 +374,12 @@
     resource = Orthanc::EmbeddedResources::VIEWER_JS;
     mime = "application/javascript";
   }
-  else if (f == "ol.js")
+  else if (f == "dist/ol.js")
   {
     resource = Orthanc::EmbeddedResources::OPENLAYERS_JS;
-    mime = "application/javascript";
+
+    // Adding "charset" is mandatory with OpenLayers 10.4.0, check out "zoomOutLabel" in the source code
+    mime = "application/javascript; charset=utf-8";
   }
   else if (f == "ol.css")
   {
@@ -516,7 +518,7 @@
     OrthancPluginRegisterOnChangeCallback(OrthancPlugins::GetGlobalContext(), OnChangeCallback);
 
     OrthancPlugins::RegisterRestCallback<ServeFile>("/wsi/app/(ol.css)", true);
-    OrthancPlugins::RegisterRestCallback<ServeFile>("/wsi/app/(ol.js)", true);
+    OrthancPlugins::RegisterRestCallback<ServeFile>("/wsi/app/(dist/ol.js)", true);
     OrthancPlugins::RegisterRestCallback<ServeFile>("/wsi/app/(viewer.html)", true);
     OrthancPlugins::RegisterRestCallback<ServeFile>("/wsi/app/(viewer.js)", true);
     OrthancPlugins::RegisterRestCallback<ServePyramid>("/wsi/pyramids/([0-9a-f-]+)", true);
--- a/ViewerPlugin/viewer.html	Thu Mar 13 17:31:04 2025 +0100
+++ b/ViewerPlugin/viewer.html	Mon Mar 17 11:34:33 2025 +0100
@@ -6,27 +6,29 @@
 
     <link rel="stylesheet" href="ol.css" type="text/css">
 
-    <!-- This is the version of jQuery that is used by Orthanc Explorer -->
-    <script src="../../app/libs/jquery.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        height: 100%;
+      }
 
-    <script src="ol.js"></script>
-
-    <style>
       #map {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border: 1px solid #ccc;
-      margin-bottom: 10px;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 100%;
       }
     </style>
 
   </head>
   <body>
-    <div id="map" class="map"></div>
+    <div id="map"></div>
 
+    <!-- This is the version of jQuery that is used by Orthanc Explorer -->
+    <script src="../../app/libs/jquery.min.js"></script>
+
+    <script src="dist/ol.js"></script>
     <script src="viewer.js"></script>
   </body>
 </html>
--- a/ViewerPlugin/viewer.js	Thu Mar 13 17:31:04 2025 +0100
+++ b/ViewerPlugin/viewer.js	Mon Mar 17 11:34:33 2025 +0100
@@ -69,20 +69,32 @@
 
   // Disable the rotation of the map, and inertia while panning
   // http://stackoverflow.com/a/25682186
-  var interactions = ol.interaction.defaults({
-    altShiftDragRotate : false,
-    pinchRotate : false,
-    dragPan: false
+  var interactions = ol.interaction.defaults.defaults({
+    //pinchRotate : false,
+    dragPan: false  // disable kinetics
+    //shiftDragZoom: false  // disable zoom box
   }).extend([
-    new ol.interaction.DragPan({kinetic: false})
+    new ol.interaction.DragPan(),
+    new ol.interaction.DragRotate({
+      //condition: ol.events.condition.shiftKeyOnly  // Rotate only when Shift key is pressed
+    })
   ]);
 
+  var controls = ol.control.defaults.defaults({
+    attribution: false
+  }).extend([
+    new ol.control.ScaleLine({
+      minWidth: 100
+    })
+  ]);
+
+
   var layer = new ol.layer.Tile({
     extent: extent,
     source: new ol.source.TileImage({
       projection: proj,
       tileUrlFunction: function(tileCoord, pixelRatio, projection) {
-        return (tilesBaseUrl + (countLevels - 1 - tileCoord[0]) + '/' + tileCoord[1] + '/' + (-tileCoord[2] - 1));
+        return (tilesBaseUrl + (countLevels - 1 - tileCoord[0]) + '/' + tileCoord[1] + '/' + tileCoord[2]);
       },
       tileGrid: new ol.tilegrid.TileGrid({
         extent: extent,
@@ -102,9 +114,10 @@
       projection: proj,
       center: [width / 2, -height / 2],
       zoom: 0,
-      minResolution: 1   // Do not interpelate over pixels
+      minResolution: 0.1   // "1" means "do not interpelate over pixels"
     }),
-    interactions: interactions
+    interactions: interactions,
+    controls: controls
   });
 
   map.getView().fit(extent, map.getSize());