Skip to content
tp_template.html 9.63 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 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 dpc = {{ card_img_info[ 'dpc' ] }};
        	
            var update_zone_coordinates = function( pc, coordinate, value )
        	{
            	if( value )
            	{
            		$.ajax( {
        	            url: "{{ url_for( 'update_zone_coordinates', card = card_id ) }}",
        	            dataType: 'json',
        	            method: 'POST',
        	            data: {
        	            	pc: pc,
        	            	coordinate: coordinate,
        	            	value: value
        	            },
        	            success: function( data )
        	            {
        	                if( ! data.error )
        	                {
        	                	updateSVG();
        	                }
        	            }
        	        } );
        		
            	} else {
            		updateSVG();
            	}
            
            var updateSVG = function()
            {
        		var zonesData = {};
        		
            	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()
	            		
	            		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;
                    
                    $( 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 );
    			}
            }
        </script>
    </head>
    <body>
        <div class="icnml_central" style="height: {{ svg_height }}px; width: {{ svg_width * 2 }}px">
            <div class="icnml_tp_cardbox">
                <div style="width: {{ svg_width }}px; height: {{ svg_height }}px">
                    <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>
                        
                        
                        <line x1="{{ card_img_info[ 'right' ] }}" y1="0" x2="{{ card_img_info[ 'right' ] }}" y2="{{ svg_height }}" style="stroke:rgb(0,0,255); stroke-width: 2" />
                        <line x1="0" y1="{{ card_img_info[ 'bottom' ] }}" x2="{{ svg_width }}" y2="{{ card_img_info[ 'bottom' ] }}" 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 x="0" y="0" width="{{ svg_width }}" height="{{ svg_height }}" xlink:href="/tenprint_template/image/{{ card_id }}/{{ t }}" />
                        </svg>
                    </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' ] }} / {{ 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>
            </div>
        </div>
    </body>
    <script type="text/javascript">
    	zoomed = false;
    	zoom_factor = 5;
    	
    	$( '#template_svg' ).on( 'contextmenu', function( event )
		{
			event.preventDefault();
			
			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 / {{ card_img_info[ 'dpc' ] }};
    		    y = y / {{ card_img_info[ 'dpc' ] }};
    		    
    		    console.log( x + " / " + y );
    		    
    		    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 %}
    </script>
</html>