Changeset 29628 for other-projects/nz-flag-design/trunk/similarity-2d/flag-processing.js

Timestamp:

2014-12-15T09:33:58+13:00 (9 years ago)

Author:

davidb

Message:

Caching of histograms through HTML5 localStorage

File:

• other-projects/nz-flag-design/trunk/similarity-2d/flag-processing.js (modified) (12 diffs)

other-projects/nz-flag-design/trunk/similarity-2d/flag-processing.js

@@ +1 @@
+"use strict";
 
 var progressVal = 0;
@@ -4 +5 @@
 var show_progress = 5;
 
-var timeout_delay = 100;
+var start_hist_delay = 4000;
+var mini_delay = 300;
+
+
+var hasLocalStorage = false;
+var needToComputeHistograms = true;
+var quantHSLHistogramArray;
+
 
 function drawImage(imageObj, canvasId) {
@@ -29 +37 @@
     }
 
-    imageData = drawImage(imageObj,'hsl_canvas');
+    var imageData = drawImage(imageObj,'hsl_canvas');
 
     var outputLength = quant * quant * quant;
@@ -54 +62 @@
     var y,p;
     for (y=0,p=0; y<imageObj.height; y++) {
-    var x;
-    for (x=0; x<imageObj.width; x++,p+=4) {
+//  setTimeout(function() {
+      var x;
+      for (x=0; x<imageObj.width; x++,p+=4) {
         // convert 4 byte data value into a colour pixel
         var rgb_c = new RGBColour(data[p],data[p+1],data[p+2],data[p+3]/255.0);
@@ -78 +87 @@
         //add the frequency of each colour to the histogram
         outputArray[result] += count;                    
-    }
+      }
+//  },4);
     }
 
@@ -122 +132 @@
     $progressArea.slideDown();
     }
+
+    img_list.sort();
 
     var root_img_re = /^.*\/(.*?)\..*?$/;
@@ -149 +161 @@
             // Now move on and start computing colour histograms
             setTimeout(function() 
-                   {  computeFlagHistograms(img_list,$progressArea,$progressBar); }
-                   ,timeout_delay);
+                   {  doneDisplayFlags(img_list,$progressArea,$progressBar); }
+                   ,start_hist_delay);
         }
         }
     };
 
-    imageObj.onclick = function() {
+
+    /*
+$("h2").live('mousedown', function(e) { 
+   if( (e.which == 1) ) {
+     alert("left button");
+   }if( (e.which == 3) ) {
+     alert("right button");
+   }else if( (e.which == 2) ) {
+      alert("middle button"); 
+   }
+   e.preventDefault();
+}).live('contextmenu', function(e){
+ e.preventDefault();
+});
+    */
+
+
+
+    imageObj.onclick = function(e) {
         // Store result of HSL quantization in the image object/tag
         if (!this.quantHSLHist) {
@@ -162 +192 @@
         console.log(this.quantHSLHist);
         }
-        flag_comparison_array[clicked_on_count] = this.quantHSLHist;
-
-        clicked_on_count++;
-        if (clicked_on_count==2) {
-        // trigger comparison
-        quantizedColourHistogramComparison(flag_comparison_array[0],flag_comparison_array[1]);
-        clicked_on_count=0;
-        }
+
+        if (e.which == 1 ) {
+        // Left => use in comparison pair
+        flag_comparison_array[clicked_on_count] = this.quantHSLHist;
+
+        clicked_on_count++;
+        if (clicked_on_count==2) {
+            // trigger comparison
+            quantizedColourHistogramComparison(flag_comparison_array[0],flag_comparison_array[1]);
+            clicked_on_count=0;
+        }
+        }
+        else if (e.which == 2) {
+        // Middle => fix on this and do similarity with everything else
+            var fix_id = this.id;
+        e.preventDefault();
+        }
+
     };
     
@@ -205 +245 @@
                            $progressArea,$progressBar)
                }
-           ,timeout_delay // any time delay causes break in 'rendering' thread, even 0!
+           ,mini_delay // any time delay causes break in 'rendering' thread, even 0!
            );
 
@@ -216 +256 @@
         $progressArea.slideUp();
     }
-    }
-}
+
+    doneComputingHistograms(img_list_len);
+    }
+}
+
 
 function computeFlagHistograms(img_list,$progressArea,$progressBar)
@@ -228 +271 @@
     return;
     }
+
 
     $progressArea.find('span:first').text("Computing histograms:");
@@ -244 +288 @@
                        $progressArea,$progressBar)
                }
-           ,timeout_delay // any time delay causes break in 'rendering' thread, even 0!
+           ,mini_delay // any time delay causes break in 'rendering' thread, even 0!
            );
     
 }
+
+function doneComputingHistograms(img_list_len)
+{
+    if (hasLocalStorage) {
+    // build up quantHSLHistogramArray from all the images
+
+    quantHSLHistogramArray = new Array(img_list_len);
+    var i;
+    for (i=0; i<img_list_len; i++) {
+        var flag_id = "flag-img-" + i;
+        var imageObj = document.getElementById(flag_id);
+        quantHSLHistogramArray[i] = imageObj.quantHSLHist;
+    } 
+
+    console.log("Storing computed HSL histograms in localStorage");
+    localStorage.quantHSLHistogramArray = JSON.stringify(quantHSLHistogramArray);
+    }
+}
+
+function doneDisplayFlags(img_list,$progressArea,$progressBar)
+{
+    hasLocalStorage = false;
+    needToComputeHistograms = true;
+
+    if (typeof(Storage) !== "undefined") {
+    hasLocalStorage = true;
+
+    if (localStorage.quantHSLHistogramArray) {
+
+        console.log("Retrieving quantized HSL histograms");
+
+        var stored_hist_array = JSON.parse(localStorage["quantHSLHistogramArray"]);
+        if (stored_hist_array.length == img_list.length) {
+        console.log("Different number of images detected => regenerating");
+
+        // Assume if the number of images process hasn't changed, then neither
+        // has the stored historgram values
+
+        quantHSLHistogramArray = stored_hist_array;
+
+        var i;
+        for (i=0; i<img_list.length; i++) {
+            var flag_id = "flag-img-" + i;
+            var imageObj = document.getElementById(flag_id);
+            imageObj.quantHSLHist = quantHSLHistogramArray[i];
+        } 
+
+
+        needToComputeHistograms = false;
+        }
+    }
+    }
+
+
+    if (needToComputeHistograms) {
+    computeFlagHistograms(img_list,$progressArea,$progressBar);
+    }
+    else {
+    $progressArea.slideUp();
+    doneComputingHistograms(img_list.length);
+    }
+
+
+
+}