.
This commit is contained in:
Ross
@@ -1,286 +0,0 @@
|
||||
<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>
|
||||
+15
-2
@@ -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;
|
||||
}
|
||||
+374
-57
@@ -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'>⚙</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);
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
+2
-1
@@ -25,7 +25,8 @@
|
||||
<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"]' data-annotations='["{\"ArrowAnnotate\":{\"data\":[{\"visible\":true,\"active\":false,\"handles\":{\"start\":{\"x\":450.01249999999993,\"y\":592.8031510416666,\"highlight\":true,\"active\":false},\"end\":{\"x\":283.38750000000005,\"y\":343.976484375,\"highlight\":true,\"active\":false,\"moving\":false},\"textBox\":{\"active\":false,\"hasMoved\":false,\"movesIndependently\":false,\"drawnIndependently\":true,\"allowedOutsideImage\":true,\"hasBoundingBox\":true}},\"uuid\":\"51ca68b0-734c-4046-b3da-dd2886496fd5\",\"invalidated\":true}]}}", null]'></div></div> -->
|
||||
<div id="dicom-viewer" class="dicom-viewer" style="height: 600px;" data-images='["test_images/IMG1.dcm"]' data-annotations='["{\"ArrowAnnotate\":{\"data\":[{\"visible\":true,\"active\":false,\"handles\":{\"start\":{\"x\":450.01249999999993,\"y\":592.8031510416666,\"highlight\":true,\"active\":false},\"end\":{\"x\":283.38750000000005,\"y\":343.976484375,\"highlight\":true,\"active\":false,\"moving\":false},\"textBox\":{\"active\":false,\"hasMoved\":false,\"movesIndependently\":false,\"drawnIndependently\":true,\"allowedOutsideImage\":true,\"hasBoundingBox\":true}},\"uuid\":\"51ca68b0-734c-4046-b3da-dd2886496fd5\",\"invalidated\":true}]}}", null]'></div></div>
|
||||
<!-- <div id="dicom-viewer" class="dicom-viewer" style="height: 600px;" data-images='["test_images/IMG1.dcm", "test_images/IMG2.dcm"]' data-annotations=''></div></div> -->
|
||||
<div id="dicom-viewer" class="dicom-viewer" style="height: 600px;" data-images='["test_images/CXR.dcm"]' data-annotations=''></div></div>
|
||||
|
||||
</main>
|
||||
<footer></footer>
|
||||
|
||||
Binary file not shown.
Reference in New Issue
Block a user