Clips use DICOM frameTime by default (LT-210). Added floating clip control dialog (LT-209)

Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.html

@@ -0,0 +1,42 @@
+<template name="cineDialog">
+    <div id="cineDialog">
+        <h5>Cine Controls</h5>
+        <div id="cineButtons">
+            <a id="cineFirstButton" title="Skip to first image" class="cineButton" data-toggle="tooltip">
+                <i class="fa fa-lg fa-fast-backward"></i>
+            </a>
+            <a id="cineBackButton" title="Previous image" class="cineButton" data-toggle="tooltip">
+                <i class="fa fa-lg fa-step-backward"></i>
+            </a>
+            <a id="cineSlowPlaybackButton" title="Slow playback" class="cineButton" data-toggle="tooltip">
+                <i class="fa fa-lg fa-backward"></i>
+            </a>
+            <a id="cinePlayButton" title="Play / Pause" class="cineButton" data-toggle="tooltip">
+                {{#if isPlaying}}
+                    <i class="fa fa-lg fa-pause"></i>
+                    {{else}}
+                    <i class="fa fa-lg fa-play"></i>
+                {{/if}}
+            </a>
+            <a id="cineFastForwardButton" title="Increase playback speed" class="cineButton" data-toggle="tooltip">
+                <i class="fa fa-lg fa-forward"></i>
+            </a>
+            <a id="cineNextButton" title="Next image" class="cineButton" data-toggle="tooltip">
+                <i class="fa fa-lg fa-step-forward"></i>
+            </a>
+            <a id="cineLastButton" title="Skip to last image" class="cineButton" data-toggle="tooltip">
+                <i class="fa fa-lg fa-fast-forward"></i>
+            </a>
+        </div>
+        <div id="cineOptions">
+            <div id="loopSection">
+                <label>Loop?</label>
+                <input type="checkbox" checked id="cineLoopCheckbox" />
+            </div>
+            <div id="fpsSection">
+                <label>Cine Speed: <span id="fps">{{framerate}}</span></label>
+                <input type="range" id="cineSlider" min="1" max="90" value="{{framerate}}"/>
+            </div>
+        </div>
+    </div>
+</template>

Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.js

@@ -0,0 +1,78 @@
+toggleCinePlay = function() {
+    var element = getActiveViewportElement();
+    var playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
+
+    if (isPlaying()) {
+        cornerstoneTools.stopClip(element);
+    } else {
+        cornerstoneTools.playClip(element);
+    }
+};
+
+function updateFramerate(rate) {
+    OHIF.viewer.cine.framesPerSecond = rate;
+
+    // Update playClip toolData for this imageId
+    var element = getActiveViewportElement();
+    var playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
+    playClipToolData.data[0].framesPerSecond = OHIF.viewer.cine.framesPerSecond;
+
+    // If the movie is playing, stop/start to update the framerate
+    if (isPlaying()) {
+        var element = getActiveViewportElement();
+        cornerstoneTools.stopClip(element);
+        cornerstoneTools.playClip(element);
+    }
+
+    Session.set('UpdateCine', Random.id());
+}
+
+Template.cineDialog.helpers({
+    isPlaying: function() {
+        return isPlaying();
+    },
+    framerate: function() {
+        Session.get('UpdateCine');
+        return OHIF.viewer.cine.framesPerSecond.toFixed(1);
+    }
+});
+
+Template.cineDialog.events({
+    'click #cineFirstButton': function() {
+        switchToImageByIndex(0);
+    },
+    'click #cineBackButton': function() {
+        switchToImageRelative(-1);
+    },
+    'click #cineSlowPlaybackButton': function() {
+        updateFramerate(OHIF.viewer.cine.framesPerSecond - 1);
+    },
+    'click #cinePlayButton': function() {
+        toggleCinePlay();
+    },
+    'click #cineNextButton': function() {
+        switchToImageRelative(1);
+    },
+    'click #cineFastForwardButton': function() {
+        updateFramerate(OHIF.viewer.cine.framesPerSecond + 1);
+    },
+    'click #cineLastButton': function() {
+        switchToImageByIndex(-1);
+    },
+    'change #cineLoopCheckbox': function(e) {
+        var element = getActiveViewportElement();
+        var playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
+        playClipToolData.data[0].loop = $(e.currentTarget).is(':checked');
+        OHIF.viewer.cine.loop = playClipToolData.data[0].loop;
+    },
+    'input #cineSlider': function(e) {
+        // Update the FPS text onscreen
+        var rate = parseFloat($(e.currentTarget).val());
+        updateFramerate(rate);
+    }
+});
+
+Template.cineDialog.onRendered(function() {
+    var dialog = $('#cineDialog');
+    dialog.draggable();
+});

Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl

@@ -0,0 +1,44 @@
+#cineDialog
+  display: none
+  z-index: 1000
+  position: absolute
+  top: auto
+  left: auto
+  bottom: 3px
+  right: 3px
+
+  overflow: hidden  
+  padding: 10px
+  
+  width: 250px
+  height: 175px
+
+  border: 1px black solid
+  border-radius: 3px
+  background: white
+  color: black
+  
+  box-sizing: border-box
+  
+  -webkit-user-select: none
+  -moz-user-select: none
+  -o-user-select: none
+  -ms-user-select: none
+  -khtml-user-select: none
+  user-select: none
+
+  #cineButtons
+    padding-bottom: 10px
+    overflow: auto
+
+    .cineButton
+      cursor: pointer
+      margin: 0 6px
+      text-decoration: none
+
+  #cineOptions
+    padding: 5px 0
+    overflow: auto
+
+    #loopSection
+      padding-right: 12px

Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js

@@ -180,6 +180,17 @@ function loadSeriesIntoViewport(data, templateData) {
         cornerstoneTools.clearToolState(element, 'stack');
         cornerstoneTools.addToolState(element, 'stack', stack);
 
+        // Set the default CINE settings
+        var frameRate = 1000 / series.instances[0].frameTime;
+        var cineToolData = {
+            loop: OHIF.viewer.cine.loop,
+            framesPerSecond: frameRate || OHIF.viewer.cine.framesPerSecond
+        };
+        cornerstoneTools.addToolState(element, 'playClip', cineToolData);
+
+        // Autoplay datasets that have framerates set
+        cornerstoneTools.playClip(element);
+
         // Enable mouse, mouseWheel, touch, and keyboard input on the element
         cornerstoneTools.mouseInput.enable(element);
         cornerstoneTools.touchInput.enable(element);
@@ -224,6 +235,20 @@ function loadSeriesIntoViewport(data, templateData) {
             templateData.imageId = eventData.enabledElement.image.imageId;
             Session.set('CornerstoneNewImage' + viewportIndex, Random.id());
 
+            // 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);
+
             // If this viewport is displaying a stack of images, save the current image
             // index in the stack to the global ViewerData object, as well as the Meteor Session.
             var stack = cornerstoneTools.getToolState(element, 'stack');

Packages/viewerbase/client/components/viewer/playClipButton/playClipButton.html

@@ -1,9 +1,14 @@
 <template name="playClipButton">
-    <button id="playClip" type="button" class="imageViewerCommand btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Play/Stop Clip">
+    <button id="playClip" type="button" class="imageViewerCommand btn btn-sm btn-default"
+            data-container="body" data-toggle="tooltip" data-placement="bottom" title="Play/Stop Clip">
         {{ #if isPlaying }}
             <span class="fa fa-stop"></span>
         {{ else }}
             <span class="fa fa-play"></span>
         {{ /if }}
     </button>
+    <button id="toggleCineDialog"  type="button" class="imageViewerCommand btn btn-sm btn-default"
+            data-container="body" data-toggle="tooltip" data-placement="bottom" title="Toggle CINE Dialog">
+        <span class="fa fa-youtube-play"></span>
+    </button>
 </template>

Packages/viewerbase/client/components/viewer/playClipButton/playClipButton.js

@@ -1,41 +1,52 @@
 toggleCinePlay = function(element) {
+    var viewports = $('.imageViewerViewport');
+
     if (!element) {
-        var activeViewport = Session.get('activeViewport');
-        element = $('.imageViewerViewport').get(activeViewport);
+        var viewportIndex = Session.get('activeViewport');
+        element = viewports.get(viewportIndex);
     }
 
     if (!element) {
         return;
     }
 
-    var viewportIndex = $('.imageViewerViewport').index(element);
     var isPlaying = OHIF.viewer.isPlaying[viewportIndex] || false;
-    if (isPlaying === true) {
+    if (isPlaying) {
         cornerstoneTools.stopClip(element);
     } else {
         cornerstoneTools.playClip(element);
     }
+
     OHIF.viewer.isPlaying[viewportIndex] = !OHIF.viewer.isPlaying[viewportIndex];
     Session.set('UpdateCINE', Random.id());
 };
 
-Template.playClipButton.helpers({
-    'isPlaying': function() {
-        Session.get('UpdateCINE');
-        var activeViewport = Session.get('activeViewport');
+isPlaying = function() {
+    Session.get('UpdateCINE');
+    var activeViewport = Session.get('activeViewport');
 
-        // TODO=Check best way to make sure this is always defined
-        // Right now it is initialized in enableHotkeys AND in 
-        // imageViewer onCreated, but this appears to break some things
-        if (!OHIF.viewer.isPlaying) {
-            return;
-        }
-        return !!OHIF.viewer.isPlaying[activeViewport];
+    // TODO=Check best way to make sure this is always defined
+    // Right now it is initialized in enableHotkeys AND in
+    // imageViewer onCreated, but this appears to break some things
+    if (!OHIF.viewer.isPlaying) {
+        return;
+    }
+
+    return !!OHIF.viewer.isPlaying[activeViewport];
+};
+
+Template.playClipButton.helpers({
+    isPlaying: function() {
+        return isPlaying();
     }
 });
 
 Template.playClipButton.events({
     'click #playClip': function() {
         toggleCinePlay();
+    },
+    'click #toggleCineDialog': function() {
+        var cineDialog = document.getElementById('cineDialog');
+        toggleDialog(cineDialog);
     }
-});
+});

Packages/viewerbase/client/components/viewer/toolbar/toolbar.js

@@ -133,6 +133,7 @@ Template.toolbar.events({
         if (!OHIF.viewer.functionList.hasOwnProperty(command)) {
             return;
         }
+
         var activeViewport = Session.get('activeViewport');
         var element = $('.imageViewerViewport').get(activeViewport);
         OHIF.viewer.functionList[command](element);
@@ -150,48 +151,53 @@ Template.toolbar.onRendered(function() {
     // Set disabled/enabled tool buttons that are set in toolManager
     var states = toolManager.getToolDefaultStates();
     var disabledToolButtons = states.disabledToolButtons;
-    var allToolbarButtons = $("#toolbar").find("button");
+    var allToolbarButtons = $('#toolbar').find('button');
     if (disabledToolButtons.length > 0) {
-        for (var i=0; i < allToolbarButtons.length; i++) {
+        for (var i = 0; i < allToolbarButtons.length; i++) {
             var toolbarButton = allToolbarButtons[i];
-            $(toolbarButton).prop("disabled", false);
-            var index = disabledToolButtons.indexOf($(toolbarButton).attr("id"));
+            $(toolbarButton).prop('disabled', false);
+            var index = disabledToolButtons.indexOf($(toolbarButton).attr('id'));
             if (index !== -1) {
-                $(toolbarButton).prop("disabled", true);
+                $(toolbarButton).prop('disabled', true);
             }
         }
     }
 });
 
 Template.toolbar.helpers({
-    'button': function() {
+    button: function() {
         if (this.toolbarOptions && this.toolbarOptions.buttonData) {
             return this.toolbarOptions.buttonData;
         }
+
         return getDefaultButtonData();
     },
-    'includePlayClipButton': function() {
+    includePlayClipButton: function() {
         if (this.toolbarOptions && this.toolbarOptions.includePlayClipButton !== undefined) {
             return this.toolbarOptions.includePlayClipButton;
         }
+
         return true;
     },
-    'includeLayoutButton': function() {
+    includeLayoutButton: function() {
         if (this.toolbarOptions && this.toolbarOptions.includeLayoutButton !== undefined) {
             return this.toolbarOptions.includeLayoutButton;
         }
+
         return true;
     },
-    'includeHangingProtocolButtons': function() {
+    includeHangingProtocolButtons: function() {
         if (this.toolbarOptions && this.toolbarOptions.includeHangingProtocolButtons !== undefined) {
             return this.toolbarOptions.includeHangingProtocolButtons;
         }
-        return true;
+
+        return false;
     },
-    'btnGroup': function()  {
+    btnGroup: function() {
         if (this.toolbarOptions && this.toolbarOptions.btnGroup !== undefined) {
             return this.toolbarOptions.btnGroup;
         }
+
         return [];
     }
-});
+});

Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.html

@@ -17,7 +17,7 @@
         <div class="bottomleft dicomTag">
             <div>Ser: {{seriesNumber}}</div>
             <div>Img: {{imageNumber}} ({{imageIndex}}/{{numImages}})</div>
-            <div>{{frameRate}}</div>
+            <div>{{#if frameRate}}{{frameRate}} FPS{{/if}}</div>
             <div>{{imageDimensions}}</div>
             <div>{{seriesDescription}}</div>
         </div>

Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.js

@@ -157,6 +157,11 @@ Template.viewportOverlay.helpers({
     seriesDescription: function() {
         return getSeries.call(this, 'seriesDescription');
     },
+    frameRate: function() {
+        var frameTime = getInstance.call(this, 'frameTime');
+        var frameRate = 1000 / frameTime;
+        return frameRate.toFixed(1);
+    },
     seriesNumber: function() {
         return getSeries.call(this, 'seriesNumber');
     },

Packages/viewerbase/lib/draggable.js

@@ -0,0 +1,109 @@
+// Allow attaching to jQuery selectors
+$.fn.draggable = function() {
+    makeDraggable(this);
+};
+
+/**
+ * This function makes an element movable around the page.
+ * It supports mouse and touch input and allows whichever element
+ * is specified to be moved to any arbitrary position.
+ *
+ * @param element
+ */
+makeDraggable = function(element) {
+    var container = $(window);
+    var diffX,
+        diffY;
+
+    function getCursorCoords(e) {
+        var cursor = {
+            x: e.clientX,
+            y: e.clientY
+        };
+
+        // Handle touchMove cases
+        if (cursor.x === undefined) {
+            cursor.x = e.originalEvent.touches[0].pageX;
+        }
+        if (cursor.y === undefined) {
+            cursor.y = e.originalEvent.touches[0].pageY;
+        }
+        return cursor;
+    }
+
+    function startMoving(e) {
+        // Prevent dragging dialog by clicking on slider
+        // (could be extended for buttons, not sure it's necessary
+        if (e.target.type && e.target.type === 'range') {
+            return;
+        }
+
+        var elementTop = parseFloat(element.offset().top),
+            elementLeft = parseFloat(element.offset().left);
+
+        var cursor = getCursorCoords(e);
+        diffX = cursor.x - elementLeft;
+        diffY = cursor.y - elementTop;
+
+        container.css('cursor', 'move');
+        element.css('cursor', 'move');
+
+        element.css({
+            cursor: 'move',
+            left: elementLeft + 'px',
+            top: elementTop + 'px',
+            bottom: 'auto', // Setting these to empty doesn't seem to work in Firefox or Safari
+            right: 'auto'
+        });
+
+        $(document).on('mousemove', moveHandler);
+        $(document).on('mouseup', stopMoving);
+
+        $(document).on('touchmove', moveHandler);
+        $(document).on('touchend', stopMoving);
+    }
+
+    function stopMoving() {
+        container.css('cursor', 'default');
+        element.css('cursor', 'default');
+
+        $(document).off('mousemove', moveHandler);
+        $(document).off('touchmove', moveHandler);
+    }
+
+    function moveHandler(e) {
+        // Prevent dialog box dragging whole page in iOS
+        e.preventDefault();
+
+        var elementWidth = parseFloat(element.outerWidth()),
+            elementHeight = parseFloat(element.outerHeight()),
+            containerWidth = parseFloat(container.width()),
+            containerHeight = parseFloat(container.height());
+
+        var cursor = getCursorCoords(e);
+
+        var elementLeft = cursor.x - diffX;
+        var elementTop = cursor.y - diffY;
+
+        elementLeft = Math.max(elementLeft, 0);
+        elementTop = Math.max(elementTop, 0);
+
+        if (elementLeft + elementWidth > containerWidth) {
+            elementLeft = containerWidth - elementWidth;
+        }
+
+        if (elementTop + elementHeight > containerHeight) {
+            elementTop = containerHeight - elementHeight;
+        }
+
+        element.css({
+            left: elementLeft + 'px',
+            top: elementTop + 'px',
+            bottom: 'auto', // Setting these to empty doesn't seem to work in Firefox or Safari
+            right: 'auto'
+        });
+    }
+
+    element.on('mousedown', startMoving);
+    element.on('touchstart', startMoving);
+};

Packages/viewerbase/lib/metaDataProvider.js

@@ -47,6 +47,7 @@ addMetaData = function(imageId, data) {
         laterality: instanceMetaData.laterality,
         viewPosition: instanceMetaData.viewPosition,
         sliceThickness: instanceMetaData.sliceThickness,
+        frameTime: instanceMetaData.frameTime,
         index: imageIndex
     };
 

Packages/viewerbase/lib/toggleDialog.js

@@ -0,0 +1,8 @@
+toggleDialog = function(element) {
+    var elem = $(element);
+    if (elem.css('display') === 'none') {
+        elem.css('display', 'block');
+    } else {
+        elem.css('display', 'none');
+    }
+};

Packages/viewerbase/package.js

@@ -96,6 +96,10 @@ Package.onUse(function(api) {
     api.addFiles('client/components/viewer/layoutChooser/layoutChooser.js', 'client');
     api.addFiles('client/components/viewer/layoutChooser/layoutChooser.styl', 'client');
 
+    api.addFiles('client/components/viewer/cineDialog/cineDialog.html', 'client');
+    api.addFiles('client/components/viewer/cineDialog/cineDialog.js', 'client');
+    api.addFiles('client/components/viewer/cineDialog/cineDialog.styl', 'client');
+
     api.addFiles('client/components/viewer/simpleToolbarButton/simpleToolbarButton.html', 'client');
 
     api.addFiles('client/components/viewer/playClipButton/playClipButton.html', 'client');
@@ -131,6 +135,8 @@ Package.onUse(function(api) {
     api.addFiles('lib/windowManager.js', 'client');
     api.addFiles('lib/enablePrefetchOnElement.js', 'client');
     api.addFiles('lib/displayReferenceLines.js', 'client');
+    api.addFiles('lib/draggable.js', 'client');
+    api.addFiles('lib/toggleDialog.js', 'client');
     api.addFiles('lib/setActiveViewport.js', 'client');
     api.addFiles('lib/switchToImageByIndex.js', 'client');
     api.addFiles('lib/switchToImageRelative.js', 'client');
@@ -160,6 +166,7 @@ Package.onUse(function(api) {
     api.export('setFocusToActiveViewport', 'client');
     api.export('updateAllViewports', 'client');
     api.export('exportStudies', 'client');
+    api.export('getActiveViewportElement', 'client');
     api.export('encodeQueryData', 'server');
 
     // Viewer management objects

Packages/viewerbase/server/services/dimse/retrieveMetadata.js

@@ -69,6 +69,8 @@ function resultDataToStudyMetadata(studyInstanceUid, resultData) {
 
         var sopInstanceUid = instance[0x00080018];
 
+        console.log(instance);
+
         var instanceSummary = {
             imageType: instance[0x00080008],
             sopClassUid: instance[0x00080016],
@@ -95,7 +97,7 @@ function resultDataToStudyMetadata(studyInstanceUid, resultData) {
             laterality: instance[0x00200062],
             viewPosition: instance[0x00185101],
             numFrames: parseFloat(instance[0x00280008]),
-            frameRate: parseFloat(instance[0x00181063])
+            frameTime: parseFloat(instance[0x00181063])
         };
 
         // Retrieve the actual data over WADO-URI

Packages/viewerbase/server/services/dimse/studies.js

@@ -30,7 +30,6 @@ function resultDataToStudies(resultData) {
     return studies;
 }
 
-
 Services.DIMSE.Studies = function(filter) {
     log.info('Services.DIMSE.Studies');
     var parameters = {
@@ -38,11 +37,11 @@ Services.DIMSE.Studies = function(filter) {
         0x00100020: filter.patientId,
         0x00080050: filter.accessionNumber,
         0x00081030: filter.studyDescription,
-        0x00100040: "",
-        0x00201208: "",
-        0x00080061: ""
+        0x00100040: '',
+        0x00201208: '',
+        0x00080061: ''
     };
 
     var results = DIMSE.retrieveStudies(parameters);
     return resultDataToStudies(results);
-};
+};

Packages/viewerbase/server/services/remote/retrieveMetadata.js

@@ -94,7 +94,7 @@ function resultDataToStudyMetadata(server, studyInstanceUid, resultData) {
             laterality: remoteGetValue(instance['0020,0062']),
             viewPosition: remoteGetValue(instance['0018,5101']),
             numFrames: parseFloat(remoteGetValue(instance['0028,0008'])),
-            frameRate: parseFloat(remoteGetValue(instance['0018,1063']))
+            frameTime: parseFloat(remoteGetValue(instance['0018,1063']))
         };
 
         var iid = instance['xxxx,0001'].Value;

Packages/viewerbase/server/services/wado/retrieveMetadata.js

@@ -105,7 +105,7 @@ function resultDataToStudyMetadata(server, studyInstanceUid, resultData) {
             laterality: DICOMWeb.getString(instance['00200062']),
             viewPosition: DICOMWeb.getString(instance['00185101']),
             numFrames: DICOMWeb.getNumber(instance['00280008']),
-            frameRate: DICOMWeb.getNumber(instance['00181063']),
+            frameTime: DICOMWeb.getNumber(instance['00181063']),
             sliceThickness: DICOMWeb.getNumber(instance['00180050'])
         };