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();
var $svg = $( "#tp_polygones" );
var fpc = zones_array[ i ];
var zone = zonesData[ fpc ];
$( SVG( "rect" ) )
.attr( "id", "segment_fpc_" + zone[ "fpc" ] )
.attr( "x", zone[ "x" ] * svg_width )
.attr( "y", zone[ "y" ] * svg_height )
.attr( "height", zone[ "height" ] * svg_height )
.attr( "width", zone[ "width" ] * svg_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", zone[ "x" ] * svg_width )
.attr( "y", ( zone[ "y" ] * svg_height ) - 5 )
.attr( "fill", "rgb( 255, 0, 0 )" )
.text( "finger " + zone[ "fpc" ] )
.appendTo( $svggroup );
Marco De Donno
committed
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();
}
} );
}
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
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;
Marco De Donno
committed
var current_function = null;
var tmp_rect = null;
var move_text = null;
var svg_mouse_on = false;
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
}
current_action = event.target.nodeName;
switch( current_action )
{
case "image":
start_add_segment( event );
break;
case "polygon":
case "rect":
if( event.button == 0 )
start_move_segment( event );
} else {
$( event.target ).parent().remove();
}
break;
default:
console.log( "no action" );
break;
}
return false;
}
var end_action = function( event )
{
event.preventDefault();
switch( current_action )
{
case "image":
end_add_segment( event );
break;
case "polygon":
case "rect":
if( event.button == 0 )
end_move_segment( event );
break;
default:
console.log( "no action" );
break;
}
current_action = null;
return false;
}
var move_action = function( event )
{
if( start_click_pos !== null )
{
diff_x = event.offsetX - start_click_pos.x;
diff_y = event.offsetY - start_click_pos.y;
}
if( move_target !== null )
{
$( 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 );
} else if( start_click_pos != null ){
Marco De Donno
committed
var a = Math.min( event.offsetX, start_click_pos.x );
var b = Math.min( event.offsetY, start_click_pos.y );
$( "#tmp_rect" )
Marco De Donno
committed
.attr( "x", a )
.attr( "y", b )
.attr( "width", Math.abs( diff_x ) )
.attr( "height", Math.abs( diff_y ) )
} else {
if( move_text !== null )
{
$( "#move_text" )
.attr( "x", event.offsetX )
.attr( "y", event.offsetY )
.text( move_text )
}
if( event.target.nodeName === "rect" )
{
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;
if( ( dx * dx + dy * dy ) <= ( 30 * 30 ) )
{
} else {
$( event.target ).css( "cursor", "move" );
}
}
var click_and_drag_value = {
startx: 0,
starty: 0,
endx: 0,
endy: 0
};
var start_add_segment = function( event )
{
Marco De Donno
committed
current_function = "add_segment";
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 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 )
{
$svg = $( "#tp_polygones" );
$svggroup = SVG( "g" );
$( SVG( "rect" ) )
.attr( "id", "segment_fpc_" + current_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 " + current_fpc )
.appendTo( $svggroup );
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
current_function = null;
}
var move_target = null;
var move_target_initial_pos = {};
var start_move_segment = function( event )
{
Marco De Donno
committed
current_function = "move_segment";
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 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
current_function = null;
</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>