Mercurial > hg > orthanc-stone
comparison Applications/StoneWebViewer/WebApplication/index.html @ 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 |
comparison
equal
deleted
inserted
replaced
1966:a5f0b395d4df | 1967:b180233143ae |
---|---|
674 <canvas v-bind:id="canvasId" class="viewport-canvas" | 674 <canvas v-bind:id="canvasId" class="viewport-canvas" |
675 style="position:absolute; left:0; top:0; width:100%; height:100%" | 675 style="position:absolute; left:0; top:0; width:100%; height:100%" |
676 oncontextmenu="return false"></canvas> | 676 oncontextmenu="return false"></canvas> |
677 | 677 |
678 <div v-show="showInfo"> | 678 <div v-show="showInfo"> |
679 <div v-if="numberOfFrames > 1" class="wvVerticalScrollbar" | |
680 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)));"> | |
681 <div class="wvVerticalScrollbarHighlight" | |
682 v-bind:style="{ top: (currentFrame / (numberOfFrames - 1) * 95.0) + '%' }"> | |
683 </div> | |
684 </div> | |
685 | |
679 <div class="wv-overlay"> | 686 <div class="wv-overlay"> |
680 <div v-if="'tags' in content.series" class="wv-overlay-topleft"> | 687 <div v-if="'tags' in content.series" class="wv-overlay-topleft"> |
681 {{ content.series.tags[PATIENT_NAME] }}<br/> | 688 {{ content.series.tags[PATIENT_NAME] }}<br/> |
682 {{ content.series.tags[PATIENT_ID] }}<br/> | 689 {{ content.series.tags[PATIENT_ID] }}<br/> |
683 {{ app.FormatDate(content.series.tags[PATIENT_BIRTH_DATE]) }} | 690 {{ app.FormatDate(content.series.tags[PATIENT_BIRTH_DATE]) }} |
684 </div> | 691 </div> |
685 <div v-if="'tags' in content.series" class="wv-overlay-topright"> | 692 <div v-if="'tags' in content.series" class="wv-overlay-topright" |
693 v-bind:class="{ 'wvInfoRightMargin' : numberOfFrames > 1 }"> | |
686 {{ content.series.tags[STUDY_DESCRIPTION] }}<br/> | 694 {{ content.series.tags[STUDY_DESCRIPTION] }}<br/> |
687 <span v-if="contentDate !== undefined && contentDate != ''">{{ app.FormatDate(contentDate) }} <span v-show="contentTime != ''">{{ app.FormatTime(contentTime) }}</span><br/></span> | 695 <span v-if="contentDate !== undefined && contentDate != ''">{{ app.FormatDate(contentDate) }} <span v-show="contentTime != ''">{{ app.FormatTime(contentTime) }}</span><br/></span> |
688 <span v-else="contentDate === undefined || contentDate == ''">{{ app.FormatDate(content.series.tags[STUDY_DATE]) }}<br/></span> | 696 <span v-else="contentDate === undefined || contentDate == ''">{{ app.FormatDate(content.series.tags[STUDY_DATE]) }}<br/></span> |
689 {{ content.series.tags[SERIES_NUMBER] }} | {{ content.series.tags[SERIES_DESCRIPTION] }} | 697 {{ content.series.tags[SERIES_NUMBER] }} | {{ content.series.tags[SERIES_DESCRIPTION] }} |
690 </div> | 698 </div> |
733 <i class="fas fa-play"></i> | 741 <i class="fas fa-play"></i> |
734 </button> | 742 </button> |
735 </div> | 743 </div> |
736 </span> | 744 </span> |
737 </div> | 745 </div> |
738 <div class="wv-overlay-bottomright wvPrintExclude" style="bottom: 0px"> | 746 <div class="wv-overlay-bottomright wvPrintExclude" style="bottom: 0px" |
747 v-bind:class="{ 'wvInfoRightMargin' : numberOfFrames > 1 }"> | |
739 <div v-if="windowingWidth != 0"> | 748 <div v-if="windowingWidth != 0"> |
740 ww/wc: {{ windowingWidth }} / {{ windowingCenter }} | 749 ww/wc: {{ windowingWidth }} / {{ windowingCenter }} |
741 </div> | 750 </div> |
742 <div style="padding-top: 0.5em"> | 751 <div style="padding-top: 0.5em"> |
743 <div v-show="quality == stone.DisplayedFrameQuality.NONE" | 752 <div v-show="quality == stone.DisplayedFrameQuality.NONE" |