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

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

Changes made during Fieldays event. Background colour remember between reloads (in localStorage) until published; more sophisticated support for handling JSON data
  • Property svn:executable set to *
File size: 18.2 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%; z-index: 10;" onclickXX="saveSVGAndPNGAsFiles()"></a>
27 <div class="right-button" style="right: 1%; width: 130px;" >
28 <p style="position: absolute; top: -35px; padding-right: 20px; font-size: 140%">Click the Arrow 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 if (window.localStorage) {
202 var flagBackgroundColor = window.localStorage.getItem("flagBackgroundColor");
203 console.log("**** falg background color = " + flagBackgroundColor);
204 if (flagBackgroundColor != null) {
205 settings.backgroundColor = flagBackgroundColor;
206 }
207 }
208
209 var userBackground = settings.backgroundColor;
210
211 // decide if this is the first time we're looking to set the background colour
212 // or not. If it is, then use svgCanvas API to create a suitable layer
213
214 var backRectSvg = svgCanvas.getElem('backgroundRectangle');
215
216 if (backRectSvg == null) {
217 svgCanvas.createLayer("background");
218
219 svgCanvas.addSvgElementFromJson({
220 "element": "rect",
221 "attr": {
222 "id": "backgroundRectangle",
223 "width": canvasWidth,
224 "height": canvasHeight,
225 "x": "0",
226 "y": "0",
227 "fill": userBackground,
228 "opacity": "1.0",
229 "stroke-opacity": "0",
230 "stroke-linecap": "null",
231 "stroke-linejoin": "null",
232 "stroke-dasharray": "null",
233 "stroke-width": "5",
234 "stroke": "#000000"
235 },
236 "curStyles": true
237 });
238 svgCanvas.setCurrentLayerPosition(0);
239
240 // Refresh the canvas layers
241 svgCanvas.identifyLayers();
242 }
243 else {
244 console.log("Background to flag already exists -- changing colour to: " + userBackground);
245 backRectSvg.setAttributeNS(null,"fill",userBackground);
246 // find out how to change width and height directly also?
247
248 console.log("Setting background width and height to: " + widthVar + " and " + heightVar);
249
250 backRectSvg.setAttributeNS(null,"width",canvasWidth);
251 backRectSvg.setAttributeNS(null,"height",canvasHeight);
252
253 //svgCanvas.setResolution(backgroundWidth, backgroundHeight);
254 }
255 // Centres the canvas (somewhat)
256 //svgCanvas.updateCanvas(100, 100);
257
258 }
259
260
261 function rankFlags() {
262 console.log("rankFlags()");
263
264 // Get a message up on the screen to the similarity calculation is on its way
265 var $iframe = $('#similarity-2d-iframe').contents();
266
267 var $flagArea = $iframe.find('#flagArea');
268 var $progressArea = $iframe.find('#progressArea');
269
270 $progressArea.find('span:first').text("Comparing new flag with existing flags from around the world");
271 $progressArea.slideDown();
272 var $progressBar = $iframe.find('#progressBar');
273
274
275 setTimeout(function() {
276 // Compute colour histogram for user drawn flag
277 var imageCanvas = document.getElementById('export_canvas');
278 var context = imageCanvas.getContext('2d');
279 var imageData = context.getImageData(0,0, imageCanvas.width, imageCanvas.height);
280
281 var outputArray = createHSLHistogramFromCanvasData(imageData,imageCanvas.width,imageCanvas.height,16);
282
283 // Now compare this colour histogram with the stored ones, updating the progress bar as we go
284
285
286 calcSimilarityValues(outputArray, $flagArea,$progressArea,$progressBar);
287
288 // And finally reorder them based on this
289 sortFlagsBySimilarityValue($iframe)
290
291 $progressArea.slideUp();
292 }, 500);
293 }
294
295 function activateAccordion() {
296 console.log("activateAccordion()");
297
298 var la_x_dim = $(window).width() * 0.70;
299 var la_y_dim = $(window).height() * 0.67;
300
301 $('#side-by-side').show(10,
302 function() {
303 $('#side-by-side')
304 .liteAccordion({ theme : 'stitch', // 'light',
305 rounded : true,
306 //responsive : true,
307 containerWidth : la_x_dim,
308 containerHeight : la_y_dim,
309 onTriggerSlide : function() {
310 console.log("onTriggerSlide: this = " + this);
311 console.log("onTriggerSlide: id = " + this[0].id);
312 if (this[0].id == "similarity-2d-div") {
313 console.log("Triggering flag similarity comparison");
314 savePNGAsFile("PNG",null);
315
316 setTimeout(rankFlags, 1000);
317
318 }
319 if (this[0].id == "render-3d-div") {
320 console.log("Triggering SVG-Editor exportPNG()");
321 savePNGAsFile("PNG",null);
322 }
323 }
324 });
325 });
326 }
327
328 function activateSVGEditor() {
329 console.log("activateSVGEditor()");
330 //$('#design-2d-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html?noStorageOnLoad=1");
331 $('#design-2d-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html");
332 $('#design-2d-iframe').load(function() {
333 console.log("*** loaded svg iframe: " + this);
334
335 var design_frame = document.getElementById('design-2d-iframe');
336 var svgCanvas = design_frame.contentWindow.svgCanvas;
337
338 console.log("*** svgCanvas should now be initialised: " + svgCanvas);
339 //don't load the previous drawing!
340 reconfigureSvgCanvas(flagCanvasSettings);
341
342 //if (typeof flagCanvasSettings !== 'undefined') {
343 setTimeout(function() {
344 //console.log("**** design frame = " + design_frame);
345 //console.log("**** design frame content window = " + design_frame.contentWindow);
346 design_frame.contentWindow.setSVGEditorColourPalette(flagCanvasSettings);
347 }, 1500); // used to be 500
348
349 //}
350 });
351 }
352
353 $(document).on("pageload",function(event,data){
354 console.log( "Iterative Design Page: jquerymobile pageload()");
355 if (!activatedAccordion) {
356 activateAccordion();
357 activatedAccordion = true;
358 }
359 });
360
361 $(window).resize(function() {
362 var la_x_dim = $(window).width() * 0.70;
363 var la_y_dim = $(window).height() * 0.67;
364
365 if ($('#side-by-side').liteAccordion) {
366 $('#side-by-side')
367 .liteAccordion('resize', {
368 containerWidth : la_x_dim,
369 containerHeight : la_y_dim
370 });
371 }
372 });
373
374 $(document).on("pagebeforeshow",function(event,data) {
375 var active_page = $.mobile.activePage.attr("id");
376 console.log("Iterative-Design fielding Event: pagebeforeshow() for page " + active_page);
377
378 if (active_page == "iterative-design-page") {
379 if (!activatedSVGEditorFrame) {
380 activateSVGEditor();
381 activatedSVGEditorFrame = true;
382 }
383 else {
384 reconfigureSvgCanvas(flagCanvasSettings);
385 var design_frame = document.getElementById('design-2d-iframe');
386 design_frame.contentWindow.setSVGEditorColourPalette(flagCanvasSettings);
387 }
388 }
389
390 if (active_page == "enter-name-page") {
391 console.log("Enter-name: Saving SVG and PNG versions of the flag");
392 saveSVGAndPNGAsFiles();
393 }
394
395
396 //console.log("***!!! returning 'false' for event");
397 //return false;
398
399 });
400 </script>
401
402 </div><!-- /page -->
403 </body>
404</html>
Note: See TracBrowser for help on using the repository browser.