<!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', path = 'functions.js' ) }}"></script>
<link type="text/css" rel="stylesheet" href="{{ url_for( 'send_app_files', path = 'app.css' ) }}">
<script type="text/javascript">
baseurl = "{{ baseurl }}";
var start_f1_f5_button = false;
var start_hv = false;
var points = [];
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 update_coordinates_informations = function()
{
svg_height = $( window ).height() - 100;
svg_width = svg_height * {{ svg_hw_factor }};
var content_width = $( ".icnml_content" ).width() * 0.45;
if( svg_width > content_width )
{
svg_height = svg_height / ( svg_width / content_width );
svg_width = content_width;
}
card_img_info = {
'right': parseInt( Math.round( parseFloat( {{ card_info[ 'width' ] }} ) / parseFloat( {{ img_info[ 'image_' + t + '_width' ] }} ) * svg_width ) ),
'bottom': parseInt( Math.round( parseFloat( {{ card_info[ 'height' ] }} ) / parseFloat( {{ img_info[ 'image_' + t + '_height' ] }} ) * svg_height ) ),
}
card_img_info[ 'dpi' ] = card_img_info[ 'right' ] / ( parseFloat( {{ img_info[ 'width' ] }} ) / 2.54 )
card_img_info[ 'dpc' ] = card_img_info[ 'right' ] / parseFloat( {{ img_info[ 'width' ] }} )
dpc = card_img_info[ 'dpc' ];
}
var clear = function()
{
$( 'input' ).val( "" );
updateSVG();
}
var get_data = function()
{
var data = {};
for( var i = 0; i < zones_array.length; i++ )
{
var zone = zones_array[ i ];
data[ zone ] = {};
for( var j = 0; j < data_columns.length; j++ )
{
var column = data_columns[ j ];
var d = $( '#icnml_zone_' + zone + '_' + column + ' > input' ).val() || null;
d = parseFloat( d );
data[ zone ][ column ] = d;
}
}
return data;
}
var update_zone_coordinates = function()
{
$.ajax( {
url: "{{ url_for( 'update_zone_coordinates', id = card_id ) }}",
dataType: 'json',
method: 'POST',
data: {
data: JSON.stringify( get_data() )
},
success: function( data )
{
if( ! data.error )
{
}
}
} );
updateSVG();
}
var updateSVG = function()
{
var zonesData = {};
$( '#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 );
for( var i = 0; i < zones_array.length; i++ )
{
var pc = zones_array[ i ];
zonesData[ pc ] = {}
for( var j = 0; j < data_columns.length; j++ )
{
var z = data_columns[ j ];
var v = $( '#icnml_zone_' + pc + '_' + z + ' > input' ).val() || 0;
zonesData[ pc ][ z ] = parseFloat( v );
}
}
$( "#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' )
.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' )
.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' )
.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' )
.appendTo( $svg );
}
}
}
</script>
</head>
<body class="icnml_main_layout">
{% include "header.html" %}
{% include "navigations/admin.html" %}
<div class="icnml_content">
<div class="icnml_central">
<div class="icnml_tp_cardbox">
<div id="template_svg_div">
<svg id="template_svg" width="100%" height="100%">
<defs>
<clipPath id="zoom_circle_clipping">
<circle cx="0" cy="0" r="30" fill="#FFFFFF"/>
</clipPath>
</defs>
<image x="0" y="0" width="100%" height="100%" xlink:href="{{ url_for( 'image_tp_template', tid = card_id, t = t ) }}"></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 id="template_svg_zoom" x="0" y="0" width="150" height="150" viewBox="0 0 150 150" visibility="hidden" clip-path="url( #zoom_circle_clipping )">
<image id="zoomed_image" x="0" y="0" width="0" height="0" xlink:href="{{ url_for( 'image_tp_template', tid = card_id, t = t ) }}" />
</svg>
<line id="helper" 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>Tenprint id</div>
<div>{{ img_info[ 'id' ] }}</div>
<div>Country code</div>
<div>{{ img_info[ 'country_code' ] }}</div>
<div>Size</div>
<div>{{ img_info[ 'width' ] }}cm x {{ img_info[ 'height' ] }}cm</div>
<div>Format</div>
<div>{{ img_info[ 'size_display' ] }}</div>
</div>
<div id="tenprint_zones_table">
<div></div>
<div>Top left x</div>
<div>Top left y</div>
<div>Bottom right x</div>
<div>Bottom right y</div>
<div>Rotation</div>
{% for zone in zones %}
<div id="icnml_zone_{{ zone[ 'pc' ] }}_name" style="padding-right: 20px">{{ zone[ 'pc_name' ] }}</div>
<div id="icnml_zone_{{ zone[ 'pc' ] }}_tl_x">
<input class="tenprint_zones_table_input" value="{{ zone[ 'tl_x' ] }}" />
</div>
<div id="icnml_zone_{{ zone[ 'pc' ] }}_tl_y">
<input class="tenprint_zones_table_input" value="{{ zone[ 'tl_y' ] }}" />
</div>
<div id="icnml_zone_{{ zone[ 'pc' ] }}_br_x">
<input class="tenprint_zones_table_input" value="{{ zone[ 'br_x' ] }}" />
</div>
<div id="icnml_zone_{{ zone[ 'pc' ] }}_br_y">
<input class="tenprint_zones_table_input" value="{{ zone[ 'br_y' ] }}" />
</div>
<div id="icnml_zone_{{ zone[ 'pc' ] }}_angle">
<input class="tenprint_zones_table_input" value="{{ zone[ 'angle' ] }}" />
</div>
{% endfor %}
</div>
<div style="margin-top: 20px">
{% if t == 'front' %}
<div>
<a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="start_f1_f5_button" role="button" aria-disabled="false">
<span class="ui-button-text">Start F1-F5</span>
</a>
<a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="start_hv_button" role="button" aria-disabled="false">
<span class="ui-button-text">Start HV</span>
</a>
</div>
<div>
<a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="clear_button" role="button" aria-disabled="false">
<span class="ui-button-text">Clear</span>
</a>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
zoomed = false;
zoom_factor = 5;
$( '#template_svg' ).on( 'contextmenu', function( event )
{
event.preventDefault();
$( '#helper' )
.attr( 'x1', 0 )
.attr( 'x2', 0 )
.attr( 'y1', 0 )
.attr( 'y2', 0 );
if( ! zoomed )
{
zoomed = true;
var x = event.offsetX - 15;
var y = event.offsetY - 15;
var tmp_zoom_size = 150 / zoom_factor;
$( '#template_svg_zoom' )
.attr( 'visibility', 'show' )
.attr( 'x', event.offsetX - 75 )
.attr( 'y', event.offsetY - 75 )
.attr( 'viewBox', x + " " + y + " " + tmp_zoom_size + " " + tmp_zoom_size )
$( '#zoom_circle_clipping > circle' )
.attr( "cx", event.offsetX )
.attr( "cy", event.offsetY )
} else {
zoomed = false;
$( '#template_svg_zoom' )
.attr( 'visibility', 'hidden' );
}
} );
$( '#template_svg_zoom' ).on( 'click', function( event )
{
event.preventDefault();
if( zoomed )
{
var e = event.target;
var dim = e.getBoundingClientRect();
var x = event.clientX - dim.left;
var y = event.clientY - dim.top;
x = x / zoom_factor;
y = y / zoom_factor;
x = x / dpc;
y = y / dpc;
x = x.toFixed( 2 );
y = y.toFixed( 2 );
x = parseFloat( x );
y = parseFloat( y );
if( start_f1_f5_button )
{
points.push( { x: x, y: y } );
if( points.length == 2 )
{
var start = points[ 0 ];
var end = points[ 1 ];
if( end.x - start.x > 5.08 )
{
var dx = ( end.x - start.x ) / 5;
for( var f = 0; f < 5; f++ )
{
var a = start.x + f * dx;
var b = start.x + ( f + 1 ) * dx;
$( '#icnml_zone_' + ( f + 1 ) + '_tl_x > input' ).val( a );
$( '#icnml_zone_' + ( f + 1 ) + '_tl_y > input' ).val( start.y );
$( '#icnml_zone_' + ( f + 1 ) + '_br_x > input' ).val( b );
$( '#icnml_zone_' + ( f + 1 ) + '_br_y > input' ).val( end.y );
}
}
updateSVG();
points = [];
start_f1_f5_button = false;
}
} else if( start_hv )
{
points.push( { x: x, y: y } );
console.log( points );
if( points.length == 10 )
{
for( var i = 1; i <= 5; i++ )
$( '#icnml_zone_' + i + '_tl_y > input' ).val( points[ 0 ].y );
for( var i = 1; i <= 5; i++ )
$( '#icnml_zone_' + i + '_br_y > input' ).val( points[ 1 ].y );
for( var i = 6; i <= 10; i++ )
$( '#icnml_zone_' + i + '_tl_y > input' ).val( points[ 2 ].y );
for( var i = 6; i <= 10; i++ )
$( '#icnml_zone_' + i + '_br_y > input' ).val( points[ 3 ].y );
for( var i = 1; i <= 5; i++ )
{
$( '#icnml_zone_' + i + '_tl_x > input' ).val( points[ i + 3 ].x );
$( '#icnml_zone_' + i + '_br_x > input' ).val( points[ i + 4 ].x );
$( '#icnml_zone_' + ( i + 5 ) + '_tl_x > input' ).val( points[ i + 3 ].x );
$( '#icnml_zone_' + ( i + 5 ) + '_br_x > input' ).val( points[ i + 4 ].x );
}
update_zone_coordinates();
points = [];
start_hv = false;
}
}
zoomed = false;
$( '#template_svg_zoom' )
.attr( 'visibility', 'hidden' );
}
} );
{% for zone in zones %}
$( '#icnml_zone_{{ zone[ 'pc' ] }}_name' )
.on( 'mouseover', function()
{
$( "#pc_{{ zone[ 'pc' ] }}" )
.attr( 'fill', 'rgb( 0, 0, 255 )' )
.attr( 'stroke', 'rgb( 0, 0, 255 )' )
} )
.on( 'mouseout', function()
{
$( "#pc_{{ zone[ 'pc' ] }}" )
.attr( 'fill', 'rgb( 255, 0, 0 )' )
.attr( 'stroke', 'rgb( 255, 0, 0 )' )
} )
{% for d in datacolumns %}
$( "#icnml_zone_{{ zone[ 'pc' ] }}_{{ d }} > input" )
.on( 'change', function()
{
update_zone_coordinates( "{{ zone[ 'pc' ] }}", "{{ d }}", $( this ).val() );
} );
{% endfor %}
{% endfor %}
$( '#template_svg' ).on( 'mousemove', function( event )
{
if( start_hv && ! zoomed )
{
if( points.length < 4 )
{
$( '#helper' )
.attr( 'x1', 0 )
.attr( 'x2', svg_width )
.attr( 'y1', event.offsetY )
.attr( 'y2', event.offsetY );
} else {
$( '#helper' )
.attr( 'x1', event.offsetX )
.attr( 'x2', event.offsetX )
.attr( 'y1', 0 )
.attr( 'y2', svg_height );
}
}
} );
$( '#start_f1_f5_button' ).on( 'click', function()
{
clear();
start_f1_f5_button = true;
} );
$( '#start_hv_button' ).on( 'click', function()
{
clear();
start_hv = true;
} );
$( '#clear_button' ).on( 'click', clear );
window.addEventListener( 'resize', function( event )
{
update_coordinates_informations();
updateSVG();
} );
update_coordinates_informations();
updateSVG();
$( '#icnml_navigation_tptemplate' )
.addClass( 'activated' );
$( '#navloc' ).append(
$( '<a />' )
.attr( 'href', "{{ url_for( 'template_tenprint_list' ) }}" )
.text( "Tenprints template" )
)
.append(
$( '<span />' ).text( ">" )
)
.append(
$( '<span />' ).text( "{{ img_info[ 'name' ] }} ({{ img_info[ 'country_code' ] }})" )
)
</script>
</html>