# HG changeset patch
# User Sebastien Jodogne <s.jodogne@gmail.com>
# Date 1666946310 -7200
# Node ID b180233143aee936bab8b5590ee61aa8d8ae8084
# Parent  a5f0b395d4df9edfdab54cb2d0cd71297b070676
Added vertical slider showing position of the current frame inside the series

diff -r a5f0b395d4df -r b180233143ae Applications/StoneWebViewer/NEWS
--- a/Applications/StoneWebViewer/NEWS	Fri Oct 28 09:02:16 2022 +0200
+++ b/Applications/StoneWebViewer/NEWS	Fri Oct 28 10:38:30 2022 +0200
@@ -1,6 +1,7 @@
 Pending changes in the mainline
 ===============================
 
+* Added vertical slider showing position of the current frame inside the series
 * Display of orientation markers
 * New configuration options:
   - "ShowInfoPanelAtStartup" to control the info panel at startup
diff -r a5f0b395d4df -r b180233143ae Applications/StoneWebViewer/WebApplication/app-fixes.css
--- a/Applications/StoneWebViewer/WebApplication/app-fixes.css	Fri Oct 28 09:02:16 2022 +0200
+++ b/Applications/StoneWebViewer/WebApplication/app-fixes.css	Fri Oct 28 10:38:30 2022 +0200
@@ -43,3 +43,25 @@
     border-radius: 5px;
     padding: 7px;
 }
+
+
+.wvVerticalScrollbar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 10px;
+    background-color: #1b663e;
+}
+
+.wvInfoRightMargin {
+    right: 10px !important;  /* must match the "width" of "wvVerticalScrollbar" */
+}
+
+.wvVerticalScrollbarHighlight {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 5%;
+    background-color: #00ff00;
+}
diff -r a5f0b395d4df -r b180233143ae Applications/StoneWebViewer/WebApplication/app.js
--- a/Applications/StoneWebViewer/WebApplication/app.js	Fri Oct 28 09:02:16 2022 +0200
+++ b/Applications/StoneWebViewer/WebApplication/app.js	Fri Oct 28 10:38:30 2022 +0200
@@ -158,12 +158,16 @@
   },
   watch: {
     currentFrame: function(newVal, oldVal) {
-      /**
-       * The "FrameUpdated" event has been received, which indicates
-       * that the schedule frame has been displayed: The cine loop can
-       * proceed to the next frame (check out "CineCallback()").
-       **/
-      this.cineLoadingFrame = false;
+      if (this.cineLoadingFrame) {
+        /**
+         * The "FrameUpdated" event has been received, which indicates
+         * that the schedule frame has been displayed: The cine loop can
+         * proceed to the next frame (check out "CineCallback()").
+         **/
+        this.cineLoadingFrame = false;
+      } else {
+        stone.SetFrame(this.canvasId, newVal);
+      }
     },
     content: function(newVal, oldVal) {
       this.status = 'loading';
diff -r a5f0b395d4df -r b180233143ae Applications/StoneWebViewer/WebApplication/index.html
--- a/Applications/StoneWebViewer/WebApplication/index.html	Fri Oct 28 09:02:16 2022 +0200
+++ b/Applications/StoneWebViewer/WebApplication/index.html	Fri Oct 28 10:38:30 2022 +0200
@@ -676,13 +676,21 @@
                       oncontextmenu="return false"></canvas>
 
               <div v-show="showInfo">
+                <div v-if="numberOfFrames > 1" class="wvVerticalScrollbar"
+                       v-on:click="var offset = $event.currentTarget.getClientRects()[0]; var y = $event.clientY - offset.top; var height = $event.currentTarget.offsetHeight; currentFrame = Math.min(numberOfFrames - 1, Math.floor(y * numberOfFrames / (height - 1)));">
+                  <div class="wvVerticalScrollbarHighlight"
+                       v-bind:style="{ top: (currentFrame / (numberOfFrames - 1) * 95.0) + '%' }">
+                  </div>
+                </div>
+                
                 <div class="wv-overlay">
                   <div v-if="'tags' in content.series" class="wv-overlay-topleft">
                     {{ content.series.tags[PATIENT_NAME] }}<br/>
                     {{ content.series.tags[PATIENT_ID] }}<br/>
                     {{ app.FormatDate(content.series.tags[PATIENT_BIRTH_DATE]) }}
                   </div>
-                  <div v-if="'tags' in content.series" class="wv-overlay-topright">
+                  <div v-if="'tags' in content.series" class="wv-overlay-topright"
+                       v-bind:class="{ 'wvInfoRightMargin' : numberOfFrames > 1 }">
                     {{ content.series.tags[STUDY_DESCRIPTION] }}<br/>
                     <span v-if="contentDate !== undefined && contentDate != ''">{{ app.FormatDate(contentDate) }} <span v-show="contentTime != ''">{{ app.FormatTime(contentTime) }}</span><br/></span>
                     <span v-else="contentDate === undefined || contentDate == ''">{{ app.FormatDate(content.series.tags[STUDY_DATE]) }}<br/></span>
@@ -735,7 +743,8 @@
                       </div>
                     </span>
                   </div>
-                  <div class="wv-overlay-bottomright wvPrintExclude" style="bottom: 0px">
+                  <div class="wv-overlay-bottomright wvPrintExclude" style="bottom: 0px"
+                       v-bind:class="{ 'wvInfoRightMargin' : numberOfFrames > 1 }">
                     <div v-if="windowingWidth != 0">
                       ww/wc: {{ windowingWidth }} / {{ windowingCenter }}
                     </div>