library/dicom_frame.php

   1 <?php
   2
   3 /**
   4  * Dicom viewer wrapper script for documents
   5  *
   6  * @package OpenEMR
   7  * @link    https://www.open-emr.org
   8  * @author    Victor Kofia <https://kofiav.com> 'Viewer'
   9  * @author    Jerry Padgett <sjpadgett@gmail.com> 'Viewer wrapper'
  10  * @copyright Copyright (c) 2017-2018 Victor Kofia <https://kofiav.com>
  11  * @copyright Copyright (c) 2018-2020 Jerry Padgett <sjpadgett@gmail.com>
  12  * @license   https://github.com/openemr/openemr/blob/master/LICENSE GNU General Public License 3
  13  */
  14
  15 /* Warning: This script wraps the Dicom viewer which is HTML5 compatible only and bootstrap styling
  16 *  should not be used inside this script due to style conflicts with viewer, namely, hidden class.
  17 */
  18
  19 require_once('../interface/globals.php');
  20
  21 use OpenEMR\Common\Acl\AclMain;
  22 use OpenEMR\Common\Csrf\CsrfUtils;
  23 use OpenEMR\Common\Twig\TwigContainer;
  24 use OpenEMR\Core\Header;
  25
  26 if (!AclMain::aclCheckCore('patients', 'docs')) {
  27     echo (new TwigContainer(null, $GLOBALS['kernel']))->getTwig()->render('core/unauthorized.html.twig', ['pageTitle' => xl("Dicom Viewer")]);
  28     exit;
  29 }
  30
  31 $web_path = $_REQUEST['web_path'] ?? null;
  32 if ($web_path) {
  33     $patid = $_REQUEST['patient_id'] ?? null;
  34     $docid = isset($_REQUEST['document_id']) ? $_REQUEST['document_id'] : ($_REQUEST['doc_id'] ?? null);
  35     $d = new Document(attr($docid));
  36     $type = '.dcm';
  37     if ($d->get_mimetype() == 'application/dicom+zip') {
  38         $type = '.zip';
  39     }
  40     $csrf = attr(CsrfUtils::collectCsrfToken());
  41     $state_url = $GLOBALS['web_root'] . "/library/ajax/upload.php";
  42     $web_path = attr($web_path) . '&retrieve&patient_id=' . attr_url($patid) . '&document_id=' . attr_url($docid) . '&as_file=false&type=' . attr_url($type);
  43 }
  44 ?>
  45 <!DOCTYPE html>
  46 <html>
  47 <head>
  48     <title><?php echo xlt("Dicom Viewer"); ?></title>
  49
  50     <?php Header::setupHeader(['dwv', 'i18next', 'i18next-xhr-backend', 'i18next-browser-languagedetector', 'jszip', 'magic-wand', 'konva']); ?>
  51     <script type="text/javascript" src="<?php echo $GLOBALS['assets_static_relative']; ?>/flot/dist/es5/jquery.flot.js"></script>
  52     <!-- Local (dwv) -->
  53     <script src="<?php echo $GLOBALS['web_root'] ?>/library/js/dwv/gui/browser.js"></script>
  54     <script src="<?php echo $GLOBALS['web_root'] ?>/library/js/dwv/gui/colourMap.js"></script>
  55     <script src="<?php echo $GLOBALS['web_root'] ?>/library/js/dwv/gui/custom.js"></script>
  56     <script src="<?php echo $GLOBALS['web_root'] ?>/library/js/dwv/gui/dropboxLoader.js"></script>
  57     <script src="<?php echo $GLOBALS['web_root'] ?>/library/js/dwv/gui/filter.js"></script>
  58     <script src="<?php echo $GLOBALS['web_root'] ?>/library/js/dwv/gui/generic.js"></script>
  59     <script src="<?php echo $GLOBALS['web_root'] ?>/library/js/dwv/gui/undo.js"></script>
  60     <script src="<?php echo $GLOBALS['web_root'] ?>/library/js/dwv/gui/help.js"></script>
  61     <script src="<?php echo $GLOBALS['web_root'] ?>/library/js/dwv/gui/html.js"></script>
  62     <script src="<?php echo $GLOBALS['web_root'] ?>/library/js/dwv/gui/infoController.js"></script>
  63     <script src="<?php echo $GLOBALS['web_root'] ?>/library/js/dwv/gui/infoOverlay.js"></script>
  64     <script src="<?php echo $GLOBALS['web_root'] ?>/library/js/dwv/gui/loader.js"></script>
  65     <script src="<?php echo $GLOBALS['web_root'] ?>/library/js/dwv/gui/tools.js"></script>
  66     <script src="<?php echo $GLOBALS['web_root'] ?>/library/js/dwv/gui/plot.js"></script>
  67     <!-- i18n dwv wrapper -->
  68     <script src="<?php echo $GLOBALS['web_root'] ?>/library/js/dwv/dwv_i18n.js"></script>
  69     <!-- Launch the app -->
  70     <script src="<?php echo $GLOBALS['web_root'] ?>/library/js/dwv/dicom_gui.js"></script>
  71     <script src="<?php echo $GLOBALS['web_root'] ?>/library/js/dwv/dicom_launcher.js"></script>
  72 </head>
  73 <style type="text/css">
  74     body {
  75         background-color: #555;
  76         color: #fff;
  77     }
  78
  79     button, input, li, table {
  80         margin-top: 0.2em;
  81     }
  82
  83     li button, li input {
  84         margin: 0;
  85     }
  86
  87     .container-fluid {
  88         display: flex;
  89         flex-direction: column;
  90     }
  91
  92     #pageHeader {
  93         display: flex;
  94         flex-direction: row;
  95         justify-content: space-between;
  96         padding: .175rem;
  97     }
  98
  99     #pageHeader h1, h2, h3, h5, h6 {
 100         margin: 0;
 101         color: #fff;
 102     }
 103
 104     #pageHeader a {
 105         color: #ddf;
 106     }
 107
 108     #pageHeader .toolbar {
 109     }
 110
 111     #pageMain {
 112         display: flex;
 113         flex-direction: row;
 114         justify-content: center;
 115     }
 116
 117     /* Layers */
 118     .layerContainer {
 119         position: relative;
 120         margin: .625rem;
 121         width: 512px;
 122         height: 512px;
 123     }
 124
 125     .imageLayer {
 126         position: absolute;
 127     }
 128
 129     .drawDiv {
 130         position: absolute;
 131         pointer-events: none;
 132     }
 133
 134     /* drag&drop */
 135     .dropBox {
 136     }
 137
 138     .dropBoxBorder {
 139         margin: 20px auto;
 140         border: 5px dashed #ccc;
 141     }
 142
 143     .dropBoxBorder.hover {
 144         margin: 20px auto;
 145         border: 5px dashed #cc0;
 146     }
 147
 148     /* toolbar */
 149     .toolList ul {
 150         padding: 0;
 151     }
 152
 153     .toolList li {
 154         list-style-type: none;
 155     }
 156
 157     /* info */
 158     .infoLayer ul {
 159         margin: 0;
 160         padding: 2px;
 161         list-style-type: none;
 162     }
 163
 164     .infoLayer li {
 165         margin-top: 0;
 166     }
 167
 168     .infoLayer canvas {
 169         margin: 0;
 170         padding: 2px;
 171     }
 172
 173     .info {
 174         color: #cde;
 175         text-shadow: 1px 1px #000;
 176         font-size: 80%;
 177     }
 178
 179     .infoc {
 180         color: #ff0;
 181         text-shadow: 1px 1px #000;
 182         font-size: 120%;
 183     }
 184
 185     .infotl {
 186         position: absolute;
 187         top: 0;
 188         left: 0;
 189         text-align: left;
 190         text-shadow: 0 1px 0 #000;
 191     }
 192
 193     .infotc {
 194         position: absolute;
 195         top: 0;
 196         left: 50%;
 197         right: 50%;
 198         text-align: center;
 199         text-shadow: 0 1px 0 #000;
 200     }
 201
 202     .infotr {
 203         position: absolute;
 204         top: 0;
 205         right: 0;
 206         text-align: right;
 207         text-shadow: 0 1px 0 #000;
 208     }
 209
 210     .infocl {
 211         position: absolute;
 212         bottom: 50%;
 213         left: 0;
 214         text-align: left;
 215         text-shadow: 0 1px 0 #000;
 216     }
 217
 218     .infocr {
 219         position: absolute;
 220         bottom: 50%;
 221         right: 2px;
 222         text-align: right;
 223         text-shadow: 0 1px 0 #000;
 224     }
 225
 226     .infobl {
 227         position: absolute;
 228         bottom: 0;
 229         left: 0;
 230         text-align: left;
 231         text-shadow: 0 1px 0 #000;
 232     }
 233
 234     .infobc {
 235         position: absolute;
 236         bottom: 0;
 237         left: 50%;
 238         right: 50%;
 239         text-align: center;
 240         text-shadow: 0 1px 0 #000;
 241     }
 242
 243     .infobr {
 244         position: absolute;
 245         bottom: 0;
 246         right: 0;
 247         text-align: right;
 248         text-shadow: 0 1px 0 #000;
 249     }
 250
 251     .plot {
 252         position: absolute;
 253         width: 100px;
 254         height: 50px;
 255         bottom: 15px;
 256         right: 0;
 257     }
 258
 259     /* tag list */
 260     table.tagsTable {
 261         border-collapse: collapse;
 262         background-color: #fff;
 263         color: #000
 264     }
 265
 266     table.tagsTable thead {
 267         background-color: #000;
 268         color: #fff
 269     }
 270
 271     table.tagsTable thead th {
 272         text-transform: uppercase;
 273         font-weight: bold;
 274         opacity: 0.9;
 275     }
 276
 277     table.tagsTable tr:nth-child(even) {
 278         background-color: #c2c2c2;
 279     }
 280
 281     table.drawsTable {
 282         border-collapse: collapse;
 283     }
 284
 285     table.drawsTable td {
 286         vertical-align: middle;
 287     }
 288
 289     table.drawsTable thead th {
 290         text-transform: uppercase;
 291         font-weight: bold;
 292         opacity: 0.5;
 293     }
 294
 295     .highlighted {
 296         background: #feeeac;
 297     }
 298
 299     .tags {
 300         background-color: #fff;
 301         color: #000;
 302         padding: 1rem 1.25rem;
 303     }
 304
 305     .tags form {
 306         width: 45%;
 307     }
 308
 309     /* draw list */
 310     .drawList tr:nth-child(even) {
 311         background-color: #333;
 312     }
 313
 314     /* history list */
 315     div.history {
 316         display: none;
 317     }
 318
 319     .history_list {
 320         width: 100%;
 321     }
 322
 323     /* help */
 324     .help {
 325         padding: 1rem 1.25rem;
 326     }
 327
 328     .popup {
 329         position: absolute;
 330         top: 15%;
 331         left: 15%;
 332         visibility: hidden;
 333         transform: scale(1.05);
 334         transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
 335         z-index: 1000;
 336     }
 337
 338     #loaderlist.popup {
 339         top: 50%;
 340         left: 50%;
 341         z-index: 1010;
 342     }
 343
 344     .loaderSelect {
 345         display: inline;
 346         width: 50%;
 347     }
 348
 349     #loaderlist div.popup-content {
 350         position: absolute;
 351         top: 50%;
 352         left: 50%;
 353         transform: translate(-50%, -50%);
 354         background-color: white;
 355         padding: 1rem 1.25rem;
 356         width: 24rem;
 357         border-radius: 0.5rem;
 358         padding-left: .325rem;
 359     }
 360
 361     .lg div.popup-content {
 362         position: static;
 363         border: 2px solid #fff;
 364         width: 75vw;
 365         border-radius: 0.5rem;
 366         overflow: auto;
 367         height: 75vh;
 368         background-color: white;
 369     }
 370
 371     #helpPopup div.popup-content {
 372         background-color: black;
 373     }
 374
 375     .close-button {
 376         background: #ff5d5a;
 377         position: absolute;
 378         line-height: 1.5rem;
 379         text-align: center;
 380         right: 20px;
 381         width: 1.5rem;
 382         height: 1.5rem;
 383         cursor: pointer;
 384         z-index: 1011;
 385     }
 386
 387     .close-button:hover {
 388         background-color: lightcoral;
 389     }
 390
 391     .show-popup {
 392         opacity: 1;
 393         visibility: visible;
 394         transform: scale(1.0);
 395         transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
 396     }
 397
 398     #progressbar {
 399         width: 0;
 400         max-width: 92%;
 401         height: 1.25rem;
 402         background-color: #4CAF50;
 403     }
 404
 405     #pageHeader h2 em {
 406         font-size: 14px;
 407         color: red;
 408     }
 409
 410     div.toolList {
 411         margin: .325rem 0 .325rem;
 412     }
 413 </style>
 414 <body>
 415     <!-- DWV -->
 416     <div id="dwv" class="container-fluid" src='<?php echo $web_path ?>'>
 417     <?php if ($web_path) { ?>
 418         <input type="hidden" id="state_url" value='<?php echo $state_url ?>' />
 419         <input type="hidden" id="csrf" value='<?php echo $csrf ?>' />
 420         <input type="hidden" id="doc_id" value='<?php echo attr($docid) ?>'' />
 421     <?php } ?>
 422         <div id="pageHeader">
 423             <!-- Title -->
 424             <h2>DICOM Viewer<span>&nbsp;<em>( Not for Diagnostics )</em></h2>
 425             </span>
 426             <span class="editspan"></span>
 427             <div class="toolbar"></div>
 428         </div><!-- /pageHeader -->
 429         <div id="pageMain">
 430             <!-- get state json data if file -->
 431             <div class="openData" title="File">
 432                 <!-- Open image files -->
 433                 <div class="popup" id="loaderlist">
 434                     <div class="popup-content">
 435                         <span class="close-button" onclick="toggle('loaderlist');">&times;</span>
 436                         <br />
 437                         <div class="openData" title="File">
 438                             <div class="loaderlist"></div>
 439                             <div id="progressbar"></div>
 440                         </div>
 441                     </div>
 442                 </div>
 443             </div>
 444             <!-- Toolbox -->
 445             <div class="toolList" title="Toolbox"></div>
 446             <!-- History -->
 447             <div class="history" title="History"></div>
 448             <!-- Tags -->
 449             <div class="popup lg" id="tagsPopup">
 450                 <div class="popup-content">
 451                     <span class="close-button" onclick="toggle('tagsPopup');">&times;</span>
 452                     <div class="tags" title="Tags">Please load a DICOM study to view image tags.</div>
 453                 </div>
 454             </div>
 455             <!-- Help -->
 456             <div class="popup lg" id="helpPopup">
 457                 <div class="popup-content">
 458                     <span class="close-button" onclick="toggle('helpPopup');">&times;</span>
 459                     <div class="help" title="Help"></div>
 460                 </div>
 461             </div>
 462             <!-- Layer Container -->
 463             <div class="layerDialog" title="Image">
 464                 <div class="layerContainer">
 465                     <div class="dropBox dropBoxBorder"></div>
 466                     <canvas class="imageLayer">Only for HTML5 compatible browsers...</canvas>
 467                     <div class="drawDiv"></div>
 468                     <div class="infoLayer">
 469                         <div class="infotl"></div>
 470                         <div class="infotc"></div>
 471                         <div class="infotr"></div>
 472                         <div class="infocl"></div>
 473                         <div class="infocr"></div>
 474                         <div class="infobl"></div>
 475                         <div class="infobc"></div>
 476                         <div class="infobr" style="bottom: 64px;"></div>
 477                         <div class="plot"></div>
 478                     </div><!-- /infoLayer -->
 479                 </div><!-- /layerContainer -->
 480             </div><!-- /layerDialog -->
 481             <!-- DrawList -->
 482             <div class="drawList" title="Draw list"></div>
 483         </div><!-- /pageMain -->
 484     </div><!-- /dwv -->
 485
 486 </body>
 487 </html>