app/views/tasks/accessions/breakdown/sqed_depiction/_script.html.erb
<script>
$("#collection_object_buffered_collecting_event").focus();
var imageObject;
imageObject = new Image();
var imageAspectRatio;
var canvas;
var context;
var paper;
var paperWidth = 400;
var paperHeight = 400;
var imageWidth;
var imageHeight;
var select_box;
var big_svg_image;
// current position of the select box
var boxX = 0;
var boxY = 0;
var boxW = 50;
var boxH = 50;
var sourceX;
var sourceY;
var sourceWidth;
var sourceHeight;
var svg_box = {
'type': 'rect',
'x': 0,
'y': 0,
'width': 50,
'height': 50,
'fill': '#ffffff',
'stroke': '#000000',
'stroke-width': 1,
'opacity': 0.4
};
var p = Raphael("paper", paperWidth, paperHeight);
var sizes = "<%= @result.large_dimensions_for(@result.primary_image) -%>".split(',')
var resizeValues = resizeImage(Number(sizes[2]), Number(sizes[3]))
initRescale("<%= @result.image_path_for_large_image(@result.primary_image) -%>", [0, 0, resizeValues[0], resizeValues[1]])
$('.clickable').on('click', function (click) {
initRescale (click.currentTarget.src, [0, 0, click.currentTarget.naturalWidth, click.currentTarget.naturalHeight], true);
});
$('.destroyable').on('click', function () {
var name = $(this).data('object-name');
var field = $(this).parent('div.field');
field.html('removed, save required');
field.addClass('destroyable');
field.append($('<input hidden name="' + name + '[_destroy]" value="1" >'));
});
function initRescale (imageSrc, box, clearCanvas) {
p.clear();
big_svg_image = p.image(imageSrc, box[0], box[1], box[2], box[3]);
imageWidth = big_svg_image.attrs.width
imageHeight = big_svg_image.attrs.height
addSelectBox(p);
getBox(clearCanvas); // just clear the canvas
initDecodedText();
}
function addSelectBox(paper) {
var changeCursor = function (e, mouseX, mouseY) {
// Don't change cursor during a drag operation
if (this.dragging === true) {
return;
}
// X,Y Coordinates relative to shape's orgin
var relativeX = mouseX - $('#paper').offset().left - this.attr('x');
var relativeY = mouseY - $('#paper').offset().top - this.attr('y');
var shapeWidth = this.attr('width');
var shapeHeight = this.attr('height');
var resizeBorder = 10;
// Change cursor
if (relativeX < resizeBorder) { // left (west) border, so see if also a corner
this.attr('cursor', 'w-resize');
if (relativeY < resizeBorder) {
this.attr('cursor', 'nw-resize');
} else if (relativeY > shapeHeight - resizeBorder) {
this.attr('cursor', 'sw-resize');
}
} else if (relativeX > shapeWidth - resizeBorder) { // right (east) border, so see if also a corner
this.attr('cursor', 'e-resize');
if (relativeY > shapeHeight - resizeBorder) {
this.attr('cursor', 'se-resize');
} else if (relativeY < resizeBorder) {
this.attr('cursor', 'ne-resize');
}
} else if (relativeY > shapeHeight - resizeBorder) { // bottom (south) border, so see if also a corner
this.attr('cursor', 's-resize');
if (relativeX > shapeWidth - resizeBorder) {
this.attr('cursor', 'se-resize');
} else if (relativeX < resizeBorder) {
this.attr("cursor", 'sw-resize');
}
} else if (relativeY < resizeBorder) { // top (north) border, so see if also a corner
this.attr('cursor', 'n-resize');
if (relativeX < resizeBorder) {
this.attr('cursor', 'sw-resize');
} else if (relativeX > shapeWidth - resizeBorder) {
this.attr('cursor', 'sw-resize');
}
} else {
this.attr('cursor', 'move');
}
};
var dragStart = function () {
// Save some starting values
this.ox = this.attr('x');
this.oy = this.attr('y');
this.ow = this.attr('width');
this.oh = this.attr('height');
this.dragging = true;
};
var dragMove = function (dx, dy) {
// Inspect cursor to determine which resize/move process to use
switch (this.attr('cursor')) {
case 'w-resize' :
this.attr({
x: this.ox + dx,
width: this.ow - dx,
});
break;
case 'nw-resize' :
this.attr({
x: this.ox + dx,
y: this.oy + dy,
width: this.ow - dx,
height: this.oh - dy
});
break;
case 'ne-resize' :
this.attr({ // not changing x of origin in this case
y: this.oy + dy,
width: this.ow + dx,
height: this.oh - dy
});
break;
case 'e-resize' :
this.attr({ // not changing x of origin in this case
// y: this.oy + dy,
width: this.ow + dx,
// height: this.oh - dy
});
break;
case 'se-resize' :
this.attr({ // not changing x or y of origin in this case
width: this.ow + dx,
height: this.oh + dy
});
break;
case 'sw-resize' :
this.attr({ // ARE changing x of origin in this case
x: this.ox + dx,
width: this.ow - dx,
height: this.oh + dy
});
break;
case 'n-resize' :
this.attr({ // ARE changing y of origin in this case
y: this.oy + dy,
// width: this.ow + dx,
height: this.oh - dy
});
break;
case 's-resize' :
this.attr({ // not changing x or y of origin in this case
// y: this.oy + dy,
// width: this.ow + dx,
height: this.oh + dy
});
break;
default :
this.attr({ // default is <move> if not explicitly so (e.g., muffed n/s/e/w)
x: this.ox + dx,
y: this.oy + dy
});
break;
}
boxX = this.attr("x");
boxY = this.attr("y");
boxW = this.attr("width");
boxH = this.attr("height");
};
var dragEnd = function () {
this.dragging = false;
getBox(); // when box drag or sizing stops, get the box data
ocr_selection();
};
select_box = paper.add([
svg_box
]);
// select_box.mouseup(selectRectangle()); // does not work, preempted by dragEnd
select_box.mousemove(changeCursor)
select_box.drag(dragMove, dragStart, dragEnd);
}
; // end set_select_box
function big_svg_coords() {
c = big_svg_image.attr('src').split("scale_to_box")[1].split("/");
return [Number(c[1]), Number(c[2]), Number(c[3]), Number(c[4])];
}
;
function resizeImage (width, height) {
var aspectRatio = height > paperHeight ? paperHeight / height : 1;
return [width * aspectRatio, height * aspectRatio];
}
function getBox(reset) {
var coords = big_svg_coords(); // "corners" of the selectable image rectangle
// imageAspectRatio = coords[2] / coords[3];
imageAspectRatio = 1;
// calculate source framing
var SratioW = coords[2] / imageWidth; // separate the source amd destination distortion
var SratioH = coords[3] / imageHeight; // by computing separate rectangle aspect ratios
sourceX = Math.round((boxX * SratioW) + coords[0]);
sourceY = Math.round((boxY * SratioH * imageAspectRatio) + coords[1]);
sourceWidth = Math.round(boxW * SratioW);
sourceHeight = Math.round(boxH * SratioH * imageAspectRatio);
canvas = document.getElementById("selected_picture_canvas");
context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
if (reset) {
return
}
;
// calculate destination framing
var destWidth; // NOTE: destWidth and destHeight are
var destHeight; // no longer the same as paperWidth/Height
var ratioW = coords[2] / canvas.width; // This may end up set by this file
var ratioH = coords[3] / canvas.height; // vs fetched from static control
if (boxW >= boxH) { // destination width should equal canvas.width
destWidth = coords[2] / ratioW;
destHeight = (boxH / boxW) * destWidth; // dependent width assuming 1:1 pixel ratio
}
else { // destination height should equal canvas.height
destHeight = coords[3] / ratioH;
destWidth = (boxW / boxH) * destHeight; // dependent height assuming 1:1 pixel ratio
}
var destX = canvas.width / 2 - destWidth / 2; // center tall selection horizontally
var destY = 0; // bias wide selection to top // was canvas.height / 2 - destHeight / 2;
imageObject.src = $("#original_image").attr('src'); // make an image() object to "draw onto the canvas
context.drawImage(imageObject, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
// $('#debug_box').html(boxX + "|" + boxY + "|" + boxW + "|" + boxH + "-" + sourceX + "|" + sourceY + "|" + sourceWidth + "|" + sourceHeight );
}
;
function ocr_selection() {
$("#selected_text").html("Calculating ocr...");
var coord_string = Math.round(sourceX) + "/" + Math.round(sourceY) + "/" + Math.round(sourceWidth) + "/" + Math.round(sourceHeight);
var ocr_string = "/images/<%= @result.depiction.image.id -%>/ocr/" + coord_string;
$.get(ocr_string, function (data) {
if (data.text.length > 0) {
$("#selected_text").html(data.text);
}
else {
$("#selected_text").append(' FAILED');
}
}, 'json'
);
}
function initDecodedText() {
$("#selected_text").html('Drag box to ocr.');
}
$('#ocr_selection').on('click', function () {
ocr_selection();
});
$('#setBox').on('click', function () {
addSelectBox();
});
Mousetrap.bind('ctrl+q', function () {
append_user_selected_ocr();
});
Mousetrap.bind('ctrl+w', function () {
replace_user_selected_ocr();
});
Mousetrap.bind('ctrl+n', function () {
$("#save_and_next").trigger('click');
});
function append_user_selected_ocr() {
var target = $(document.activeElement);
$(target).val($(target).val() + $("#selected_text").html());
}
function replace_user_selected_ocr() {
var target = $(document.activeElement);
$(target).val($("#selected_text").html());
}
<% @result.image_sections.each_with_index do |section, i| -%>
Mousetrap.bind('ctrl+<%= %w{a s d f g h i}[i] %>', function () {
use_ocr('<%= section -%>');
});
<% end %>
<% @result.image_sections.each_with_index do |section, i| -%>
Mousetrap.bind('ctrl+<%= i + 1 %>', function () {
var index = <%= i -%>;
$("#little" + index).trigger('click');
});
<% end %>
$(".use_ocr").on('click', function (click) {
var section = this.id.split("use_")[1];
use_ocr(section);
});
function use_ocr(section) {
var ocr = $("#text_for_" + section).html();
var target_id;
var value;
if (section == 'identifier') {
target_id = "#collection_object_identifiers_attributes_0_identifier";
value = get_identifier(ocr);
}
else {
target_id = "#collection_object_" + $("#image_sections").data("section-" + section);
value = $(target_id).val() + ocr;
}
$(target_id).val(value);
}
function get_identifier(ocr_txt) {
// var regex = /\d{<%= @identifier_prototype.length -%>}/;
const regex = /\w*[^\s\\]\d+/
const result = regex.exec(ocr_txt);
return result
? result[0]
: ''
}
<% if !@result.ocr_cached? -%>
function original_ocr() {
<% @result.image_sections.each do |section| -%>
$("#text_for_<%= section -%>").html("<%= j @result.ocr_for(section) -%>")
<% end %>
}
$( document ).ready(function() {
original_ocr();
});
<% end %>
</script>