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

Revision 29909, 15.8 KB (checked in by davidb, 4 years ago)

Word tweak to what appears on the flag similarity 'blade'

  • 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" 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 Comparison</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 browser.