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

2016-03-17 12:10:23 +01:00
1 parent d1d4e09815
commit 7e64fb4109
@@ -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>
@@ -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();
+});
@@ -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