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 %}
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 %}
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' ] ) }}",
Marco De Donno
committed
data: {
template: template
},
success: function( data )
{
location.reload();
}
} );
}
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' ) }}",
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(
Marco De Donno
committed
.attr( "id", "segmentation_button_span_spinner" )
.attr( "class", "ld ld-ring ld-cycle" )
.css( "position", "absolute" )
.css( "right", "20px" )
Marco De Donno
committed
)
$( "#segmentation_button" ).off( "click" );
Marco De Donno
committed
$.ajax( {
url: "{{ url_for( 'image_tenprint_segmentation', id = file[ 'uuid' ] ) }}",
Marco De Donno
committed
success: function( data )
{
$( "#segmentation_button_span_text" ).text( "Segementation updated" );
Marco De Donno
committed
$( "#segmentation_button_span_spinner" ).remove();
},
error: function( data )
{
$( "#segmentation_button_span_text" ).text( "Error while segmenting..." );
Marco De Donno
committed
$( "#segmentation_button_span_spinner" ).remove();
}
} );
}
Marco De Donno
committed
var updateSVG = function()
{
$( "#template_svg_div" )
.css( "width", svg_width )
.css( "height", svg_height );
Marco De Donno
committed
$( ".icnml_central" )
.css( "width", svg_width * 2 )
.css( "height", svg_height );
Marco De Donno
committed
$( "#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 );
Marco De Donno
committed
$( "#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" ] );
Marco De Donno
committed
$( "#zoomed_image" ).attr( "width", svg_width );
$( "#zoomed_image" ).attr( "height", svg_height );
Marco De Donno
committed
$( "#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" ) )
{
$( 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" )
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 );
}
}
}
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' ] ) }}",
success: function( data )
{
window.location = "{{ url_for( 'submission_tenprint_list', id = submission_id ) }}";
},
error: function( data )
{
},
},
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">
{{ tenprint_template[ 'name' ] }} - {{ tenprint_template[ 'size_display' ] }}
</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 )
Marco De Donno
committed
{
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 );
Marco De Donno
committed
$( "#{{ 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 %}
Marco De Donno
committed
$( "#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 );
Marco De Donno
committed
$( "#icnml_navigation_updatedonor" )
.addClass( "activated" );
$( "#navloc" ).append(
$( "<a />" )
.attr( "href", "{{ url_for( 'submission_list' ) }}" )
$( "<a />" )
.attr( "href", "{{ url_for( 'submission_upload_tplp', id = submission_id ) }}" )
$( "<a />" )
.attr( "href", "{{ url_for( 'submission_tenprint_list', id = submission_id ) }}" )
</script>
</html>