Mercurial > hg > orthanc-stone
changeset 1967:b180233143ae
Added vertical slider showing position of the current frame inside the series
| author | Sebastien Jodogne <s.jodogne@gmail.com> |
|---|---|
| date | Fri, 28 Oct 2022 10:38:30 +0200 |
| parents | a5f0b395d4df |
| children | ed5a0b9183dc |
| files | Applications/StoneWebViewer/NEWS Applications/StoneWebViewer/WebApplication/app-fixes.css Applications/StoneWebViewer/WebApplication/app.js Applications/StoneWebViewer/WebApplication/index.html |
| diffstat | 4 files changed, 44 insertions(+), 8 deletions(-) [+] |
line wrap: on
line diff
--- 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
--- 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; +}
--- 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';
--- 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>