Changeset 29806


Ignore:
Timestamp:
03/21/15 00:10:26 (6 years ago)
Author:
davidb
Message:

Initial version with ranked image similarity running

File:
1 edited

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);
Note: See TracChangeset for help on using the changeset viewer.