comparison Applications/StoneWebViewer/WebApplication/index.html @ 1657:66e5fcdf5597

pdf viewer is working
author Sebastien Jodogne <s.jodogne@gmail.com>
date Wed, 18 Nov 2020 11:19:09 +0100
parents 39137da83b0b
children 641d39cc8537
comparison
equal deleted inserted replaced
1656:4cdc297be5a6 1657:66e5fcdf5597
198 width="65px" height="65px" 198 width="65px" height="65px"
199 /> 199 />
200 </div> 200 </div>
201 201
202 <i v-if="series[seriesIndex].type == stone.ThumbnailType.PDF" 202 <i v-if="series[seriesIndex].type == stone.ThumbnailType.PDF"
203 class="wvSerieslist__placeholderIcon fa fa-file-text"></i> 203 class="wvSerieslist__placeholderIcon fa fa-file-pdf"></i>
204 204
205 <i v-if="series[seriesIndex].type == stone.ThumbnailType.VIDEO" 205 <i v-if="series[seriesIndex].type == stone.ThumbnailType.VIDEO"
206 class="wvSerieslist__placeholderIcon fa fa-video-camera"></i> 206 class="wvSerieslist__placeholderIcon fa fa-video-video"></i>
207 207
208 208
209 <div v-if="[stone.ThumbnailType.IMAGE, stone.ThumbnailType.NO_PREVIEW].includes(series[seriesIndex].type)" 209 <div v-if="[stone.ThumbnailType.IMAGE, stone.ThumbnailType.NO_PREVIEW].includes(series[seriesIndex].type)"
210 class="wvSerieslist__placeholderIcon" 210 class="wvSerieslist__placeholderIcon"
211 v-bind:title="leftMode == 'full' ? null : '[' + series[seriesIndex].tags['0008,0060'] + '] ' + series[seriesIndex].tags['0008,103e']"> 211 v-bind:title="leftMode == 'full' ? null : '[' + series[seriesIndex].tags['0008,0060'] + '] ' + series[seriesIndex].tags['0008,103e']">
522 </ul> 522 </ul>
523 </script> 523 </script>
524 524
525 525
526 <script type="text/x-template" id="viewport-template"> 526 <script type="text/x-template" id="viewport-template">
527 <div v-bind:style="{ padding:'2px', 527 <div v-bind:id="canvasId + '-container'"
528 v-bind:style="{ padding:'2px',
528 position:'absolute', 529 position:'absolute',
529 left: left, 530 left: left,
530 top: top, 531 top: top,
531 width: width, 532 width: width,
532 height: height }"> 533 height: height }">
544 <div class="wvSplitpane__cell" 545 <div class="wvSplitpane__cell"
545 v-on:click="MakeActive()"> 546 v-on:click="MakeActive()">
546 <div v-show="status == 'ready'" 547 <div v-show="status == 'ready'"
547 style="position:absolute; left:0; top:0; width:100%; height:100%;"> 548 style="position:absolute; left:0; top:0; width:100%; height:100%;">
548 <!--div style="width: 100%; height: 100%; background-color: red"></div--> 549 <!--div style="width: 100%; height: 100%; background-color: red"></div-->
549 <canvas v-bind:id="canvasId" 550 <canvas v-bind:id="canvasId" class="viewport-canvas"
550 style="position:absolute; left:0; top:0; width:100%; height:100%" 551 style="position:absolute; left:0; top:0; width:100%; height:100%"
551 oncontextmenu="return false"></canvas> 552 oncontextmenu="return false"></canvas>
552 553
553 <div v-if="'tags' in series" v-show="showInfo"> 554 <div v-if="'tags' in series" v-show="showInfo">
554 <div class="wv-overlay"> 555 <div class="wv-overlay">
585 586
586 <div v-if="status == 'waiting'" class="wvPaneOverlay"> 587 <div v-if="status == 'waiting'" class="wvPaneOverlay">
587 [ drop a series here ] 588 [ drop a series here ]
588 </div> 589 </div>
589 590
590 <div v-if="status == 'pdf'" > 591 <!-- Don't use "v-if" here, otherwise the tooltips of the PDF viewer are not initialized -->
591 <pdf-viewer v-bind:prefix="canvasId + '-pdf'"></pdf-viewer> 592 <div v-show="status == 'pdf'" >
593 <pdf-viewer v-bind:prefix="canvasId + '-pdf'" ref="pdfViewer"></pdf-viewer>
592 </div> 594 </div>
593 595
594 <!--div v-if="status == 'video'" class="wvPaneOverlay"> 596 <!--div v-if="status == 'video'" class="wvPaneOverlay">
595 <video class="wvVideo" autoplay="" loop="" controls="" preload="auto" type="video/mp4" 597 <video class="wvVideo" autoplay="" loop="" controls="" preload="auto" type="video/mp4"
596 src="http://viewer-pro.osimis.io/instances/e465dd27-83c96343-96848735-7035a133-1facf1a0/frames/0/raw"> 598 src="http://viewer-pro.osimis.io/instances/e465dd27-83c96343-96848735-7035a133-1facf1a0/frames/0/raw">
620 oncontextmenu="return false"></canvas> 622 oncontextmenu="return false"></canvas>
621 </div> 623 </div>
622 624
623 <div class="wv-overlay"> 625 <div class="wv-overlay">
624 <div class="wv-overlay-bottomleft wvPrintExclude"> 626 <div class="wv-overlay-bottomleft wvPrintExclude">
625 <button class="btn btn-primary" @click="FitWidth()"><i class="fas fa-text-width"></i></button> 627 <button class="btn btn-primary" @click="FitWidth()"
626 <button class="btn btn-primary" @click="FitHeight()"><i class="fas fa-text-height"></i></button> 628 data-toggle="tooltip" data-title="Fit page width">
627 <button class="btn btn-primary" @click="ZoomIn()"><i class="fas fa-search-plus"></i></button> 629 <i class="fas fa-text-width"></i>
628 <button class="btn btn-primary" @click="ZoomOut()"><i class="fas fa-search-minus"></i></button> 630 </button>
629 <button class="btn btn-primary" @click="PreviousPage()"> 631 <button class="btn btn-primary" @click="FitHeight()"
632 data-toggle="tooltip" data-title="Fit page height">
633 <i class="fas fa-text-height"></i>
634 </button>
635 <button class="btn btn-primary" @click="ZoomIn()"
636 data-toggle="tooltip" data-title="Zoom in">
637 <i class="fas fa-search-plus"></i>
638 </button>
639 <button class="btn btn-primary" @click="ZoomOut()"
640 data-toggle="tooltip" data-title="Zoom out">
641 <i class="fas fa-search-minus"></i>
642 </button>
643 <button class="btn btn-primary" @click="PreviousPage()"
644 data-toggle="tooltip" data-title="Show previous page">
630 <i class="fa fa-chevron-circle-left"></i> 645 <i class="fa fa-chevron-circle-left"></i>
631 </button> 646 </button>
632 &nbsp;&nbsp;{{currentPage}} / {{countPages}}&nbsp;&nbsp; 647 &nbsp;&nbsp;{{currentPage}} / {{countPages}}&nbsp;&nbsp;
633 <button class="btn btn-primary" @click="NextPage()"> 648 <button class="btn btn-primary" @click="NextPage()"
649 data-toggle="tooltip" data-title="Show next page">
634 <i class="fa fa-chevron-circle-right"></i> 650 <i class="fa fa-chevron-circle-right"></i>
635 </button> 651 </button>
636 </div> 652 </div>
637 </div> 653 </div>
638 </div> 654 </div>