Changeset 29805 for other-projects/nz-flag-design/trunk/main-form/iterative-design.html

Timestamp:

2015-03-21T00:07:10+13:00 (9 years ago)

Author:

davidb

Message:

Initial version with ranked image similarity running

File:

• other-projects/nz-flag-design/trunk/main-form/iterative-design.html (modified) (5 diffs)

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

@@ -7 +7 @@
     <!-- jQuery -->
     <script src="lib/jquery-1.11.1.min.js"></script>
+
+    <script src="../similarity-2d/js-lib/Colour.js"></script>
+    <script src="../similarity-2d/flag-processing.js"></script>
 
         <title>Iterative Design</title> 
@@ -94 +97 @@
 
                         // Look up jsession id; if not present fall back to use a timestamp
-                        //var jsession_id = $.cookie('JSESSIONID') || new Date().getTime();
-                        var jsession_id = $.cookie('JSESSIONID') + "-" + new Date().getTime();
+                        var jsession_id = $.cookie('JSESSIONID') || new Date().getTime();
+                        //var jsession_id = $.cookie('JSESSIONID') + "-" + new Date().getTime(); // quick hack for summer scholarship presentation day
+
                         console.log("jsession id = " + jsession_id);
                         var imageFilename = "flag-" + jsession_id + ".png";
@@ -195 +199 @@
 
 
+        function rankFlags() {
+          // First compute colour histogram for user drawn flag
+          var imageCanvas = document.getElementById('export_canvas');
+          var context = imageCanvas.getContext('2d');
+          var imageData = context.getImageData(0,0, imageCanvas.width, imageCanvas.height);
+
+          var outputArray = createHSLHistogramFromCanvasData(imageData,imageCanvas.width,imageCanvas.height,16);
+
+          // Now compare this colour histogram with the stored ones, updating the progress bar as we go
+
+          var $iframe = $('#similarity-2d-iframe').contents();
+
+          var $flagArea     = $iframe.find('#flagArea');
+          var $progressArea = $iframe.find('#progressArea');
+                  var $progressBar  = $iframe.find('#progressBar');
+
+              $progressArea.find('span:first').text("Calculating flag similarity");
+              $progressArea.slideDown();
+
+          calcSimilarityValues(outputArray, $flagArea,$progressArea,$progressBar);
+          
+          // And finally reorder them based on this
+          sortFlagsBySimilarityValue($iframe)
+
+              $progressArea.slideUp();
+        }
+
                 function activateAccordion() {
                     console.log("activateAccordion()");
@@ -212 +243 @@
                                     console.log("onTriggerSlide: this = " + this);
                                     console.log("onTriggerSlide: id = " + this[0].id);
+                                    if (this[0].id == "similarity-2d-div") {
+                                        console.log("Triggering flag similarity comparison");
+                                        savePNGAsFile("PNG",null);
+
+                                setTimeout(rankFlags, 1000);
+
+                                    }
                                     if (this[0].id == "render-3d-div") {
                                         console.log("Triggering SVG-Editor exportPNG()");
@@ -248 +286 @@
                     var la_y_dim = $(window).height() * 0.67;
 
-                    $('#side-by-side')
-                    .liteAccordion('resize', {
-                        containerWidth  : la_x_dim,
-                        containerHeight : la_y_dim
-                    });
-
+            if ($('#side-by-side').liteAccordion) {
+                      $('#side-by-side')
+                      .liteAccordion('resize', {
+                          containerWidth  : la_x_dim,
+                          containerHeight : la_y_dim
+                      });
+            }
                 });