Skip to content
tp_template.html 19.1 KiB
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', 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() * 0.8;
            	svg_width = svg_height * {{ svg_hw_factor }};
            	
            	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();
        	}
        		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', card = 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>
        <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="/tenprint_template/image/{{ card_id }}/{{ 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="/tenprint_template/image/{{ card_id }}/{{ t }}" />
                            </svg>
                            
                            <line id="helper" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(0,0,255); stroke-width: 2" />
                    <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' ] }} / {{ 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>
    </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.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 );
		    		
	    			{
		    			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 );
		    			
		    				$( '#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 );
    		    
    		    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 %}
		$( '#template_svg' ).on( 'mousemove', function( event )
		{
			if( start_hv && ! zoomed )
			{
				{
    				$( '#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();
    </script>
</html>