view WebApplication/viewer.html @ 187:4b9da483ae4d

Disable pinch zoom on mobile devices
author Sebastien Jodogne <s.jodogne@gmail.com>
date Thu, 22 Mar 2018 17:03:48 +0100
parents 4ac039ed55bd
children
line wrap: on
line source

<!doctype html>

<html lang="us">
  <head>
    <meta charset="utf-8" />

    <!-- Disable pinch zoom on mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="HandheldFriendly" content="true" />
    
    <title>Orthanc Web Viewer</title>
    <link href="../libs/jquery-ui.min.css" rel="stylesheet" />
    <link href="../libs/jquery-ui.theme.min.css" rel="stylesheet" />
    <link href="../libs/cornerstone.css" rel="stylesheet" />
    <link href="../libs/jquery.jspanel.min.css" rel="stylesheet" />
    <link href="viewer.css" rel="stylesheet" />
  </head>
  <body>
    <div id="dicomImageWrapper"
         class="cornerstone-enabled-image"
         oncontextmenu="return false"
         unselectable="on"
         onselectstart="return false;"
         onmousedown="return false;">
      <div id="dicomImage" oncontextmenu="return false" />
    </div>

    <div id="topleft">
      <button id="open-toolbar"></button>
      &nbsp;<img id="unstable" 
                 style="display: none"
                 src="images/throbber.gif" 
                 title="Still receiving images for this series. Wait a bit, then refresh this page." />
    </div>

    <div id="topright">Render Time:</div>
    <div id="bottomright">Zoom:</div>
    <div id="bottomleft">WW/WC:</div>
    <div id="bottomcenter" class="alert">Not for diagnostic purpose</div>
    <div id="bottom">
      <div id="slider"></div>
    </div>

    <div id="toolbar-content" style="display:none">
      View<br/>
      <div class="toolbar-view">
        <button title="Series information"></button>
        <button title="Reverse contrast"></button>
        <button title="Interpolation"></button>
        <button title="Download DICOM"></button>
      </div>
      Zoom<br/>
      <div class="toolbar-zoom">
        <button title="Adjust"></button>
        <button title="Zoom in"></button>
        <button title="Zoom out"></button>
      </div>
      Windowing<br/>
      <div class="toolbar-windowing">
        <button title="Default windowing"></button>
        <button title="Stretch contrast"></button>
        <button title="Lung"></button>
        <button title="Bone"></button>
      </div>
      Quality<br/>
      <div class="toolbar-quality">
        <button title="Low quality"></button>
        <button title="Medium quality"></button>
        <button title="Best quality (lossless)"></button>
      </div>
    </div>

    <!-- jQuery, jQuery UI and jsPanel -->
    <script src="../libs/jquery.js" type="text/javascript"></script>
    <script src="../libs/jquery-ui.min.js" type="text/javascript"></script>
    <script src="../libs/mobile-detect.min.js" type="text/javascript"></script>
    <script src="../libs/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
    <script src="../libs/jquery.jspanel.min.js" type="text/javascript"></script>

    <!-- Cornerstone -->
    <script src="../libs/cornerstone.min.js" type="text/javascript"></script>

    <!-- For zlib (deflate) and JPEG decompression -->
    <script src="../libs/pako_inflate.min.js" type="text/javascript"></script>
    <script src="jpeg-decoder.js" type="text/javascript"></script>

    <script src="../libs/url.min.js" type="text/javascript"></script>
    <script src="viewer.js" type="text/javascript"></script>
  </body>
</html>