.
This commit is contained in:
Ross
@@ -158,6 +158,11 @@ button a {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.dicom-viewer {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.marking-dicom {
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
@@ -208,10 +213,6 @@ button a {
|
||||
}
|
||||
|
||||
.drop-target {
|
||||
border: 1px dashed white;
|
||||
}
|
||||
|
||||
#drop-container {
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
height: 100px;
|
||||
@@ -225,6 +226,10 @@ button a {
|
||||
margin-right: -50vw;
|
||||
}
|
||||
|
||||
#drop-container {
|
||||
border: 1px dashed white;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
|
||||
+208
-182
@@ -1,233 +1,259 @@
|
||||
import * as dicomViewer from "./dicomViewer.js"
|
||||
|
||||
window.marked_answers = {
|
||||
"correct": [],
|
||||
"half-correct": [],
|
||||
"incorrect": [],
|
||||
"correct": [],
|
||||
"half-correct": [],
|
||||
"incorrect": [],
|
||||
}
|
||||
|
||||
window.control_pressed = false;
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
$(".answer-list li").each(function (index, element) {
|
||||
$(element).append($("<span class='google-link' title='search for answer with google'><a href='https://www.google.com/search?q=" + $(element).text() + "' target='_blank'>G</a></span>"));
|
||||
$(".answer-list li").each(function (index, element) {
|
||||
$(element).append($("<span class='google-link' title='search for answer with google'><a href='https://www.google.com/search?q=" + $(element).text() + "' target='_blank'>G</a></span>"));
|
||||
});
|
||||
|
||||
$(".answer-list span.answer").each(function (index, element) {
|
||||
console.log(element);
|
||||
|
||||
$(element).click(function (e) {
|
||||
|
||||
var classes = ['answer correct', 'answer half-correct', 'answer incorrect'];
|
||||
$(element).each(function () {
|
||||
this.className = classes[($.inArray(this.className, classes) + 1) % classes.length];
|
||||
});
|
||||
|
||||
prepAnswerData();
|
||||
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
prepAnswerData();
|
||||
|
||||
if ($(".post-form").length > 0) {
|
||||
$(".post-form").get(0).addEventListener("submit", function (e) {
|
||||
if ($(".not-marked").length > 0 && e.submitter.name != "skip") {
|
||||
e.preventDefault(); // before the code
|
||||
alert("Ensure all answers are marked first");
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
let dicom_images = document.getElementsByClassName("dicom-image");
|
||||
if (dicom_images.length) {
|
||||
|
||||
for (let element of dicom_images) {
|
||||
setUpDicom(element)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
loadDicomViewer();
|
||||
|
||||
if ($("#question-mark-list").length) {
|
||||
$(".show-all-button").click(() => {
|
||||
$("#question-mark-list li").show();
|
||||
});
|
||||
$(".show-unmarked-button").click(() => {
|
||||
console.log("TESTIG");
|
||||
$("#question-mark-list li").each((n, el) => {
|
||||
console.log(el);
|
||||
if (el.dataset.markcount < 1) { $(el).hide(); }
|
||||
})
|
||||
});
|
||||
|
||||
$(".answer-list span.answer").each(function (index, element) {
|
||||
console.log(element);
|
||||
}
|
||||
|
||||
$(element).click(function (e) {
|
||||
$(document).keydown(keyDownHandler);
|
||||
$(document).keyup(keyUpHandler);
|
||||
|
||||
var classes = ['answer correct', 'answer half-correct', 'answer incorrect'];
|
||||
$(element).each(function () {
|
||||
this.className = classes[($.inArray(this.className, classes) + 1) % classes.length];
|
||||
});
|
||||
|
||||
prepAnswerData();
|
||||
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
prepAnswerData();
|
||||
|
||||
if ($(".post-form").length > 0) {
|
||||
$(".post-form").get(0).addEventListener("submit", function (e) {
|
||||
if ($(".not-marked").length > 0 && e.submitter.name != "skip") {
|
||||
e.preventDefault(); // before the code
|
||||
alert("Ensure all answers are marked first");
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
let dicom_images = document.getElementsByClassName("dicom-image");
|
||||
if (dicom_images.length) {
|
||||
|
||||
for (let element of dicom_images) {
|
||||
setUpDicom(element)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
let single_dicom = document.getElementById("single-dicom-viewer");
|
||||
if (single_dicom) {
|
||||
|
||||
let images = single_dicom.dataset.images;
|
||||
if (images.indexOf(",") > 0) {
|
||||
images = images.split(",");
|
||||
}
|
||||
|
||||
let annotations = single_dicom.dataset.annotations;
|
||||
if (annotations != undefined && annotations.indexOf(",") > 0) {
|
||||
annotations = annotations;
|
||||
}
|
||||
|
||||
dicomViewer.loadCornerstone($(single_dicom), null, images, annotations);
|
||||
}
|
||||
|
||||
if ($("#question-mark-list").length) {
|
||||
$(".show-all-button").click(() => {
|
||||
$("#question-mark-list li").show();
|
||||
});
|
||||
$(".show-unmarked-button").click(() => {
|
||||
console.log("TESTIG");
|
||||
$("#question-mark-list li").each((n, el) => {
|
||||
console.log(el);
|
||||
if (el.dataset.markcount < 1) { $(el).hide(); }
|
||||
})
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
$(document).keydown(keyDownHandler);
|
||||
$(document).keyup(keyUpHandler);
|
||||
|
||||
});
|
||||
|
||||
function prepAnswerData() {
|
||||
//$("#id_correct").val($("li.correct").map(function() {
|
||||
// ans = $(this).text();
|
||||
// window.marked_answers["correct"].push(ans);
|
||||
// return ans
|
||||
//}).get().join('--//--'));
|
||||
//$("#id_half_correct").val($("li.half-correct").map(function() {
|
||||
// ans = $(this).text();
|
||||
// window.marked_answers["half-correct"].push(ans);
|
||||
// return ans;
|
||||
//}).get().join('--//--'));
|
||||
//$("#id_incorrect").val($("li.incorrect").map(function() {
|
||||
// ans = $(this).text();
|
||||
// window.marked_answers["incorrect"].push(ans);
|
||||
// return ans;
|
||||
//}).get().join('--//--'));
|
||||
window.loadDicomViewerEvent = new Event('loadDicomViewer');
|
||||
window.addEventListener('loadDicomViewer', function (e) {
|
||||
console.log("listen", e.detail)
|
||||
let images = [];
|
||||
console.log($("#images img"));
|
||||
$("#images img").each((n, el) => {
|
||||
images.push($(el).attr("src"));
|
||||
} );
|
||||
console.log("listen2", images)
|
||||
loadDicomViewer(images); }, false);
|
||||
|
||||
window.marked_answers["correct"] = [];
|
||||
window.marked_answers["half-correct"] = [];
|
||||
window.marked_answers["incorrect"] = [];
|
||||
$("li span.correct").map(function () {
|
||||
let ans = $(this).text();
|
||||
window.marked_answers["correct"].push(ans);
|
||||
})
|
||||
$("li span.half-correct").map(function () {
|
||||
let ans = $(this).text();
|
||||
window.marked_answers["half-correct"].push(ans);
|
||||
})
|
||||
$("li span.incorrect").map(function () {
|
||||
let ans = $(this).text();
|
||||
window.marked_answers["incorrect"].push(ans);
|
||||
})
|
||||
$("#id_marked_answers").val(JSON.stringify(window.marked_answers));
|
||||
function loadDicomViewer(images_to_load) {
|
||||
console.log("loadDicomViewer", images_to_load);
|
||||
let single_dicom = document.getElementById("single-dicom-viewer");
|
||||
if (single_dicom) {
|
||||
|
||||
let images = single_dicom.dataset.images;
|
||||
|
||||
if (images_to_load != undefined) {
|
||||
images = images_to_load;
|
||||
console.log("i1", images)
|
||||
} else if (images.indexOf(",") > 0) {
|
||||
images = images.split(",");
|
||||
}
|
||||
|
||||
console.log(images);
|
||||
|
||||
let annotations = single_dicom.dataset.annotations;
|
||||
if (annotations != undefined && annotations.indexOf(",") > 0) {
|
||||
annotations = annotations;
|
||||
}
|
||||
|
||||
if (images) {
|
||||
dicomViewer.loadCornerstone($(single_dicom), null, images, annotations, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function prepAnswerData() {
|
||||
//$("#id_correct").val($("li.correct").map(function() {
|
||||
// ans = $(this).text();
|
||||
// window.marked_answers["correct"].push(ans);
|
||||
// return ans
|
||||
//}).get().join('--//--'));
|
||||
//$("#id_half_correct").val($("li.half-correct").map(function() {
|
||||
// ans = $(this).text();
|
||||
// window.marked_answers["half-correct"].push(ans);
|
||||
// return ans;
|
||||
//}).get().join('--//--'));
|
||||
//$("#id_incorrect").val($("li.incorrect").map(function() {
|
||||
// ans = $(this).text();
|
||||
// window.marked_answers["incorrect"].push(ans);
|
||||
// return ans;
|
||||
//}).get().join('--//--'));
|
||||
|
||||
window.marked_answers["correct"] = [];
|
||||
window.marked_answers["half-correct"] = [];
|
||||
window.marked_answers["incorrect"] = [];
|
||||
$("li span.correct").map(function () {
|
||||
let ans = $(this).text();
|
||||
window.marked_answers["correct"].push(ans);
|
||||
})
|
||||
$("li span.half-correct").map(function () {
|
||||
let ans = $(this).text();
|
||||
window.marked_answers["half-correct"].push(ans);
|
||||
})
|
||||
$("li span.incorrect").map(function () {
|
||||
let ans = $(this).text();
|
||||
window.marked_answers["incorrect"].push(ans);
|
||||
})
|
||||
$("#id_marked_answers").val(JSON.stringify(window.marked_answers));
|
||||
}
|
||||
|
||||
function loadJsonToolStateOnCurrentImage(json) {
|
||||
let el = document.getElementById("dicom-image");
|
||||
let el = document.getElementById("dicom-image");
|
||||
|
||||
const toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;
|
||||
const toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;
|
||||
|
||||
const c = cornerstone.getEnabledElement(el);
|
||||
const c = cornerstone.getEnabledElement(el);
|
||||
|
||||
let image_id = c.image.imageId;
|
||||
let image_id = c.image.imageId;
|
||||
|
||||
let tool_state_no_id = JSON.parse(json);
|
||||
let tool_state_no_id = JSON.parse(json);
|
||||
|
||||
let tool_state = {};
|
||||
tool_state[image_id] = tool_state_no_id;
|
||||
let tool_state = {};
|
||||
tool_state[image_id] = tool_state_no_id;
|
||||
|
||||
toolStateManager.restoreToolState(tool_state);
|
||||
toolStateManager.restoreToolState(tool_state);
|
||||
|
||||
cornerstone.reset(el);
|
||||
cornerstone.reset(el);
|
||||
|
||||
return tool_state;
|
||||
return tool_state;
|
||||
|
||||
|
||||
}
|
||||
|
||||
function setUpDicom(element) {
|
||||
|
||||
console.log("Dicom element found ", $(element));
|
||||
console.log("Dicom element found ", $(element));
|
||||
|
||||
$(element).bind('contextmenu', function (e) {
|
||||
return false;
|
||||
});
|
||||
$(element).bind('contextmenu', function (e) {
|
||||
return false;
|
||||
});
|
||||
|
||||
$(element).dblclick((evt) => {
|
||||
element.requestFullscreen();
|
||||
})
|
||||
$(element).dblclick((evt) => {
|
||||
element.requestFullscreen();
|
||||
})
|
||||
|
||||
cornerstoneBase64ImageLoader.external.cornerstone = cornerstone;
|
||||
cornerstoneWebImageLoader.external.cornerstone = cornerstone;
|
||||
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
|
||||
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;
|
||||
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 imageIds = element.dataset.url.split(",");
|
||||
const imageIds = element.dataset.url.split(",");
|
||||
|
||||
console.log("Dicom - load imageId: ", imageIds);
|
||||
console.log("Dicom - load imageId: ", imageIds);
|
||||
|
||||
cornerstone.enable(element);
|
||||
cornerstone.loadAndCacheImage(imageIds[0]).then(function (image) {
|
||||
cornerstone.displayImage(element, image);
|
||||
cornerstone.enable(element);
|
||||
cornerstone.loadAndCacheImage(imageIds[0]).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(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,
|
||||
},
|
||||
});
|
||||
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 });
|
||||
// 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.edit_annotation == "true") {
|
||||
cornerstoneTools.setToolActive("ArrowAnnotate", { mouseButtonMask: 2 });
|
||||
} else {
|
||||
cornerstoneTools.setToolEnabled("ArrowAnnotate");
|
||||
}
|
||||
|
||||
if (element.dataset.annotations) {
|
||||
loadJsonToolStateOnCurrentImage(element.dataset.annotations)
|
||||
}
|
||||
if (element.dataset.annotations) {
|
||||
loadJsonToolStateOnCurrentImage(element.dataset.annotations)
|
||||
}
|
||||
|
||||
cornerstone.resize(element);
|
||||
cornerstone.resize(element);
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function keyUpHandler(e) {
|
||||
if(e.key == "Control") {
|
||||
if (e.key == "Control") {
|
||||
dicomViewer.registerPrimaryDicomInterface(e);
|
||||
window.control_pressed = false;
|
||||
}
|
||||
@@ -236,16 +262,16 @@ function keyUpHandler(e) {
|
||||
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")) {
|
||||
if ($("*:focus:not(disabled)").is("textarea, input")) {
|
||||
// unless a modifier key is pressed (not shift)
|
||||
if(e.altKey ? true : false || e.ctrlKey ? true : false) {
|
||||
if (e.altKey ? true : false || e.ctrlKey ? true : false) {
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if(e.key == "Control") {
|
||||
if(window.control_pressed == false) {
|
||||
if (e.key == "Control") {
|
||||
if (window.control_pressed == false) {
|
||||
window.control_pressed = true;
|
||||
dicomViewer.registerAltDicomInterface(e);
|
||||
}
|
||||
@@ -255,23 +281,23 @@ function keyDownHandler(e) {
|
||||
console.log(e, charCode);
|
||||
|
||||
function numberKeyPressed(e, x) {
|
||||
if(e.altKey ? true : false) {
|
||||
if (e.altKey ? true : false) {
|
||||
dicomViewer.selectThumb(x);
|
||||
e.preventDefault();
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
switch(charCode) {
|
||||
switch (charCode) {
|
||||
case 13: // Return
|
||||
if(e.shiftKey ? true : false) {
|
||||
if (e.shiftKey ? true : false) {
|
||||
//$(".next-button:last").click();
|
||||
} else {
|
||||
//$(".check-button:last").click();
|
||||
}
|
||||
break;
|
||||
case 32: // Space
|
||||
if(e.shiftKey ? true : false) {
|
||||
if (e.shiftKey ? true : false) {
|
||||
//$(".previous-button:last").click();
|
||||
} else {
|
||||
//$(".next-button:last").click();
|
||||
|
||||
Reference in New Issue
Block a user