Mercurial > hg > orthanc-stone
comparison Applications/StoneWebViewer/WebApplication/index.html @ 1672:570398585b5f
start support of cine sequences
author | Sebastien Jodogne <s.jodogne@gmail.com> |
---|---|
date | Mon, 23 Nov 2020 15:39:27 +0100 |
parents | 0f161841f837 |
children | dd50f8a1a2be |
comparison
equal
deleted
inserted
replaced
1671:2c2512918a0f | 1672:570398585b5f |
---|---|
554 <!--div style="width: 100%; height: 100%; background-color: red"></div--> | 554 <!--div style="width: 100%; height: 100%; background-color: red"></div--> |
555 <canvas v-bind:id="canvasId" class="viewport-canvas" | 555 <canvas v-bind:id="canvasId" class="viewport-canvas" |
556 style="position:absolute; left:0; top:0; width:100%; height:100%" | 556 style="position:absolute; left:0; top:0; width:100%; height:100%" |
557 oncontextmenu="return false"></canvas> | 557 oncontextmenu="return false"></canvas> |
558 | 558 |
559 <div v-if="'tags' in series" v-show="showInfo"> | 559 <div v-show="showInfo"> |
560 <div class="wv-overlay"> | 560 <div class="wv-overlay"> |
561 <div class="wv-overlay-topleft"> | 561 <div v-if="'tags' in series" class="wv-overlay-topleft"> |
562 {{ series.tags['0010,0010'] }}<br/> | 562 {{ series.tags['0010,0010'] }}<br/> |
563 {{ series.tags['0010,0020'] }} | 563 {{ series.tags['0010,0020'] }} |
564 </div> | 564 </div> |
565 <div class="wv-overlay-topright"> | 565 <div v-if="'tags' in series" class="wv-overlay-topright"> |
566 {{ series.tags['0008,1030'] }}<br/> | 566 {{ series.tags['0008,1030'] }}<br/> |
567 {{ series.tags['0008,0020'] }}<br/> | 567 {{ series.tags['0008,0020'] }}<br/> |
568 {{ series.tags['0020,0011'] }} | {{ series.tags['0008,103e'] }} | 568 {{ series.tags['0020,0011'] }} | {{ series.tags['0008,103e'] }} |
569 </div> | 569 </div> |
570 <div class="wv-overlay-bottomleft wvPrintExclude" | 570 <div class="wv-overlay-timeline-wrapper wvPrintExclude"> |
571 v-show="framesCount != 0"> | 571 <div style="text-align:left; padding:5px" v-show="framesCount != 0"> |
572 <button class="btn btn-primary" @click="DecrementFrame()"> | 572 <div style="width: 12em; padding: 1em;" v-show="cineControls"> |
573 <i class="fa fa-chevron-circle-left"></i> | 573 <label> |
574 </button> | 574 Frame rate |
575 {{ currentFrame }} / {{ framesCount }} | 575 <span class="wv-play-button-config-framerate-wrapper"> |
576 <button class="btn btn-primary" @click="IncrementFrame()"> | 576 <input type="range" min="1" max="60" v-model="cineFramesPerSecond" |
577 <i class="fa fa-chevron-circle-right"></i> | 577 class="wv-play-button-config-framerate"> |
578 </button> | 578 </span> |
579 </div> | 579 {{ cineFramesPerSecond }} fps |
580 <div class="wv-overlay-bottomright wvPrintExclude"> | 580 </label> |
581 </div> | |
582 <button class="btn btn-primary btn-sm" @click="DecrementFrame()"> | |
583 <i class="fa fa-chevron-circle-left"></i> | |
584 </button> | |
585 {{ currentFrame }} / {{ framesCount }} | |
586 <button class="btn btn-primary btn-sm" @click="IncrementFrame()"> | |
587 <i class="fa fa-chevron-circle-right"></i> | |
588 </button> | |
589 <div class="btn-group btn-group-sm" role="group"> | |
590 <button type="button" class="btn btn-primary" @click="CinePlay()"> | |
591 <i class="fas fa-play fa-flip-horizontal"></i> | |
592 </button> | |
593 <button type="button" class="btn btn-primary" @click="CinePause()"> | |
594 <i class="fas fa-pause"></i> | |
595 </button> | |
596 <button type="button" class="btn btn-primary" @click="CineBackward()"> | |
597 <i class="fas fa-play"></i> | |
598 </button> | |
599 </div> | |
600 </div> | |
601 </div> | |
602 <div class="wv-overlay-bottomright wvPrintExclude" style="bottom: 0px"> | |
581 <div v-show="quality == stone.DisplayedFrameQuality.NONE" | 603 <div v-show="quality == stone.DisplayedFrameQuality.NONE" |
582 style="display:block;background-color:red;width:1em;height:1em" /> | 604 style="display:block;background-color:red;width:1em;height:1em" /> |
583 <div v-show="quality == stone.DisplayedFrameQuality.LOW" | 605 <div v-show="quality == stone.DisplayedFrameQuality.LOW" |
584 style="display:block;background-color:orange;width:1em;height:1em" /> | 606 style="display:block;background-color:orange;width:1em;height:1em" /> |
585 <div v-show="quality == stone.DisplayedFrameQuality.HIGH" | 607 <div v-show="quality == stone.DisplayedFrameQuality.HIGH" |
597 <div v-show="status == 'pdf'" > | 619 <div v-show="status == 'pdf'" > |
598 <pdf-viewer v-bind:prefix="canvasId + '-pdf'" ref="pdfViewer"></pdf-viewer> | 620 <pdf-viewer v-bind:prefix="canvasId + '-pdf'" ref="pdfViewer"></pdf-viewer> |
599 </div> | 621 </div> |
600 | 622 |
601 <div v-if="status == 'video'" class="wvPaneOverlay"> | 623 <div v-if="status == 'video'" class="wvPaneOverlay"> |
602 [ this viewer cannot play videos ] | 624 [ videos are not supported yet ] |
603 <!--video class="wvVideo" autoplay="" loop="" controls="" preload="auto" type="video/mp4" | 625 <!--video class="wvVideo" autoplay="" loop="" controls="" preload="auto" type="video/mp4" |
604 src="http://viewer-pro.osimis.io/instances/e465dd27-83c96343-96848735-7035a133-1facf1a0/frames/0/raw"> | 626 src="http://viewer-pro.osimis.io/instances/e465dd27-83c96343-96848735-7035a133-1facf1a0/frames/0/raw"> |
605 </video--> | 627 </video--> |
606 </div> | 628 </div> |
607 | 629 |