add log panel

dicomSummary.html

@@ -0,0 +1,286 @@
+<div class="container-fluid">
+    <h1>DICOM Summary</h1>
+
+    <div class="panel panel-default ">
+        <div class="panel-heading">
+            <h3 class="panel-title">Patient Information</h3>
+        </div>
+        <div class="panel-body">
+            <div class="row">
+                <div class="col-xs-6">
+                    Patient Name: <span data-dicom="x00100010"></span>
+                </div>
+                <div class="col-xs-6">
+                    Patient ID: <span data-dicom="x00100020"></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-6">
+                    Patient Birth Date: <span data-dicom="x00100030"></span>
+                </div>
+                <div class="col-xs-6">
+                    Patient Sex: <span data-dicom="x00100040"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <h3 class="panel-title">Study Information</h3>
+        </div>
+        <div class="panel-body">
+            <div class="row">
+                <div class="col-xs-6">
+                    Study Description: <span data-dicom="x00081030"></span>
+                </div>
+                <div class="col-xs-6">
+                    Protocol Name: <span data-dicom="x00181030"></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-6">
+                    Accession #: <span data-dicom="x00080050"></span>
+                </div>
+                <div class="col-xs-6">
+                    Study Id: <span data-dicom="x00200010"></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-6">
+                    Study Date: <span data-dicom="x00080020"></span>
+                </div>
+                <div class="col-xs-6">
+                    Study Time: <span data-dicom="x00080030"></span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <h3 class="panel-title">Series Information</h3>
+        </div>
+        <div class="panel-body">
+            <div class="row">
+                <div class="col-xs-6">
+                    Series Description: <span data-dicom="x0008103e"></span>
+                </div>
+                <div class="col-xs-6">
+                    Series #: <span data-dicom="x00200011"></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-6">
+                    Modality: <span data-dicom="x00080060"></span>
+                </div>
+                <div class="col-xs-6">
+                    Body Part: <span data-dicom="x00180015"></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-6">
+                    Series Date: <span data-dicom="x00080021"></span>
+                </div>
+                <div class="col-xs-6">
+                    Series Time: <span data-dicom="x00080031"></span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <h3 class="panel-title">Instance Information</h3>
+        </div>
+        <div class="panel-body">
+            <div class="row">
+                <div class="col-xs-6">
+                    Instance #: <span data-dicom="x00200013"></span>
+                </div>
+                <div class="col-xs-6">
+                    Acquisition #: <span data-dicom="x00200012"></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-6">
+                    Acquisition Date: <span data-dicom="x00080022"></span>
+                </div>
+                <div class="col-xs-6">
+                    Acquisition Time: <span data-dicom="x00080032"></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-6">
+                    Content Date: <span data-dicom="x00080023"></span>
+                </div>
+                <div class="col-xs-6">
+                    Content Time: <span data-dicom="x00080033"></span>
+                </div>
+            </div>
+
+
+
+        </div>
+    </div>
+
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <h3 class="panel-title">Image Information</h3>
+        </div>
+        <div class="panel-body">
+            <div class="row">
+                <div class="col-xs-6">
+                    Rows: <span data-dicomUint="x00280010"></span>
+                </div>
+                <div class="col-xs-6">
+                    Columns: <span data-dicomUint="x00280011"></span>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-xs-6">
+                    Photometric Interpretation: <span data-dicom="x00280004"></span>
+                </div>
+                <div class="col-xs-6">
+                    Image Type: <span data-dicom="x00080008"></span>
+                </div>
+
+            </div>
+
+            <div class="row">
+                <div class="col-xs-6">
+                    Bits Allocated: <span data-dicomUint="x00280100"></span>
+                </div>
+                <div class="col-xs-6">
+                    Bits Stored: <span data-dicomUint="x00280101"></span>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-xs-6">
+                    HighBit: <span data-dicomUint="x00280102"></span>
+                </div>
+                <div class="col-xs-6">
+                    Pixel Representation (0=us): <span data-dicomUint="x00280103"></span>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-xs-6">
+                    Rescale Slope: <span data-dicom="x00281053"></span>
+                </div>
+                <div class="col-xs-6">
+                    Rescale Intercept: <span data-dicom="x00281052"></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-6">
+                    Image Position Patient: <span data-dicom="x00200032"></span>
+                </div>
+                <div class="col-xs-6">
+                    Image Orientation Patient: <span data-dicom="x00200037"></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-6">
+                    Pixel Spacing: <span data-dicom="x00280030"></span>
+                </div>
+                <div class="col-xs-6">
+                    Samples Per Pixel: <span data-dicomUint="x00280002"></span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <h3 class="panel-title">Equipment Information</h3>
+        </div>
+        <div class="panel-body">
+            <div class="row">
+                <div class="col-xs-6">
+                    Manufacturer: <span data-dicom="x00080070"></span>
+                </div>
+                <div class="col-xs-6">
+                    Model: <span data-dicom="x00081090"></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-6">
+                    Station Name: <span data-dicom="x00081010"></span>
+                </div>
+                <div class="col-xs-6">
+                    AE Title: <span data-dicom="x00020016"></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-12">
+                    Institution Name: <span data-dicom="x00080080"></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-12">
+                    Software Version: <span data-dicom="x00181020"></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-12">
+                    Implementation Version Name: <span data-dicom="x00020013"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <h3 class="panel-title">UIDS</h3>
+        </div>
+        <div class="panel-body">
+            <div class="row">
+                <div class="col-xs-12">
+                    Study UID: <span data-dicom="x0020000d"></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-12">
+                    Series UID: <span data-dicom="x0020000e"></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-12">
+                    Instance UID: <span data-dicom="x00080018"></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-12">
+                    SOP Class UID: <span data-dicom="x00080016"></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-12">
+                    Transfer Syntax UID: <span data-dicom="x00020010"></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-12">
+                    Frame of Reference UID: <span data-dicom="x00200052"></span>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-12">
+                    WADO URL:
+                    <div style="overflow:auto">
+                        <span>http://localhost:3333/wado?requestType=WADO&studyUID=</span><span
+                            data-dicom="x0020000d"></span><span>&seriesUID=</span><span
+                            data-dicom="x0020000e"></span><span>&objectUID=</span><span
+                            data-dicom="x00080018"></span><span>&contentType=application%2Fdicom&transferSyntax=1.2.840.10008.1.2.1</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

dicomViewer.css

@@ -73,10 +73,17 @@
 
 #dicom-fullscreen-button {
   position: absolute;
-  transform: translate(0, -20%);
+  transform: translate(50%, -20%);
   right: 50%;
 }
 
+#dicom-collapse-button {
+  position: absolute;
+  transform: translate(0, -50%);
+  top: 50%;
+  right: 0;
+}
+
 #dicom-settings-panel {
   display: none;
   position: absolute;
@@ -92,6 +99,21 @@
   z-index: 999;
 }
 
+#dicom-log-panel {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding-left: 30px;
+  padding-right: 30px;
+  padding-bottom: 20px;
+  background-color: rgba(0, 0, 0, 0.8); /* Black w/ opacity */
+  width: 90%;
+  height: 90%;
+  z-index: 999;
+}
+
 #dicom-window-panel {
   position: absolute;
   top: 100%;
@@ -100,4 +122,14 @@
 }
 #dicom-window-panel:hover {
   opacity: 1;
+}
+
+#dicom-summary {
+  position: relative;
+  z-index: 999;
+  max-width: 100%;
+  height: 100%;
+  color: red;
+  top: -100%;
+  overflow: scroll
 }

dicomViewer.js

@@ -11,20 +11,28 @@ cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
 
 cornerstoneTools.init();
 
+let tool_state = {};
 
 
 export function loadCornerstone(main_element, db, images, annotations_to_load, load_as_stack = false) {
     // canvas-panel holds the enabled elements and all tools / menus
     main_element.append("<div class='canvas-panel'></div>");
+    main_element[0].dataset.collapsed = "none";
     $(".canvas-panel").append($("<div class='single-dicom-viewer'></div>"));
+    //$(".canvas-panel").append($("<div id='dicom-summary'></div>").load("dicomSummary.html"));
 
     let single_dicom_viewer = main_element.find(".single-dicom-viewer").get(0);
     console.log(single_dicom_viewer);
 
+    $(".canvas-panel").append($(`<div id='dicom-log-panel'>
+            <span id="dicom-log-close" class="close-button"><a href="#">close</a></span>
+    </div>`));
+
     // Add generic settings menus to canvas-panel
     $(".canvas-panel").append(
             $(`<div id='dicom-settings-panel'>
             <span id="dicom-settings-close" class="close-button"><a href="#">close</a></span>
+            <span class="view-log-button"><a href="#">view log</a></span>
             <h3>Image viewer settings:</h3>
 
             Primary
@@ -87,7 +95,8 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
     )
         .append($("<span id='dicom-toggle-mode-button' class='dicom-button' title='toggle stack/thumbnail view'>↻</span>"))
         .append($("<span id='dicom-fullscreen-button' class='dicom-button' title='toggle stack/thumbnail view'>⛶</span>"))
-        .append($("<span id='dicom-settings-button' class='dicom-button' title='open settings'>&#9881;</span>"));
+        .append($("<span id='dicom-settings-button' class='dicom-button' title='open settings'>&#9881;</span>"))
+        .append($("<span id='dicom-collapse-button' class='dicom-button' title='collapse viewer'>⇄</span>"));
 
     $(single_dicom_viewer).append(
         $(
@@ -137,6 +146,15 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
         $("#dicom-settings-panel").hide();
         e.preventDefault();
     });
+    $("#dicom-log-close").click(e => {
+        $("#dicom-log-panel").hide();
+        e.preventDefault();
+    });
+    $(".view-log-button").click(e => {
+        $("#dicom-settings-panel").hide();
+        $("#dicom-log-panel").show();
+        e.preventDefault();
+    });
     $("#dicom-settings-button").click(e => {
         $("#dicom-settings-panel").toggle();
     });
@@ -156,6 +174,20 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
         loadCornerstone(main_element, db, images, annotations_to_load, stack)
     });
 
+    $("#dicom-collapse-button").click(e => {
+        //$("#dicom-settings-panel").toggle();
+        //let stack = !load_as_stack;
+        if (main_element[0].dataset.collapsed == "none") {
+            main_element[0].dataset.collapsed = main_element.width();
+            main_element.width("50px");
+        } else {
+            main_element.width(main_element[0].dataset.collapsed);
+            main_element[0].dataset.collapsed = "none"
+        }
+        resizeHandler();
+        //loadCornerstone(main_element, db, images, annotations_to_load, stack)
+    });
+
     //let images = data["images"];
 
     // Make sure we have an array
@@ -180,15 +212,14 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
 
 
     function loadAnnotation(imageId, annotation) {
-        console.log("loadAnnotations", imageId, annotations);
+        console.log("loadAnnotations", imageId, annotation);
         const toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;
 
-        if (annotation == undefined || annotation.length < 1) { return }
+        if (annotation == undefined || annotation.length < 1 || annotation == [undefined]) { return }
 
-        console.log(annotation);
+        console.log("1234", annotation);
         let tool_state_no_id = JSON.parse(annotation);
 
-        let tool_state = {};
         tool_state[imageId] = tool_state_no_id;
 
         toolStateManager.restoreToolState(tool_state);
@@ -255,14 +286,15 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
             imageIds
         };
         //cornerstone.loadAndCacheImage(imageIds[0]).then(function(image) {
-        console.log("load and cache", imageIds[0])
+        //console.log("load and cache", imageIds[0])
         cornerstone.loadAndCacheImage(imageIds[0]).then(function (image) {
 
-            console.log("LOAD and cache, then");
+            //console.log("LOAD and cache, then", image);
             loadCornerstoneMainImage(single_dicom_viewer, image, stack, db, load_as_stack);
         })
             .catch((err, err2) => {
                 console.log(err);
+                $("#dicom-log-panel").append(err);
 
             });
     }
@@ -371,6 +403,7 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
 }
 
 function loadCornerstoneMainImage(element, image, stack, db, load_as_stack) {
+    dumpDataSet(image.data)
     console.log("loadCornerstoneMainImage")
     console.log("load as stack:", load_as_stack)
     // It is probably silly to do this each time we load a question
@@ -429,7 +462,7 @@ function loadCornerstoneMainImage(element, image, stack, db, load_as_stack) {
         },
     });
 
-    cornerstoneTools.setToolEnabled("ArrowAnnotate");
+    cornerstoneTools.setToolEnabledForElement(element, "ArrowAnnotate");
 
 
     let available_tools = [
@@ -465,9 +498,9 @@ function loadCornerstoneMainImage(element, image, stack, db, load_as_stack) {
 
     console.log(load_as_stack);
     if (load_as_stack) {
-        cornerstoneTools.setToolActive("StackScrollMouseWheel", { mouseButtonMask: 3 });
+        cornerstoneTools.setToolActiveForElement(element, "StackScrollMouseWheel", { mouseButtonMask: 3 });
     } else {
-        cornerstoneTools.setToolActive("ZoomMouseWheel", { mouseButtonMask: 3 });
+        cornerstoneTools.setToolActiveForElement(element, "ZoomMouseWheel", { mouseButtonMask: 3 });
     }
     //cornerstoneTools.setToolActive("Zoom", { mouseButtonMask: 4 });
     //cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 2 });
@@ -599,9 +632,10 @@ function selectThumbClick(evt) {
 
 export function registerPrimaryDicomInterface() {
     // Set mousetools based upon the selected options
+    let element = document.getElementsByClassName("single-dicom-viewer")[0];
     let selections = $("#primary-mouse-binding select");
     selections.each((i, option) => {
-        cornerstoneTools.setToolActive(option.value, {
+        cornerstoneTools.setToolActiveForElement(element, option.value, {
             mouseButtonMask: parseInt(option.dataset.button)
         });
     });
@@ -611,9 +645,10 @@ export function registerAltDicomInterface(e) {
     // Called when control is pressed
 
     // Set mousetools based upon the selected options
+    let element = document.getElementsByClassName("single-dicom-viewer")[0];
     let selections = $("#secondary-mouse-binding select");
     selections.each((i, option) => {
-        cornerstoneTools.setToolActive(option.value, {
+        cornerstoneTools.setToolActiveForElement(element, option.value, {
             mouseButtonMask: parseInt(option.dataset.button)
         });
     });
@@ -628,7 +663,8 @@ function changeMouseBinding(e, db) {
     // Directly activate primary tools (secondary will be activated when modifier
     // key is pressed
     if (mode == "0") {
-        cornerstoneTools.setToolActive(tool, { mouseButtonMask: parseInt(button) });
+        let element = document.getElementsByClassName("single-dicom-viewer")[0];
+        cornerstoneTools.setToolActiveForElement(element, tool, { mouseButtonMask: parseInt(button) });
     }
 
     dicom_settings_db.mouse_bindings.put({ button: button, mode: mode, tool: tool });
@@ -663,4 +699,43 @@ function urltoFile(url, filename, mimeType) {
         .then(function (buf) {
             return new File([buf], filename, { type: mimeType });
         });
-}
+}
+
+function dumpDataSet(dataSet)
+    {
+        $('span[data-dicom]').each(function(index, value)
+        {
+            var attr = $(value).attr('data-dicom');
+            var element = dataSet.elements[attr];
+            var text = "";
+            if(element !== undefined)
+            {
+                var str = dataSet.string(attr);
+                if(str !== undefined) {
+                    text = str;
+                }
+            }
+            $(value).text(text);
+        });
+
+        $('span[data-dicomUint]').each(function(index, value)
+        {
+            var attr = $(value).attr('data-dicomUint');
+            var element = dataSet.elements[attr];
+            var text = "";
+            if(element !== undefined)
+            {
+                if(element.length === 2)
+                {
+                    text += dataSet.uint16(attr);
+                }
+                else if(element.length === 4)
+                {
+                    text += dataSet.uint32(attr);
+                }
+            }
+
+            $(value).text(text);
+        });
+
+    }

index.html

@@ -24,7 +24,8 @@
     <main>
       <h1>A dicom viewer</h1>
 
-    <div id="dicom-viewer" class="dicom-viewer" style="height: 600px;" data-images='["test_images/IMG1.dcm","test_images/IMG1.dcm"]'></div>
+    <!-- <div id="dicom-viewer" class="dicom-viewer" style="height: 600px;" data-images='["test_images/IMG1.dcm","test_images/IMG1.dcm"]' data-annotations='[&quot;{\&quot;ArrowAnnotate\&quot;:{\&quot;data\&quot;:[{\&quot;visible\&quot;:true,\&quot;active\&quot;:false,\&quot;handles\&quot;:{\&quot;start\&quot;:{\&quot;x\&quot;:450.01249999999993,\&quot;y\&quot;:592.8031510416666,\&quot;highlight\&quot;:true,\&quot;active\&quot;:false},\&quot;end\&quot;:{\&quot;x\&quot;:283.38750000000005,\&quot;y\&quot;:343.976484375,\&quot;highlight\&quot;:true,\&quot;active\&quot;:false,\&quot;moving\&quot;:false},\&quot;textBox\&quot;:{\&quot;active\&quot;:false,\&quot;hasMoved\&quot;:false,\&quot;movesIndependently\&quot;:false,\&quot;drawnIndependently\&quot;:true,\&quot;allowedOutsideImage\&quot;:true,\&quot;hasBoundingBox\&quot;:true}},\&quot;uuid\&quot;:\&quot;51ca68b0-734c-4046-b3da-dd2886496fd5\&quot;,\&quot;invalidated\&quot;:true}]}}&quot;, null]'></div></div> -->
+    <div id="dicom-viewer" class="dicom-viewer" style="height: 600px;" data-images='["test_images/IMG1.dcm"]' data-annotations='[&quot;{\&quot;ArrowAnnotate\&quot;:{\&quot;data\&quot;:[{\&quot;visible\&quot;:true,\&quot;active\&quot;:false,\&quot;handles\&quot;:{\&quot;start\&quot;:{\&quot;x\&quot;:450.01249999999993,\&quot;y\&quot;:592.8031510416666,\&quot;highlight\&quot;:true,\&quot;active\&quot;:false},\&quot;end\&quot;:{\&quot;x\&quot;:283.38750000000005,\&quot;y\&quot;:343.976484375,\&quot;highlight\&quot;:true,\&quot;active\&quot;:false,\&quot;moving\&quot;:false},\&quot;textBox\&quot;:{\&quot;active\&quot;:false,\&quot;hasMoved\&quot;:false,\&quot;movesIndependently\&quot;:false,\&quot;drawnIndependently\&quot;:true,\&quot;allowedOutsideImage\&quot;:true,\&quot;hasBoundingBox\&quot;:true}},\&quot;uuid\&quot;:\&quot;51ca68b0-734c-4046-b3da-dd2886496fd5\&quot;,\&quot;invalidated\&quot;:true}]}}&quot;, null]'></div></div>
 
     </main>
     <footer></footer>

loader.js

@@ -2,7 +2,6 @@ import * as dicomViewer from "./dicomViewer.js"
 
 
 $(document).ready(function () {
-
   loadDicomViewer();
 });
 
@@ -15,21 +14,24 @@ function loadDicomViewer(images_to_load, annotations_to_load) {
 
     if (images_to_load != undefined) {
       images = images_to_load;
-    } else if (images.indexOf(",") > 0) {
+    } else {
       images = JSON.parse(images);
     }
 
     console.log(images);
 
     let annotations = single_dicom.dataset.annotations;
-    if (annotations != undefined) {
+    if (annotations_to_load != undefined) {
       annotations = annotations_to_load;
     } else if (annotations && annotations.indexOf(",") > 0) {
+    console.log("annon2", annotations)
       annotations = JSON.parse(annotations);
     } else {
       annotations = undefined;
     }
 
+    console.log("annon1", annotations)
+
     let load_as_stack;
     if (images.length > 5) {
       load_as_stack = true;