source: other-projects/nz-flag-design/trunk/main-form/iterative-design-jsp.html@ 29968

Last change on this file since 29968 was 29967, checked in by davidb, 9 years ago

save SVG and PNG more deeply embedded into code so occurs when either swiped or next arrow clicked
  • Property svn:executable set to *
File size: 17.9 KB
Line 
1<!DOCTYPE html>
2<html id="story">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <meta name="viewport" content="width=device-width, initial-scale=1"/>
6
7 <!-- jQuery -->
8 <script src="lib/jquery-1.11.1.min.js"></script>
9
10 <script src="../similarity-2d/js-lib/Colour.js"></script>
11 <script src="../similarity-2d/flag-processing.js"></script>
12
13 <title>Iterative Design</title>
14 </head>
15
16 <body>
17 <div data-role="page" id="iterative-design-page"
18 class="demo-page"
19 data-dom-cache="true"
20 data-prev="choose-palette"
21 data-next="enter-name">
22
23 <div data-role="content">
24 <div data-role="controlgroup" class="control" data-mini="true">
25 <a href="#" class="next right-button test-fwd"
26 style="right:1%;" onclickXX="saveSVGAndPNGAsFiles()"></a>
27 <div class="right-button" style="right: 3%">
28 <p style="position: absolute; top: 60%; padding-top: 10px; font-size: 140%">Click or swipe when flag is complete</p>
29 </div>
30 <a href="#" class="prev left-button idea-back" style="left:1%;"></a>
31 </div>
32
33 <div class="story-page">
34
35 <!-- put custom content here -->
36 <span class="left story-icon research" ></span>
37 <h2 id="iterative-design-header">Iterative Design</h2>
38
39 <div style="padding-top: 10px;">
40 <div id="side-by-side">
41 <ol>
42
43 <li>
44 <h2><span>2D Design</span></h2>
45 <div id="design-2d-div" >
46 <iframe style="width: 100%; height: 100%"
47 id="design-2d-iframe" ></iframe>
48 </div>
49 </li>
50
51<% if ((request.getParameter("imageSimilarity") != null) && (request.getParameter("imageSimilarity").equals("1"))) { %>
52 <li>
53 <h2><span title="Compare with world flags: click to open/close">World Flags Comparison</span></h2>
54
55 <div id="similarity-2d-div">
56 <iframe src="../similarity-2d/display-flags.jsp"
57 style="width: 100%; height: 100%"
58 id="similarity-2d-iframe" ></iframe>
59 </div>
60 </li>
61 <li>
62 <h2><span title="Compare with alternative NZ flag designs: click to open/close">Alternative NZ Flags Designs</span></h2>
63
64 <div id="similarity-2d-nz-div">
65 <iframe src="../similarity-2d/display-flags.jsp?imagesDir=import-nz&mode=nz"
66 style="width: 100%; height: 100%"
67 id="similarity-2d-nz-iframe" ></iframe>
68 </div>
69 </li>
70<% } %>
71
72
73 <li>
74 <h2><span title="Click to Open/Close">Render 3D</span></h2>
75 <div id="render-3d-div">
76 <iframe src="../render-3d/flag.html"
77 style="width: 100%; height: 100%; overflow: hidden;"
78 id="render-3d-iframe" ></iframe>
79 </div>
80 </li>
81
82 </ol>
83 </div>
84 </div>
85
86 <!-- end of putting custom content -->
87
88 </div> <!-- end story-page-->
89 </div><!-- /content -->
90
91 <script>
92 var activatedAccordion = false;
93 var activatedSVGEditorFrame = false;
94
95 function savePNGAsFile(imgType, quality) {
96 console.log("savePNGAsFile()")
97 var design_frame = document.getElementById('design-2d-iframe');
98 var svgCanvas = design_frame.contentWindow.svgCanvas;
99 var svgedit = design_frame.contentWindow.svgedit;
100
101 var mimeType = 'image/' + imgType.toLowerCase();
102 var svg_str = svgCanvas.svgCanvasToString();
103
104 var type = imgType || 'PNG';
105 if (!$('#export_canvas').length) {
106 $('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
107 }
108 var c = $('#export_canvas')[0];
109 c.width = svgCanvas.contentW;
110 c.height = svgCanvas.contentH;
111
112 canvg(c, svg_str, {renderCallback: function() {
113 var dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase();
114 var datauri = quality ? c.toDataURL('image/' + dataURLType, quality) : c.toDataURL('image/' + dataURLType);
115
116 // Look up jsession id; if not present fall back to use a timestamp
117 var jsession_id = $.cookie('JSESSIONID') || new Date().getTime();
118 //var jsession_id = $.cookie('JSESSIONID') + "-" + new Date().getTime(); // quick hack for summer scholarship presentation day
119
120 console.log("jsession id = " + jsession_id);
121 var imageFilename = "flag-" + jsession_id + ".png";
122
123 $.ajax({
124 type: "POST",
125 url: "../design-2d/image-data-to-file.jsp",
126 data: { imageData: datauri, imageFilename: imageFilename },
127 success: function() {
128 console.log("savePNGAsFile() succeeded");
129 var render_frame = document.getElementById('render-3d-iframe');
130 // trigger a reload in the 3D Flag Renderer
131 render_frame.contentWindow.createFlag(imageFilename);
132 }
133 });
134 }});
135 }
136
137 function exportPNG() {
138 var design_frame = document.getElementById('design-2d-iframe')
139 var str = design_frame.contentWindow.svgEditor.uiStrings.notification.loadingImage;
140
141 var exportWindow = window.open(
142 'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
143 'svg-edit-exportWindow'
144 );
145
146 design_frame.contentWindow.svgCanvas.rasterExport("PNG", null, exportWindow.name);
147 }
148
149 function saveSVGAsFile()
150 {
151 console.log("saveSVGAsFile()")
152 var design_frame = document.getElementById('design-2d-iframe');
153 var svgCanvas = design_frame.contentWindow.svgCanvas;
154 //var svgedit = design_frame.contentWindow.svgedit;
155
156 var svg_str = svgCanvas.svgCanvasToString();
157
158 // Look up jsession id; if not present fall back to use a timestamp
159 var jsession_id = $.cookie('JSESSIONID') || new Date().getTime();
160 //var jsession_id = $.cookie('JSESSIONID') + "-" + new Date().getTime(); // quick hack for summer scholarship presentation day
161
162 console.log("jsession id = " + jsession_id);
163 var svgFilename = "flag-" + jsession_id + ".svg";
164
165 $.ajax({
166 type: "POST",
167 url: "../design-2d/svg-data-to-file.jsp",
168 data: { svgData: svg_str, svgFilename: svgFilename },
169 success: function() {
170 console.log("saveSVGAsFile() succeeded");
171 }
172 });
173
174 }
175
176
177 function saveSVGAndPNGAsFiles()
178 {
179 saveSVGAsFile();
180 savePNGAsFile("PNG",null);
181 }
182
183 function reconfigureSvgCanvas(settings) {
184 //console.log("*** entered reconfigureSvgCanvas");
185 //console.log("*** settings: background=" + settings.backgroundColor);
186 //console.log("*** settings: w x h = " + settings.width + " x " + settings.height);
187
188 var design_frame = document.getElementById('design-2d-iframe');
189 var svgCanvas = design_frame.contentWindow.svgCanvas;
190 var svgedit = design_frame.contentWindow.svgedit;
191
192 // Set the new canvas size
193 svgCanvas.setResolution(settings.width, settings.height);
194
195 var widthVar = settings.width;
196 var heightVar = settings.height;
197
198 var canvasWidth = svgCanvas.getResolution().w;
199 var canvasHeight = svgCanvas.getResolution().h;
200
201 var userBackground = settings.backgroundColor;
202
203 // decide if this is the first time we're looking to set the background colour
204 // or not. If it is, then use svgCanvas API to create a suitable layer
205
206 var backRectSvg = svgCanvas.getElem('backgroundRectangle');
207
208 if (backRectSvg == null) {
209 svgCanvas.createLayer("background");
210
211 svgCanvas.addSvgElementFromJson({
212 "element": "rect",
213 "attr": {
214 "id": "backgroundRectangle",
215 "width": canvasWidth,
216 "height": canvasHeight,
217 "x": "0",
218 "y": "0",
219 "fill": userBackground,
220 "opacity": "1.0",
221 "stroke-opacity": "0",
222 "stroke-linecap": "null",
223 "stroke-linejoin": "null",
224 "stroke-dasharray": "null",
225 "stroke-width": "5",
226 "stroke": "#000000"
227 },
228 "curStyles": true
229 });
230 svgCanvas.setCurrentLayerPosition(0);
231
232 // Refresh the canvas layers
233 svgCanvas.identifyLayers();
234 }
235 else {
236 console.log("Background to flag already exists -- changing colour to: " + userBackground);
237 backRectSvg.setAttributeNS(null,"fill",userBackground);
238 // find out how to change width and height directly also?
239
240 console.log("Setting background width and height to: " + widthVar + " and " + heightVar);
241
242 backRectSvg.setAttributeNS(null,"width",canvasWidth);
243 backRectSvg.setAttributeNS(null,"height",canvasHeight);
244
245 //svgCanvas.setResolution(backgroundWidth, backgroundHeight);
246 }
247 // Centres the canvas (somewhat)
248 //svgCanvas.updateCanvas(100, 100);
249
250 }
251
252
253 function rankFlags() {
254 console.log("rankFlags()");
255
256 // Get a message up on the screen to the similarity calculation is on its way
257 var $iframe = $('#similarity-2d-iframe').contents();
258
259 var $flagArea = $iframe.find('#flagArea');
260 var $progressArea = $iframe.find('#progressArea');
261
262 $progressArea.find('span:first').text("Comparing new flag with existing flags from around the world");
263 $progressArea.slideDown();
264 var $progressBar = $iframe.find('#progressBar');
265
266
267 setTimeout(function() {
268 // Compute colour histogram for user drawn flag
269 var imageCanvas = document.getElementById('export_canvas');
270 var context = imageCanvas.getContext('2d');
271 var imageData = context.getImageData(0,0, imageCanvas.width, imageCanvas.height);
272
273 var outputArray = createHSLHistogramFromCanvasData(imageData,imageCanvas.width,imageCanvas.height,16);
274
275 // Now compare this colour histogram with the stored ones, updating the progress bar as we go
276
277
278 calcSimilarityValues(outputArray, $flagArea,$progressArea,$progressBar);
279
280 // And finally reorder them based on this
281 sortFlagsBySimilarityValue($iframe)
282
283 $progressArea.slideUp();
284 }, 500);
285 }
286
287 function activateAccordion() {
288 console.log("activateAccordion()");
289
290 var la_x_dim = $(window).width() * 0.70;
291 var la_y_dim = $(window).height() * 0.67;
292
293 $('#side-by-side').show(10,
294 function() {
295 $('#side-by-side')
296 .liteAccordion({ theme : 'stitch', // 'light',
297 rounded : true,
298 //responsive : true,
299 containerWidth : la_x_dim,
300 containerHeight : la_y_dim,
301 onTriggerSlide : function() {
302 console.log("onTriggerSlide: this = " + this);
303 console.log("onTriggerSlide: id = " + this[0].id);
304 if (this[0].id == "similarity-2d-div") {
305 console.log("Triggering flag similarity comparison");
306 savePNGAsFile("PNG",null);
307
308 setTimeout(rankFlags, 1000);
309
310 }
311 if (this[0].id == "render-3d-div") {
312 console.log("Triggering SVG-Editor exportPNG()");
313 savePNGAsFile("PNG",null);
314 }
315 }
316 });
317 });
318 }
319
320 function activateSVGEditor() {
321 console.log("activateSVGEditor()");
322 //$('#design-2d-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html?noStorageOnLoad=1");
323 $('#design-2d-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html");
324 $('#design-2d-iframe').load(function() {
325 console.log("*** loaded svg iframe: " + this);
326
327 var design_frame = document.getElementById('design-2d-iframe');
328 var svgCanvas = design_frame.contentWindow.svgCanvas;
329
330 console.log("*** svgCanvas should now be initialised: " + svgCanvas);
331 //don't load the previous drawing!
332 reconfigureSvgCanvas(flagCanvasSettings);
333
334 //if (typeof flagCanvasSettings !== 'undefined') {
335 setTimeout(function() {
336 //console.log("**** design frame = " + design_frame);
337 //console.log("**** design frame content window = " + design_frame.contentWindow);
338 design_frame.contentWindow.setSVGEditorColourPalette(flagCanvasSettings);
339 }, 1500); // used to be 500
340
341 //}
342 });
343 }
344
345 $(document).on("pageload",function(event,data){
346 console.log( "Iterative Design Page: jquerymobile pageload()");
347 if (!activatedAccordion) {
348 activateAccordion();
349 activatedAccordion = true;
350 }
351 });
352
353 $(window).resize(function() {
354 var la_x_dim = $(window).width() * 0.70;
355 var la_y_dim = $(window).height() * 0.67;
356
357 if ($('#side-by-side').liteAccordion) {
358 $('#side-by-side')
359 .liteAccordion('resize', {
360 containerWidth : la_x_dim,
361 containerHeight : la_y_dim
362 });
363 }
364 });
365
366 $(document).on("pagebeforeshow",function(event,data) {
367 var active_page = $.mobile.activePage.attr("id");
368 console.log("Iterative-Design fielding Event: pagebeforeshow() for page " + active_page);
369
370 if (active_page == "iterative-design-page") {
371 if (!activatedSVGEditorFrame) {
372 activateSVGEditor();
373 activatedSVGEditorFrame = true;
374 }
375 else {
376 reconfigureSvgCanvas(flagCanvasSettings);
377 var design_frame = document.getElementById('design-2d-iframe');
378 design_frame.contentWindow.setSVGEditorColourPalette(flagCanvasSettings);
379 }
380 }
381
382 if (active_page == "enter-name-page") {
383 console.log("Enter-name: Saving SVG and PNG versions of the flag");
384 saveSVGAndPNGAsFiles();
385 }
386
387
388 //console.log("***!!! returning 'false' for event");
389 //return false;
390
391 });
392 </script>
393
394 </div><!-- /page -->
395 </body>
396</html>
Note: See TracBrowser for help on using the repository browser.