ross/dv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add log panel

Browse Source
This commit is contained in:
Ross
2021-10-30 10:26:18 +01:00
parent 11c06cd538
commit c51f72dcea
5 changed files with 415 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dicomSummary.html
+286
View File
@@ -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
+33 -1
View File
@@ -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
+89 -14
View File
@@ -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
+2 -1
View File
@@ -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
+5 -3
View File
@@ -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;