Create a slider to navigate between frames (#607)

OpenImaging · Oct 3, 2022 · f5f9dbb · f5f9dbb
1 parent 41d0027
commit f5f9dbb
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/web_client/src/components/ControlPanel.vue b/web_client/src/components/ControlPanel.vue
@@ -132,6 +132,9 @@ export default {
           .catch(this.handleNavigationError);
       }
     },
+    slideToFrame(framePosition) {
+      this.navigateToFrame(this.currentViewData.scanFramesList[framePosition - 1]);
+    },
     updateImage() {
       if (this.direction === 'back') {
         this.navigateToFrame(this.previousFrame);
@@ -337,7 +340,8 @@ export default {
                             class="grey--text"
                             style="display:inline"
                           >
-                            {{ currentViewData.scanPositionString }}
+                            ({{ currentViewData.scanPosition }} /
+                            {{ currentViewData.experimentScansList.length }})
                           </p>
                         </div>
                         <div>
@@ -368,9 +372,18 @@ export default {
                             class="grey--text"
                             style="display:inline"
                           >
-                            {{ currentViewData.framePositionString }}
+                            ({{ currentViewData.framePosition }} /
+                            {{ currentViewData.scanFramesList.length }})
                           </p>
                         </div>
+                        <v-slider
+                          :value="currentViewData.framePosition"
+                          ticks="always"
+                          tick-size="4"
+                          :min="1"
+                          :max="currentViewData.scanFramesList.length"
+                          @input="slideToFrame"
+                        />
                         <div>
                           <v-btn
                             :disabled="!previousFrame"

diff --git a/web_client/src/store/index.ts b/web_client/src/store/index.ts
@@ -383,8 +383,10 @@ const {
         scanSubject: scan.subjectID,
         scanLink: scan.link,
         scanDecisions: scan.decisions,
-        scanPositionString: `(${experimentScansList.indexOf(scan.id) + 1}/${experimentScansList.length})`,
-        framePositionString: `(${scanFramesList.indexOf(currentFrame.id) + 1}/${scanFramesList.length})`,
+        experimentScansList,
+        scanFramesList,
+        scanPosition: experimentScansList.indexOf(scan.id) + 1,
+        framePosition: scanFramesList.indexOf(currentFrame.id) + 1,
         backTo: currentFrame.previousFrame,
         forwardTo: currentFrame.nextFrame,
         upTo: state.scanFrames[upTo] ? state.scanFrames[upTo][0] : undefined,