Show
Ignore:
Timestamp:
21.03.2015 00:10:26 (5 years ago)
Author:
davidb
Message:

Initial version with ranked image similarity running

Files:
1 modified

Legend:

Unmodified
Added
Removed
  • other-projects/nz-flag-design/trunk/similarity-2d/flag-processing.js

    r29787 r29806  
    99 
    1010 
    11 var hasLocalStorage = (typeof(Storage) !== "undefined"); // **** 
    12 //var hasLocalStorage = false; 
     11//var hasLocalStorage = (typeof(Storage) !== "undefined"); // **** 
     12var hasLocalStorage = false; 
    1313 
    1414var quantHSLHistogramArray; 
     
    132132} 
    133133 
    134 function createHSLHistogram(imageObj, quant) 
     134 
     135 
     136function createHSLHistogramFromCanvasData(imageData, imageWidth, imageHeight, quant) 
    135137{ 
    136138    var i; 
    137  
    138     if (!$('#hsl_canvas').length) { 
    139     $('<canvas>', {id: 'hsl_canvas'}).hide().appendTo('body'); 
    140     } 
    141  
    142     var imageData = drawImage(imageObj,'hsl_canvas'); 
    143139 
    144140    var outputLength = quant * quant * quant; 
     
    164160    //Loop through each pixel 
    165161    var y,p; 
    166     for (y=0,p=0; y<imageObj.height; y++) { 
     162    for (y=0,p=0; y<imageHeight; y++) { 
    167163      var x; 
    168       for (x=0; x<imageObj.width; x++,p+=4) { 
     164      for (x=0; x<imageWidth; x++,p+=4) { 
    169165        // convert 4 byte data value into a colour pixel 
    170166        var rgb_c = new RGBColour(data[p],data[p+1],data[p+2],data[p+3]/255.0); 
     
    192188    } 
    193189 
     190    if (total == 0) { 
     191    // entire image must have been blank 
     192    // make total '1' to stop NaN being generated 
     193    total = 1; 
     194    } 
     195 
    194196    //Normalise the histogram, based on the number of opaque pixels 
    195197    for (i=0; i<outputArray.length; i++) { 
     
    197199    } 
    198200 
     201    return outputArray; 
     202} 
     203 
     204 
     205function createHSLHistogram(imageObj, quant) 
     206{ 
     207    if (!$('#hsl_canvas').length) { 
     208    $('<canvas>', {id: 'hsl_canvas'}).hide().appendTo('body'); 
     209    } 
     210 
     211    var imageData = drawImage(imageObj,'hsl_canvas'); 
     212 
     213    var outputArray = createHSLHistogramFromCanvasData(imageData,imageObj.width,imageObj.height,quant); 
     214 
    199215/* 
    200216    if (saveOnServer) { 
    201     console.log("Saving HSV quantized histogram on server: " + imageObj.title) 
     217    console.log("Saving HSV quantized histogram on server: " + imageObj.title.toLowerCase()) 
    202218    //console.log("outputArray = " + JSON.stringify(outputArray)); 
    203219 
    204     var jsonFilename = imageObj.title + ".json"; 
     220    var jsonFilename = imageObj.title.toLowerCase() + ".json"; 
    205221    var data = { jsonFilename: jsonFilename, jsonData: JSON.stringify(outputArray)}; 
    206222 
    207     console.log("Saving colour histogram data for " + imageObj.title); 
     223    console.log("Saving colour histogram data for " + imageObj.title.toLowerCase()); 
    208224    $.ajax({ 
    209225        type: "POST", 
     
    235251    } 
    236252 
    237     alert("Product for HSL histogram: " + quant_product); 
    238  
     253    console.log("Product for HSL histogram: " + quant_product); 
     254 
     255    return quant_product; 
    239256} 
    240257 
     
    316333        if (clicked_on_count==2) { 
    317334            // trigger comparison 
    318             quantizedColourHistogramComparison(flag_comparison_array[0],flag_comparison_array[1]); 
     335            alert("Similarity score: " + quantizedColourHistogramComparison(flag_comparison_array[0],flag_comparison_array[1])); 
    319336            clicked_on_count=0; 
    320337        } 
     
    330347     
    331348    imageObj.src   = img_url; 
    332     imageObj.title = title; 
     349    imageObj.title = title.toUpperCase(); 
     350    imageObj.country = imageObj.title; 
    333351    imageObj.id    = "flag-img-" + i; 
    334352 
     
    336354    } 
    337355} 
     356 
     357 
     358 
     359 
     360 
     361function calcSimilarityValues(newFlagQuantHSLHist, $displayDiv,$progressArea,$progressBar) 
     362{ 
     363    console.log("*** calcSimilarityValues()"); 
     364 
     365    var iframe = $('#similarity-2d-iframe').contents(); 
     366 
     367    var img_obj_list = iframe.find('#flagArea').children('img').toArray(); 
     368 
     369    var img_obj_list_len = img_obj_list.length; 
     370 
     371    if (img_obj_list_len==0) { 
     372    return; 
     373    } 
     374    else if (img_obj_list_len>show_progress) { 
     375    // number of images to process non-trivial 
     376    $progressArea.slideDown(); 
     377    } 
     378 
     379    var progress_step = 100.0 / img_obj_list_len; 
     380     
     381    for (var i=0; i<img_obj_list.length; i++) { 
     382    var imgObj = img_obj_list[i]; 
     383 
     384    var existingQuantHSLHist = imgObj.quantHSLHist; 
     385 
     386    var similarity_score = quantizedColourHistogramComparison(newFlagQuantHSLHist,existingQuantHSLHist); 
     387    imgObj.similarityScore = similarity_score; 
     388    imgObj.title = imgObj.country + ", Similarity score: " + similarity_score; 
     389 
     390    progressVal += progress_step;    
     391    console.log("*** i = " + i); 
     392    console.log("*** pbar = " + $progressBar.progressbar); 
     393    if ($progressBar.progressbar) { 
     394        $progressBar.progressbar('value',progressVal); 
     395    } 
     396    } 
     397 
     398    //progressVal = 100; 
     399    //$progressBar.progressbar('value',progressVal); 
     400 
     401    if (img_obj_list_len>show_progress) { 
     402    $progressArea.slideUp(); 
     403    } 
     404} 
     405 
     406function sortUsingAttribute(parent, childSelector, field) { 
     407    var items = parent.children(childSelector).sort(function(a, b) { 
     408        var vA = a.attr(field); 
     409        var vB = b.attr(field) 
     410        return (vA < vB) ? -1 : (vA > vB) ? 1 : 0; 
     411    }); 
     412 
     413    parent.empty(childSelecctor); 
     414    parent.append(items); 
     415} 
     416 
     417 
     418function compareSimilarityValue(a,b) {  
     419 
     420    //var vA = a.similarityScore; 
     421    //var vB = b.similarityScore; 
     422    //return (vA < vB) ? -1 : (vA > vB) ? 1 : 0; 
     423     
     424    return (b.similarityScore - a.similarityScore);  
     425} 
     426 
     427function sortFlagsBySimilarityValue($iframe) 
     428{ 
     429    var img_obj_list = $iframe.find('#flagArea > img').toArray(); 
     430 
     431    var sorted_img_obj_list = img_obj_list.sort(compareSimilarityValue); 
     432    //console.log("*** sorted img len = " + sorted_img_obj_list.length); 
     433 
     434    $iframe.find('#flagArea').empty('img'); 
     435 
     436    $iframe.find('#flagArea').append(sorted_img_obj_list); 
     437 
     438    //sortUsingAttribute('#flagArea','img','similarityValue'); 
     439} 
     440 
     441 
    338442 
    339443function computeFlagHistogramChain(chain_count, img_list_len, 
     
    351455    if (retrieveFromServer) { 
    352456        // see if it is stored on the server  
    353         console.log("Retrieving stored colour histogram for " + imageObj.title + " ..."); 
     457        console.log("Retrieving stored colour histogram for " + imageObj.title.toLowerCase() + " ..."); 
    354458        $.ajax({ 
    355459        async: false, 
    356460        dataType: "json", 
    357         url: "../similarity-2d/json-data/" + imageObj.title + ".json", 
     461        url: "../similarity-2d/json-data/" + imageObj.title.toLowerCase() + ".json", 
    358462        success: function(data) { 
    359463            console.log("... success"); 
     
    524628            console.log("... success"); 
    525629            if (rle_data.length != img_list.length) { 
    526             console.log("Stored histogram data out of date with flag list."); 
     630            console.log("Stored histogram data out of date with flag list."); 
     631            console.log("rle len = " + rle_data.length + ", img_list len = " + img_list.length); 
    527632            // what is stored on the sever differed to the number of images displayed 
    528633            computeFlagHistograms(img_list,$progressArea,$progressBar);