diff --git a/dicomSummary.html b/dicomSummary.html deleted file mode 100644 index 1e20342..0000000 --- a/dicomSummary.html +++ /dev/null @@ -1,286 +0,0 @@ -
-

DICOM Summary

- -
-
-

Patient Information

-
-
-
-
- Patient Name: -
-
- Patient ID: -
-
-
-
- Patient Birth Date: -
-
- Patient Sex: -
-
-
-
- -
-
-

Study Information

-
-
-
-
- Study Description: -
-
- Protocol Name: -
-
-
-
- Accession #: -
-
- Study Id: -
-
-
-
- Study Date: -
-
- Study Time: -
-
- -
-
- -
-
-

Series Information

-
-
-
-
- Series Description: -
-
- Series #: -
-
-
-
- Modality: -
-
- Body Part: -
-
-
-
- Series Date: -
-
- Series Time: -
-
- -
-
- -
-
-

Instance Information

-
-
-
-
- Instance #: -
-
- Acquisition #: -
-
-
-
- Acquisition Date: -
-
- Acquisition Time: -
-
-
-
- Content Date: -
-
- Content Time: -
-
- - - -
-
- -
-
-

Image Information

-
-
-
-
- Rows: -
-
- Columns: -
-
- -
-
- Photometric Interpretation: -
-
- Image Type: -
- -
- -
-
- Bits Allocated: -
-
- Bits Stored: -
-
- -
-
- HighBit: -
-
- Pixel Representation (0=us): -
-
- -
-
- Rescale Slope: -
-
- Rescale Intercept: -
-
-
-
- Image Position Patient: -
-
- Image Orientation Patient: -
-
-
-
- Pixel Spacing: -
-
- Samples Per Pixel: -
-
- -
-
- -
-
-

Equipment Information

-
-
-
-
- Manufacturer: -
-
- Model: -
-
-
-
- Station Name: -
-
- AE Title: -
-
-
-
- Institution Name: -
-
-
-
- Software Version: -
-
-
-
- Implementation Version Name: -
-
-
-
- -
-
-

UIDS

-
-
-
-
- Study UID: -
-
-
-
- Series UID: -
-
-
-
- Instance UID: -
-
-
-
- SOP Class UID: -
-
-
-
- Transfer Syntax UID: -
-
-
-
- Frame of Reference UID: -
-
-
-
- WADO URL: -
- http://localhost:3333/wado?requestType=WADO&studyUID=&seriesUID=&objectUID=&contentType=application%2Fdicom&transferSyntax=1.2.840.10008.1.2.1 -
-
-
-
-
-
\ No newline at end of file diff --git a/dicomViewer.css b/dicomViewer.css index b10e8d0..91a514a 100644 --- a/dicomViewer.css +++ b/dicomViewer.css @@ -61,6 +61,11 @@ opacity: 100%; } +.dicom-button-highlight { + opacity: 50%; + color: lightblue; +} + #dicom-toggle-mode-button { position: absolute; left: 0; @@ -84,6 +89,13 @@ right: 0; } +#dicom-info-button { + position: absolute; + transform: translate(0, -75%); + right: 0; + top: 100%; +} + #dicom-settings-panel { display: none; position: absolute; @@ -124,12 +136,13 @@ opacity: 1; } -#dicom-summary { +#dicom-summary-panel { position: relative; z-index: 999; max-width: 100%; height: 100%; color: red; top: -100%; - overflow: scroll + overflow: scroll; + display: none; } \ No newline at end of file diff --git a/dicomViewer.js b/dicomViewer.js index f164284..2281040 100644 --- a/dicomViewer.js +++ b/dicomViewer.js @@ -19,7 +19,295 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l main_element.append("
"); main_element[0].dataset.collapsed = "none"; $(".canvas-panel").append($("
")); - //$(".canvas-panel").append($("
").load("dicomSummary.html")); + $(".canvas-panel").append($(`
+ close +
+

DICOM Summary

+ +
+
+

Patient Information

+
+
+
+
+ Patient Name: +
+
+ Patient ID: +
+
+
+
+ Patient Birth Date: +
+
+ Patient Sex: +
+
+
+
+ +
+
+

Study Information

+
+
+
+
+ Study Description: +
+
+ Protocol Name: +
+
+
+
+ Accession #: +
+
+ Study Id: +
+
+
+
+ Study Date: +
+
+ Study Time: +
+
+ +
+
+ +
+
+

Series Information

+
+
+
+
+ Series Description: +
+
+ Series #: +
+
+
+
+ Modality: +
+
+ Body Part: +
+
+
+
+ Series Date: +
+
+ Series Time: +
+
+ +
+
+ +
+
+

Instance Information

+
+
+
+
+ Instance #: +
+
+ Acquisition #: +
+
+
+
+ Acquisition Date: +
+
+ Acquisition Time: +
+
+
+
+ Content Date: +
+
+ Content Time: +
+
+ + + +
+
+ +
+
+

Image Information

+
+
+
+
+ Rows: +
+
+ Columns: +
+
+ +
+
+ Photometric Interpretation: +
+
+ Image Type: +
+ +
+ +
+
+ Bits Allocated: +
+
+ Bits Stored: +
+
+ +
+
+ HighBit: +
+
+ Pixel Representation (0=us): +
+
+ +
+
+ Rescale Slope: +
+
+ Rescale Intercept: +
+
+
+
+ Image Position Patient: +
+
+ Image Orientation Patient: +
+
+
+
+ Pixel Spacing: +
+
+ Samples Per Pixel: +
+
+ +
+
+ +
+
+

Equipment Information

+
+
+
+
+ Manufacturer: +
+
+ Model: +
+
+
+
+ Station Name: +
+
+ AE Title: +
+
+
+
+ Institution Name: +
+
+
+
+ Software Version: +
+
+
+
+ Implementation Version Name: +
+
+
+
+ +
+
+

UIDS

+
+
+
+
+ Study UID: +
+
+
+
+ Series UID: +
+
+
+
+ Instance UID: +
+
+
+
+ SOP Class UID: +
+
+
+
+ Transfer Syntax UID: +
+
+
+
+ Frame of Reference UID: +
+
+
+
+ WADO URL: +
+ http://localhost:3333/wado?requestType=WADO&studyUID=&seriesUID=&objectUID=&contentType=application%2Fdicom&transferSyntax=1.2.840.10008.1.2.1 +
+
+
+
+
+
+
`)); 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 `) - ) + ) .append($("↻")) .append($("⛶")) .append($("⚙")) - .append($("⇄")); - - $(single_dicom_viewer).append( - $( - "
Image of
wc: ww:
" - ) - ) - // Add buttons + .append($("⇄")) + .append($("🛈")) .append( $(`
@@ -116,6 +398,13 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
`) ); + $(single_dicom_viewer).append( + $( + "
Image of
wc: ww:
" + ) + ); + // 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("
").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); + }); - } +} \ No newline at end of file diff --git a/index.html b/index.html index 60d01e7..65259f2 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,8 @@

A dicom viewer

-
+ +
diff --git a/test_images/CXR.dcm b/test_images/CXR.dcm new file mode 100644 index 0000000..010d608 Binary files /dev/null and b/test_images/CXR.dcm differ