Changeset 29787


Ignore:
Timestamp:
2015-03-17T00:27:22+13:00 (9 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 edited

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