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

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

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