Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!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 }}";
</script>
</head>
<body>
<div class="icnml_central" style="height: {{ svg_height }}px; width: {{ svg_width }}px">
<div>
<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>
{% for z in zones %}
<polygon id="pc_{{ z[ 'pc' ] }}"
points="
{{ z[ 'tl_x' ] * card_img_info[ 'dpc' ] }},{{ z[ 'tl_y' ] * card_img_info[ 'dpc' ] }}
{{ z[ 'br_x' ] * card_img_info[ 'dpc' ] }},{{ z[ 'tl_y' ] * card_img_info[ 'dpc' ] }}
{{ z[ 'br_x' ] * card_img_info[ 'dpc' ] }},{{ z[ 'br_y' ] * card_img_info[ 'dpc' ] }}
{{ z[ 'tl_x' ] * card_img_info[ 'dpc' ] }},{{ z[ 'br_y' ] * card_img_info[ 'dpc' ] }}"
fill="rgb( 255, 0, 0 )" fill-opacity="0.1" stroke="red" stroke-width="1"
/>
{% endfor %}
<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>
</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' );
}
} )
</script>
</html>