root/other-projects/nz-flag-design/trunk/main-form/iterative-design.html @ 29926

Revision 29926, 17.4 KB (checked in by davidb, 4 years ago)

Version after some debugging -- effectively no changes in this file, but some commented out code worth keeping track of

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