From 6d03e81e778cffec356ccce2bc03b71e5187727a Mon Sep 17 00:00:00 2001 From: Ross Date: Mon, 10 Nov 2025 11:43:31 +0000 Subject: [PATCH] Add legacy DICOM viewer setup and update HTML element ID for legacy images --- anatomy/static/js/anatomy.js | 316 +++++++++--------- .../templates/anatomy/question_detail.html | 2 +- 2 files changed, 163 insertions(+), 155 deletions(-) diff --git a/anatomy/static/js/anatomy.js b/anatomy/static/js/anatomy.js index 02f3a034..3624ef95 100644 --- a/anatomy/static/js/anatomy.js +++ b/anatomy/static/js/anatomy.js @@ -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(); @@ -333,160 +341,160 @@ function loadJsonToolStateOnCurrentImage(json) { } -//async function setUpDicom(element) { -// console.log("setUpDicom (original)", element); -// -// $(element).bind('contextmenu', function (e) { -// 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 { -// 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; -// -// 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 { -// 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.setUpDicomClassic = setUpDicom; +async function setUpDicomLegacy(element) { + console.log("setUpDicom (original)", element); + + $(element).bind('contextmenu', function (e) { + 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 { + 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; + + 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 { + 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) { console.log("setUpDicom3d (cornerstone3d) for", element); diff --git a/anatomy/templates/anatomy/question_detail.html b/anatomy/templates/anatomy/question_detail.html index ffe4170c..971f2ca6 100644 --- a/anatomy/templates/anatomy/question_detail.html +++ b/anatomy/templates/anatomy/question_detail.html @@ -3,7 +3,7 @@ {% block content %} {% load static %} {% include 'anatomy/question_link_header.html' %} -
Help