.
This commit is contained in:
Ross
@@ -5,109 +5,109 @@
|
||||
{% block js %}
|
||||
<!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->
|
||||
|
||||
<script type="text/javascript">
|
||||
function showEditPopup(url) {
|
||||
var win = window.open(url, "Edit",
|
||||
'height=500,width=800,resizable=yes,scrollbars=yes');
|
||||
return false;
|
||||
}
|
||||
function showAddPopup(triggeringLink) {
|
||||
var name = triggeringLink.id.replace(/^add_/, '');
|
||||
href = triggeringLink.href;
|
||||
var win = window.open(href, name, 'height=500,width=800,resizable=yes,scrollbars=yes');
|
||||
win.focus();
|
||||
return false;
|
||||
}
|
||||
function closePopup(win, newID, newRepr, id) {
|
||||
console.log(id)
|
||||
$(id + "_to").append('<option value=' + newID + ' title=' + newRepr + ' >' + newRepr + '</option>')
|
||||
win.close();
|
||||
}
|
||||
<script type="text/javascript">
|
||||
function showEditPopup(url) {
|
||||
var win = window.open(url, "Edit",
|
||||
'height=500,width=800,resizable=yes,scrollbars=yes');
|
||||
return false;
|
||||
}
|
||||
function showAddPopup(triggeringLink) {
|
||||
var name = triggeringLink.id.replace(/^add_/, '');
|
||||
href = triggeringLink.href;
|
||||
var win = window.open(href, name, 'height=500,width=800,resizable=yes,scrollbars=yes');
|
||||
win.focus();
|
||||
return false;
|
||||
}
|
||||
function closePopup(win, newID, newRepr, id) {
|
||||
console.log(id)
|
||||
$(id + "_to").append('<option value=' + newID + ' title=' + newRepr + ' >' + newRepr + '</option>')
|
||||
win.close();
|
||||
}
|
||||
|
||||
document.addEventListener('drop', function (e) { e.preventDefault(); }, false);
|
||||
document.addEventListener('drop', function (e) { e.preventDefault(); }, false);
|
||||
|
||||
function add_input_form() {
|
||||
var form_idx = $('#id_images-TOTAL_FORMS').val();
|
||||
$('#image_form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
|
||||
$('#id_images-TOTAL_FORMS').val(parseInt(form_idx) + 1);
|
||||
}
|
||||
function add_input_form() {
|
||||
var form_idx = $('#id_images-TOTAL_FORMS').val();
|
||||
$('#image_form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
|
||||
$('#id_images-TOTAL_FORMS').val(parseInt(form_idx) + 1);
|
||||
}
|
||||
|
||||
function add_answers_input_form() {
|
||||
var form_idx = $('#id_answers-TOTAL_FORMS').val();
|
||||
$('#answer_form_set').append($('#answer_empty_form').html().replace(/__prefix__/g, form_idx));
|
||||
$('#id_answers-TOTAL_FORMS').val(parseInt(form_idx) + 1);
|
||||
}
|
||||
function add_answers_input_form() {
|
||||
var form_idx = $('#id_answers-TOTAL_FORMS').val();
|
||||
$('#answer_form_set').append($('#answer_empty_form').html().replace(/__prefix__/g, form_idx));
|
||||
$('#id_answers-TOTAL_FORMS').val(parseInt(form_idx) + 1);
|
||||
}
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
$("#add_examination").appendTo($("label[for='id_examination']"));
|
||||
$(document).ready(function () {
|
||||
$("#add_examination").appendTo($("label[for='id_examination']"));
|
||||
|
||||
dropContainer = document.getElementById("drop-container");
|
||||
dropContainer = document.getElementById("drop-container");
|
||||
|
||||
dropContainer.ondragover = function (evt) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
};
|
||||
dropContainer.ondragover = function (evt) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
};
|
||||
|
||||
dropContainer.ondragenter = function (evt) {
|
||||
console.log("ENTER")
|
||||
console.log(evt)
|
||||
$(evt.target).addClass("drop-target-active")
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
};
|
||||
dropContainer.ondragenter = function (evt) {
|
||||
console.log("ENTER")
|
||||
console.log(evt)
|
||||
$(evt.target).addClass("drop-target-active")
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
};
|
||||
|
||||
dropContainer.ondragleave = function (evt) {
|
||||
console.log("ENTER")
|
||||
console.log(evt)
|
||||
$(evt.target).removeClass("drop-target-active")
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
};
|
||||
dropContainer.ondragleave = function (evt) {
|
||||
console.log("ENTER")
|
||||
console.log(evt)
|
||||
$(evt.target).removeClass("drop-target-active")
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
};
|
||||
|
||||
dropContainer.ondrop = function (evt) {
|
||||
$(evt.target).removeClass("drop-target-active");
|
||||
dropContainer.ondrop = function (evt) {
|
||||
$(evt.target).removeClass("drop-target-active");
|
||||
|
||||
|
||||
if (evt.dataTransfer.files.length < 1) {
|
||||
toastr.warning(`Drop failed :( try again?`);
|
||||
} else {
|
||||
toastr.info(`Adding ${evt.dataTransfer.files.length} files.`);
|
||||
}
|
||||
if (evt.dataTransfer.files.length < 1) {
|
||||
toastr.warning(`Drop failed :( try again?`);
|
||||
} else {
|
||||
toastr.info(`Adding ${evt.dataTransfer.files.length} files.`);
|
||||
}
|
||||
|
||||
// Get all input elements
|
||||
inputs = $("#long-form input[type=file][id^=id_images-]");
|
||||
inputs = $("#long-form input[type=file][id^=id_images-]");
|
||||
//fileInput = document.getElementById("id_images-0-image");
|
||||
|
||||
// Make sure we have enough input targets
|
||||
input_diff = (evt.dataTransfer.files.length - inputs.length)
|
||||
input_diff = (evt.dataTransfer.files.length - inputs.length)
|
||||
|
||||
if (input_diff > 0) {
|
||||
for (let j = 0; j < input_diff; j++) {
|
||||
add_input_form()
|
||||
}
|
||||
if (input_diff > 0) {
|
||||
for (let j = 0; j < input_diff; j++) {
|
||||
add_input_form()
|
||||
}
|
||||
|
||||
// Need to make sure we include the new ones...
|
||||
inputs = $("#long-form input[type=file][id^=id_images-]");
|
||||
}
|
||||
inputs = $("#long-form input[type=file][id^=id_images-]");
|
||||
}
|
||||
|
||||
// Loop through each dropped file and try to assign to an
|
||||
// input element
|
||||
[...evt.dataTransfer.files].forEach((f) => {
|
||||
let dT = new DataTransfer();
|
||||
dT.clearData();
|
||||
dT.items.add(f);
|
||||
for (let i = 0; i < inputs.length; i++) {
|
||||
el = inputs.get(i)
|
||||
[...evt.dataTransfer.files].forEach((f) => {
|
||||
let dT = new DataTransfer();
|
||||
dT.clearData();
|
||||
dT.items.add(f);
|
||||
for (let i = 0; i < inputs.length; i++) {
|
||||
el = inputs.get(i)
|
||||
|
||||
if (el.files.length == 0) {
|
||||
el.files = dT.files;
|
||||
if (el.files.length == 0) {
|
||||
el.files = dT.files;
|
||||
//ocr(el)
|
||||
|
||||
return false
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// // If you want to use some of the dropped files
|
||||
// const dT = new DataTransfer();
|
||||
@@ -115,31 +115,31 @@
|
||||
// dT.items.add(evt.dataTransfer.files[3]);
|
||||
// fileInput.files = dT.files;
|
||||
|
||||
loadDicomViewerAndFileImages();
|
||||
loadDicomViewerAndFileImages();
|
||||
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
};
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
};
|
||||
|
||||
|
||||
$('#add_more_images').click(() => { add_input_form() });
|
||||
$('#add_more_answers').click(() => { add_answers_input_form() });
|
||||
$('#add_more_images').click(() => { add_input_form() });
|
||||
$('#add_more_answers').click(() => { add_answers_input_form() });
|
||||
|
||||
|
||||
$("input[type=file]").on('change', function () {
|
||||
$(this).removeClass("image-ident-warning");
|
||||
$(this).removeClass("image-ident-ok");
|
||||
console.log("input change1");
|
||||
console.log("input change", this);
|
||||
$("input[type=file]").on('change', function () {
|
||||
$(this).removeClass("image-ident-warning");
|
||||
$(this).removeClass("image-ident-ok");
|
||||
console.log("input change1");
|
||||
console.log("input change", this);
|
||||
//ocr(this);
|
||||
//LoadDicomViewer();
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
sortable('.sortable');
|
||||
sortable('.sortable')[0].addEventListener('sortupdate', function(e) {
|
||||
sortable('.sortable');
|
||||
sortable('.sortable')[0].addEventListener('sortupdate', function(e) {
|
||||
/*
|
||||
|
||||
This event is triggered when the user stops sorting and the DOM position has not yet changed.
|
||||
@@ -153,15 +153,15 @@
|
||||
*/
|
||||
//updateImagePositions();
|
||||
|
||||
$(".temp-thumb").remove()
|
||||
loadDicomViewer();
|
||||
$(".temp-thumb").remove()
|
||||
loadDicomViewer();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
function ocr(input) {
|
||||
function ocr(input) {
|
||||
// Tesseract.recognize(f, "eng",{ logger: m => console.log(m) }
|
||||
// ).then(({ data: { text } }) => {
|
||||
// console.log(text);
|
||||
@@ -171,186 +171,186 @@
|
||||
// }
|
||||
// })
|
||||
|
||||
console.log('{% static "worker.min.js" %}');
|
||||
console.log('{{ STATIC_URL }}/tesseract-core.wasm.js %}');
|
||||
console.log('{% static "worker.min.js" %}');
|
||||
console.log('{{ STATIC_URL }}/tesseract-core.wasm.js %}');
|
||||
|
||||
const worker = Tesseract.createWorker({
|
||||
workerPath: '{% static "worker.min.js" %}',
|
||||
langPath: '{% static "" %}',
|
||||
const worker = Tesseract.createWorker({
|
||||
workerPath: '{% static "worker.min.js" %}',
|
||||
langPath: '{% static "" %}',
|
||||
//langPath: '{{ STATIC_URL }}',
|
||||
corePath: '{% static "tesseract-core.wasm.js" %}',
|
||||
});
|
||||
corePath: '{% static "tesseract-core.wasm.js" %}',
|
||||
});
|
||||
|
||||
const url = URL.createObjectURL(input.files[0]);
|
||||
let img = new Image;
|
||||
img.src = url;
|
||||
const url = URL.createObjectURL(input.files[0]);
|
||||
let img = new Image;
|
||||
img.src = url;
|
||||
|
||||
img.onload = function () {
|
||||
img.onload = function () {
|
||||
|
||||
|
||||
width = img.width;
|
||||
width = img.width;
|
||||
|
||||
// const rectangle = { left: 0, top: 0, width: width, height: 10 }
|
||||
|
||||
|
||||
(async () => {
|
||||
await worker.load();
|
||||
await worker.loadLanguage('eng');
|
||||
await worker.initialize('eng');
|
||||
(async () => {
|
||||
await worker.load();
|
||||
await worker.loadLanguage('eng');
|
||||
await worker.initialize('eng');
|
||||
// const { data: { text } } = await worker.recognize(input.files[0], { rectangle });
|
||||
const { data: { text } } = await worker.recognize(input.files[0]);
|
||||
const { data: { text } } = await worker.recognize(input.files[0]);
|
||||
//console.log(text);
|
||||
l = text.toLowerCase();
|
||||
$(`img[data-input-id='${input.id}'`).removeClass("image-ident-loading");
|
||||
console.log(l);
|
||||
if (l.includes("accesion") || l.includes("number") || l.search(/(ref|rk9|rh8|ra9|rbz)\d+/g) > -1) {
|
||||
$(input).addClass("image-ident-warning");
|
||||
$(`img[data-input-id='${input.id}'`).addClass("image-ident-warning");
|
||||
} else {
|
||||
$(input).addClass("image-ident-ok");
|
||||
l = text.toLowerCase();
|
||||
$(`img[data-input-id='${input.id}'`).removeClass("image-ident-loading");
|
||||
console.log(l);
|
||||
if (l.includes("accesion") || l.includes("number") || l.search(/(ref|rk9|rh8|ra9|rbz)\d+/g) > -1) {
|
||||
$(input).addClass("image-ident-warning");
|
||||
$(`img[data-input-id='${input.id}'`).addClass("image-ident-warning");
|
||||
} else {
|
||||
$(input).addClass("image-ident-ok");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
await worker.terminate();
|
||||
})();
|
||||
await worker.terminate();
|
||||
})();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function loadDicomViewerAndFileImages(callback) {
|
||||
$("#single-dicom-viewer").empty()
|
||||
async function loadDicomViewerAndFileImages(callback) {
|
||||
$("#single-dicom-viewer").empty()
|
||||
//images = []
|
||||
//Function that returns a promise to read the file
|
||||
const reader = (file) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const fileReader = new FileReader();
|
||||
fileReader.onload = () => resolve(fileReader);
|
||||
fileReader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
const reader = (file) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const fileReader = new FileReader();
|
||||
fileReader.onload = () => resolve(fileReader);
|
||||
fileReader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
const readFile = (file, el) => {
|
||||
reader(file).then(reader => {
|
||||
var image = new Image();
|
||||
image.height = 100;
|
||||
image.title = file.name;
|
||||
image.src = reader.result;
|
||||
image.className = "temp-thumb";
|
||||
console.log("read" ,el);
|
||||
$(el).parent().parent().prepend(image);
|
||||
const readFile = (file, el) => {
|
||||
reader(file).then(reader => {
|
||||
var image = new Image();
|
||||
image.height = 100;
|
||||
image.title = file.name;
|
||||
image.src = reader.result;
|
||||
image.className = "temp-thumb";
|
||||
console.log("read" ,el);
|
||||
$(el).parent().parent().prepend(image);
|
||||
//images.push(reader.result);
|
||||
loadViewer(images);
|
||||
});
|
||||
loadViewer(images);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
file_set = $("#image_form_set input[type=file]");
|
||||
|
||||
|
||||
|
||||
file_set.each(async (n, el) => {
|
||||
console.log(el);
|
||||
if (el.files.length > 0) {
|
||||
filename = el.files[0].name;
|
||||
await readFile(el.files[0], el);
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
console.log("images from files", images);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
file_set = $("#image_form_set input[type=file]");
|
||||
|
||||
|
||||
|
||||
file_set.each(async (n, el) => {
|
||||
console.log(el);
|
||||
if (el.files.length > 0) {
|
||||
filename = el.files[0].name;
|
||||
await readFile(el.files[0], el);
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
console.log("images from files", images);
|
||||
|
||||
|
||||
}
|
||||
|
||||
function loadViewer(images) {
|
||||
function loadViewer(images) {
|
||||
//dicomViewer.loadCornerstone($("#single-dicom-viewer"), null, images, annotations);
|
||||
file_set = $("#image_form_set input[type=file]");
|
||||
file_set = $("#image_form_set input[type=file]");
|
||||
|
||||
n = 0;
|
||||
for (let i = 0; i < file_set.length; i++) {
|
||||
el = file_set.get(i)
|
||||
if (el.files.length > 0) {
|
||||
n++;
|
||||
n = 0;
|
||||
for (let i = 0; i < file_set.length; i++) {
|
||||
el = file_set.get(i)
|
||||
if (el.files.length > 0) {
|
||||
n++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
image_set = $("#image_form_set img");
|
||||
if (n == image_set.length) {
|
||||
const event = new CustomEvent('loadDicomViewer', { "detail": image_set });
|
||||
image_set = $("#image_form_set img");
|
||||
if (n == image_set.length) {
|
||||
const event = new CustomEvent('loadDicomViewer', { "detail": image_set });
|
||||
|
||||
window.dispatchEvent(event);
|
||||
sortable('.sortable');
|
||||
window.dispatchEvent(event);
|
||||
sortable('.sortable');
|
||||
//sortable('.sortable')[0].addEventListener('sortstop', function(e) {
|
||||
updateImagePositions();
|
||||
updateImagePositions();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
function updateImagePositions() {
|
||||
console.log("UP pos");
|
||||
|
||||
function updateImagePositions() {
|
||||
console.log("UP pos");
|
||||
file_set = $("#image_form_set ul");
|
||||
|
||||
file_set = $("#image_form_set ul");
|
||||
n = 0;
|
||||
for (let i = 0; i < file_set.length; i++) {
|
||||
ul = file_set.get(i);
|
||||
console.log(ul)
|
||||
|
||||
n = 0;
|
||||
for (let i = 0; i < file_set.length; i++) {
|
||||
ul = file_set.get(i);
|
||||
console.log(ul)
|
||||
|
||||
file_element = $(ul).find("input[type=file]").get(0);
|
||||
file_element = $(ul).find("input[type=file]").get(0);
|
||||
|
||||
// If a (new) file is being uploaded we save it's name prior to it being hashed
|
||||
if (file_element.files.length > 0) {
|
||||
file_name = file_element.files[0].name
|
||||
$(ul).find("input[type=text]").val(file_name);
|
||||
if (file_element.files.length > 0) {
|
||||
file_name = file_element.files[0].name
|
||||
$(ul).find("input[type=text]").val(file_name);
|
||||
}
|
||||
|
||||
if (file_element.files.length > 0 || $(ul).find(":contains('Currently:')")) {
|
||||
n++;
|
||||
$(ul).find("input[type=number]").val(n);
|
||||
}
|
||||
}
|
||||
|
||||
if (file_element.files.length > 0 || $(ul).find(":contains('Currently:')")) {
|
||||
n++;
|
||||
$(ul).find("input[type=number]").val(n);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
{{ form.media }}
|
||||
{{ form.media }}
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<h2>Series Form</h2>
|
||||
This form will create a image set that can be associated with a long question. If the question has already been created it can be linked below.
|
||||
<form action="" method="post" enctype="multipart/form-data" id="long-form">
|
||||
{% csrf_token %}
|
||||
<a href="/generic/examination/create" id="add_examination" class="add-popup"
|
||||
onclick="return showAddPopup(this);"><img src="{% static 'img/icon-addlink.svg' %}"></a>
|
||||
<table>
|
||||
{{ form.as_table }}
|
||||
</table>
|
||||
<h2>Series Form</h2>
|
||||
This form will create a image set that can be associated with a long question. If the question has already been created it can be linked below.
|
||||
<form action="" method="post" enctype="multipart/form-data" id="long-form">
|
||||
{% csrf_token %}
|
||||
<a href="/generic/examination/create" id="add_examination" class="add-popup"
|
||||
onclick="return showAddPopup(this);"><img src="{% static 'img/icon-addlink.svg' %}"></a>
|
||||
<table>
|
||||
{{ form.as_table }}
|
||||
</table>
|
||||
|
||||
<h3>Images:</h3>
|
||||
<input type="button" value="Add More Images" id="add_more_images">
|
||||
<div id="drop-container" class="">Drop images here (or use the buttons below). Dropping images here will overwrite existing images in the series. When drag and dropping make sure to drag the first image or the order will not be maintained. Note: dicom images are often not exported in order (although their order can be automatically detected once uploaded)
|
||||
<div id="single-dicom-viewer" class="dicom-viewer" data-images="" data-annotations=''></div>
|
||||
<div id="drop-filenames"></div>
|
||||
</div>
|
||||
<div id="image_form_set" class="sortable">
|
||||
{% for form in image_formset %}
|
||||
<ul class="no-error image-formset">
|
||||
{{form.non_field_errors}}
|
||||
{{form.errors}}
|
||||
{{ form.as_ul }}
|
||||
<h3>Images:</h3>
|
||||
<input type="button" value="Add More Images" id="add_more_images">
|
||||
<div id="drop-container" class="">Drop images here (or use the buttons below). Dropping images here will overwrite existing images in the series. When drag and dropping make sure to drag the first image or the order will not be maintained. Note: dicom images are often not exported in order (although their order can be automatically detected once uploaded)
|
||||
<div id="single-dicom-viewer" class="dicom-viewer" data-images="" data-annotations=''></div>
|
||||
<div id="drop-filenames"></div>
|
||||
</div>
|
||||
<div id="image_form_set" class="sortable">
|
||||
{% for form in image_formset %}
|
||||
<ul class="no-error image-formset">
|
||||
{{form.non_field_errors}}
|
||||
{{form.errors}}
|
||||
{{ form.as_ul }}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{{ image_formset.management_form }}
|
||||
<input type="submit" class="submit-button" value="Submit" name="submit">
|
||||
</form>
|
||||
<div id="empty_form" style="display:none">
|
||||
<ul class='no_error image-formset'>
|
||||
{{ image_formset.empty_form.as_ul }}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{{ image_formset.management_form }}
|
||||
<input type="submit" class="submit-button" value="Submit" name="submit">
|
||||
</form>
|
||||
<div id="empty_form" style="display:none">
|
||||
<ul class='no_error image-formset'>
|
||||
{{ image_formset.empty_form.as_ul }}
|
||||
</ul>
|
||||
</div>
|
||||
<div id="images">
|
||||
<div id="images">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user