AWV-3: Adding next and previous display set buttons for CINE dialog

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

@@ -1,40 +1,52 @@
 <template name="cineDialog">
     {{#form id='cineDialog' class='noselect' schema=instance.schema}}
         <h5>CINE Controls</h5>
-        <div class="btn-group">
-            <a id="cineFirstButton" title="Skip to first image" class="btn" data-toggle="tooltip">
-                <i class="fa fa-fast-backward"></i>
-            </a>
-            <a id="cineBackButton" title="Previous image" class="btn" data-toggle="tooltip">
-                <i class="fa fa-step-backward"></i>
-            </a>
-            <a id="cineSlowPlaybackButton" title="Slow playback" class="btn" data-toggle="tooltip">
-                <i class="fa fa-backward"></i>
-            </a>
-            <a id="cinePlayButton" title="Play / Stop" class="btn {{#if isPlaying}}active{{/if}}" data-toggle="tooltip">
-                {{#if isPlaying}}
-                    <i class="fa fa-fw fa-stop"></i>
-                {{else}}
-                    <i class="fa fa-fw fa-play"></i>
-                {{/if}}
-            </a>
-            <a id="cineFastForwardButton" title="Increase playback speed" class="btn" data-toggle="tooltip">
-                <i class="fa fa-forward"></i>
-            </a>
-            <a id="cineNextButton" title="Next image" class="btn" data-toggle="tooltip">
-                <i class="fa fa-step-forward"></i>
-            </a>
-            <a id="cineLastButton" title="Skip to last image" class="btn" data-toggle="tooltip">
-                <i class="fa fa-fast-forward"></i>
-            </a>
-        </div>
-        <div id="cineOptions">
-            <div id="loopSection">
-                {{>inputCheckbox id='cineLoopCheckbox' key='loop'}}
+        <div class="cine-navigation">
+            <div class="btn-group">
+                {{#button id='cineDisplaySetPrevious' title='Previous display set'}}
+                    <i class="fa fa-toggle-up"></i>
+                {{/button}}
+                {{#button id='cineDisplaySetNext' title='Next display set'}}
+                    <i class="fa fa-toggle-down"></i>
+                {{/button}}
             </div>
-            <div id="fpsSection">
-                {{#inputRange id='cineSlider' key='speed' labelClass='form-group'}}
-                    {{#section 'labelAfterText'}}: <span id="fps">{{framerate}}</span>{{/section}}
+        </div>
+        <div class="cine-controls">
+            <div class="btn-group">
+                {{#button id='cineFirstButton' title='Skip to first image'}}
+                    <i class="fa fa-fast-backward"></i>
+                {{/button}}
+                {{#button id='cineBackButton' title='Previous image'}}
+                    <i class="fa fa-step-backward"></i>
+                {{/button}}
+                {{#button id='cineSlowPlaybackButton' title='Slow playback'}}
+                    <i class="fa fa-backward"></i>
+                {{/button}}
+                {{#button id='cinePlayButton' title='Play / Stop' class=(valueIf isPlaying 'active' '')}}
+                    {{#if isPlaying}}
+                        <i class="fa fa-fw fa-stop"></i>
+                    {{else}}
+                        <i class="fa fa-fw fa-play"></i>
+                    {{/if}}
+                {{/button}}
+                {{#button id='cineFastForwardButton' title='Increase playback speed'}}
+                    <i class="fa fa-forward"></i>
+                {{/button}}
+                {{#button id='cineNextButton' title='Next image'}}
+                    <i class="fa fa-step-forward"></i>
+                {{/button}}
+                {{#button id='cineLastButton' title='Skip to last image'}}
+                    <i class="fa fa-fast-forward"></i>
+                {{/button}}
+            </div>
+        </div>
+        <div class="cine-options">
+            <div class="fps-section">
+                {{#inputRange id='cineSlider' key='speed' class='p-a-0' labelClass='form-group m-a-0' labelAsDiv=true}}
+                    {{#section 'labelAfterText'}}:
+                        <span id="fps">{{framerate}}</span>
+                        {{>inputCheckbox id='cineLoopCheckbox' key='loop' labelClass='pull-right m-a-0'}}
+                    {{/section}}
                 {{/inputRange}}
             </div>
         </div>

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

@@ -23,8 +23,8 @@ Template.cineDialog.onCreated(() => {
         OHIF.viewer.cine.framesPerSecond = rate;
 
         // Update playClip toolData for this imageId
-        var element = getActiveViewportElement();
-        var playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
+        const element = getActiveViewportElement();
+        const playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
         playClipToolData.data[0].framesPerSecond = OHIF.viewer.cine.framesPerSecond;
 
         // If the movie is playing, stop/start to update the framerate
@@ -38,12 +38,19 @@ Template.cineDialog.onCreated(() => {
 });
 
 Template.cineDialog.onRendered(() => {
-    const instance = Template.instance();
-    const dialog = instance.$('#cineDialog');
-    dialog.draggable();
+    // Make the CINE dialog bounded and draggable
+    Template.instance().$('#cineDialog').bounded().draggable();
 });
 
 Template.cineDialog.events({
+    'click #cineDisplaySetPrevious'(event, instance) {
+        OHIF.viewer.moveDisplaySets(false);
+    },
+
+    'click #cineDisplaySetNext'(event, instance) {
+        OHIF.viewer.moveDisplaySets(true);
+    },
+
     'click #cineFirstButton'(event, instance) {
         switchToImageByIndex(0);
     },
@@ -79,16 +86,20 @@ Template.cineDialog.events({
     },
 
     'change #cineLoopCheckbox'(event, instance) {
-        var element = getActiveViewportElement();
-        var playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
+        const element = getActiveViewportElement();
+        const playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
         playClipToolData.data[0].loop = $(event.currentTarget).is(':checked');
         OHIF.viewer.cine.loop = playClipToolData.data[0].loop;
     },
 
     'input #cineSlider'(event, instance) {
         // Update the FPS text onscreen
-        var rate = parseFloat($(event.currentTarget).val());
+        const rate = parseFloat($(event.currentTarget).val());
         instance.updateFramerate(rate);
+    },
+
+    submit(event, instance) {
+        event.preventDefault();
     }
 });
 

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

@@ -4,25 +4,29 @@
   theme('border', '1px solid $uiBorderColor')
   theme('background', '$uiGrayDarkest')
   theme('color', '$textSecondaryColor')
-  display: none
-  z-index: 1000
-  position: absolute
-  top: auto
-  left: auto
+  border-radius: 8px
   bottom: 3px
-  right: 3px
+  box-sizing: border-box
+  display: none
+  height: 150px
+  left: auto
+  opacity: 0.95
   overflow: hidden
   padding: 10px
+  position: absolute
+  right: 3px
+  top: auto
   width: 300px
-  height: 175px
-  opacity: 0.95
-  border-radius: 8px
+  z-index: 1000
+
+  h5
+    font-size: 20px
+    line-height: 35px
+    margin: 0
 
   h5, label
     font-weight: 400
 
-  box-sizing: border-box
-
   .btn
     theme('background', '$uiGrayDarkest')
     theme('color', '$textSecondaryColor')
@@ -33,9 +37,25 @@
     &:active, &.active
       theme('color', '$activeColor')
 
-  #cineOptions
+  .cine-navigation
+    position: absolute
+    right: 24px
+    top: 4px
+
+    .btn
+      padding: 0 4px
+
+      i
+        font-size: 36px
+        line-height: 36px
+
+  .cine-controls
+    display: table
+    margin: 0 auto
+
+  .cine-options
     padding: 5px 0
     overflow: auto
 
-    #loopSection
+    .loop-section
       padding-right: 12px