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

Timestamp:

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

Author:

davidb

Message:

Initial version with ranked image similarity running

File:

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

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

@@ -9 +9 @@
 
 
-var hasLocalStorage = (typeof(Storage) !== "undefined"); // ****
-//var hasLocalStorage = false;
+//var hasLocalStorage = (typeof(Storage) !== "undefined"); // ****
+var hasLocalStorage = false;
 
 var quantHSLHistogramArray;
@@ -132 +132 @@
 }
 
-function createHSLHistogram(imageObj, quant)
+
+
+function createHSLHistogramFromCanvasData(imageData, imageWidth, imageHeight, quant)
 {
     var i;
-
-    if (!$('#hsl_canvas').length) {
-    $('<canvas>', {id: 'hsl_canvas'}).hide().appendTo('body');
-    }
-
-    var imageData = drawImage(imageObj,'hsl_canvas');
 
     var outputLength = quant * quant * quant;
@@ -164 +160 @@
     //Loop through each pixel
     var y,p;
-    for (y=0,p=0; y<imageObj.height; y++) {
+    for (y=0,p=0; y<imageHeight; y++) {
       var x;
-      for (x=0; x<imageObj.width; x++,p+=4) {
+      for (x=0; x<imageWidth; 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);
@@ -192 +188 @@
     }
 
+    if (total == 0) {
+    // entire image must have been blank
+    // make total '1' to stop NaN being generated
+    total = 1;
+    }
+
     //Normalise the histogram, based on the number of opaque pixels
     for (i=0; i<outputArray.length; i++) {
@@ -197 +199 @@
     }
 
+    return outputArray;
+}
+
+
+function createHSLHistogram(imageObj, quant)
+{
+    if (!$('#hsl_canvas').length) {
+    $('<canvas>', {id: 'hsl_canvas'}).hide().appendTo('body');
+    }
+
+    var imageData = drawImage(imageObj,'hsl_canvas');
+
+    var outputArray = createHSLHistogramFromCanvasData(imageData,imageObj.width,imageObj.height,quant);
+
 /*
     if (saveOnServer) {
-    console.log("Saving HSV quantized histogram on server: " + imageObj.title)
+    console.log("Saving HSV quantized histogram on server: " + imageObj.title.toLowerCase())
     //console.log("outputArray = " + JSON.stringify(outputArray));
 
-    var jsonFilename = imageObj.title + ".json";
+    var jsonFilename = imageObj.title.toLowerCase() + ".json";
     var data = { jsonFilename: jsonFilename, jsonData: JSON.stringify(outputArray)};
 
-    console.log("Saving colour histogram data for " + imageObj.title);
+    console.log("Saving colour histogram data for " + imageObj.title.toLowerCase());
     $.ajax({
         type: "POST",
@@ -235 +251 @@
     }
 
-    alert("Product for HSL histogram: " + quant_product);
-
+    console.log("Product for HSL histogram: " + quant_product);
+
+    return quant_product;
 }
 
@@ -316 +333 @@
         if (clicked_on_count==2) {
             // trigger comparison
-            quantizedColourHistogramComparison(flag_comparison_array[0],flag_comparison_array[1]);
+            alert("Similarity score: " + quantizedColourHistogramComparison(flag_comparison_array[0],flag_comparison_array[1]));
             clicked_on_count=0;
         }
@@ -330 +347 @@
     
     imageObj.src   = img_url;
-    imageObj.title = title;
+    imageObj.title = title.toUpperCase();
+    imageObj.country = imageObj.title;
     imageObj.id    = "flag-img-" + i;
 
@@ -336 +354 @@
     }
 }
+
+
+
+
+
+function calcSimilarityValues(newFlagQuantHSLHist, $displayDiv,$progressArea,$progressBar)
+{
+    console.log("*** calcSimilarityValues()");
+
+    var iframe = $('#similarity-2d-iframe').contents();
+
+    var img_obj_list = iframe.find('#flagArea').children('img').toArray();
+
+    var img_obj_list_len = img_obj_list.length;
+
+    if (img_obj_list_len==0) {
+    return;
+    }
+    else if (img_obj_list_len>show_progress) {
+    // number of images to process non-trivial
+    $progressArea.slideDown();
+    }
+
+    var progress_step = 100.0 / img_obj_list_len;
+    
+    for (var i=0; i<img_obj_list.length; i++) {
+    var imgObj = img_obj_list[i];
+
+    var existingQuantHSLHist = imgObj.quantHSLHist;
+
+    var similarity_score = quantizedColourHistogramComparison(newFlagQuantHSLHist,existingQuantHSLHist);
+    imgObj.similarityScore = similarity_score;
+    imgObj.title = imgObj.country + ", Similarity score: " + similarity_score;
+
+    progressVal += progress_step;   
+    console.log("*** i = " + i);
+    console.log("*** pbar = " + $progressBar.progressbar);
+    if ($progressBar.progressbar) {
+        $progressBar.progressbar('value',progressVal);
+    }
+    }
+
+    //progressVal = 100;
+    //$progressBar.progressbar('value',progressVal);
+
+    if (img_obj_list_len>show_progress) {
+    $progressArea.slideUp();
+    }
+}
+
+function sortUsingAttribute(parent, childSelector, field) {
+    var items = parent.children(childSelector).sort(function(a, b) {
+        var vA = a.attr(field);
+        var vB = b.attr(field)
+        return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
+    });
+
+    parent.empty(childSelecctor);
+    parent.append(items);
+}
+
+
+function compareSimilarityValue(a,b) { 
+
+    //var vA = a.similarityScore;
+    //var vB = b.similarityScore;
+    //return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
+    
+    return (b.similarityScore - a.similarityScore); 
+}
+
+function sortFlagsBySimilarityValue($iframe)
+{
+    var img_obj_list = $iframe.find('#flagArea > img').toArray();
+
+    var sorted_img_obj_list = img_obj_list.sort(compareSimilarityValue);
+    //console.log("*** sorted img len = " + sorted_img_obj_list.length);
+
+    $iframe.find('#flagArea').empty('img');
+
+    $iframe.find('#flagArea').append(sorted_img_obj_list);
+
+    //sortUsingAttribute('#flagArea','img','similarityValue');
+}
+
+
 
 function computeFlagHistogramChain(chain_count, img_list_len,
@@ -351 +455 @@
     if (retrieveFromServer) {
         // see if it is stored on the server 
-        console.log("Retrieving stored colour histogram for " + imageObj.title + " ...");
+        console.log("Retrieving stored colour histogram for " + imageObj.title.toLowerCase() + " ...");
         $.ajax({
         async: false,
         dataType: "json",
-        url: "../similarity-2d/json-data/" + imageObj.title + ".json",
+        url: "../similarity-2d/json-data/" + imageObj.title.toLowerCase() + ".json",
         success: function(data) {
             console.log("... success");
@@ -524 +628 @@
             console.log("... success");
             if (rle_data.length != img_list.length) {
-            console.log("Stored histogram data out of date with flag list.");
+            console.log("Stored histogram data out of date with flag list.");
+            console.log("rle len = " + rle_data.length + ", img_list len = " + img_list.length);
             // what is stored on the sever differed to the number of images displayed
             computeFlagHistograms(img_list,$progressArea,$progressBar);