.
This commit is contained in:
Ross
@@ -39,82 +39,13 @@ $(document).ready(function () {
|
||||
});
|
||||
}
|
||||
|
||||
if ($("#dicom-image").length) {
|
||||
dicom_images = document.getElementsByClassName("dicom-image");
|
||||
if (dicom_images.length) {
|
||||
|
||||
console.log("Dicom element found ", $("#dicom-image"));
|
||||
for (let element of dicom_images) {
|
||||
setUpDicom(element)
|
||||
}
|
||||
|
||||
$('#dicom-image').bind('contextmenu', function (e) {
|
||||
return false;
|
||||
});
|
||||
|
||||
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 element = document.getElementById('dicom-image');
|
||||
const imageId = element.dataset.url;
|
||||
|
||||
console.log("Dicom - load imageId: ", imageId);
|
||||
|
||||
cornerstone.enable(element);
|
||||
cornerstone.loadAndCacheImage(imageId).then(function (image) {
|
||||
cornerstone.displayImage(element, image);
|
||||
|
||||
cornerstoneTools.addTool(PanTool);
|
||||
cornerstoneTools.addTool(ZoomTool);
|
||||
cornerstoneTools.addTool(ZoomMouseWheelTool);
|
||||
cornerstoneTools.addTool(WwwcTool);
|
||||
cornerstoneTools.addTool(WwwcRegionTool);
|
||||
cornerstoneTools.addTool(RotateTool);
|
||||
cornerstoneTools.addTool(StackScrollTool);
|
||||
cornerstoneTools.addTool(MagnifyTool);
|
||||
|
||||
cornerstoneTools.addTool(ArrowAnnotateTool, {
|
||||
configuration: {
|
||||
getTextCallback: () => { },
|
||||
changeTextCallback: () => { },
|
||||
allowEmptyLabel: true,
|
||||
renderDashed: false,
|
||||
drawHandles: false,
|
||||
drawHandlesOnHover: true,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Enable our tools
|
||||
// Avoid incorrect aspect ratio
|
||||
cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });
|
||||
cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 2 });
|
||||
cornerstoneTools.setToolActive("ZoomMouseWheel", { mouseButtonMask: 3 });
|
||||
cornerstoneTools.setToolActive("Zoom", { mouseButtonMask: 4 });
|
||||
|
||||
if (element.dataset.edit_annotation == "true") {
|
||||
cornerstoneTools.setToolActive("ArrowAnnotate", { mouseButtonMask: 2 });
|
||||
} else {
|
||||
cornerstoneTools.setToolEnabled("ArrowAnnotate");
|
||||
}
|
||||
|
||||
if (element.dataset.annotations) {
|
||||
loadJsonToolStateOnCurrentImage(element.dataset.annotations)
|
||||
}
|
||||
|
||||
cornerstone.resize(element);
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
if ($("#question-mark-list").length) {
|
||||
@@ -207,4 +138,82 @@ function loadJsonToolStateOnCurrentImage(json) {
|
||||
return tool_state;
|
||||
|
||||
|
||||
}
|
||||
|
||||
setUpDicom(element) {
|
||||
|
||||
console.log("Dicom element found ", $(element));
|
||||
|
||||
$(element).bind('contextmenu', function (e) {
|
||||
return false;
|
||||
});
|
||||
|
||||
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 imageId = element.dataset.url;
|
||||
|
||||
console.log("Dicom - load imageId: ", imageId);
|
||||
|
||||
cornerstone.enable(element);
|
||||
cornerstone.loadAndCacheImage(imageId).then(function (image) {
|
||||
cornerstone.displayImage(element, image);
|
||||
|
||||
cornerstoneTools.addTool(PanTool);
|
||||
cornerstoneTools.addTool(ZoomTool);
|
||||
cornerstoneTools.addTool(ZoomMouseWheelTool);
|
||||
cornerstoneTools.addTool(WwwcTool);
|
||||
cornerstoneTools.addTool(WwwcRegionTool);
|
||||
cornerstoneTools.addTool(RotateTool);
|
||||
cornerstoneTools.addTool(StackScrollTool);
|
||||
cornerstoneTools.addTool(MagnifyTool);
|
||||
|
||||
cornerstoneTools.addTool(ArrowAnnotateTool, {
|
||||
configuration: {
|
||||
getTextCallback: () => { },
|
||||
changeTextCallback: () => { },
|
||||
allowEmptyLabel: true,
|
||||
renderDashed: false,
|
||||
drawHandles: false,
|
||||
drawHandlesOnHover: true,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Enable our tools
|
||||
// Avoid incorrect aspect ratio
|
||||
cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });
|
||||
cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 2 });
|
||||
cornerstoneTools.setToolActive("ZoomMouseWheel", { mouseButtonMask: 3 });
|
||||
cornerstoneTools.setToolActive("Zoom", { mouseButtonMask: 4 });
|
||||
|
||||
if (element.dataset.edit_annotation == "true") {
|
||||
cornerstoneTools.setToolActive("ArrowAnnotate", { mouseButtonMask: 2 });
|
||||
} else {
|
||||
cornerstoneTools.setToolEnabled("ArrowAnnotate");
|
||||
}
|
||||
|
||||
if (element.dataset.annotations) {
|
||||
loadJsonToolStateOnCurrentImage(element.dataset.annotations)
|
||||
}
|
||||
|
||||
cornerstone.resize(element);
|
||||
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
@@ -41,7 +41,7 @@
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<div id="dicom-image" data-url="{{ question.image.url}}" data-annotations='{{question.image_annotations}}'>
|
||||
<div id="dicom-image" class="dicom-image" data-url="{{ question.image.url}}" data-annotations='{{question.image_annotations}}'>
|
||||
</div>
|
||||
|
||||
<form method="POST" class="post-form">{% csrf_token %}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<a href="{% url 'anatomy:anatomy_question_update' question.id %}" title="Edit the Question">Edit</a> <a href="{% url 'admin:anatomy_anatomyquestion_change' question.id %}" title="Edit the Question using the admin interface">Admin Edit</a>
|
||||
<h3>{{ question.question_type }}</h3>
|
||||
|
||||
<div id="dicom-image" class="marking-dicom" data-url="http://penracourses.org.uk{{ question.image.url}}" data-annotations='{{question.image_annotations}}'>
|
||||
<div id="dicom-image" class="marking-dicom dicom-image" data-url="http://penracourses.org.uk{{ question.image.url}}" data-annotations='{{question.image_annotations}}'>
|
||||
</div>
|
||||
<div class="marking">
|
||||
<form method="POST" class="post-form">{% csrf_token %}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
<button id="save-annotations">Save Annotations</button>
|
||||
<div id="dicom-image" data-url="http://penracourses.org.uk{{ question.image.url}}" data-annotations='{{question.image_annotations}}' data-edit_annotation=true></div>
|
||||
<div id="dicom-image" class="dicom-image" data-url="http://penracourses.org.uk{{ question.image.url}}" data-annotations='{{question.image_annotations}}' data-edit_annotation=true></div>
|
||||
<!-- testing -->
|
||||
<!--<div id="dicom-image" data-url="http://localhost:8000/static/abdoct.jpg"
|
||||
data-annotations='{{question.image_annotations}}' data-edit_annotation=true></div>-->
|
||||
|
||||
Reference in New Issue
Block a user