.

anatomy/static/js/anatomy.js

@@ -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) {
@@ -208,3 +139,81 @@ function loadJsonToolStateOnCurrentImage(json) {
 
 
 }
+
+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);
+
+
+        });
+
+}

anatomy/templates/anatomy/exam.html

@@ -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 %}

anatomy/templates/anatomy/mark.html

@@ -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 %}

anatomy/templates/anatomy/question_detail.html

@@ -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>-->

rapids/templates/rapids/rapid_display_block.html

@@ -12,6 +12,7 @@
         {% for image in rapid.images.all %}
         Image {{ forloop.counter }}{% if image.feedback_image %} [feedback image]{% endif %}:
         <img class="rapid-img {% if image.feedback_image %}feedback-img{% endif %}" src="{{ image.image.url }}"><br/>
+        <div class="dicom-image" data-url="http://penracourses.org.uk{{ image.url}}"></div>
         {% endfor %}</p>
     <p class="pre-whitespace"><b>Feedback:</b> {{ rapid.feedback }}</p>
     <p><b>Author(s):</b> {% for author in rapid.author.all %} <a