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

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

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