Added image scrollbar to viewports (LT-20)

2015-12-14 08:06:28 -05:00
1 parent 5a2ebfab0b
commit bde599ed7b
@@ -0,0 +1,7 @@
+<template name="imageControls">
+    <div class="imageControls">
+        <div id="scrollbar">
+            <input id="imageSlider" type="range" min="1" val="1"/>
+        </div>
+    </div>
+</template>
@@ -0,0 +1,14 @@
+Template.imageControls.events({
+    'input #imageSlider': function(e) {
+        // Using the slider in an inactive viewport
+        // should cause that viewport to become active
+        var slider = $(e.currentTarget);
+        var newActiveElement = slider.parents().eq(2).siblings('.imageViewerViewport').get(0);
+        setActiveViewport(newActiveElement);
+
+        // Subtract 1 here since the slider goes from 1 to N images
+        // But the stack indexing starts at 0
+        var newImageIdIndex = parseInt(slider.val(), 10) - 1;
+        switchToImageByIndex(newImageIdIndex);
+    }
+});
@@ -0,0 +1,103 @@
+.imageControls
+  position: absolute
+  top: 0
+  right: 0
+  height: 100%
+  padding: 5px
+  
+  #scrollbar
+    margin-top: 5px
+    width: 31px
+
+    #imageSlider
+      height: 2px
+      position: absolute
+      left: 20px
+
+      -webkit-appearance: none
+
+      transform: rotate(90deg)
+      -webkit-transform: rotate(90deg)
+      -moz-transform :rotate(90deg)
+      -o-transform: rotate(90deg)
+      -ms-transform: rotate(90deg)
+
+      transform-origin: top left
+      -webkit-transform-origin: top left
+      -moz-transform-origin: top left
+      -o-transform-origin: top left
+      -ms-transform-origin: top left
+
+      // Remove focus highlights on range input
+      &:focus
+        outline: none
+        -moz-box-shadow: none
+        -webkit-box-shadow: none
+        box-shadow: none
+
+      // Remove focus border in Firefox
+      &::-moz-focus-outer
+        border: none
+        
+      // --- Style the range track --- //
+      &::-webkit-slider-runnable-track
+        height: 2px
+        border: 2px solid #bdc3c7
+        background-color: darkgrey
+        z-index: 6
+
+      &::-moz-range-track
+        height: 1px
+        border: 1px solid #bdc3c7
+        background-color: darkgrey
+        z-index: 6
+
+      &::-ms-track
+        height: 2px
+        border: 1px solid #bdc3c7
+        background-color: darkgrey
+        z-index: 6
+
+      // Hide any fill IE tries to add
+      &::-ms-fill-lower
+        background: transparent
+
+      &::-ms-fill-upper
+        background: transparent
+
+      // --- Style the range thumb --- //
+      &::-webkit-slider-thumb
+        -webkit-appearance: none !important
+        background-color: rgb(169, 169, 169)
+        border: 2px solid rgb(169, 169, 169)
+        border-radius: 2px
+        height: 15px
+        width: 25px
+        cursor: pointer
+        margin-top: -7px
+
+        &:active
+          background-color: rgb(34, 126, 163)
+
+      &::-moz-range-thumb
+        background-color: rgb(169, 169, 169)
+        border: 2px solid rgb(169, 169, 169)
+        border-radius: 2px
+        height: 11px
+        width: 20px
+        cursor: pointer
+        z-index: 7
+
+        &:active
+          background-color: rgb(34, 126, 163)
+
+      &::-ms-thumb
+        background-color: rgb(169, 169, 169)
+        border: 2px solid rgb(169, 169, 169)
+        border-radius: 2px
+        height: 11px
+        width: 20px
+        cursor: pointer
+
+        &:active
+          background-color: rgb(34, 126, 163)
@@ -74,8 +74,34 @@ function loadSeriesIntoViewport(data, templateData) {
        imageIds: imageIds
    };

+    // Show or hide the image scrollbar depending
+    // on the number of images in the stack
+    var currentOverlay = $(element).siblings('.imageViewerViewportOverlay');
+    var imageControls = currentOverlay.find('.imageControls');
+    currentOverlay.find('.imageControls').height($(element).height());
+
+    if (stack.imageIds.length === 1) {
+        imageControls.hide();
+        currentOverlay.find('.topright, .bottomright').css('right', '3px');
+    } else {
+        imageControls.show();
+        currentOverlay.find('.topright, .bottomright').css('right', '39px');
+
+        // Update the maximum value of the slider
+        var currentImageSlider = currentOverlay.find('#imageSlider');
+        currentImageSlider.attr('max', stack.imageIds.length);
+        currentImageSlider.val(1);
+
+        // Set it's width to its parent's height
+        // (because webkit is stupid and can't style vertical sliders)
+        var scrollbar = currentOverlay.find('#scrollbar');
+        scrollbar.height(scrollbar.parent().height() - 20);
+        var overlayHeight = currentImageSlider.parent().height();
+        currentImageSlider.width(overlayHeight);
+    }
+
    // Get the current image ID for the stack that will be rendered
-    var imageId = imageIds[stack.currentImageIdIndex];
+    imageId = imageIds[stack.currentImageIdIndex];

    // Save the current image ID inside the template data so it can be
    // retrieved from the template helpers
@@ -302,6 +328,28 @@ function loadSeriesIntoViewport(data, templateData) {
        // Set a random value for the Session variable in order to trigger an overlay update
        Session.set('CornerstoneNewImage' + viewportIndex, Random.id());

+        function OnStackScroll(e, eventData) {
+            // Get the element and stack data
+            var element = e.target;
+            var toolData = cornerstoneTools.getToolState(element, 'stack');
+            if (!toolData || !toolData.data || !toolData.data.length) {
+                return;
+            }
+
+            var stack = toolData.data[0];
+
+            // Update the imageSlider value
+            var currentOverlay = $(element).siblings('.imageViewerViewportOverlay');
+            var currentImageSlider = currentOverlay.find('#imageSlider');
+            currentImageSlider.val(stack.currentImageIdIndex + 1);
+        }
+
+        $(element).off('CornerstoneStackScroll', OnStackScroll);
+        if (stack.imageIds.length > 1) {
+            $(element).on('CornerstoneStackScroll', OnStackScroll);
+        }
+
+
        // Define a function to trigger an event whenever a new viewport is being used
        // This is used to update the value of the "active viewport", when the user interacts
        // with a new viewport element
@@ -21,5 +21,6 @@
            <div>{{imageDimensions}}</div>
            <div>{{seriesDescription}}</div>
        </div>
+        {{>imageControls}}
    </div>
 </template>
@@ -3,7 +3,7 @@
  color: #e4ad00
  line-height: 18px
  display: none // Shown when an image is loaded
-  
+
  .dicomTag
    pointer-events: none // Necessary for drag/drop through to cornerstone element below
    position: absolute