Mercurial > hg > orthanc-stone
diff Applications/StoneWebViewer/WebApplication/index.html @ 1652:fa9e6bf84958
integrating pdf.js into Stone Web viewer
author | Sebastien Jodogne <s.jodogne@gmail.com> |
---|---|
date | Mon, 16 Nov 2020 20:47:53 +0100 |
parents | c476b0d5e59c |
children | 39137da83b0b |
line wrap: on
line diff
--- a/Applications/StoneWebViewer/WebApplication/index.html Fri Nov 13 18:29:17 2020 +0100 +++ b/Applications/StoneWebViewer/WebApplication/index.html Mon Nov 16 20:47:53 2020 +0100 @@ -586,6 +586,10 @@ <div v-if="status == 'waiting'" class="wvPaneOverlay"> [ drop a series here ] </div> + + <div v-if="status == 'pdf'" > + <pdf-viewer v-bind:prefix="canvasId + '-pdf'"></pdf-viewer> + </div> <!--div v-if="status == 'video'" class="wvPaneOverlay"> <video class="wvVideo" autoplay="" loop="" controls="" preload="auto" type="video/mp4" @@ -606,14 +610,45 @@ </script> + <script type="text/x-template" id="pdf-viewer"> + <div style="position:absolute; left:0; top:0; width:100%; height:100%;"> + <!-- "line-height: 0px" to fit height: https://stackoverflow.com/a/12616341/881731 --> + <div v-bind:id="prefix + '-container'" + style="position: absolute; left: 0; top: 0; width:100%;height:100%;overflow:auto;line-height: 0px;"> + <canvas v-bind:id="prefix + '-canvas'" + style="position: absolute; top:0px; left:0px;"></canvas> + </div> + + <div class="wv-overlay"> + <div class="wv-overlay-bottomleft wvPrintExclude"> + <button class="btn btn-primary" @click="FitWidth()"><i class="fas fa-text-width"></i></button> + <button class="btn btn-primary" @click="FitHeight()"><i class="fas fa-text-height"></i></button> + <button class="btn btn-primary" @click="ZoomIn()"><i class="fas fa-search-plus"></i></button> + <button class="btn btn-primary" @click="ZoomOut()"><i class="fas fa-search-minus"></i></button> + <button class="btn btn-primary" @click="PreviousPage()"> + <i class="fa fa-chevron-circle-left"></i> + </button> + {{currentPage}} / {{countPages}} + <button class="btn btn-primary" @click="NextPage()"> + <i class="fa fa-chevron-circle-right"></i> + </button> + </div> + </div> + </div> + </script> + + + <script src="js/jquery-3.4.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/vue.min.js"></script> <script src="js/axios.min.js"></script> + <script src="js/pdf.js"></script> <script src="ua-parser.js"></script> <script src="stone.js"></script> + <script src="pdf-viewer.js"></script> <!-- Must be before inclusion of "app.js" --> <script src="app.js"></script> <script src="print.js"></script> </body>