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

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

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