Newer
Older
<!DOCTYPE html>
<html>
<head>
{% for src in js %}
<script type="text/javascript" src="{{ src }}"></script>
{% endfor %}
{% for src in css %}
<link type="text/css" rel="stylesheet" href="{{ src }}">
{% endfor %}
<script type="text/javascript" src="{{ url_for( 'files.send_app_files', subpath = 'functions.js' ) }}"></script>
<link type="text/css" rel="stylesheet" href="{{ url_for( 'files.send_app_files', subpath = 'app.css' ) }}">
Marco De Donno
committed
<style type="text/css">
Marco De Donno
committed
margin-top: 50px;
}
.icnml_button > div > a {
Marco De Donno
committed
width: 60%;
margin-bottom: 10px;
Marco De Donno
committed
}
</style>
<script type="text/javascript">
baseurl = "{{ baseurl }}";
submission_id = "{{ submission_id }}";
Marco De Donno
committed
file_id = "{{ file[ 'uuid' ] }}";
var password_local = decrypt( sessionStorage.getItem( "session_key" ), "{{ session_security_key }}" );
var nickname = decrypt( "{{ nickname }}", password_local );
var filename = decrypt( "{{ file[ 'filename' ] }}", password_local );
var note = decrypt( "{{ file[ 'note' ] }}", password_local );
Marco De Donno
committed
var zones_array = new Array();
{% for zone in zones %}
zones_array.push( {{ zone[ 'fpc' ] }} );
Marco De Donno
committed
zonesData[ "{{ zone[ 'fpc' ] }}" ] = {
"fpc": {{ zone[ 'fpc' ] }},
"x": {{ zone[ 'x' ] }},
"y": {{ zone[ 'y' ] }},
"width": {{ zone[ 'width' ] }},
"height": {{ zone[ 'height' ] }}
Marco De Donno
committed
};
{% endfor %}
var update_quality_db = function()
{
var quality = $( "#file_{{ file[ 'uuid' ] }}_quality > select > option:checked" ).val();
$.ajax( {
url: "{{ url_for( 'submission.submission_tenprint_set_quality', submission_id = submission_id, tenprint_id = file[ 'uuid' ] ) }}",
dataType: "json",
method: "POST",
data: {
quality: quality
},
success: function( data )
{
if( data.error )
toastr.error( "Error while saving the quality value" );
},
error: function( data )
{
toastr.error( "Network error" );
}
} );
}
var update_note_db = function()
{
var note = $( "#file_note" ).val() || null;
note = encrypt( note, password_local );
$.ajax( {
url: "{{ url_for( 'submission.submission_file_set_note', submission_id = submission_id, tenprint_id = file[ 'uuid' ], file_type = 'tenprint' ) }}",
dataType: "json",
method: "POST",
data: {
note: note
}
} );
Marco De Donno
committed
var update_coordinates_informations = function()
{
svg_height = $( window ).height() - 100;
svg_width = svg_height * {{ svg_hw_factor }};
card_img_info = {
"right": svg_width * ( {{ card_info[ 'width_cm' ] }} * {{ img_info[ 'resolution' ] }} / 2.54 ) / ( {{ img_info[ 'width' ] }} ),
"bottom": svg_height * ( {{ card_info[ 'height_cm' ] }} * {{ img_info[ 'resolution' ] }} / 2.54 ) / ( {{ img_info[ 'height' ] }} ),
Marco De Donno
committed
}
dpc = card_img_info[ "right" ] / {{ card_info[ 'width_cm' ] }};
}
Marco De Donno
committed
Marco De Donno
committed
var start_segmentation = function()
{
$( "#segmentation_button_span_text" ).text( "Segmenting..." );
$( "#segmentation_button" ).append(
$( "<span />" )
.attr( "id", "segmentation_button_span_spinner" )
.attr( "class", "ld ld-ring ld-cycle" )
.css( "position", "absolute" )
.css( "right", "20px" )
)
$( "#segmentation_button" ).off( "click" );
$.ajax( {
url: "{{ url_for( 'image.image_tenprint_segmentation', tenprint_id = file[ 'uuid' ] ) }}",
dataType: "json",
success: function( data )
{
$( "#segmentation_button_span_text" ).text( "Segementation updated" );
$( "#segmentation_button_span_spinner" ).remove();
},
error: function( data )
{
$( "#segmentation_button_span_text" ).text( "Error while segmenting..." );
$( "#segmentation_button_span_spinner" ).remove();
}
} );
Marco De Donno
committed
}
Marco De Donno
committed
var updateSVG = function()
{
$( "#template_svg_div" )
.css( "width", svg_width )
.css( "height", svg_height );
$( ".icnml_central" )
.css( "width", svg_width * 2 )
.css( "height", svg_height );
$( "#zoomed_image" ).attr( "width", svg_width );
$( "#zoomed_image" ).attr( "height", svg_height );
$( "#tp_polygones" ).empty();
for( var i = 0; i < zones_array.length; i++ )
{
var fpc = zones_array[ i ];
var zone = zonesData[ fpc ];
var x = zone[ "x" ] * svg_width;
var y = zone[ "y" ] * svg_height;
var height = zone[ "height" ] * svg_height;
var width = zone[ "width" ] * svg_width;
Marco De Donno
committed
$( "#tp_polygones" )
.append( segment_svg( fpc, x, y, height, width ) );
Marco De Donno
committed
}
var delete_tenprint = function()
{
$( "<div />" )
.attr( "id", "delete_confirmation" )
.text( "Do you really want to delete this tenprint card?" )
.dialog( {
title: "Confirm tenprint deletion",
modal: true,
buttons: {
url: "{{ url_for( 'submission.submission_tenprint_delete', submission_id = submission_id, tenprint_id = file[ 'uuid' ] ) }}",
dataType: "json",
success: function( data )
{
$( "#delete_confirmation" ).remove();
window.location = "{{ url_for( 'submission.submission_tenprint_list', submission_id = submission_id ) }}";
},
error: function( data )
{
$( "#delete_confirmation" ).remove();
}
} );
},
},
close: function()
{
$( this ).remove();
}
} );
}
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
var update_zone_db = function( fpc, x, y, height, width )
{
var img = $( "#template_svg > image" );
$.ajax( {
url: "{{ url_for( 'submission.submission_segment_setcoordinates', submission_id = submission_id, tenprint_id = file[ 'uuid' ] ) }}",
dataType: "json",
method: "POST",
data: {
fpc: fpc,
x: x,
y: y,
w: width,
h: height,
img_height: img.height(),
img_width: img.width()
},
success: function( data )
{
},
error: function( data )
{
toastr.error( "Segment data not saved", "Network error" );
}
} );
}
Marco De Donno
committed
var delete_zone_db = function()
{
$.ajax( {
url: "{{ url_for( 'submission.submission_segment_deletecoordinates', submission_id = submission_id, tenprint_id = file[ 'uuid' ] ) }}",
dataType: "json",
success: function( data )
{
current_fpc = 1;
$( "#tp_polygones > g" ).remove();
Marco De Donno
committed
},
error: function( data )
{
toastr.error( "Segment data not deleted", "Network error" );
}
} );
}
var current_action = null;
var tmp_rect = null;
var move_text = null;
var svg_mouse_on = false;
Marco De Donno
committed
var current_fpc = zones_array.length + 1;
var svg_mouseenter = function( event )
{
svg_mouse_on = true;
}
var svg_mouseleave = function( event )
{
svg_mouse_on = false;
move_text = null;
$( "#move_text" )
.attr( "x", 0 )
.attr( "y", 0 )
.text( "" )
}
var start_action = function( event )
{
event.preventDefault();
start_click_pos = {
x: event.offsetX,
y: event.offsetY
}
{
case "image":
start_add_segment( event );
break;
case "polygon":
case "rect":
if( dist_to_br_corner( event ) < 30 )
start_resize_segment( event );
else
start_move_segment( event );
break;
default:
console.log( "no action" );
break;
}
return false;
}
var end_action = function( event )
{
event.preventDefault();
end_add_segment( event );
break;
case "move_segment":
end_move_segment( event );
case "resize_segment":
end_resize_segment( event );
break;
default:
console.log( "no action" );
break;
}
return false;
}
var move_action = function( event )
{
case "move_segment":
move_move_segment( event );
break;
case "add_segment":
move_add_segment( event );
break;
case "resize_segment":
move_resize_segment( event );
break;
move_hover_rect( event );
break;
default:
break;
var click_and_drag_value = {
startx: 0,
starty: 0,
endx: 0,
endy: 0
};
var start_add_segment = function( event )
{
Marco De Donno
committed
click_and_drag_value = {
startx: 0,
starty: 0,
endx: 0,
endy: 0
};
click_and_drag_value.startx = event.offsetX;
click_and_drag_value.starty = event.offsetY;
$( SVG( "rect" ) )
.attr( "id", "tmp_rect" )
.attr( "x", click_and_drag_value.startx )
.attr( "y", click_and_drag_value.starty )
.attr( "height", 0 )
.attr( "width", 0 )
.attr( "fill", "rgb( 255, 0, 0 )" )
.attr( "fill-opacity", "0.1" )
.attr( "stroke", "red" )
.attr( "stroke-width", "1" )
.appendTo( $( "#tp_polygones" ) );
var move_add_segment = function( evnet )
{
diff_x = event.offsetX - start_click_pos.x;
diff_y = event.offsetY - start_click_pos.y;
var a = Math.min( event.offsetX, start_click_pos.x );
var b = Math.min( event.offsetY, start_click_pos.y );
$( "#tmp_rect" )
.attr( "x", a )
.attr( "y", b )
.attr( "width", Math.abs( diff_x ) )
.attr( "height", Math.abs( diff_y ) )
}
var end_add_segment = function( event )
{
click_and_drag_value.endx = event.offsetX;
click_and_drag_value.endy = event.offsetY;
var x = Math.min( click_and_drag_value.startx, click_and_drag_value.endx );
var y = Math.min( click_and_drag_value.starty, click_and_drag_value.endy );
var width = click_and_drag_value.endx - click_and_drag_value.startx;
var height = click_and_drag_value.endy - click_and_drag_value.starty;
height = Math.abs( height );
width = Math.abs( width );
$( "#tmp_rect" ).remove();
if( height > 10 && width > 10 )
{
$( "#tp_polygones" )
.append( segment_svg( current_fpc, x, y, height, width ) );
update_zone_db( current_fpc, x, y, height, width );
click_and_drag_value = {
startx: 0,
starty: 0,
endx: 0,
endy: 0
};
Marco De Donno
committed
}
var move_target = null;
var move_target_initial_pos = {};
var start_move_segment = function( event )
{
Marco De Donno
committed
move_target = event.target;
x: parseFloat( $( move_target ).attr( "x" ) ),
y: parseFloat( $( move_target ).attr( "y" ) )
click_and_drag_value.startx = event.offsetX;
click_and_drag_value.starty = event.offsetY;
}
var move_move_segment = function( event )
{
diff_x = event.offsetX - start_click_pos.x;
diff_y = event.offsetY - start_click_pos.y;
$( move_target ).attr( "x", move_target_initial_pos.x + diff_x );
$( move_target ).attr( "y", move_target_initial_pos.y + diff_y );
$( move_target ).parent().children( "text" ).attr( "x", move_target_initial_pos.x + diff_x );
$( move_target ).parent().children( "text" ).attr( "y", move_target_initial_pos.y + diff_y );
}
var end_move_segment = function( event )
{
var x = $( move_target ).attr( "x" );
var y = $( move_target ).attr( "y" );
var w = $( move_target ).attr( "width" );
var h = $( move_target ).attr( "height" );
x = parseFloat( x );
y = parseFloat( y );
w = parseFloat( w );
h = parseFloat( h );
var target_id = $( move_target ).attr( "id" );
target_id = target_id.replace( "segment_fpc_", "" );
update_zone_db( target_id, x, y, h, w );
click_and_drag_value = {
startx: 0,
starty: 0,
endx: 0,
endy: 0
};
move_target = null;
Marco De Donno
committed
var move_hover_rect = function( event )
Marco De Donno
committed
{
if( event.target.nodeName === "rect" )
Marco De Donno
committed
{
if( ( dist_to_br_corner( event ) ) <= 30 )
{
$( event.target ).css( "cursor", "nwse-resize" );
} else {
$( event.target ).css( "cursor", "move" );
}
Marco De Donno
committed
}
}
var resize_target = null;
var resize_target_initial_size = {};
var start_resize_segment = function( event )
{
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
resize_target = event.target;
resize_target_initial_size = {
width: parseFloat( $( resize_target ).attr( "width" ) ),
height: parseFloat( $( resize_target ).attr( "height" ) )
}
}
var move_resize_segment = function( event )
{
diff_x = event.offsetX - start_click_pos.x;
diff_y = event.offsetY - start_click_pos.y;
$( resize_target ).attr( "width", resize_target_initial_size.width + diff_x );
$( resize_target ).attr( "height", resize_target_initial_size.height + diff_y );
}
var end_resize_segment = function( event )
{
var x = $( resize_target ).attr( "x" );
var y = $( resize_target ).attr( "y" );
var w = $( resize_target ).attr( "width" );
var h = $( resize_target ).attr( "height" );
x = parseFloat( x );
y = parseFloat( y );
w = parseFloat( w );
h = parseFloat( h );
var target_id = $( resize_target ).attr( "id" );
target_id = target_id.replace( "segment_fpc_", "" );
update_zone_db( target_id, x, y, h, w );
click_and_drag_value = {
startx: 0,
starty: 0,
endx: 0,
endy: 0
};
resize_target = null;
resize_target_initial_size = null;
Marco De Donno
committed
var dist_to_br_corner = function( event )
{
var targetx = $( event.target ).attr( "x" );
var targety = $( event.target ).attr( "y" );
var targetwidth = $( event.target ).attr( "width" );
var targetheight = $( event.target ).attr( "height" );
targetx = parseFloat( targetx );
targety = parseFloat( targety );
targetwidth = parseFloat( targetwidth );
targetheight = parseFloat( targetheight );
var dx = ( targetx + targetwidth ) - event.offsetX;
var dy = ( targety + targetheight ) - event.offsetY;
Marco De Donno
committed
return Math.sqrt( dx * dx + dy * dy );
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
var segment_svg = function( fpc, x, y, height, width )
{
var svggroup = SVG( "g" );
$( SVG( "rect" ) )
.attr( "id", "segment_fpc_" + fpc )
.attr( "x", x )
.attr( "y", y )
.attr( "height", height )
.attr( "width", width )
.attr( "fill", "rgb( 255, 0, 0 )" )
.attr( "fill-opacity", "0.1" )
.attr( "stroke", "red" )
.attr( "stroke-width", "1" )
.appendTo( svggroup );
$( SVG( "text" ) )
.attr( "x", x )
.attr( "y", y - 5 )
.attr( "fill", "rgb( 255, 0, 0 )" )
.text( "finger " + fpc )
.appendTo( svggroup );
return svggroup;
}
</script>
</head>
<body class="icnml_main_layout">
{% include "header.html" %}
Marco De Donno
committed
{% include navigation %}
<div class="icnml_content">
<div class="icnml_tp_oneperpage">
<form id="icnml_file_update_{{ file[ 'uuid' ] }}">
<div class="ui-widget-header ui-corner-top icnml_box_top">File '<span id="header_filename">-</span>'</div>
<div class="ui-widget-content ui-corner-bottom icnml_box_content">
<div class="icnml_tp_cardbox">
<div id="template_svg_div">
<svg id="template_svg" width="100%" height="100%">
<image x="0" y="0" width="100%" height="100%" xlink:href="{{ url_for( 'image.image_file_serve', file_id = file[ 'uuid' ] ) }}"></image>
<text id="move_text"></text>
</svg>
</div>
<div>
<div class="icnml_box_fields">
<div>Name</div>
<div id="box_filename"></div>
<div>Format</div>
<div>{{ file[ 'format' ] }}</div>
<div>Resolution</div>
<div>{{ file[ 'resolution' ] }} dpi</div>
<div>Width</div>
<div>{{ file[ 'width' ] }} px</div>
<div>Height</div>
<div>{{ file[ 'height' ] }} px</div>
<div>Size</div>
<div>{{ file[ 'size' ] }} Mo</div>
<div>Upload time</div>
<div id="file_{{ file[ 'uuid' ] }}_uploadtime">-</div>
<div>Quality</div>
<div id="file_{{ file[ 'uuid' ] }}_quality">
<select name="tenprint_quality_select">
<option value="0" id="tenprint_quality_none_option" selected>None</option>
{% for quality_type in quality_type %}
<option value="{{ quality_type[ 'id' ] }}" id="tenprint_quality_{{ quality_type[ 'id' ] }}_option">
{{ quality_type[ 'name' ] }}
</option>
{% endfor %}
</select>
</div>
<div><textarea rows="6" id="file_note"></textarea></div>
<div class="icnml_button">
Marco De Donno
committed
<div id="delete_segments_information_button_div">
<a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="delete_segments_information_button" role="button" aria-disabled="false">
<span class="ui-button-text" id="delete_segments_information_button_text">Delete segments informations</span>
</a>
</div>
<div id="segmentation_button_div">
<a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="segmentation_button" role="button" aria-disabled="false">
<span class="ui-button-text" id="segmentation_button_span_text">Update segmentation</span>
</a>
</div>
<div id="go_to_segmentation_button_div">
<a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="go_to_segmentation_button" href="{{ url_for( 'submission.submission_tenprint_segments_list', submission_id = submission_id, tenprint_id = file[ 'uuid' ] ) }}">
<span class="ui-button-text" id="go_to_segmentation_button_span_text">Go to segments list</span>
</a>
</div>
<div id="delete_button_div" style="margin-top: 30px;">
<a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="delete_button">
<span class="ui-button-text" id="delete_button_span_text">Delete tenprint card</span>
</a>
</div>
Marco De Donno
committed
</div>
</div>
</div>
Marco De Donno
committed
</div>
</div>
</body>
<script type="text/javascript">
window.addEventListener( "resize", function( event )
{
update_coordinates_informations();
updateSVG();
} );
update_coordinates_informations();
updateSVG();
$( "#header_filename" ).text( filename );
$( "#box_filename" ).text( filename );
$( "#file_note" ).text( note );
{% for zone in zones %}
$( "#pc_{{ zone[ 'pc' ] }}" ).on( "click", function()
{
window.location = "{{ url_for( 'submission.submission_segment', submission_id = submission_id, tenprint_id = file[ 'uuid' ], pc = zone[ 'pc' ] ) }}";
} );
{% endfor %}
$( "#delete_button" ).on( "click", delete_tenprint );
Marco De Donno
committed
$( "#delete_segments_information_button" ).on( "click", delete_zone_db );
$( "#file_{{ file[ 'uuid' ] }}_quality > select" ).on( "change", update_quality_db );
$( "#tenprint_quality_{{ file[ 'quality' ] }}_option" ).prop( "selected", true );
$( "#file_note" ).on( "change", update_note_db );
$( "#file_{{ file[ 'uuid' ] }}_uploadtime" )
.text( moment.utc( "{{ file[ 'creation_time' ] }}" ).local().format( "MMMM Do YYYY, HH:mm:ss" ) );
$( "#segmentation_button" ).on( "click", start_segmentation );
$( "#template_svg" ).on( "mousedown", start_action );
$( "#template_svg" ).on( "mousemove", move_action );
$( "#template_svg" ).on( "mouseup", end_action );
$( "#template_svg" ).on( "contextmenu", function( event )
{
event.preventDefault();
return false;
} );
$( "#template_svg" ).on( "mouseenter", svg_mouseenter );
$( "#template_svg" ).on( "mouseleave", svg_mouseleave );
.attr( "href", "{{ url_for( 'submission.submission_list' ) }}" )
.text( "Submissions" )
)
.append(
$( "<span />" ).text( ">" )
)
.append(
$( "<a />" )
.attr( "href", "{{ url_for( 'submission.submission_upload_tplp', submission_id = submission_id ) }}" )
.text( nickname )
)
.append(
$( "<span />" ).text( ">" )
)
.append(
$( "<a />" )
.attr( "href", "{{ url_for( 'submission.submission_tenprint_list', submission_id = submission_id ) }}" )
.text( "Tenprints" )
)
.append(
$( "<span />" ).text( ">" )
)
.append(
$( "<span />" ).text( filename )
);
</script>
</html>