start importing dicomViewer

This commit is contained in:
Ross
2021-02-01 10:25:36 +00:00
parent 3076fc3aab
commit 66bed8233f
8 changed files with 211 additions and 53 deletions
+5 -1
View File
@@ -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 {
}
+132 -8
View File
@@ -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;
}
}
+2 -1
View File
@@ -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>
+1
View File
@@ -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>
+7 -1
View File
@@ -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()
+3 -1
View File
@@ -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 %}
+59 -41
View File
@@ -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>
<h3>{{ question.question_type }}</h3>
<div id="dicom-image" class="marking-dicom dicom-image" data-url="http://penracourses.org.uk{{ question.image.url}}" data-annotations='{{question.image_annotations}}'>
<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>
{% 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 %}
Click each answer to toggle through marks awarded (as per colour)
<div class="marking-list">
Unmarked:
<ul id="new-answer-list" class="answer-list">
{% for answer in user_answers %}
<li><pre><span class="answer not-marked">{{ answer }}</span></pre></li>
{% endfor %}
</ul>
Marked:
<ul id="marked-answer-list" class="answer-list">
{% for answer in correct_answers %}
<li><pre><span class="answer correct">{{ answer }}</span></pre></li>
{% endfor %}
{% for answer in half_mark_answers %}
<li><pre><span class="answer half-correct">{{ answer }}</span></pre></li>
{% endfor %}
{% for answer in incorrect_answers %}
<li><pre><span class="answer incorrect">{{ answer }}</span></pre></li>
{% endfor %}
</ul>
<div class="answer-list key">Key: <span class="correct">2 Marks</span>, <span class="half-correct">1
Mark</span>, <span class="incorrect">0 Marks</span></div>
{% if question_details.current > 1 %}
<button type="submit" name="previous" class="save btn btn-default">Previous</button>
{% 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 %}
</div>
<span class=hide>
{{ form.as_p }}
</span>
</form>
<form method="POST" class="post-form">{% csrf_token %}
{% if not question.normal %}
Click each answer to toggle through marks awarded (as per colour)
<div class="marking-list">
Unmarked:
<ul id="new-answer-list" class="answer-list">
{% for answer in user_answers %}
<li>
<pre><span class="answer not-marked">{{ answer }}</span></pre>
</li>
{% endfor %}
</ul>
Marked:
<ul id="marked-answer-list" class="answer-list">
{% for answer in correct_answers %}
<li>
<pre><span class="answer correct">{{ answer }}</span></pre>
</li>
{% endfor %}
{% for answer in half_mark_answers %}
<li>
<pre><span class="answer half-correct">{{ answer }}</span></pre>
</li>
{% endfor %}
{% for answer in incorrect_answers %}
<li>
<pre><span class="answer incorrect">{{ answer }}</span></pre>
</li>
{% endfor %}
</ul>
<div class="answer-list key">Key: <span class="correct">2 Marks</span>, <span class="half-correct">1
Mark</span>, <span class="incorrect">0 Marks</span></div>
</div>
{% endif %}
{% if question_details.current > 1 %}
<button type="submit" name="previous" class="save btn btn-default">Previous</button>
{% 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 %}
+2
View File
@@ -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>