<!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' ) }}">
<style type="text/css">
.icnml_button {
margin-top: 50px;
}
.icnml_button > div > a {
width: 60%;
margin-bottom: 10px;
}
</style>
<script type="text/javascript">
baseurl = "{{ baseurl }}";
submission_id = "{{ submission_id }}";
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 );
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 %}
var zonesData = {};
{% for zone in zones %}
zonesData[ "{{ zone[ 'pc' ] }}" ] = {
"tl_x": {{ zone[ 'tl_x' ] }},
"tl_y": {{ zone[ 'tl_y' ] }},
"br_x": {{ zone[ 'br_x' ] }},
"br_y": {{ zone[ 'br_y' ] }},
"angle": {{ zone[ 'angle' ] }}
};
{% endfor %}
var update_template_db = function()
{
var template = $( "#file_{{ file[ 'uuid' ] }}_template > select > option:checked" ).val();
$.ajax( {
url: "{{ url_for( 'submission_tenprint_set_template', submission_id = submission_id, tenprint_id = file[ 'uuid' ] ) }}",
dataType: "json",
method: "POST",
data: {
template: template
},
success: function( data )
{
location.reload();
}
} );
}
var update_quality_db = function()
{
var quality = $( "#file_{{ file[ 'uuid' ] }}_quality > select > option:checked" ).val();
$.ajax( {
url: "{{ url_for( '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_file_set_note', submission_id = submission_id, tenprint_id = file[ 'uuid' ], file_type = 'tenprint' ) }}",
dataType: "json",
method: "POST",
data: {
note: note
}
} );
}
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' ] }} ),
}
dpc = card_img_info[ "right" ] / {{ card_info[ 'width_cm' ] }};
}
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', 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();
}
} );
}
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 );
$( "#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;
var p = a + " " + b + " " + c + " " + d;
if( ! p.includes( "NaN" ) )
{
$( SVG( "polygon" ) )
.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" )
.appendTo( $svg );
}
if( zonesData[ pc ][ "angle" ] == 0 )
{
$( 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" )
.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" )
.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" )
.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" )
.appendTo( $svg );
}
}
}
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: {
"OK": function()
{
$.ajax( {
url: "{{ url_for( 'submission_tenprint_delete', submission_id = submission_id, tenprint_id = file[ 'uuid' ] ) }}",
dataType: "json",
success: function( data )
{
$( "#delete_confirmation" ).remove();
window.location = "{{ url_for( 'submission_tenprint_list', submission_id = submission_id ) }}";
},
error: function( data )
{
$( "#delete_confirmation" ).remove();
}
} );
},
"Cancel": function()
{
$( this ).dialog( "close" );
},
},
close: function()
{
$( this ).remove();
}
} );
}
</script>
</head>
<body class="icnml_main_layout">
{% include "header.html" %}
{% 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_file_serve', file_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>
<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">
{{ tenprint_template[ 'name' ] }}
</option>
{% endfor %}
</select>
</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>Notes</div>
<div><textarea rows="6" id="file_note"></textarea></div>
</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', 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>
</div>
</div>
</div>
</div>
</form>
</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_segment', submission_id = submission_id, tenprint_id = file[ 'uuid' ], pc = zone[ 'pc' ] ) }}";
} );
{% endfor %}
$( "#delete_button" ).on( "click", delete_tenprint );
$( "#file_{{ file[ 'uuid' ] }}_template > select" ).on( "change", update_template_db );
$( "#file_{{ file[ 'uuid' ] }}_quality > select" ).on( "change", update_quality_db );
$( "#{{ file[ 'template' ] }}_option" ).prop( "selected", true );
$( "#tenprint_quality_{{ file[ 'quality' ] }}_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 );
$( "#icnml_navigation_updatedonor" )
.addClass( "activated" );
$( "#navloc" ).append(
$( "<a />" )
.attr( "href", "{{ url_for( 'submission_list' ) }}" )
.text( "Submissions" )
)
.append(
$( "<span />" ).text( ">" )
)
.append(
$( "<a />" )
.attr( "href", "{{ url_for( 'submission_upload_tplp', submission_id = submission_id ) }}" )
.text( nickname )
)
.append(
$( "<span />" ).text( ">" )
)
.append(
$( "<a />" )
.attr( "href", "{{ url_for( 'submission_tenprint_list', submission_id = submission_id ) }}" )
.text( "Tenprints" )
)
.append(
$( "<span />" ).text( ">" )
)
.append(
$( "<span />" ).text( filename )
);
</script>
</html>