Skip to content
template.html 28.3 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', subpath = 'functions.js' ) }}"></script>
        <link type="text/css" rel="stylesheet" href="{{ url_for( 'send_app_files', subpath = 'app.css' ) }}">
        <style type="text/css">
            #tenprint_zones_table > div > a {
                padding: 2px;
                width: 16px;
                height: 16px;
                background: #d22e2a;
            }
            .ui-button .ui-icon,
            .ui-button:hover .ui-icon {
                background-image: url( {{ jquery_ui_white_bg_icons }} );
            }
        </style>
        
        <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 %}
Marco De Donno's avatar
Marco De Donno committed
                zones_array.push( {{ zone[ 'pc' ] }} );
            {% endfor %}
Marco De Donno's avatar
Marco De Donno committed
            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 ) ),
                }
Marco De Donno's avatar
Marco De Donno committed
                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' ] }} )
                
Marco De Donno's avatar
Marco De Donno committed
                dpc = card_img_info[ 'dpc' ];
            }
            
            var update_db_name = function()
            {
                var name = $( "#name_input" ).val();
                
                $.ajax( {
                    url: "{{ url_for( 'update_tptemplate_var', id = card_id, varname = 'name' ) }}",
                    dataType: "json",
                    method: "POST",
                    data: {
                        name: name
                    }
                } );
            }
            
            var update_db_countrycode = function()
            {
                var country_code = $( "#countrycode_input" ).val();
                
                $.ajax( {
                    url: "{{ url_for( 'update_tptemplate_var', id = card_id, varname = 'country_code' ) }}",
                    dataType: "json",
                    method: "POST",
                    data: {
                        country_code: country_code
                    }
                } );
            }
            
            var update_db_size_display = function()
            {
                var size_display = $( "#size_display_input" ).val();
                
                $.ajax( {
                    url: "{{ url_for( 'update_tptemplate_var', id = card_id, varname = 'size_display' ) }}",
                    dataType: "json",
                    method: "POST",
                    data: {
                        size_display: size_display
                    }
                } );
            }
            
            var update_db_heightwidth = function()
            {
                var width = $( "#width_input" ).val();
                var height = $( "#height_input" ).val();
                
                $.ajax( {
                    url: "{{ url_for( 'update_tptemplate_hw', id = card_id ) }}",
                    dataType: 'json',
                    method: 'POST',
                    data: {
                        height: height,
                        width: width
                    },
                    success: function( data )
                    {
                    }
                } );
            }
            
            var update_db_resolution = function()
            {
                var resolution = $( "#res_input" ).val();
                
                $.ajax( {
                    url: "{{ url_for( 'update_tptemplate_res', id = card_id ) }}",
                    dataType: 'json',
                    method: 'POST',
                    data: {
                        resolution: resolution
                    },
                    success: function( data )
                    {
                    }
                } );
            }
            
            var clear = function()
            {
                $( '#tenprint_zones_table > div > input' ).val( "" );
Marco De Donno's avatar
Marco De Donno committed
                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()
Marco De Donno's avatar
Marco De Donno committed
            {
                $.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();
            }
Marco De Donno's avatar
Marco De Donno committed
                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;
Marco De Donno's avatar
Marco De Donno committed
                    
                    var p = a + " " + b + " " + c + " " + d;
                    
Marco De Donno's avatar
Marco De Donno committed
                    {
                        $( 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 );
Marco De Donno's avatar
Marco De Donno committed
                    }
                    
                    if( zonesData[ pc ][ 'angle' ] == 0 )
Marco De Donno's avatar
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' )
                            .appendTo( $svg );
Marco De Donno's avatar
Marco De Donno committed
                    
                    } 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 );
Marco De Donno's avatar
Marco De Donno committed
                    
                    } 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 );
Marco De Donno's avatar
Marco De Donno committed
                    
                    } 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 );
Marco De Donno's avatar
Marco De Donno committed
                    }
                }
Marco De Donno's avatar
Marco De Donno committed
                $.ajax( {
                    url: "{{ url_for( 'delete_zone_coordinates', id = card_id ) }}",
                    dataType: 'json',
                    method: 'POST',
                    data: {
                        pc: pc
                    },
                    success: function( data )
                    {
                        location.reload();
                    }
                } );
        </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" />
                    <div>
                        <div class="icnml_box_fields">
                            <div>Tenprint id</div>
                            <div>{{ img_info[ 'id' ] }}</div>
                            <input id="name_input" value="{{ img_info[ 'name' ] }}" style="width: 130px" />
                            <div>Country code</div>
                            <input id="countrycode_input" value="{{ img_info[ 'country_code' ] }}" style="width: 130px" />
                            <input id="width_input" value="{{ img_info[ 'width' ] }}" style="width: 130px" />
                            <input id="height_input" value="{{ img_info[ 'height' ] }}" style="width: 130px" />
                            <input id="res_input" value="{{ img_info[ 'image_resolution' ] }}" style="width: 130px" />
                            <div>Format</div>
                            <input id="size_display_input" value="{{ img_info[ 'size_display' ] }}" style="width: 130px" />
                        </div>
                        <div id="tenprint_zones_table">
                            <div></div>
                            <div>TL x</div>
                            <div>TL y</div>
                            <div>BR x</div>
                            <div>BR y</div>
                            <div>Angle</div>
                            <div>Delete</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>
                                
                                <div id="icnml_zone_{{ zone[ 'pc' ] }}_delete">
                                    <a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="icnml_zone_{{ zone[ 'pc' ] }}_delete_button" role="button" aria-disabled="false">
                                        <span class="ui-icon ui-icon-closethick"></span>
                                    </a>
                                </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">
Marco De Donno's avatar
Marco De Donno committed
        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;
Marco De Donno's avatar
Marco De Donno committed
                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 );

                            $( '#icnml_zone_' + i + '_angle > input' ).val( 0 );
                            $( '#icnml_zone_' + ( i + 5 ) + '_angle > input' ).val( 0 );
Marco De Donno's avatar
Marco De Donno committed
                        }
                        
                        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 %}
            
            $( "#icnml_zone_{{ zone[ 'pc' ] }}_delete_button" ).on( 'click', function()
            {
                delete_zone( "{{ zone[ 'pc' ] }}" );
            } );
        {% 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();
        
        // Input onchange
        
        $( "#name_input" ).on( "change", update_db_name );
        $( "#countrycode_input" ).on( "change", update_db_countrycode );
        $( "#size_display_input" ).on( "change", update_db_size_display );
        $( "#width_input" ).on( "change", update_db_heightwidth );
        $( "#height_input" ).on( "change", update_db_heightwidth );
        $( "#res_input" ).on( "change", update_db_resolution );
        
        // Navigation UI update
        
        $( '#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>