Show
Ignore:
Timestamp:
23.03.2015 10:39:09 (4 years ago)
Author:
davidb
Message:

Better computing info displayed

Files:
1 modified

Legend:

Unmodified
Added
Removed
  • other-projects/nz-flag-design/trunk/main-form/iterative-design.html

    r29805 r29809  
    200200 
    201201        function rankFlags() { 
    202           // First compute colour histogram for user drawn flag 
    203           var imageCanvas = document.getElementById('export_canvas'); 
    204           var context = imageCanvas.getContext('2d'); 
    205           var imageData = context.getImageData(0,0, imageCanvas.width, imageCanvas.height); 
    206  
    207           var outputArray = createHSLHistogramFromCanvasData(imageData,imageCanvas.width,imageCanvas.height,16); 
    208  
    209           // Now compare this colour histogram with the stored ones, updating the progress bar as we go 
    210  
     202          console.log("rankFlags()"); 
     203 
     204          // Get a message up on the screen to the similarity calculation is on its way 
    211205          var $iframe = $('#similarity-2d-iframe').contents(); 
    212206 
    213207          var $flagArea     = $iframe.find('#flagArea'); 
    214208          var $progressArea = $iframe.find('#progressArea'); 
     209 
     210              $progressArea.find('span:first').text("Comparing new flag with existing flags from around the world"); 
     211              $progressArea.slideDown(); 
    215212                  var $progressBar  = $iframe.find('#progressBar'); 
    216213 
    217               $progressArea.find('span:first').text("Calculating flag similarity"); 
    218               $progressArea.slideDown(); 
    219  
    220           calcSimilarityValues(outputArray, $flagArea,$progressArea,$progressBar); 
     214 
     215          setTimeout(function() { 
     216            // Compute colour histogram for user drawn flag 
     217            var imageCanvas = document.getElementById('export_canvas'); 
     218            var context = imageCanvas.getContext('2d'); 
     219            var imageData = context.getImageData(0,0, imageCanvas.width, imageCanvas.height); 
     220 
     221            var outputArray = createHSLHistogramFromCanvasData(imageData,imageCanvas.width,imageCanvas.height,16); 
     222 
     223            // Now compare this colour histogram with the stored ones, updating the progress bar as we go 
     224 
     225 
     226            calcSimilarityValues(outputArray, $flagArea,$progressArea,$progressBar); 
    221227           
    222           // And finally reorder them based on this 
    223           sortFlagsBySimilarityValue($iframe) 
    224  
    225               $progressArea.slideUp(); 
     228            // And finally reorder them based on this 
     229            sortFlagsBySimilarityValue($iframe) 
     230 
     231                $progressArea.slideUp(); 
     232          }, 500); 
    226233        } 
    227234