Changeset 29628

Show
Ignore:
Timestamp:
15.12.2014 09:33:58 (5 years ago)
Author:
davidb
Message:

Caching of histograms through HTML5 localStorage

Files:
1 modified

Legend:

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

    r29626 r29628  
     1"use strict"; 
    12 
    23var progressVal = 0; 
     
    45var show_progress = 5; 
    56 
    6 var timeout_delay = 100; 
     7var start_hist_delay = 4000; 
     8var mini_delay = 300; 
     9 
     10 
     11var hasLocalStorage = false; 
     12var needToComputeHistograms = true; 
     13var quantHSLHistogramArray; 
     14 
    715 
    816function drawImage(imageObj, canvasId) { 
     
    2937    } 
    3038 
    31     imageData = drawImage(imageObj,'hsl_canvas'); 
     39    var imageData = drawImage(imageObj,'hsl_canvas'); 
    3240 
    3341    var outputLength = quant * quant * quant; 
     
    5462    var y,p; 
    5563    for (y=0,p=0; y<imageObj.height; y++) { 
    56     var x; 
    57     for (x=0; x<imageObj.width; x++,p+=4) { 
     64//  setTimeout(function() { 
     65      var x; 
     66      for (x=0; x<imageObj.width; x++,p+=4) { 
    5867        // convert 4 byte data value into a colour pixel 
    5968        var rgb_c = new RGBColour(data[p],data[p+1],data[p+2],data[p+3]/255.0); 
     
    7887        //add the frequency of each colour to the histogram 
    7988        outputArray[result] += count;                     
    80     } 
     89      } 
     90//  },4); 
    8191    } 
    8292 
     
    122132    $progressArea.slideDown(); 
    123133    } 
     134 
     135    img_list.sort(); 
    124136 
    125137    var root_img_re = /^.*\/(.*?)\..*?$/; 
     
    149161            // Now move on and start computing colour histograms 
    150162            setTimeout(function()  
    151                    {  computeFlagHistograms(img_list,$progressArea,$progressBar); } 
    152                    ,timeout_delay); 
     163                   {  doneDisplayFlags(img_list,$progressArea,$progressBar); } 
     164                   ,start_hist_delay); 
    153165        } 
    154166        } 
    155167    }; 
    156168 
    157     imageObj.onclick = function() { 
     169 
     170    /* 
     171$("h2").live('mousedown', function(e) {  
     172   if( (e.which == 1) ) { 
     173     alert("left button"); 
     174   }if( (e.which == 3) ) { 
     175     alert("right button"); 
     176   }else if( (e.which == 2) ) { 
     177      alert("middle button");  
     178   } 
     179   e.preventDefault(); 
     180}).live('contextmenu', function(e){ 
     181 e.preventDefault(); 
     182}); 
     183    */ 
     184 
     185 
     186 
     187    imageObj.onclick = function(e) { 
    158188        // Store result of HSL quantization in the image object/tag 
    159189        if (!this.quantHSLHist) { 
     
    162192        console.log(this.quantHSLHist); 
    163193        } 
    164         flag_comparison_array[clicked_on_count] = this.quantHSLHist; 
    165  
    166         clicked_on_count++; 
    167         if (clicked_on_count==2) { 
    168         // trigger comparison 
    169         quantizedColourHistogramComparison(flag_comparison_array[0],flag_comparison_array[1]); 
    170         clicked_on_count=0; 
    171         } 
     194 
     195        if (e.which == 1 ) { 
     196        // Left => use in comparison pair 
     197        flag_comparison_array[clicked_on_count] = this.quantHSLHist; 
     198 
     199        clicked_on_count++; 
     200        if (clicked_on_count==2) { 
     201            // trigger comparison 
     202            quantizedColourHistogramComparison(flag_comparison_array[0],flag_comparison_array[1]); 
     203            clicked_on_count=0; 
     204        } 
     205        } 
     206        else if (e.which == 2) { 
     207        // Middle => fix on this and do similarity with everything else 
     208            var fix_id = this.id; 
     209        e.preventDefault(); 
     210        } 
     211 
    172212    }; 
    173213     
     
    205245                           $progressArea,$progressBar) 
    206246               } 
    207            ,timeout_delay // any time delay causes break in 'rendering' thread, even 0! 
     247           ,mini_delay // any time delay causes break in 'rendering' thread, even 0! 
    208248           ); 
    209249 
     
    216256        $progressArea.slideUp(); 
    217257    } 
    218     } 
    219 } 
     258 
     259    doneComputingHistograms(img_list_len); 
     260    } 
     261} 
     262 
    220263 
    221264function computeFlagHistograms(img_list,$progressArea,$progressBar) 
     
    228271    return; 
    229272    } 
     273 
    230274 
    231275    $progressArea.find('span:first').text("Computing histograms:"); 
     
    244288                       $progressArea,$progressBar) 
    245289               } 
    246            ,timeout_delay // any time delay causes break in 'rendering' thread, even 0! 
     290           ,mini_delay // any time delay causes break in 'rendering' thread, even 0! 
    247291           ); 
    248292     
    249293} 
     294 
     295function doneComputingHistograms(img_list_len) 
     296{ 
     297    if (hasLocalStorage) { 
     298    // build up quantHSLHistogramArray from all the images 
     299 
     300    quantHSLHistogramArray = new Array(img_list_len); 
     301    var i; 
     302    for (i=0; i<img_list_len; i++) { 
     303        var flag_id = "flag-img-" + i; 
     304        var imageObj = document.getElementById(flag_id); 
     305        quantHSLHistogramArray[i] = imageObj.quantHSLHist; 
     306    }  
     307 
     308    console.log("Storing computed HSL histograms in localStorage"); 
     309    localStorage.quantHSLHistogramArray = JSON.stringify(quantHSLHistogramArray); 
     310    } 
     311} 
     312 
     313function doneDisplayFlags(img_list,$progressArea,$progressBar) 
     314{ 
     315    hasLocalStorage = false; 
     316    needToComputeHistograms = true; 
     317 
     318    if (typeof(Storage) !== "undefined") { 
     319    hasLocalStorage = true; 
     320 
     321    if (localStorage.quantHSLHistogramArray) { 
     322 
     323        console.log("Retrieving quantized HSL histograms"); 
     324 
     325        var stored_hist_array = JSON.parse(localStorage["quantHSLHistogramArray"]); 
     326        if (stored_hist_array.length == img_list.length) { 
     327        console.log("Different number of images detected => regenerating"); 
     328 
     329        // Assume if the number of images process hasn't changed, then neither 
     330        // has the stored historgram values 
     331 
     332        quantHSLHistogramArray = stored_hist_array; 
     333 
     334        var i; 
     335        for (i=0; i<img_list.length; i++) { 
     336            var flag_id = "flag-img-" + i; 
     337            var imageObj = document.getElementById(flag_id); 
     338            imageObj.quantHSLHist = quantHSLHistogramArray[i]; 
     339        }  
     340 
     341 
     342        needToComputeHistograms = false; 
     343        } 
     344    } 
     345    } 
     346 
     347 
     348    if (needToComputeHistograms) { 
     349    computeFlagHistograms(img_list,$progressArea,$progressBar); 
     350    } 
     351    else { 
     352    $progressArea.slideUp(); 
     353    doneComputingHistograms(img_list.length); 
     354    } 
     355 
     356 
     357 
     358}