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( 'send_app_files', subpath = 'functions.js' ) }}"></script>
<link type="text/css" rel="stylesheet" href="{{ url_for( '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 }}";
upload_id = "{{ upload_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[ 'pc' ] }} );
{% endfor %}
var data_columns = new Array();
{% for d in datacolumns %}
data_columns.push( "{{ d }}" );
{% endfor %}
Marco De Donno
committed
Marco De Donno
committed
zonesData[ "{{ zone[ 'pc' ] }}" ] = {
Marco De Donno
committed
"tl_y": {{ zone[ 'tl_y' ] }},
"br_x": {{ zone[ 'br_x' ] }},
"br_y": {{ zone[ 'br_y' ] }},
"angle": {{ zone[ 'angle' ] }}
};
{% endfor %}
Marco De Donno
committed
var update_template_db = function()
{
var template = $( "#file_{{ file[ 'uuid' ] }}_template > select > option:checked" ).val();
$.ajax( {
url: "{{ url_for( 'submission_tenprint_set_template', id = submission_id, file = file[ 'uuid' ] ) }}",
dataType: "json",
method: "POST",
data: {
template: template
},
success: function( data )
{
location.reload();
}
} );
Marco De Donno
committed
}
var update_note_db = function()
{
var note = $( "#file_note" ).val() || null;
note = encrypt( note, password_local );
$.ajax( {
url: "{{ url_for( 'submission_file_set_note', id = submission_id, file = file[ 'uuid' ], t = '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_tenprint_segmentation', 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()
{
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
$( "#template_svg_div" )
.css( "width", svg_width )
.css( "height", svg_height );
$( ".icnml_central" )
.css( "width", svg_width * 2 )
.css( "height", svg_height );
$( "#line_right_border" ).attr( "x1", card_img_info[ "right" ] );
$( "#line_right_border" ).attr( "x2", card_img_info[ "right" ] );
$( "#line_right_border" ).attr( "y2", svg_height );
$( "#line_bottom_border" ).attr( "x2", svg_width );
$( "#line_bottom_border" ).attr( "y1", card_img_info[ "bottom" ] );
$( "#line_bottom_border" ).attr( "y2", card_img_info[ "bottom" ] );
$( "#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 pc = zones_array[ i ];
var $svg = $( "#tp_polygones" );
var a = zonesData[ pc ][ "tl_x" ] * dpc + "," + zonesData[ pc ][ "tl_y" ] * dpc;
var b = zonesData[ pc ][ "br_x" ] * dpc + "," + zonesData[ pc ][ "tl_y" ] * dpc;
var c = zonesData[ pc ][ "br_x" ] * dpc + "," + zonesData[ pc ][ "br_y" ] * dpc;
var d = zonesData[ pc ][ "tl_x" ] * dpc + "," + zonesData[ pc ][ "br_y" ] * dpc;
Marco De Donno
committed
var p = a + " " + b + " " + c + " " + d;
if( ! p.includes( "NaN" ) )
.attr( "id", "pc_" + pc )
.attr( "points", p )
.attr( "fill", "rgb( 255, 0, 0 )" )
.attr( "fill-opacity", "0.1" )
.attr( "stroke", "red" )
.attr( "stroke-width", "1" )
Marco De Donno
committed
.appendTo( $svg );
Marco De Donno
committed
$( SVG( "line" ) )
.attr( "id", "pc_" + pc + "_angle" )
.attr( "x1", zonesData[ pc ][ "tl_x" ] * dpc )
.attr( "y1", zonesData[ pc ][ "tl_y" ] * dpc + 20 )
.attr( "x2", zonesData[ pc ][ "br_x" ] * dpc )
.attr( "y2", zonesData[ pc ][ "tl_y" ] * dpc + 20 )
.attr( "stroke", "red" )
.attr( "stroke-width", "2" )
.attr( "stroke-opacity", "0.3" )
Marco De Donno
committed
.appendTo( $svg );
} else if ( zonesData[ pc ][ "angle" ] == 90 ) {
$( SVG( "line" ) )
.attr( "id", "pc_" + pc + "_angle" )
.attr( "x1", zonesData[ pc ][ "br_x" ] * dpc - 20 )
.attr( "y1", zonesData[ pc ][ "tl_y" ] * dpc )
.attr( "x2", zonesData[ pc ][ "br_x" ] * dpc - 20 )
.attr( "y2", zonesData[ pc ][ "br_y" ] * dpc )
.attr( "stroke", "red" )
.attr( "stroke-width", "2" )
.attr( "stroke-opacity", "0.3" )
Marco De Donno
committed
.appendTo( $svg );
} else if ( zonesData[ pc ][ "angle" ] == 180 ) {
$( SVG( "line" ) )
.attr( "id", "pc_" + pc + "_angle" )
.attr( "x1", zonesData[ pc ][ "br_x" ] * dpc )
.attr( "y1", zonesData[ pc ][ "br_y" ] * dpc - 20 )
.attr( "x2", zonesData[ pc ][ "tl_x" ] * dpc )
.attr( "y2", zonesData[ pc ][ "br_y" ] * dpc - 20 )
.attr( "stroke", "red" )
.attr( "stroke-width", "2" )
.attr( "stroke-opacity", "0.3" )
Marco De Donno
committed
.appendTo( $svg );
} else if ( zonesData[ pc ][ "angle" ] == 270 ) {
$( SVG( "line" ) )
.attr( "id", "pc_" + pc + "_angle" )
.attr( "x1", zonesData[ pc ][ "tl_x" ] * dpc + 20 )
.attr( "y1", zonesData[ pc ][ "tl_y" ] * dpc )
.attr( "x2", zonesData[ pc ][ "tl_x" ] * dpc + 20 )
.attr( "y2", zonesData[ pc ][ "br_y" ] * dpc )
.attr( "stroke", "red" )
.attr( "stroke-width", "2" )
.attr( "stroke-opacity", "0.3" )
Marco De Donno
committed
.appendTo( $svg );
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: {
$.ajax( {
url: "{{ url_for( 'submission_tenprint_delete', id = submission_id, tid = file[ 'uuid' ] ) }}",
dataType: "json",
success: function( data )
{
$( "#delete_confirmation" ).remove();
window.location = "{{ url_for( 'submission_tenprint_list', id = submission_id ) }}";
},
error: function( data )
{
$( "#delete_confirmation" ).remove();
}
} );
},
},
close: function()
{
$( this ).remove();
}
} );
}
</script>
</head>
<body class="icnml_main_layout">
{% include "header.html" %}
{% include "navigations/submitter.html" %}
<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_file_serve', id = file[ 'uuid' ] ) }}"></image>
<g id="tp_polygones"></g>
<line id="line_right_border" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(0,0,255); stroke-width: 2" />
<line id="line_bottom_border" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(0,0,255); stroke-width: 2" />
</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>
Marco De Donno
committed
<div>Template</div>
<div id="file_{{ file[ 'uuid' ] }}_template">
<select name="tenprint_template_select">
<option value="0" id="tenprint_template_none_option" selected>None</option>
{% for tenprint_template in tenprint_templates %}
<option value="{{ tenprint_template[ 'id' ] }}" id="{{ tenprint_template[ 'id' ] }}_option">
Marco De Donno
committed
{{ tenprint_template[ 'name' ] }}
Marco De Donno
committed
</option>
{% endfor %}
</select>
</div>
<div><textarea rows="6" id="file_note"></textarea></div>
<div class="icnml_button">
<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_tenprint_segments_list', id = upload_id, tid = 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 )
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
{
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_segment', id = submission_id, tid = file[ 'uuid' ], pc = zone[ 'pc' ] ) }}";
} );
{% endfor %}
$( "#delete_button" ).on( "click", delete_tenprint );
$( "#file_{{ file[ 'uuid' ] }}_template > select" ).on( "change", update_template_db );
$( "#{{ file[ 'template' ] }}_option" ).prop( "selected", true );
{% if file[ "template" ] == None or file[ "template" ] == 0 %}
$( "#segmentation_button" )
.removeClass( "ui-state-default" )
.addClass( "ui-state-disabled" );
$( "#go_to_segmentation_button" )
.removeClass( "ui-state-default" )
.addClass( "ui-state-disabled" );
{% endif %}
$( "#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 );
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
$( "<a />" )
.attr( "href", "{{ url_for( 'submission_list' ) }}" )
.text( "Submissions" )
)
.append(
$( "<span />" ).text( ">" )
)
.append(
$( "<a />" )
.attr( "href", "{{ url_for( 'submission_upload_tplp', id = submission_id ) }}" )
.text( nickname )
)
.append(
$( "<span />" ).text( ">" )
)
.append(
$( "<a />" )
.attr( "href", "{{ url_for( 'submission_tenprint_list', id = submission_id ) }}" )
.text( "Tenprints" )
)
.append(
$( "<span />" ).text( ">" )
)
.append(
$( "<span />" ).text( filename )
);
</script>
</html>