.
This commit is contained in:
Ross
Executable
+317
@@ -0,0 +1,317 @@
|
||||
{% extends "longs/base.html" %}
|
||||
{% load static from static %}
|
||||
|
||||
{% 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();
|
||||
}
|
||||
|
||||
document.addEventListener('drop', function (e) { e.preventDefault(); }, false);
|
||||
|
||||
function add_input_form() {
|
||||
var form_idx = $('#id_series-TOTAL_FORMS').val();
|
||||
$('#image_form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
|
||||
$('#id_series-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_abnormality").appendTo($("label[for='id_abnormality']"));
|
||||
$("#add_examination").appendTo($("label[for='id_examination']"));
|
||||
$("#add_region").appendTo($("label[for='id_region']"));
|
||||
|
||||
dropContainer = document.getElementById("drop-container");
|
||||
|
||||
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.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");
|
||||
|
||||
// Get all input elements
|
||||
inputs = $("#long-form input[type=file][id^=id_series-]");
|
||||
//fileInput = document.getElementById("id_series-0-image");
|
||||
|
||||
// Make sure we have enough input targets
|
||||
input_diff = (evt.dataTransfer.files.length - inputs.length)
|
||||
|
||||
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_series-]");
|
||||
}
|
||||
|
||||
// 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)
|
||||
|
||||
if (el.files.length == 0) {
|
||||
el.files = dT.files;
|
||||
//ocr(el)
|
||||
|
||||
return false
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// // If you want to use some of the dropped files
|
||||
// const dT = new DataTransfer();
|
||||
// dT.items.add(evt.dataTransfer.files[0]);
|
||||
// dT.items.add(evt.dataTransfer.files[3]);
|
||||
// fileInput.files = dT.files;
|
||||
|
||||
loadDicomViewer();
|
||||
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
};
|
||||
|
||||
|
||||
$('#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);
|
||||
//ocr(this);
|
||||
//LoadDicomViewer();
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
function ocr(input) {
|
||||
// Tesseract.recognize(f, "eng",{ logger: m => console.log(m) }
|
||||
// ).then(({ data: { text } }) => {
|
||||
// console.log(text);
|
||||
// l = text.toLowerCase();
|
||||
// if (l.includes("accesion") || l.includes("number") || l.search(/(REF|RK9|RH8|RA9)\d+/g)) {
|
||||
// console.log("SHIT", this);
|
||||
// }
|
||||
// })
|
||||
|
||||
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 "" %}',
|
||||
//langPath: '{{ STATIC_URL }}',
|
||||
corePath: '{% static "tesseract-core.wasm.js" %}',
|
||||
});
|
||||
|
||||
const url = URL.createObjectURL(input.files[0]);
|
||||
let img = new Image;
|
||||
img.src = url;
|
||||
|
||||
img.onload = function () {
|
||||
|
||||
|
||||
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');
|
||||
// const { data: { text } } = await worker.recognize(input.files[0], { rectangle });
|
||||
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) {
|
||||
console.log("SHIT", input);
|
||||
$(input).addClass("image-ident-warning");
|
||||
$(`img[data-input-id='${input.id}'`).addClass("image-ident-warning");
|
||||
} else {
|
||||
$(input).addClass("image-ident-ok");
|
||||
|
||||
}
|
||||
|
||||
await worker.terminate();
|
||||
})();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function loadDicomViewer(callback) {
|
||||
//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 readFile = (file) => {
|
||||
reader(file).then(reader => {
|
||||
var image = new Image();
|
||||
image.height = 100;
|
||||
image.title = file.name;
|
||||
image.src = reader.result;
|
||||
$("#images").append(image);
|
||||
//images.push(reader.result);
|
||||
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]);
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
console.log("images from files", images);
|
||||
|
||||
|
||||
}
|
||||
|
||||
function loadViewer(images) {
|
||||
//dicomViewer.loadCornerstone($("#single-dicom-viewer"), null, images, annotations);
|
||||
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++;
|
||||
}
|
||||
}
|
||||
|
||||
image_set = $("#images img");
|
||||
if (n == image_set.length) {
|
||||
const event = new CustomEvent('loadDicomViewer', { "detail": images });
|
||||
|
||||
window.dispatchEvent(event);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function updateImagePositions() {
|
||||
|
||||
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)
|
||||
|
||||
file_element = $(ul).find("input[type=file]").get(0);
|
||||
console.log(file_element);
|
||||
if (file_element.files.length > 0) {
|
||||
n++;
|
||||
$(ul).find("input[type=number]").val(n);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
{{ form.media }}
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<h2>Add Series</h2>
|
||||
<a href="{% url 'longs:long_create_defaults' %}">Edit defaults</a>
|
||||
<form action="" method="post" enctype="multipart/form-data" id="long-form">
|
||||
{% csrf_token %}
|
||||
<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)
|
||||
<div id="single-dicom-viewer" class="dicom-viewer" data-images="" data-annotations=''></div>
|
||||
<div id="drop-filenames"></div>
|
||||
</div>
|
||||
<div id="image_form_set">
|
||||
{% 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>
|
||||
</div>
|
||||
<div id="images">
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user