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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pogojig SVG Upload</title>
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='style.css')}}">
<link rel="icon" type="image/png" href="{{url_for('static', filename='favicon-512.png')}}">
<link rel="apple-touch-icon" href="{{url_for('static', filename='favicon-512.png')}}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="layout-container">
<div class="header">
<img class="title" alt="Pogojig" src="{{url_for('static', filename='pogojig-title.png')}}">
</div>
{% with messages = get_flashed_messages(with_categories=True) %}
{% if messages %}
<div class="flashes">
{% for category, message in messages %}
<div class="flash flash-{{category}}">{{ message }}</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
<form id="reset-form" method="POST" action="{{url_for('session_reset')}}" class="reset-form">{{reset_form.csrf_token}}</form>
<div class="banner">
This is a web frontend for the <a href="static/pogojig_makefile_template.zip">Makefile template</a>. You can
download the <a href="static/pogojig_makefile_template.zip">Makefile template</a> to customize and run this
compilation yourself.
</div>
<div class="controls">
<form id="svg-upload-form" method="POST" action="{{url_for('upload_svg')}}" enctype="multipart/form-data">
{{svg_form.csrf_token}}
</form>
<div class="form-controls">
<div class="upload-label">Upload completed SVG file:</div>
<input class='upload-button' form="svg-upload-form" name="upload_file" size="20" type="file">
<input class='reset-button' form="reset-form" type="submit" value="Start over">
<input class='submit-button' form="svg-upload-form" type="submit" value="Submit">
</div>
</div>
<svg id="brace1" class="brace" viewBox="0 0 153.99388 15.712677">
<g transform="translate(3.2941455e-8,-281.28732)" id="layer1">
<path id="path815"
d="m 0.14168396,281.28734 -0.12608983,0.002 c 1.058e-5,7.1e-4 0.0098822,0.0227 0.0025823,0.0651 -0.03416829,0.19915 -0.03783806,0.84615 0.15037859,1.73633 0.22755489,1.07622 0.74089947,2.52905 1.84278328,3.96255 1.1057254,1.43851 2.7983999,2.84844 5.350576,3.81786 2.5483502,0.96798 5.9180417,1.48313 10.3476897,1.17667 1.417535,-0.0987 2.85341,-0.20657 4.301546,-0.3204 8.724045,-0.68573 17.88101,-1.54185 26.353947,-1.79834 4.937257,-0.14945 9.628528,-0.0947 13.849799,0.31471 4.222819,0.4095 7.961077,1.17267 11.001912,2.43241 0.803262,0.29984 1.423408,0.58707 1.905828,0.88005 0.48068,0.29193 0.828228,0.59172 1.080038,0.91829 0.1417,0.18378 0.254725,0.3783 0.344164,0.58756 0.0702,0.16428 0.121047,0.33857 0.157097,0.52297 0.0823,0.42091 0.08785,0.88621 0.08785,1.4149 h 0.410311 c 0,-0.52869 0.0056,-0.99399 0.08785,-1.4149 0.03605,-0.1844 0.0869,-0.35869 0.157097,-0.52297 0.08944,-0.20926 0.202467,-0.40378 0.344167,-0.58756 0.251809,-0.32657 0.598839,-0.62636 1.079519,-0.91829 0.48242,-0.29298 1.103085,-0.58021 1.906344,-0.88005 3.040837,-1.25974 6.779093,-2.02291 11.001912,-2.43241 4.221271,-0.40938 8.912025,-0.46416 13.849285,-0.31471 8.47293,0.25649 17.63042,1.11261 26.35446,1.79834 1.44814,0.11383 2.88401,0.2217 4.30155,0.3204 4.42964,0.30646 7.79933,-0.20869 10.34768,-1.17667 2.55218,-0.96942 4.24486,-2.37935 5.35058,-3.81786 1.10188,-1.4335 1.61523,-2.88633 1.84278,-3.96255 0.18822,-0.89018 0.18455,-1.53718 0.15038,-1.73633 -0.007,-0.0424 0.003,-0.0644 0.003,-0.0651 l -0.12661,-0.002 c 0,-7e-4 0.01,0.0206 -0.002,0.0605 -0.0548,0.18822 -0.15924,0.80325 -0.44907,1.6247 -0.35304,1.00063 -0.97308,2.28804 -2.09341,3.5171 -1.11523,1.22346 -2.73041,2.39512 -5.10305,3.18327 -2.37558,0.78911 -5.54867,1.20666 -9.80973,0.8754 -1.41271,-0.10897 -2.84457,-0.22324 -4.2907,-0.33952 -8.69688,-0.69925 -17.91446,-1.5072 -26.44076,-1.67276 -4.97393,-0.0966 -9.723774,0.0251 -14.009995,0.51573 -4.284742,0.49051 -8.120018,1.35147 -11.25461,2.74092 -0.81188,0.39299 -1.447835,0.78087 -1.941484,1.1777 -0.495149,0.39804 -0.844428,0.803 -1.086239,1.22783 -0.135149,0.23743 -0.23514,0.47848 -0.309541,0.72554 -0.02341,0.0778 -0.04406,0.15628 -0.06408,0.23513 -0.02002,-0.0789 -0.04067,-0.15732 -0.06408,-0.23513 -0.0744,-0.24706 -0.174389,-0.48811 -0.309541,-0.72554 -0.241811,-0.42483 -0.591087,-0.82979 -1.086239,-1.22783 -0.493649,-0.39683 -1.129602,-0.78471 -1.941484,-1.1777 -3.134592,-1.38945 -6.969865,-2.25041 -11.25461,-2.74092 -4.286221,-0.49068 -9.036587,-0.61231 -14.010513,-0.51573 -8.526303,0.16556 -17.74336,0.97351 -26.440246,1.67276 -1.446128,0.11628 -2.877986,0.23055 -4.290695,0.33952 -4.261064,0.33126 -7.434154,-0.0863 -9.8097362,-0.8754 -2.3726351,-0.78815 -3.9878184,-1.95981 -5.1030477,-3.18327 -1.1203332,-1.22906 -1.74037366,-2.51647 -2.09341249,-3.5171 -0.28982193,-0.82145 -0.39425032,-1.43648 -0.44906934,-1.6247 -0.0116179,-0.0399 -0.002582,-0.0612 -0.002582,-0.0605 z" />
</g>
</svg>
<svg id="svg-spinner" viewBox="2 0 77 68" width="15em">
<defs>
<filter id="filter5780">
<feGaussianBlur stdDeviation="0.95" />
</filter>
<filter id="filter7730">
<feColorMatrix type="hueRotate" values="180" result="color1" />
<feColorMatrix values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 -0.21 -0.72 -0.07 2 0 " result="color2" />
</filter>
<mask maskUnits="userSpaceOnUse" id="mask14163">
<path id="path14165" style="fill:#ffffff;stroke:none;filter:url(#filter5780)"
d="m 32,1.5 c -11.97869,1.26337 -23.237221,11.89727 -25.299541,25.54516 -1.32945,8.79794 3.14945,18.54017
9.211001,25.05391 6.64033,7.13568 17.00391,10.63738 26.6505,12.0357 6.53153,0.94678 13.34527,2.29845
19.65012,-4.54409 5.842739,-6.34102 8.886339,-15.82728 8.474109,-24.43984 -0.38738,-8.09332
-4.44975,-14.68941 -11.421629,-22.59765 -6.2531,-7.09292 -17.46996,-12.08621 -27.26456,-11.05319 z" />
</mask>
</defs>
<g>
<image id="background" xlink:href="static/bg-gears.jpg" x="0" y="0" width="75.5" height="68"
mask="url(#mask14163)" style="filter: brightness({{0.5 if 'render_job' in session else 1}}"/>
<image id="circle" xlink:href="static/circle.png" x="2" y="0" width="75" height="67" inkscape:label="#image5763" />
{% if 'render_job' in session %}
<g>
<image id="spinner-arrows" xlink:href="static/arrows.png" x="30" y="25" width="73" height="60" transform="scale(0.6,0.6)" style="filter:url(#filter7730)" />
<animateTransform id="spinner-ani" begin="0s" dur="4s" type="rotate" from="0 39 34" to="360 39 34" repeatCount="indefinite" fill="freeze" attributeName="transform" />
</g>
{% endif %}
</g>
</svg>
<svg id="arrow" class="down-arrow" viewBox="0 0 15.447801 21.903627">
<g transform="translate(-3.0689279e-7,-275.09637)">
<g id="g943" transform="matrix(2.8524019,0,0,0.65311746,-198.42817,103.66414)">
<path id="path912" transform="translate(1.1263482)"
d="m 70.722524,262.483 c 0,0.15591 0.0013,0.31182 0,0.46772 -0.02654,3.1829 -0.07931,6.36565
-0.08352,9.54865 -0.0041,3.12809 0.04021,6.25606 0.05847,9.3841 0.0012,0.21075 0,0.42151 0,0.63227 h
0.147652 c 0,-0.21076 -0.0012,-0.42152 0,-0.63227 0.01826,-3.12804 0.06261,-6.25601 0.05847,-9.3841
-0.0042,-3.183 -0.05698,-6.36575 -0.08352,-9.54865 -0.0013,-0.1559 0,-0.31181 0,-0.46772 z" />
<path transform="translate(-0.66145832)" id="path912-6"
d="m 73.228177,262.483 c 0.04266,3.33901 -0.05208,6.67754 -0.05011,10.01637 0.06288,8.7819
0.05847,5.44305 0.05847,10.01637 h 0.147652 c 0,-4.57332 -0.0044,-1.23447 0.05847,-10.01637
0.002,-3.33883 -0.09278,-6.67736 -0.05011,-10.01637 z">
</g>
<g id="g947" transform="translate(-64.037969,5.609877)">
<path id="path929" d="m 63.97531,279.65709 c 0.11947,0.034 0.24279,0.066 0.360307,0.11973 0.742062,0.33927
1.444348,0.93467 2.127306,1.64644 0.33522,0.34936 0.669079,0.73006 1.005503,1.12823 0.458817,0.54302
0.902565,1.13876 1.318225,1.77085 1.419044,2.15794 2.504261,4.73341 2.701676,6.96813 0.0032,0.0364
0.004,0.0729 0.0057,0.10919 a 0.26814441,0.26814441 90 0 0 0.535722,-0.0246 c -0.0018,-0.0384
-0.0049,-0.0769 -0.006,-0.1156 -0.06938,-2.35647 -0.96499,-5.14142 -2.375538,-7.4793 -0.4134,-0.68518
-0.871472,-1.33234 -1.365631,-1.91677 -0.363144,-0.42948 -0.756424,-0.81414 -1.165765,-1.15025
-0.837893,-0.68799 -1.730798,-1.16385 -2.592914,-1.43288 -0.136782,-0.0427 -0.268315,-0.0955
-0.403075,-0.13391 a 0.26554239,0.26554239 90 0 0 -0.145482,0.51078 z" />
<use height="100%" width="100%" transform="matrix(-1,0,0,1,143.52374,0)" id="use931" xlink:href="#path929" y="0" x="0" />
</g>
</g>
</svg>
<div class="render_output">
{% if has_renders %}
<a href="{{url_for('render_download', file='sources.zip')}}" class="btn green render">Download renders</a>
{#
<div class="preview-images">
<div id="stl-target" class="madeleine"></div>
</div>
#}
{% elif 'render_job' in session and not has_renders %}
<div class="loading-message">
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
<div><strong>Processing...</strong></div>
<div>(this may take several minutes!)</div>
</div>
{% else %}
<div class="loading-message">
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
<div><strong>Nothing uploaded yet</strong></div>
<div>Upload your SVG file above</div>
</div>
{% endif %}
</div>
<div class="footer">
<img class="title" alt="Made with love in Berlin" src="static/footer_love.svg">
<a href="https://github.com/jaseg/pogojig">i can haz sources</a>
<a href="https://blog.jaseg.net/imprint">imprint</a>
<div class="copyright">© 2019 jaseg</div>
</div>
</div>
{#
{% if has_renders %}
<!-- STL viewer -->
<link href="static/Madeleine.js/src/css/Madeleine.css" rel="stylesheet">
<script src="static/Madeleine.js/src/lib/stats.js"></script>
<script src="static/Madeleine.js/src/lib/detector.js"></script>
<script src="static/Madeleine.js/src/lib/three.min.js"></script>
<script src="static/Madeleine.js/src/Madeleine.js"></script>
<script>
window.onload = function(){
var madeleine = new Madeleine({
target: 'stl-target', // target div id
data: '{{url_for('render_download', file='jig.stl')}}', // data path
path: 'static/Madeleine.js/src' // path to source directory from current html file
});
};
</script>
{% endif %}
#}
</body>
</html>
|
