# HG changeset patch # User Sebastien Jodogne # Date 1762279601 -3600 # Node ID 1df8095649df05c6fc5934d13c841e4e49874b69 # Parent 2beac4eb0722dd0f37121ab4856a8bc1a38f44f9 added rotation button in the viewer diff -r 2beac4eb0722 -r 1df8095649df NEWS --- a/NEWS Tue Nov 04 18:25:39 2025 +0100 +++ b/NEWS Tue Nov 04 19:06:41 2025 +0100 @@ -1,6 +1,7 @@ Pending changes in the mainline =============================== +* Added rotation button in the viewer * Upgraded to OpenLayers 10.6.1 diff -r 2beac4eb0722 -r 1df8095649df Resources/CMake/JavaScriptLibraries.cmake --- a/Resources/CMake/JavaScriptLibraries.cmake Tue Nov 04 18:25:39 2025 +0100 +++ b/Resources/CMake/JavaScriptLibraries.cmake Tue Nov 04 19:06:41 2025 +0100 @@ -26,19 +26,33 @@ "${BASE_URL}/WSI/openlayers-10.6.1-package.tar.gz" "openlayers-10.6.1-package") +DownloadPackage( + "102a4386a022f26a3b604e3852fffba8" + "${BASE_URL}/bootstrap-5.3.3.zip" + "${CMAKE_CURRENT_BINARY_DIR}/bootstrap-5.3.3") + +# curl -L https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js | gzip > /tmp/popper-2.11.8.min.js.gz + +DownloadCompressedFile( + "309f660accb8025e06ca99feae3c1d7c" + "${BASE_URL}/WSI/popper-2.11.8.min.js.gz" + "${CMAKE_CURRENT_BINARY_DIR}/popper.min.js") + set(JAVASCRIPT_LIBS_DIR ${CMAKE_CURRENT_BINARY_DIR}/javascript-libs) file(MAKE_DIRECTORY ${JAVASCRIPT_LIBS_DIR}) file(COPY + ${CMAKE_CURRENT_BINARY_DIR}/bootstrap-5.3.3/dist/js/bootstrap.min.js ${CMAKE_CURRENT_BINARY_DIR}/openlayers-10.6.1-package/dist/ol.js - ${CMAKE_CURRENT_BINARY_DIR}/openlayers-10.6.1-package/dist/ol.js.map + ${CMAKE_CURRENT_BINARY_DIR}/popper.min.js DESTINATION ${JAVASCRIPT_LIBS_DIR}/js ) file(COPY + ${CMAKE_CURRENT_BINARY_DIR}/bootstrap-5.3.3/dist/css/bootstrap.min.css ${CMAKE_CURRENT_BINARY_DIR}/openlayers-10.6.1-package/ol.css DESTINATION ${JAVASCRIPT_LIBS_DIR}/css diff -r 2beac4eb0722 -r 1df8095649df ViewerPlugin/viewer.html --- a/ViewerPlugin/viewer.html Tue Nov 04 18:25:39 2025 +0100 +++ b/ViewerPlugin/viewer.html Tue Nov 04 19:06:41 2025 +0100 @@ -6,30 +6,57 @@ Orthanc for Whole-Slide Imaging + -
+
+
+ +
+
+
+
+
+ + + +
+
+
+ +
+
+
+
+ + diff -r 2beac4eb0722 -r 1df8095649df ViewerPlugin/viewer.js --- a/ViewerPlugin/viewer.js Tue Nov 04 18:25:39 2025 +0100 +++ b/ViewerPlugin/viewer.js Tue Nov 04 19:06:41 2025 +0100 @@ -77,6 +77,19 @@ var extent = [0, -height, width, 0]; + var rotateControl = new ol.control.Rotate({ + autoHide: false, // Show the button even if rotation is 0 + resetNorth: function() { // Disable the default action + } + }); + + new bootstrap.Popover(rotateControl.element, { + placement: 'right', + container: 'body', + html: true, + content: $('#popover-content') + }); + // Disable the rotation of the map, and inertia while panning // http://stackoverflow.com/a/25682186 var interactions = ol.interaction.defaults.defaults({ @@ -93,6 +106,7 @@ var controls = ol.control.defaults.defaults({ attribution: false }).extend([ + rotateControl, new ol.control.ScaleLine({ minWidth: 100 }) @@ -131,6 +145,31 @@ }); map.getView().fit(extent, map.getSize()); + + + $('#rotation-slider').on('input change', function() { + map.getView().setRotation(this.value / 180 * Math.PI); + }); + + $('#rotation-reset').click(function() { + $('#rotation-slider').val(0).change(); + }); + + $('#rotation-minus90').click(function() { + var angle = parseInt($('#rotation-slider').val()) - 90; + if (angle < -180) { + angle += 360; + } + $('#rotation-slider').val(angle).change(); + }); + + $('#rotation-plus90').click(function() { + var angle = parseInt($('#rotation-slider').val()) + 90; + if (angle > 180) { + angle -= 360; + } + $('#rotation-slider').val(angle).change(); + }); }