start importing dicomViewer

anatomy/static/css/anatomy.css

@@ -158,7 +158,7 @@ button a {
   height: 600px;
 }
 
-#dicom-image.marking-dicom {
+.marking-dicom {
   position: fixed;
   right: 0px;
   bottom: 0px;
@@ -167,6 +167,10 @@ button a {
   z-index: 1;
 }
 
+.cornerstone-canvas {
+  height: 100%;
+}
+
 .marking {
 }
 

anatomy/static/js/anatomy.js

@@ -1,10 +1,13 @@
+import * as dicomViewer from "./dicomViewer.js"
 
-var marked_answers = {
+window.marked_answers = {
     "correct": [],
     "half-correct": [],
     "incorrect": [],
 }
 
+window.control_pressed = false;
+
 
 $(document).ready(function () {
     $(".answer-list li").each(function (index, element) {
@@ -39,7 +42,7 @@ $(document).ready(function () {
         });
     }
 
-    dicom_images = document.getElementsByClassName("dicom-image");
+    let dicom_images = document.getElementsByClassName("dicom-image");
     if (dicom_images.length) {
 
         for (let element of dicom_images) {
@@ -48,6 +51,13 @@ $(document).ready(function () {
 
     }
 
+    let single_dicom = document.getElementById("single-dicom-viewer");
+    if (single_dicom) {
+        let images = single_dicom.dataset.images.split(",");
+        let annotations = single_dicom.dataset.annotations.split(",");
+        dicomViewer.loadCornerstone($(single_dicom), null, images, annotations);
+    }
+
     if ($("#question-mark-list").length) {
         $(".show-all-button").click(() => {
             $("#question-mark-list li").show();
@@ -62,6 +72,9 @@ $(document).ready(function () {
 
     }
 
+      $(document).keydown(keyDownHandler);
+      $(document).keyup(keyUpHandler);
+
 });
 
 function prepAnswerData() {
@@ -85,15 +98,15 @@ function prepAnswerData() {
     window.marked_answers["half-correct"] = [];
     window.marked_answers["incorrect"] = [];
     $("li span.correct").map(function () {
-        ans = $(this).text();
+        let ans = $(this).text();
         window.marked_answers["correct"].push(ans);
     })
     $("li span.half-correct").map(function () {
-        ans = $(this).text();
+        let ans = $(this).text();
         window.marked_answers["half-correct"].push(ans);
     })
     $("li span.incorrect").map(function () {
-        ans = $(this).text();
+        let ans = $(this).text();
         window.marked_answers["incorrect"].push(ans);
     })
     $("#id_marked_answers").val(JSON.stringify(window.marked_answers));
@@ -168,12 +181,12 @@ function setUpDicom(element) {
         const ArrowAnnotateTool = cornerstoneTools.ArrowAnnotateTool;
 
 
-        const imageId = element.dataset.url;
+        const imageIds = element.dataset.url.split(",");
 
-        console.log("Dicom - load imageId: ", imageId);
+        console.log("Dicom - load imageId: ", imageIds);
 
         cornerstone.enable(element);
-        cornerstone.loadAndCacheImage(imageId).then(function (image) {
+        cornerstone.loadAndCacheImage(imageIds[0]).then(function (image) {
             cornerstone.displayImage(element, image);
 
             cornerstoneTools.addTool(PanTool);
@@ -220,4 +233,115 @@ function setUpDicom(element) {
 
         });
 
+}
+
+function keyUpHandler(e) {
+  if(e.key == "Control") {
+    dicomViewer.registerPrimaryDicomInterface(e);
+    window.control_pressed = false;
+  }
+}
+
+function keyDownHandler(e) {
+  // Ignore our custom keybindings if we are currently in a field that
+  // accepts some kind of input
+  if($("*:focus:not(disabled)").is("textarea, input")) {
+    // unless a modifier key is pressed (not shift)
+    if(e.altKey ? true : false || e.ctrlKey ? true : false) {
+    } else {
+      return;
+    }
+  }
+
+  if(e.key == "Control") {
+    if(window.control_pressed == false) {
+      window.control_pressed = true;
+      dicomViewer.registerAltDicomInterface(e);
+    }
+  }
+
+  var charCode = typeof e.which == "number" ? e.which : e.keyCode;
+  console.log(e, charCode);
+
+  function numberKeyPressed(e, x) {
+    if(e.altKey ? true : false) {
+      dicomViewer.selectThumb(x);
+      e.preventDefault();
+    } else {
+    }
+  }
+
+  switch(charCode) {
+    case 13: // Return
+      if(e.shiftKey ? true : false) {
+        //$(".next-button:last").click();
+      } else {
+        //$(".check-button:last").click();
+      }
+      break;
+    case 32: // Space
+      if(e.shiftKey ? true : false) {
+        //$(".previous-button:last").click();
+      } else {
+        //$(".next-button:last").click();
+      }
+      e.preventDefault(); // Needed to stop the default action (scroll)
+      break;
+    case 46: // .
+      //toggleFlagged();
+      break;
+
+    // Numbers 1-9 select the corresponding answer (if it exists)
+    // TODO: fix for multi question questions
+    case 49: // 1
+      numberKeyPressed(e, 0);
+      break;
+    case 50: // 2
+      numberKeyPressed(e, 1);
+      break;
+    case 51: // 3
+      numberKeyPressed(e, 2);
+      break;
+    case 52: // 4
+      numberKeyPressed(e, 3);
+      break;
+    case 53: // 5
+      numberKeyPressed(e, 4);
+      break;
+    case 54: // 6
+      numberKeyPressed(e, 5);
+      break;
+    case 55: // 7
+      numberKeyPressed(e, 6);
+      break;
+    case 56: // 8
+      numberKeyPressed(e, 7);
+      break;
+    case 57: // 9
+      numberKeyPressed(e, 8);
+      break;
+    case 72: // H
+      previousQuestion();
+      break;
+    case 76: // L
+      //nextQuestion();
+      break;
+
+    case 102: // f
+      //$("#filter-toggle").click();
+      break;
+    case 103: // g
+      //$("#options").slideDown("slow");
+      //$("#goto-question-input").focus();
+      //e.preventDefault();
+      break;
+
+    // Vim like scrolling (incredibly important)
+    case 106: // j
+      //window.scrollBy(0, 25);
+      break;
+    case 107: // k
+      //window.scrollBy(0, -25);
+      break;
+  }
 }

anatomy/templates/anatomy/base.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="{% static 'css/anatomy.css' %}">
     <link rel="stylesheet" href="{% static 'css/toastr.min.css' %}">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dexie/3.0.3/dexie.min.js" integrity="sha512-aEtNzq8X5E0ambgeM68H174SOXaANJ6wDqJ0TuVIx4R2J4fRdUA0nLzx0faA1mmViqb+r0VX7cOXkskxyJENUA==" crossorigin="anonymous"></script>
     <script src="{% static 'js/toastr.min.js' %}"></script>
     <script src="{% static 'js/cornerstone/hammer.js' %}"></script>
     <script src="{% static 'js/cornerstone/cornerstone.min.js' %}"></script>
@@ -17,7 +18,7 @@
     <script src="{% static 'js/cornerstone/cornerstoneWebImageLoader.min.js' %}"></script>
     <script src="{% static 'js/cornerstone/cornerstoneWADOImageLoader.js' %}"></script>
     <script src="{% static 'js/cornerstone/cornerstone-base64-image-loader.umd.js' %}"></script>
-    <script src="{% static 'js/anatomy.js' %}" defer="defer"></script>
+    <script src="{% static 'js/anatomy.js' %}" defer="defer" type="module"></script>
     {% block js %}
     {% endblock %}
 </head>

physics/templates/physics/base.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="{% static 'css/anatomy.css' %}">
     <link rel="stylesheet" href="{% static 'css/toastr.min.css' %}">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dexie/3.0.3/dexie.min.js" integrity="sha512-aEtNzq8X5E0ambgeM68H174SOXaANJ6wDqJ0TuVIx4R2J4fRdUA0nLzx0faA1mmViqb+r0VX7cOXkskxyJENUA==" crossorigin="anonymous"></script>
     <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>
     <script src="{% static 'js/toastr.min.js' %}"></script>
     <script src="{% static 'js/cornerstone/hammer.js' %}"></script>

rapids/models.py

@@ -242,8 +242,12 @@ class Rapid(models.Model):
         )
 
     def GetUnmarkedAnswers(self):
+        # If normal no answers to mark
+        if self.normal:
+            return []
+
         user_answers = set(
-            [i.answer_compare for i in self.cid_user_answers.all()]
+            [i.answer_compare for i in self.cid_user_answers.all() if i.normal == False]
         )
         unmarked_answers = user_answers - self.GetMarkedAnswers()
 
@@ -283,6 +287,8 @@ class Rapid(models.Model):
 
         return images
 
+    def GetImageUrls(self):
+        return ",".join(["http://penracourses.org.uk{}".format(i.url) for i in self.GetImages()])
     #def GetNonFeedbackQuestionImages(self):
         #return self.GetImages()
 

rapids/templates/rapids/base.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
     <link rel="stylesheet" href="{% static 'tagulous/lib/select2-3/select2.css' %}">
     <link rel="stylesheet" href="{% static 'css/anatomy.css' %}">
+    <link rel="stylesheet" href="{% static 'css/dicomViewer.css' %}">
     <link rel="stylesheet" href="{% static 'css/toastr.min.css' %}">
 
     {% comment %} <script src="{% static 'tagulous/lib/jquery.js' %}"></script>
@@ -15,6 +16,7 @@
     <script src="{% static 'tagulous/tagulous.js' %}"></script>
     <script src="{% static 'tagulous/adaptor/select2-3.js' %}"></script> {% endcomment %}
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dexie/3.0.3/dexie.min.js" integrity="sha512-aEtNzq8X5E0ambgeM68H174SOXaANJ6wDqJ0TuVIx4R2J4fRdUA0nLzx0faA1mmViqb+r0VX7cOXkskxyJENUA==" crossorigin="anonymous"></script>
     <script src="{% static 'js/cornerstone/hammer.js' %}"></script>
     <script src="{% static 'js/cornerstone/cornerstone.min.js' %}"></script>
     <script src="{% static 'js/cornerstone/dicomParser.min.js' %}"></script>
@@ -23,7 +25,7 @@
     <script src="{% static 'js/cornerstone/cornerstoneWebImageLoader.min.js' %}"></script>
     <script src="{% static 'js/cornerstone/cornerstoneWADOImageLoader.js' %}"></script>
     <script src="{% static 'js/cornerstone/cornerstone-base64-image-loader.umd.js' %}"></script>
-    <script src="{% static 'js/anatomy.js' %}" defer="defer"></script>
+    <script src="{% static 'js/anatomy.js' %}" defer="defer" type="module"></script>
     {% block js %}
     {% endblock %}
 

rapids/templates/rapids/mark.html

@@ -2,48 +2,66 @@
 
 {% block content %}
 <h2>Marking question {{question_details.current}} of {{question_details.total}}</h2>
-<a href="{% url 'rapids:rapid_update' question.id %}" title="Edit the Question">Edit</a> <a href="{% url 'admin:rapids_rapid_change' question.id %}" title="Edit the Question using the admin interface">Admin Edit</a>
+<a href="{% url 'rapids:rapid_update' question.id %}" title="Edit the Question">Edit</a> <a
-<h3>{{ question.question_type }}</h3>
+    href="{% url 'admin:rapids_rapid_change' question.id %}" title="Edit the Question using the admin interface">Admin
-
+    Edit</a>
-<div id="dicom-image" class="marking-dicom dicom-image" data-url="http://penracourses.org.uk{{ question.image.url}}" data-annotations='{{question.image_annotations}}'>
+{% if question.normal %}
+<h3>This question is normal</h3>
+Answers will be automatically marked.
+{% else %}
+<h3>This question is abnormal</h3>
+Answers marked as normal will be automatically marked.
+{% endif %}
+<div id="single-dicom-viewer" class="marking-dicom" data-images="{{question.GetImageUrls}}"
+    data-annotations='{{question.image_annotations}}'>
 </div>
 <div class="marking">
-<form method="POST" class="post-form">{% csrf_token %}
+    <form method="POST" class="post-form">{% csrf_token %}
-    Click each answer to toggle through marks awarded (as per colour)
+        {% if not question.normal %}
-    <div class="marking-list">
+        Click each answer to toggle through marks awarded (as per colour)
-        Unmarked:
+        <div class="marking-list">
-        <ul id="new-answer-list" class="answer-list">
+            Unmarked:
-            {% for answer in user_answers %}
+            <ul id="new-answer-list" class="answer-list">
-            <li><pre><span class="answer not-marked">{{ answer }}</span></pre></li>
+                {% for answer in user_answers %}
-            {% endfor %}
+                <li>
-        </ul>
+                    <pre><span class="answer not-marked">{{ answer }}</span></pre>
-        Marked:
+                </li>
-        <ul id="marked-answer-list" class="answer-list">
+                {% endfor %}
-            {% for answer in correct_answers %}
+            </ul>
-            <li><pre><span class="answer correct">{{ answer }}</span></pre></li>
+            Marked:
-            {% endfor %}
+            <ul id="marked-answer-list" class="answer-list">
-            {% for answer in half_mark_answers %}
+                {% for answer in correct_answers %}
-            <li><pre><span class="answer half-correct">{{ answer }}</span></pre></li>
+                <li>
-            {% endfor %}
+                    <pre><span class="answer correct">{{ answer }}</span></pre>
-            {% for answer in incorrect_answers %}
+                </li>
-            <li><pre><span class="answer incorrect">{{ answer }}</span></pre></li>
+                {% endfor %}
-            {% endfor %}
+                {% for answer in half_mark_answers %}
-        </ul>
+                <li>
-        <div class="answer-list key">Key: <span class="correct">2 Marks</span>, <span class="half-correct">1
+                    <pre><span class="answer half-correct">{{ answer }}</span></pre>
-                Mark</span>, <span class="incorrect">0 Marks</span></div>
+                </li>
-        {% if question_details.current > 1 %}
+                {% endfor %}
-        <button type="submit" name="previous" class="save btn btn-default">Previous</button>
+                {% for answer in incorrect_answers %}
-        {% endif %}
+                <li>
-        <button type="submit" name="save" class="save btn btn-default">Save</button>
+                    <pre><span class="answer incorrect">{{ answer }}</span></pre>
-        {% if question_details.current >= question_details.total %}
+                </li>
-        {% else %}
+                {% endfor %}
-        <button type="submit" name="next" class="save btn btn-default">Next</button>
+            </ul>
-        <button type="submit" name="skip" class="save btn btn-default">Skip</button>
+            <div class="answer-list key">Key: <span class="correct">2 Marks</span>, <span class="half-correct">1
-        {% endif %}
+                    Mark</span>, <span class="incorrect">0 Marks</span></div>
-    </div>
+        </div>
-    <span class=hide>
+            {% endif %}
-        {{ form.as_p }}
+            {% if question_details.current > 1 %}
-    </span>
+            <button type="submit" name="previous" class="save btn btn-default">Previous</button>
-</form>
+            {% endif %}
+            <button type="submit" name="save" class="save btn btn-default">Save</button>
+            {% if question_details.current >= question_details.total %}
+            {% else %}
+            <button type="submit" name="next" class="save btn btn-default">Next</button>
+            <button type="submit" name="skip" class="save btn btn-default">Skip</button>
+            {% endif %}
+        <span class=hide>
+            {{ form.as_p }}
+        </span>
+    </form>
 </div>
 {% endblock %}

templates/base.html

@@ -7,6 +7,8 @@
     <link rel="stylesheet" href="{% static 'css/anatomy.css' %}">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>
+    <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dexie/3.0.3/dexie.min.js" integrity="sha512-aEtNzq8X5E0ambgeM68H174SOXaANJ6wDqJ0TuVIx4R2J4fRdUA0nLzx0faA1mmViqb+r0VX7cOXkskxyJENUA==" crossorigin="anonymous"></script>
 </head>