Add legacy DICOM viewer setup and update HTML element ID for legacy images
This commit is contained in:
Ross
+158
-150
@@ -82,6 +82,14 @@ $(document).ready(function () {
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
let dicom_images_legacy = document.getElementsByClassName("dicom-image-legacy");
|
||||||
|
if (dicom_images_legacy.length) {
|
||||||
|
|
||||||
|
for (let element of dicom_images_legacy) {
|
||||||
|
setUpDicomLegacy(element)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
loadDicomViewer();
|
loadDicomViewer();
|
||||||
@@ -333,160 +341,160 @@ function loadJsonToolStateOnCurrentImage(json) {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//async function setUpDicom(element) {
|
async function setUpDicomLegacy(element) {
|
||||||
// console.log("setUpDicom (original)", element);
|
console.log("setUpDicom (original)", element);
|
||||||
//
|
|
||||||
// $(element).bind('contextmenu', function (e) {
|
$(element).bind('contextmenu', function (e) {
|
||||||
// return false;
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
$(element).dblclick((evt) => {
|
||||||
|
element.requestFullscreen();
|
||||||
|
})
|
||||||
|
|
||||||
|
cornerstoneBase64ImageLoader.external.cornerstone = cornerstone;
|
||||||
|
cornerstoneWebImageLoader.external.cornerstone = cornerstone;
|
||||||
|
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
|
||||||
|
|
||||||
|
cornerstoneTools.init();
|
||||||
|
const PanTool = cornerstoneTools.PanTool;
|
||||||
|
const ZoomTool = cornerstoneTools.ZoomTool;
|
||||||
|
const ZoomMouseWheelTool = cornerstoneTools.ZoomMouseWheelTool;
|
||||||
|
const WwwcTool = cornerstoneTools.WwwcTool;
|
||||||
|
const WwwcRegionTool = cornerstoneTools.WwwcRegionTool;
|
||||||
|
const RotateTool = cornerstoneTools.RotateTool;
|
||||||
|
const StackScrollTool = cornerstoneTools.StackScrollTool;
|
||||||
|
const MagnifyTool = cornerstoneTools.MagnifyTool;
|
||||||
|
const ArrowAnnotateTool = cornerstoneTools.ArrowAnnotateTool;
|
||||||
|
|
||||||
|
|
||||||
|
const images = element.dataset.url.split(",");
|
||||||
|
|
||||||
|
//console.log("Dicom - load imageId: ", imageIds);
|
||||||
|
//for (let index = 0; index < imageIds.length; index++) {
|
||||||
|
// if (imageIds[index].endsWith("dcm")) {
|
||||||
|
// imageIds[index] = "wadouri:" + imageIds[index];
|
||||||
|
// }
|
||||||
|
|
||||||
|
//}
|
||||||
|
let imageIds = [];
|
||||||
|
for (let i = 0; i < images.length; i++) {
|
||||||
|
let data_url = images[i];
|
||||||
|
// check stack type
|
||||||
|
if (data_url.startsWith("data:image")) {
|
||||||
|
let imageId = "base64://" + data_url.split(",")[1];
|
||||||
|
|
||||||
|
imageIds.push(imageId);
|
||||||
|
} else if (data_url.startsWith("base64://") || data_url.startsWith("wadouri:")) {
|
||||||
|
|
||||||
|
imageIds.push(data_url);
|
||||||
|
|
||||||
|
// Treat application/octet-stream as if they are dicoms
|
||||||
|
} else if (data_url.startsWith("data:application/dicom") || data_url.startsWith("data:application/octet-stream")) {
|
||||||
|
//stack = stack.split(";")[1];
|
||||||
|
|
||||||
|
let dfile = await urltoFile(data_url, "dicom", "application/dicom");
|
||||||
|
|
||||||
|
const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(
|
||||||
|
dfile
|
||||||
|
);
|
||||||
|
|
||||||
|
loadAnnotation(imageId, annotation);
|
||||||
|
|
||||||
|
imageIds.push(imageId);
|
||||||
|
//cornerstone.loadImage(imageId).then(function(image) {
|
||||||
|
// tempFunction(image);
|
||||||
//});
|
//});
|
||||||
//
|
} else {
|
||||||
// $(element).dblclick((evt) => {
|
let url;
|
||||||
// element.requestFullscreen();
|
// This doesn't seem to have any benefit
|
||||||
// })
|
//if (data_url.startsWith("http")) {
|
||||||
//
|
|
||||||
// cornerstoneBase64ImageLoader.external.cornerstone = cornerstone;
|
|
||||||
// cornerstoneWebImageLoader.external.cornerstone = cornerstone;
|
|
||||||
// cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
|
|
||||||
//
|
|
||||||
// cornerstoneTools.init();
|
|
||||||
// const PanTool = cornerstoneTools.PanTool;
|
|
||||||
// const ZoomTool = cornerstoneTools.ZoomTool;
|
|
||||||
// const ZoomMouseWheelTool = cornerstoneTools.ZoomMouseWheelTool;
|
|
||||||
// const WwwcTool = cornerstoneTools.WwwcTool;
|
|
||||||
// const WwwcRegionTool = cornerstoneTools.WwwcRegionTool;
|
|
||||||
// const RotateTool = cornerstoneTools.RotateTool;
|
|
||||||
// const StackScrollTool = cornerstoneTools.StackScrollTool;
|
|
||||||
// const MagnifyTool = cornerstoneTools.MagnifyTool;
|
|
||||||
// const ArrowAnnotateTool = cornerstoneTools.ArrowAnnotateTool;
|
|
||||||
//
|
|
||||||
//
|
|
||||||
// const images = element.dataset.url.split(",");
|
|
||||||
//
|
|
||||||
// //console.log("Dicom - load imageId: ", imageIds);
|
|
||||||
// //for (let index = 0; index < imageIds.length; index++) {
|
|
||||||
// // if (imageIds[index].endsWith("dcm")) {
|
|
||||||
// // imageIds[index] = "wadouri:" + imageIds[index];
|
|
||||||
// // }
|
|
||||||
//
|
|
||||||
// //}
|
|
||||||
// let imageIds = [];
|
|
||||||
// for (let i = 0; i < images.length; i++) {
|
|
||||||
// let data_url = images[i];
|
|
||||||
// // check stack type
|
|
||||||
// if (data_url.startsWith("data:image")) {
|
|
||||||
// let imageId = "base64://" + data_url.split(",")[1];
|
|
||||||
//
|
|
||||||
// imageIds.push(imageId);
|
|
||||||
// } else if (data_url.startsWith("base64://") || data_url.startsWith("wadouri:")) {
|
|
||||||
//
|
|
||||||
// imageIds.push(data_url);
|
|
||||||
//
|
|
||||||
// // Treat application/octet-stream as if they are dicoms
|
|
||||||
// } else if (data_url.startsWith("data:application/dicom") || data_url.startsWith("data:application/octet-stream")) {
|
|
||||||
// //stack = stack.split(";")[1];
|
|
||||||
//
|
|
||||||
// let dfile = await urltoFile(data_url, "dicom", "application/dicom");
|
|
||||||
//
|
|
||||||
// const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(
|
|
||||||
// dfile
|
|
||||||
// );
|
|
||||||
//
|
|
||||||
// loadAnnotation(imageId, annotation);
|
|
||||||
//
|
|
||||||
// imageIds.push(imageId);
|
|
||||||
// //cornerstone.loadImage(imageId).then(function(image) {
|
|
||||||
// // tempFunction(image);
|
|
||||||
// //});
|
|
||||||
// } else {
|
|
||||||
// let url;
|
|
||||||
// // This doesn't seem to have any benefit
|
|
||||||
// //if (data_url.startsWith("http")) {
|
|
||||||
// // url = data_url;
|
|
||||||
// //} else {
|
|
||||||
// // url = window.location.href.replace(/\/\#\/?$/, '') + "/" + data_url
|
|
||||||
// //}
|
|
||||||
// url = data_url;
|
// url = data_url;
|
||||||
//
|
|
||||||
// if (url.endsWith("dcm")) {
|
|
||||||
// url = "wadouri:" + url;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// // if there is no extension treat it as a dicom
|
|
||||||
// if (/(?:\/|^)[^.\/]+$/.test(url)) {
|
|
||||||
// url = "wadouri:" + url;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// imageIds.push(url);
|
|
||||||
//
|
|
||||||
//
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// cornerstone.enable(element);
|
|
||||||
// cornerstone.loadAndCacheImage(imageIds[0]).then(function (image) {
|
|
||||||
// cornerstone.displayImage(element, image);
|
|
||||||
//
|
|
||||||
// cornerstoneTools.addToolForElement(element, PanTool);
|
|
||||||
// cornerstoneTools.addToolForElement(element, ZoomTool);
|
|
||||||
// cornerstoneTools.addToolForElement(element, ZoomMouseWheelTool);
|
|
||||||
// cornerstoneTools.addToolForElement(element, WwwcTool);
|
|
||||||
// cornerstoneTools.addToolForElement(element, WwwcRegionTool);
|
|
||||||
// cornerstoneTools.addToolForElement(element, RotateTool);
|
|
||||||
// cornerstoneTools.addToolForElement(element, StackScrollTool);
|
|
||||||
// cornerstoneTools.addToolForElement(element, MagnifyTool);
|
|
||||||
//
|
|
||||||
// cornerstoneTools.addToolForElement(element, ArrowAnnotateTool, {
|
|
||||||
// configuration: {
|
|
||||||
// getTextCallback: () => {},
|
|
||||||
// changeTextCallback: () => {},
|
|
||||||
// allowEmptyLabel: true,
|
|
||||||
// renderDashed: false,
|
|
||||||
// drawHandles: false,
|
|
||||||
// drawHandlesOnHover: true,
|
|
||||||
// },
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
//
|
|
||||||
//
|
|
||||||
// // Enable our tools
|
|
||||||
// // Avoid incorrect aspect ratio
|
|
||||||
// cornerstoneTools.setToolActiveForElement(element, "Pan", {
|
|
||||||
// mouseButtonMask: 1
|
|
||||||
// });
|
|
||||||
// cornerstoneTools.setToolActiveForElement(element, "Wwwc", {
|
|
||||||
// mouseButtonMask: 2
|
|
||||||
// });
|
|
||||||
// cornerstoneTools.setToolActiveForElement(element, "ZoomMouseWheel", {
|
|
||||||
// mouseButtonMask: 3
|
|
||||||
// });
|
|
||||||
// cornerstoneTools.setToolActiveForElement(element, "Zoom", {
|
|
||||||
// mouseButtonMask: 4
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// if (element.dataset.edit_annotation == "true") {
|
|
||||||
// cornerstoneTools.setToolActiveForElement(element, "ArrowAnnotate", {
|
|
||||||
// mouseButtonMask: 2
|
|
||||||
// });
|
|
||||||
//} else {
|
//} else {
|
||||||
// cornerstoneTools.setToolEnabledForElement(element, "ArrowAnnotate");
|
// url = window.location.href.replace(/\/\#\/?$/, '') + "/" + data_url
|
||||||
//}
|
//}
|
||||||
//
|
url = data_url;
|
||||||
// if (element.dataset.annotations) {
|
|
||||||
// loadJsonToolStateOnCurrentImage(element.dataset.annotations)
|
if (url.endsWith("dcm")) {
|
||||||
// }
|
url = "wadouri:" + url;
|
||||||
//
|
}
|
||||||
// cornerstone.resize(element);
|
|
||||||
//
|
// if there is no extension treat it as a dicom
|
||||||
//
|
if (/(?:\/|^)[^.\/]+$/.test(url)) {
|
||||||
// }).catch((err, err2) => {
|
url = "wadouri:" + url;
|
||||||
// console.log(err);
|
}
|
||||||
// });
|
|
||||||
//
|
imageIds.push(url);
|
||||||
//}
|
|
||||||
//console.log("setUpDicom defined");
|
|
||||||
//
|
}
|
||||||
//// keep reference to the existing 2D setup
|
}
|
||||||
//window.setUpDicomClassic = setUpDicom;
|
|
||||||
|
cornerstone.enable(element);
|
||||||
|
cornerstone.loadAndCacheImage(imageIds[0]).then(function (image) {
|
||||||
|
cornerstone.displayImage(element, image);
|
||||||
|
|
||||||
|
cornerstoneTools.addToolForElement(element, PanTool);
|
||||||
|
cornerstoneTools.addToolForElement(element, ZoomTool);
|
||||||
|
cornerstoneTools.addToolForElement(element, ZoomMouseWheelTool);
|
||||||
|
cornerstoneTools.addToolForElement(element, WwwcTool);
|
||||||
|
cornerstoneTools.addToolForElement(element, WwwcRegionTool);
|
||||||
|
cornerstoneTools.addToolForElement(element, RotateTool);
|
||||||
|
cornerstoneTools.addToolForElement(element, StackScrollTool);
|
||||||
|
cornerstoneTools.addToolForElement(element, MagnifyTool);
|
||||||
|
|
||||||
|
cornerstoneTools.addToolForElement(element, ArrowAnnotateTool, {
|
||||||
|
configuration: {
|
||||||
|
getTextCallback: () => {},
|
||||||
|
changeTextCallback: () => {},
|
||||||
|
allowEmptyLabel: true,
|
||||||
|
renderDashed: false,
|
||||||
|
drawHandles: false,
|
||||||
|
drawHandlesOnHover: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Enable our tools
|
||||||
|
// Avoid incorrect aspect ratio
|
||||||
|
cornerstoneTools.setToolActiveForElement(element, "Pan", {
|
||||||
|
mouseButtonMask: 1
|
||||||
|
});
|
||||||
|
cornerstoneTools.setToolActiveForElement(element, "Wwwc", {
|
||||||
|
mouseButtonMask: 2
|
||||||
|
});
|
||||||
|
cornerstoneTools.setToolActiveForElement(element, "ZoomMouseWheel", {
|
||||||
|
mouseButtonMask: 3
|
||||||
|
});
|
||||||
|
cornerstoneTools.setToolActiveForElement(element, "Zoom", {
|
||||||
|
mouseButtonMask: 4
|
||||||
|
});
|
||||||
|
|
||||||
|
if (element.dataset.edit_annotation == "true") {
|
||||||
|
cornerstoneTools.setToolActiveForElement(element, "ArrowAnnotate", {
|
||||||
|
mouseButtonMask: 2
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
cornerstoneTools.setToolEnabledForElement(element, "ArrowAnnotate");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (element.dataset.annotations) {
|
||||||
|
loadJsonToolStateOnCurrentImage(element.dataset.annotations)
|
||||||
|
}
|
||||||
|
|
||||||
|
cornerstone.resize(element);
|
||||||
|
|
||||||
|
|
||||||
|
}).catch((err, err2) => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
console.log("setUpDicom defined");
|
||||||
|
|
||||||
|
// keep reference to the existing 2D setup
|
||||||
|
window.setUpDicomLegacy = setUpDicomLegacy;
|
||||||
|
|
||||||
async function setUpDicom3d(element) {
|
async function setUpDicom3d(element) {
|
||||||
console.log("setUpDicom3d (cornerstone3d) for", element);
|
console.log("setUpDicom3d (cornerstone3d) for", element);
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
{% block content %}
|
{% block content %}
|
||||||
{% load static %}
|
{% load static %}
|
||||||
{% include 'anatomy/question_link_header.html' %}
|
{% include 'anatomy/question_link_header.html' %}
|
||||||
<div id="single-dicom-viewer" class="" data-url="{{ remote_url }}{{ question.image.url}}"
|
<div id="dicom-image" class="dicom-image-legacy" data-url="{{ remote_url }}{{ question.image.url}}"
|
||||||
data-annotations='{{question.image_annotations}}' data-edit_annotation=true>
|
data-annotations='{{question.image_annotations}}' data-edit_annotation=true>
|
||||||
<details class="help-text">
|
<details class="help-text">
|
||||||
<summary><i class="bi bi-info-circle"></i> Help</summary>
|
<summary><i class="bi bi-info-circle"></i> Help</summary>
|
||||||
|
|||||||
Reference in New Issue
Block a user