Changeset 29787 for other-projects

Show
Ignore:
Timestamp:
17.03.2015 00:27:22 (5 years ago)
Author:
davidb
Message:

Changes to support storing on the server side of the HSV histogram calculations

Location:
other-projects/nz-flag-design/trunk
Files:
7 modified

Legend:

Unmodified
Added
Removed
  • other-projects/nz-flag-design/trunk/INSTALL.sh

    r29785 r29787  
    2121echo "* 2. Making 'similarity-2d' world-writable so web server can save JSON data there" 
    2222echo "*    => chmod a+rwx similarity-2d" 
     23echo "*    => chmod a+rwx similarity-2d/json-data" 
    2324echo "****" 
    2425chmod a+rwx similarity-2d 
     26chmod a+rwx similarity-2d/json-data 
    2527 
    2628echo "****" 
  • other-projects/nz-flag-design/trunk/design-2d/image-data-to-file.jsp

    r29608 r29787  
     1<%@ page contentType="text/html; charset=UTF-8" %> 
    12<!DOCTYPE html>   
    23<html> 
  • other-projects/nz-flag-design/trunk/main-form/choose-canvas.html

    r29781 r29787  
    7474        $.getJSON( "../similarity-2d/flag-aspect-ratios-json.jsp", function( data ) { 
    7575 
    76             var scale_to_y_dim = 130; 
     76 
     77            //var scale_to_y_dim = 130; 
     78 
     79            // express scale_to_y_dim to use relative to height of window 
     80 
     81            var la_y_dim = $(window).height() - $('#aspect-ratio-div').position().top; 
     82            var scale_to_y_dim = la_y_dim/4; 
     83 
     84            //alert("scale_to_y_dim = " + scale_to_y_dim); 
    7785 
    7886            var items = []; 
     
    131139                p--; 
    132140              } 
    133 /* 
    134               var nz_prioritized_flags = ratio_table.flags.sort( function (a, b) { 
    135                 var a_title = a.replace(/^.*\//,"").replace(/\.(.*?)$/,""); 
    136                 if (a_title == "nz") {  
    137                   return -1; 
    138                 } 
    139                 else { 
    140                   return 0; 
    141                 } 
    142               }); 
    143 */ 
    144141 
    145142              $.each(nz_prioritized_flags, function(index, flag_filename) {                 
     
    174171 
    175172          $('#aspect-ratio-div').append("<div class='centredDiv' style='width: 100%'>"+items.join("\n")+"</div>"); 
     173 
     174 
     175          // now change the flag tooltip labels into their country names 
     176          $.getJSON( "../similarity-2d/iso-3166-keyed-by-alpha-2-countrycodes.json", function( data ) { 
     177 
     178          }); 
     179 
    176180        }); 
    177181      }); 
     
    202206      <h2>Canvas Size</h2>           
    203207       
    204         <div class="dialog" id="dialog" title="Ratio Select Dialog" width="800px"> 
     208        <div class="dialog" id="dialog" title="Flat Aspect Ratio Selection Panel" widthXX="800px"> 
    205209            <br><br> 
    206210            <h2>Please choose from the following aspect ratios.</h2> 
     
    257261            }                                
    258262            } 
     263 
     264 
    259265        </script> 
    260266         
     
    264270     
    265271      </div><!-- /content --> 
     272 
     273<!-- make persistent? 
     274      <div data-role="footer" style="width:100%;"> 
     275    COSI: Centre of Open Source Innovation @ The University of Waikato. 
     276      </div> 
     277--> 
    266278       
    267279    </div><!-- /page --> 
  • other-projects/nz-flag-design/trunk/main-form/choose-palette.html

    r29781 r29787  
    3535      <span class="left story-icon research" ></span> 
    3636      <h2>Choose Colour Palette</h2> 
    37       <div> 
    38         <h3 style="font-size: large; position: relative; display: inline-block;"> 
     37 
     38          <div class="dialog" id="dialog" title="Colour Palette Selection Panel" widthXX="800px"> 
     39        <h2 style="position: relative; display: inline-block;"> 
    3940          Click on a palette circle to select it, and change its colour using the colour picker to the right 
    40         </h3> 
    41          
     41        </h2>        
    4242        <a style="font-size: medium; padding-left: 10px;"  
    4343           href="http://www.netstate.com/states/symb/flags/flag_design_principles.htm" target="_blank"> 
     
    9898 
    9999    console.log("ActivateColourPalette()"); 
     100 
     101    // Page not shown yet, so the y-position of <svg> is still 0 
     102    // => make height purely a percentage of height 
     103        var la_y_dim = $(window).height(); 
     104        var svg_y_dim = 0.5 * la_y_dim; 
     105    $('#svg-palette').css("height",svg_y_dim+"px"); 
    100106 
    101107        // init state-keeping variables 
     
    227233      return false; 
    228234    } 
     235 
     236 
     237    $(window).resize(function() { 
     238        console.log("choose-palette resize()"); 
     239        console.log("position top = " + $('#svg-palette').position().top); 
     240        console.log("offset top = " + $('#svg-palette').offset().top); 
     241 
     242        var la_y_dim = $(window).height() - $('#svg-palette').offset().top; 
     243        var svg_y_dim = 0.65 * la_y_dim; 
     244    $('#svg-palette').css("height",svg_y_dim+"px");                     
     245    }); 
    229246 
    230247 
  • other-projects/nz-flag-design/trunk/main-form/enter-name.html

    r29781 r29787  
    2525        </div>   
    2626       
    27     <a target="_parent" href="../index.html" class="back-button back-left"></a>    
     27<!-- 
     28    <a target="_parent" href="../index.html" class="back-button back-left"></a> 
     29--> 
    2830       
    2931    <div class="story-page"> 
     
    3133      <!-- put custom content here -->     
    3234      <div class="story-title"> 
    33         <h1 id="enter-name-header" class="center">Enter Name</h1> 
     35        <h1 id="enter-name-header" class="center">Contact Details</h1> 
    3436<!-- 
    3537        <p class="center">- - xx </p> 
    3638--> 
    37         <p> 
    38           Your Name:  
    39         </p> 
    40         <form> 
    41           <input type="text" autofocus="autofocus" style="color: white;" /> 
     39            <style> 
     40          input { 
     41            color: white; 
     42          } 
     43            </style> 
     44        <form style="width: 400px; margin-left:auto; margin-right:auto;"> 
     45          <p> 
     46        Your Name:  
     47          </p> 
     48          <input type="text" autofocus="autofocus" style="color: white;" name="name" /> 
     49 
     50          <p> 
     51        Contact email:  
     52          </p> 
     53          <input type="text" name="email" /> 
     54 
     55 
     56          <div style="padding-top: 120px; padding-left: 100px; padding-right: 100px"> 
     57        <input type="submit" value="Submit Flag Design" /> 
     58          </div> 
    4259        </form> 
    4360      </div> 
  • other-projects/nz-flag-design/trunk/similarity-2d/flag-processing.js

    r29757 r29787  
    55var show_progress = 5; 
    66 
    7 var start_hist_delay = 4000; 
     7var start_hist_delay = 1000; // used to be 4000 
    88var mini_delay = 300; 
    99 
    1010 
    11 var hasLocalStorage = false; 
    12 var needToComputeHistograms = true; 
     11var hasLocalStorage = (typeof(Storage) !== "undefined"); // **** 
     12//var hasLocalStorage = false; 
     13 
    1314var quantHSLHistogramArray; 
     15 
     16//var saveOnServer=true; 
     17var saveOnServer=false; 
     18var retrieveFromServer=true; 
     19 
     20 
     21function runlength_encode(int_array) { 
     22 
     23    var array_len = int_array.length; 
     24 
     25    if (array_len<2) { 
     26    console.warn("runlength_encode(): unable to run-length encode array of length " + array_len); 
     27    console.warn("returning null"); 
     28    return null; 
     29    } 
     30 
     31    var int_array_rle = new Array(); 
     32 
     33 
     34    var lock_val=int_array[0]; 
     35    var next_val=int_array[1]; 
     36    var i = 1; 
     37 
     38    while (i<array_len) { 
     39    var c=1; 
     40    while (next_val==lock_val) { 
     41        c++; 
     42        var next_pos = i+c-1; 
     43        if (next_pos<array_len) { 
     44        next_val = int_array[next_pos]; 
     45        } 
     46        else { 
     47        // hit end of array 
     48        break; 
     49        } 
     50    } 
     51    // come out of a run-length sequence of same val 
     52    // next_val is one past the run-length sequence 
     53 
     54    int_array_rle.push(c); 
     55    int_array_rle.push(lock_val); 
     56 
     57    i+=c; 
     58 
     59    if (i<array_len) { 
     60        lock_val = next_val; 
     61        next_val = int_array[i]; 
     62    } 
     63    else { 
     64        break; 
     65    } 
     66    } 
     67 
     68    return int_array_rle; 
     69} 
     70 
     71 
     72 
     73function runlength_decode(int_array_rle) { 
     74 
     75    var array_rle_len = int_array_rle.length; 
     76 
     77    if (array_rle_len<2) { 
     78    console.warn("runlength_decode(): unable to run-length decode array of length " + array_rle_len); 
     79    console.warn("returning null"); 
     80    return null; 
     81    } 
     82 
     83    var int_array = new Array(); 
     84    for (var i=0; i<array_rle_len; i+=2){ 
     85    var rep = int_array_rle[i]; 
     86    var val = int_array_rle[i+1]; 
     87    for (var r=0; r<rep; r++) { 
     88        int_array.push(val); 
     89    } 
     90    } 
     91 
     92    return int_array; 
     93} 
     94 
     95 
     96 
     97function arrays_identical(int_array1, int_array2) { 
     98 
     99    var array_len1 = int_array1.length; 
     100    var array_len2 = int_array2.length; 
     101 
     102    if (array_len1 != array_len2) { 
     103    console.warn("arrays_identical(): array lengths differ, array1("+array_len1+") vs array2(" + array_len2 + ")"); 
     104    return false; 
     105    } 
     106 
     107    var all_ident = true; 
     108 
     109    for (var i=0; i<array_len1; i++){ 
     110    if (int_array1[i] != int_array2[i]) { 
     111        all_ident = false; 
     112        break; 
     113    } 
     114    } 
     115 
     116    return all_ident; 
     117} 
    14118 
    15119 
     
    61165    var y,p; 
    62166    for (y=0,p=0; y<imageObj.height; y++) { 
    63 //  setTimeout(function() { 
    64167      var x; 
    65168      for (x=0; x<imageObj.width; x++,p+=4) { 
     
    87190        outputArray[result] += count;                     
    88191      } 
    89 //  },4); 
    90192    } 
    91193 
     
    94196    outputArray[i] = outputArray[i] / total; 
    95197    } 
     198 
     199/* 
     200    if (saveOnServer) { 
     201    console.log("Saving HSV quantized histogram on server: " + imageObj.title) 
     202    //console.log("outputArray = " + JSON.stringify(outputArray)); 
     203 
     204    var jsonFilename = imageObj.title + ".json"; 
     205    var data = { jsonFilename: jsonFilename, jsonData: JSON.stringify(outputArray)}; 
     206 
     207    console.log("Saving colour histogram data for " + imageObj.title); 
     208    $.ajax({ 
     209        type: "POST", 
     210        url: "../similarity-2d/save-json-data.jsp", 
     211        data: data 
     212    }); 
     213    } 
     214*/ 
    96215 
    97216    return outputArray; 
     
    182301    */ 
    183302 
    184  
    185  
    186303    imageObj.onclick = function(e) { 
    187304        // Store result of HSL quantization in the image object/tag 
     
    231348    // Only need to compute this if it is not 
    232349    // already stored in the object/tag 
    233     imageObj.quantHSLHist = createHSLHistogram(imageObj,16); 
    234     //console.log(imageObj.quantHSLHist); 
     350 
     351    if (retrieveFromServer) { 
     352        // see if it is stored on the server  
     353        console.log("Retrieving stored colour histogram for " + imageObj.title + " ..."); 
     354        $.ajax({ 
     355        async: false, 
     356        dataType: "json", 
     357        url: "../similarity-2d/json-data/" + imageObj.title + ".json", 
     358        success: function(data) { 
     359            console.log("... success"); 
     360            // 'data' is the array of integer vals we want 
     361            imageObj.quantHSLHist = data; 
     362        }, 
     363        error: function() { 
     364            console.log("... not stored on server"); 
     365            // not stored on the server (currently) 
     366            // => need to compute it 
     367            imageObj.quantHSLHist = createHSLHistogram(imageObj,16); 
     368            //console.log(imageObj.quantHSLHist); 
     369 
     370        } 
     371        }); 
     372    } 
     373    else { 
     374        imageObj.quantHSLHist = createHSLHistogram(imageObj,16); 
     375    } 
     376 
    235377    } 
    236378 
     
    294436function doneComputingHistograms(img_list_len) 
    295437{ 
     438    quantHSLHistogramArray = new Array(img_list_len); 
     439    for (var i=0; i<img_list_len; i++) { 
     440    var flag_id = "flag-img-" + i; 
     441    var imageObj = document.getElementById(flag_id); 
     442    quantHSLHistogramArray[i] = imageObj.quantHSLHist; 
     443    }  
     444    var json_hist_data = JSON.stringify(quantHSLHistogramArray); 
     445 
    296446    if (hasLocalStorage) { 
    297447    // build up quantHSLHistogramArray from all the images 
    298448 
    299     quantHSLHistogramArray = new Array(img_list_len); 
    300     var i; 
    301     for (i=0; i<img_list_len; i++) { 
    302         var flag_id = "flag-img-" + i; 
    303         var imageObj = document.getElementById(flag_id); 
    304         quantHSLHistogramArray[i] = imageObj.quantHSLHist; 
    305     }  
    306  
    307449    console.log("Storing computed HSL histograms in localStorage"); 
    308     localStorage.quantHSLHistogramArray = JSON.stringify(quantHSLHistogramArray); 
     450    localStorage.quantHSLHistogramArray = json_hist_data; 
     451    } 
     452 
     453    if (saveOnServer) { 
     454    // run-length encode data, so less to send 
     455    var quantHSLHistogramArrayRLE = new Array(img_list_len); 
     456    for (var i=0; i<img_list_len; i++) { 
     457        //console.log("rle encoding ... i = " + i); 
     458        quantHSLHistogramArrayRLE[i] = runlength_encode(quantHSLHistogramArray[i]) 
     459 
     460        //var test_decode_array = runlength_decode(quantHSLHistogramArrayRLE[i]); 
     461        //console.log("Checking decoded array: " + arrays_identical(test_decode_array,quantHSLHistogramArray[i])); 
     462    } 
     463 
     464 
     465    var json_hist_data_rle = JSON.stringify(quantHSLHistogramArrayRLE); 
     466 
     467    var json_filename = "all-hsv-histograms-rle.json"; 
     468    var data = { jsonFilename: json_filename, jsonData: json_hist_data_rle}; 
     469     
     470    console.log("Saving colour histogram data for all flags"); 
     471    $.ajax({ 
     472        type: "POST", 
     473        url: "../similarity-2d/save-json-data.jsp", 
     474        data: data       
     475    }); 
    309476    } 
    310477} 
     
    312479function doneDisplayFlags(img_list,$progressArea,$progressBar) 
    313480{ 
    314     hasLocalStorage = false; 
    315     needToComputeHistograms = true; 
    316  
    317     if (typeof(Storage) !== "undefined") { 
    318     hasLocalStorage = true; 
     481    console.log("doneDisplayFlags()"); 
     482 
     483    var needToComputeHistograms = true; 
     484 
     485    if (hasLocalStorage) { 
    319486 
    320487    if (localStorage.quantHSLHistogramArray) { 
    321488 
    322         console.log("Retrieving quantized HSL histograms"); 
     489        console.log("Retrieving quantized HSL histograms from local storage"); 
    323490 
    324491        var stored_hist_array = JSON.parse(localStorage["quantHSLHistogramArray"]); 
     
    336503        }  
    337504 
    338  
    339505        needToComputeHistograms = false; 
    340506        } 
     
    345511    } 
    346512 
    347  
    348513    if (needToComputeHistograms) { 
    349     computeFlagHistograms(img_list,$progressArea,$progressBar); 
     514 
     515    if (retrieveFromServer) { 
     516        // before computing histograms from scratch, see if resulting data stored on server 
     517 
     518        console.log("Retrieving stored colour histgram data for all flags ..."); 
     519        $.ajax({ 
     520        async: true, 
     521        dataType: "json", 
     522        url: "../similarity-2d/json-data/all-hsv-histograms-rle.json", 
     523        success: function(rle_data) { 
     524            console.log("... success"); 
     525            if (rle_data.length != img_list.length) { 
     526            console.log("Stored histogram data out of date with flag list."); 
     527            // what is stored on the sever differed to the number of images displayed 
     528            computeFlagHistograms(img_list,$progressArea,$progressBar); 
     529            } 
     530            else { 
     531            var img_list_len = img_list.length; 
     532            quantHSLHistogramArray = new Array(img_list_len); 
     533             
     534            // Need to rle decode each entry in this array 
     535            for (var i=0; i<img_list_len; i++) { 
     536                quantHSLHistogramArray[i] = runlength_decode(rle_data[i]); 
     537                var flag_id = "flag-img-" + i; 
     538                var imageObj = document.getElementById(flag_id); 
     539                imageObj.quantHSLHist = quantHSLHistogramArray[i]; 
     540 
     541            } 
     542 
     543            needToComputeHistograms = false; 
     544 
     545            $progressArea.slideUp(); 
     546            doneComputingHistograms(img_list.length); 
     547 
     548            } 
     549        }, 
     550        error: function() { 
     551            console.log("... not stored on server"); 
     552            computeFlagHistograms(img_list,$progressArea,$progressBar); 
     553        } 
     554        }); 
     555 
     556 
     557    } 
     558    else { 
     559        computeFlagHistograms(img_list,$progressArea,$progressBar); 
     560    } 
    350561    } 
    351562    else { 
  • other-projects/nz-flag-design/trunk/similarity-2d/list-flags.jsp

    r29621 r29787  
    22      String docBase = getServletContext().getRealPath("/"); 
    33      File similarityDir = new File(docBase,"similarity-2d"); 
    4       File imagesDir = new File(similarityDir,"Images"); 
     4 
     5      String imagesStr = (request.getParameter("imagesDir")!=null) ? request.getParameter("imagesDir") : "import"; 
     6      File imagesDir = new File(similarityDir,imagesStr); 
    57 
    68      ArrayList<File> imageFileList = listFilesForFolder(imagesDir,".gif"); 
    79 
    8       File imageUrlBase = new File("Images"); 
     10      File imageUrlBase = new File(imagesStr); 
    911 
    10       String action = request.getParameter("action"); 
     12      //String action = request.getParameter("action"); 
    1113 
    1214      out.println("<script>");