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

.

Browse Source
This commit is contained in:
Ross
2021-10-31 18:09:50 +00:00
parent edae9165b5
commit d6060df915
5 changed files with 391 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dicomViewer.js
+374 -57
View File
@@ -19,7 +19,295 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
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"));
$(".canvas-panel").append($(`<div id='dicom-summary-panel'>
<span id="dicom-summary-close" class="close-button"><a href="#">close</a></span>
<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>
</div>`));
let single_dicom_viewer = main_element.find(".single-dicom-viewer").get(0);
console.log(single_dicom_viewer);
@@ -92,18 +380,12 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
</div>
</div>`)
)
)
.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-collapse-button' class='dicom-button' title='collapse viewer'>⇄</span>"));
$(single_dicom_viewer).append(
$(
"<div id='dicom-overlay'>Image <span id='current_image_number'></span> of <span id='total_image_number'></span><br />wc: <span id='wc'></span> ww: <span id='ww'></span></div>"
)
)
// Add buttons
.append($("<span id='dicom-collapse-button' class='dicom-button' title='collapse viewer'>⇄</span>"))
.append($("<span id='dicom-info-button' class='dicom-button' title='view image info'>🛈</span>"))
.append(
$(`<div id='dicom-window-panel'>
<button id='window-btn-abdomen'>Abdomen</button>
@@ -116,6 +398,13 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
</div>`)
);
$(single_dicom_viewer).append(
$(
"<div id='dicom-overlay'>Image <span id='current_image_number'></span> of <span id='total_image_number'></span><br />wc: <span id='wc'></span> ww: <span id='ww'></span></div>"
)
);
// Add buttons
let window_presets = {
"window-btn-abdomen": [400, 50],
"window-btn-liver": [150, 30],
@@ -139,6 +428,8 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
cornerstone.setViewport(single_dicom_viewer, viewport);
e.preventDefault();
e.stopPropagation();
})
})
@@ -146,6 +437,10 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
$("#dicom-settings-panel").hide();
e.preventDefault();
});
$("#dicom-summary-close").click(e => {
$("#dicom-summary-panel").hide();
e.preventDefault();
});
$("#dicom-log-close").click(e => {
$("#dicom-log-panel").hide();
e.preventDefault();
@@ -158,6 +453,9 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
$("#dicom-settings-button").click(e => {
$("#dicom-settings-panel").toggle();
});
$("#dicom-info-button").click(e => {
$("#dicom-summary-panel").toggle();
});
$("#dicom-fullscreen-button").click(e => {
if (!document.fullscreenElement) {
$(".canvas-panel").get(0).requestFullscreen().catch(err => {
@@ -180,9 +478,13 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
if (main_element[0].dataset.collapsed == "none") {
main_element[0].dataset.collapsed = main_element.width();
main_element.width("50px");
$("#dicom-window-panel").hide();
$(e.target).addClass("dicom-button-highlight");
} else {
main_element.width(main_element[0].dataset.collapsed);
main_element[0].dataset.collapsed = "none"
$("#dicom-window-panel").show();
$(e.target).removeClass("dicom-button-highlight");
}
resizeHandler();
//loadCornerstone(main_element, db, images, annotations_to_load, stack)
@@ -215,7 +517,9 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
//console.log("loadAnnotations", imageId, annotation);
const toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;
if (annotation == undefined || annotation.length < 1 || annotation == [undefined]) { return }
if (annotation == undefined || annotation.length < 1 || annotation == [undefined]) {
return
}
let tool_state_no_id = JSON.parse(annotation);
@@ -288,10 +592,9 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
//console.log("load and cache", imageIds[0])
cornerstone.loadAndCacheImage(imageIds[0]).then(function (image) {
//console.log("LOAD and cache, then", image);
console.log(oeu)
loadCornerstoneMainImage(single_dicom_viewer, image, stack, db, load_as_stack);
})
//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("<br/>").append(err.stack);
@@ -443,8 +746,8 @@ function loadCornerstoneMainImage(element, image, stack, db, load_as_stack) {
cornerstoneTools.addToolForElement(element, ArrowAnnotateTool, {
configuration: {
getTextCallback: () => { },
changeTextCallback: () => { },
getTextCallback: () => {},
changeTextCallback: () => {},
allowEmptyLabel: true,
renderDashed: false,
drawHandles: false,
@@ -498,9 +801,13 @@ function loadCornerstoneMainImage(element, image, stack, db, load_as_stack) {
console.log(load_as_stack);
if (load_as_stack) {
cornerstoneTools.setToolActiveForElement(element, "StackScrollMouseWheel", { mouseButtonMask: 3 });
cornerstoneTools.setToolActiveForElement(element, "StackScrollMouseWheel", {
mouseButtonMask: 3
});
} else {
cornerstoneTools.setToolActiveForElement(element, "ZoomMouseWheel", { mouseButtonMask: 3 });
cornerstoneTools.setToolActiveForElement(element, "ZoomMouseWheel", {
mouseButtonMask: 3
});
}
//cornerstoneTools.setToolActive("Zoom", { mouseButtonMask: 4 });
//cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 2 });
@@ -565,7 +872,11 @@ function resizeHandler() {
}
async function loadPrimaryDicomInterface(db) {
const bindings = await dicom_settings_db.mouse_bindings.where({ mode: "0" }).toArray().catch((err) => { console.log(err); });
const bindings = await dicom_settings_db.mouse_bindings.where({
mode: "0"
}).toArray().catch((err) => {
console.log(err);
});
bindings.forEach(function (b) {
let sel = $("#primary-mouse-binding select[data-button=" + b.button + "]").get(
0
@@ -577,7 +888,11 @@ async function loadPrimaryDicomInterface(db) {
}
async function loadAltDicomInterface(db) {
const bindings = await dicom_settings_db.mouse_bindings.where({ mode: "1" }).toArray().catch((err) => { console.log(err); });
const bindings = await dicom_settings_db.mouse_bindings.where({
mode: "1"
}).toArray().catch((err) => {
console.log(err);
});
bindings.forEach(function (b) {
let sel = $(
"#secondary-mouse-binding select[data-button=" + b.button + "]"
@@ -590,6 +905,7 @@ async function loadAltDicomInterface(db) {
function onImageRendered(e) {
const eventData = e.detail;
//console.log(e);
dumpDataSet(eventData.image.data)
// Update ww/wl
$("#wc").text(Math.round(eventData.viewport.voi.windowCenter));
@@ -664,10 +980,16 @@ function changeMouseBinding(e, db) {
// key is pressed
if (mode == "0") {
let element = document.getElementsByClassName("single-dicom-viewer")[0];
cornerstoneTools.setToolActiveForElement(element, tool, { mouseButtonMask: parseInt(button) });
cornerstoneTools.setToolActiveForElement(element, tool, {
mouseButtonMask: parseInt(button)
});
}
dicom_settings_db.mouse_bindings.put({ button: button, mode: mode, tool: tool });
dicom_settings_db.mouse_bindings.put({
button: button,
mode: mode,
tool: tool
});
//db.mouse_bindings.put({button: button, mode: mode, tool: tool}).then(loadPrimaryDicomInterface());
}
@@ -691,51 +1013,46 @@ export function selectThumb(new_index) {
});
//c = cornerstone.getEnabledElement(dicom_element)
}
function urltoFile(url, filename, mimeType) {
return fetch(url)
.then(function (res) {
return res.arrayBuffer();
})
.then(function (buf) {
return new File([buf], filename, { type: mimeType });
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;
}
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);
});
}
$(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);
}
$('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);
});
$(value).text(text);
});
}
}