Changeset 29906 for other-projects/nz-flag-design

Timestamp:

2015-05-20T23:25:37+12:00 (9 years ago)

Author:

davidb

Message:

Changes resulting from writing the TPDL submission

Location:

other-projects/nz-flag-design/trunk

Files:

• main-form/choose-canvas.html (modified) (3 diffs)
• main-form/choose-palette.html (modified) (2 diffs)
• main-form/iterative-design.html (modified) (5 diffs)
• similarity-2d/display-flags.jsp (modified) (1 diff)
• similarity-2d/flag-functions.jsp (modified) (1 diff)
• similarity-2d/flag-processing.js (modified) (8 diffs)
• similarity-2d/list-flags.jsp (modified) (1 diff)

other-projects/nz-flag-design/trunk/main-form/choose-canvas.html

@@ -51 +51 @@
     <script src="../similarity-2d/flag-processing.js"></script>
 
-    <scriptXXX src="choose-canvas.js" />
+    <style>
+      a[href^="http://"]:after, 
+      a[href^="https://"]:after {
+        content: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png);
+        margin: 0 0 0 5px;
+      }
+    </style>
 
     <script type="text/javascript">
@@ -64 +70 @@
                                colourPots: colourPotSwatch.slice(0,3)
                              };
+    var isoCountryCode = null;
+
 
 
@@ -287 +295 @@
         // now change the flag tooltip labels into their country names
         $.getJSON( "../similarity-2d/iso-3166-keyed-by-alpha-2-countrycodes.json", function(data) {
-        
+        isoCountryCodes = data;
+
             $.each( data, function( iso2_key, country_name ) {
         var $img = $('#aspect-ratio-'+iso2_key.toLowerCase());

other-projects/nz-flag-design/trunk/main-form/choose-palette.html

@@ -94 +94 @@
       
             if (typeof flagCanvasSettings !== 'undefined') {
-                console.log("**** cp changed, !! selectedColourPotID = " + selectedColourPotID + " typeof = " + typeof(selectedColourPotID));
-                //var colour_pot_pos = selectedColourPotID.substring(10); // strip off 'colour-pos'
                 var colour_pot_pos = selectedColourPotID.replace("colour-pot","");
-                //colour_pot_pos = 0;
-                console.log("**** done replace");                   
                 flagCanvasSettings.colourPots[colour_pot_pos] = colour.toHexString();
         }
@@ -240 +236 @@
       selectedColourPot = colourPotElem;
       selectedColourPotID = colourPotElem.id;
-      console.log("**** cp clicked, selectedColourPotID = " + selectedColourPotID);                 
       selectedColourPickerID = selectedColourPotID.replace("colour-pot","colour-picker");
       selectedColourPickerDivID = selectedColourPotID.replace("colour-pot","colour-picker-div");

other-projects/nz-flag-design/trunk/main-form/iterative-design.html

@@ -46 +46 @@
 
                                 <li>
-                                    <h2><span title="Click to Open/Close">Flag Similarity</span></h2>
+                                    <h2><span title="Compare with world flags: click to open/close">World Flags Similarity</span></h2>
 
                                     <div id="similarity-2d-div">
@@ -54 +54 @@
                                     </div>
                                 </li>
+
+
+                                <li>
+                                    <h2><span title="Compare with alternative NZ flag designs: click to open/close">Alternative NZ Flags Designs</span></h2>
+
+                                    <div id="similarity-2d-nz-div">
+                                        <iframe src="../similarity-2d/display-flags.jsp?imagesDir=import-nz&mode=nz" 
+                                        style="width: 100%; height: 100%"
+                                        id="similarity-2d-nz-iframe" ></iframe>
+                                    </div>
+                                </li>
+
+
                                 <li>
                                     <h2><span title="Click to Open/Close">Render 3D</span></h2>
@@ -130 +143 @@
 
                 function reconfigureSvgCanvas(settings) {
-                    console.log("*** entered reconfigureSvgCanvas");
-                    console.log("*** settings: background=" + settings.backgroundColor);
-                    console.log("*** settings: w x h = " + settings.width + " x " + settings.height);
+                    //console.log("*** entered reconfigureSvgCanvas");
+                    //console.log("*** settings: background=" + settings.backgroundColor);
+                    //console.log("*** settings: w x h = " + settings.width + " x " + settings.height);
 
                     var design_frame = document.getElementById('design-2d-iframe');
@@ -270 +283 @@
                     $('#design-2d-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html?noStorageOnLoad=1");
                     $('#design-2d-iframe').load(function() {
-                        console.log("*** loaded sgv iframe: " + this);
+                        console.log("*** loaded svg iframe: " + this);
 
                         var design_frame = document.getElementById('design-2d-iframe');
@@ -281 +294 @@
                     //if (typeof flagCanvasSettings !== 'undefined') {
                 setTimeout(function() {
-                  console.log("**** design frame = " + design_frame);
-                  console.log("**** design frame content window = " + design_frame.contentWindow);
+                  //console.log("**** design frame = " + design_frame);
+                  //console.log("**** design frame content window = " + design_frame.contentWindow);
                   design_frame.contentWindow.setSVGEditorColourPalette(flagCanvasSettings);
                 }, 500);

other-projects/nz-flag-design/trunk/similarity-2d/display-flags.jsp

@@ -62 +62 @@
    <div id="flagArea"></div>
 
+   <div id="go-to-dl" style="display: none;">
+     Visit the digital library collection of all the world's flags: <a href="/greenstone3/library/collection/world-flags/browse/CL1" target="dl">more ...</a>
+   </div>
+
+   <div id="go-to-nz-dl" style="display: none;">
+     Visit the digital library collection of alternative New Zealand flag deisgns: <a href="http://localhost:8383/greenstone3/library/collection/aotearoa/browse/CL1" target="dl">more ...</a>
+   </div>
+
 
     <script>
+function getParameterByName(name) {
+    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
+    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
+        results = regex.exec(location.search);
+    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
+}
 
+      //var mode = $.urlParam('mode');
+      var mode = getParameterByName('mode');
+
+      console.log("*** mode = " + mode);
+      if (mode && mode == "nz") {
+        document.getElementById('go-to-nz-dl').style.display="block";
+        //$('#go-to-nz-dl').show();
+      }
+      else {
+        document.getElementById('go-to-dl').style.display="block";
+        //$('#go-to-dl').show();
+      }     
 
     </script>

other-projects/nz-flag-design/trunk/similarity-2d/flag-functions.jsp

@@ -19 +19 @@
     return fileList;
     }
+
+
+    ArrayList<File> listFilesForFolderRE(final File folder, String matchExtRE) {
+        ArrayList<File> fileList = new ArrayList<File>();
+
+        for (final File fileEntry : folder.listFiles()) {
+            if (fileEntry.isFile()) {
+             if (fileEntry.getName().toLowerCase().matches(matchExtRE)) {
+                fileList.add(fileEntry);
+         }
+            }
+        }
+
+    return fileList;
+    }
+
 
     ArrayList<File> listFilesForFolderRecursive(final File folder, String matchExt) {

other-projects/nz-flag-design/trunk/similarity-2d/flag-processing.js

@@ -251 +251 @@
     }
 
-    console.log("Product for HSL histogram: " + quant_product);
+    //console.log("Product for HSL histogram: " + quant_product);
 
     return quant_product;
@@ -283 +283 @@
     
     var imageObj = new Image();
+
     imageObj.onload = function() {
         callback_count++;
@@ -333 +334 @@
         if (clicked_on_count==2) {
             // trigger comparison
-            alert("Similarity score: " + quantizedColourHistogramComparison(flag_comparison_array[0],flag_comparison_array[1]));
+            alert("Similarity score: " + quantizedColourHistogramComparison(flag_comparison_array[0],flag_comparison_array[1]) + "%");
             clicked_on_count=0;
         }
@@ -346 +347 @@
     
     
-    imageObj.src   = img_url;
-    imageObj.title = title.toUpperCase();
+    imageObj.src     = img_url;
+        imageObj.height  = 216;
+    imageObj.title   = title.toUpperCase();
     imageObj.country = imageObj.title;
-    imageObj.id    = "flag-img-" + i;
+    imageObj.id      = "flag-img-" + i;
 
     $displayDiv.append(imageObj);
@@ -358 +360 @@
 
 
+function calcSimilarityValuesChain(newFlagQuantHSLHist, 
+                   chain_count, img_obj_list, img_obj_list_len,
+                   progressVal, progress_step,
+                   $progressArea,$progressBar)
+{
+    var imgObj = img_obj_list[chain_count];
+
+    var existingQuantHSLHist = imgObj.quantHSLHist;
+
+    var similarity_score = quantizedColourHistogramComparison(newFlagQuantHSLHist,existingQuantHSLHist);
+    similarity_score = Math.round(similarity_score * 100) / 100; // round to 2 decimal places
+    similarity_score *= 100; // express as percentage
+
+    imgObj.similarityScore = similarity_score;
+        var img_title = imgObj.country;
+
+        if (isoCountryCodes != null) {
+        var country_code = imgObj.country;
+        img_title = isoCountryCodes[country_code] + " (" + country_code + ")";
+    }
+    imgObj.title = img_title + ", Similarity score: " + similarity_score + "%";
+    if (similarity_score>50) {
+        //imgObj.style.display = "block";
+        //imgObj.style.visibility = "visible";
+    }
+    else {
+        //imgObj.style.display = "none";
+        //imgObj.style.visibility = "hidden";
+    }
+
+
+
+    if (chain_count < img_obj_list_len-1) {
+    progressVal += progress_step;   
+    if ($progressBar.progressbar) {
+        $progressBar.progressbar('value',progressVal);
+    }
+
+    setTimeout(function()
+           { calcSimilarityValuesChain(newFlagQuantHSLHist, 
+                           chain_count+1,img_obj_list, img_obj_list_len,
+                           progressVal, progress_step,
+                           $progressArea,$progressBar)
+               }
+           ,1 // any time delay causes break in 'rendering' thread, even 0!
+           );
+
+    }
+    else {
+    // done
+    $progressArea.find('span:first').text("Done.");
+    if (img_obj_list_len>show_progress) {
+        progressVal = 100;
+        if ($progressBar.progressbar) {
+        $progressBar.progressbar('value',progressVal);
+        }
+        $progressArea.slideUp();
+    }
+    }
+
+}
 
 function calcSimilarityValues(newFlagQuantHSLHist, $displayDiv,$progressArea,$progressBar)
@@ -368 +431 @@
 
     var img_obj_list_len = img_obj_list.length;
+    console.log("*** img obj list len = " + img_obj_list_len);
 
     if (img_obj_list_len==0) {
@@ -377 +441 @@
     }
 
-    var progress_step = 100.0 / img_obj_list_len;
-    
     for (var i=0; i<img_obj_list.length; i++) {
     var imgObj = img_obj_list[i];
+    imgObj.style.display = "inline";
+    //imgObj.style.visibility = "visible";
+    }
+
+    var progress_step = 100.0 / img_obj_list_len;
+/*
+    var chain_count=0;
+
+    setTimeout(function() {
+    calcSimilarityValuesChain(newFlagQuantHSLHist, 
+                  chain_count, img_obj_list, img_obj_list_len,
+                  progressVal, progress_step,
+                  $progressArea,$progressBar)
+        }
+    ,100
+    );
+*/
+    
+
+    for (var i=0; i<img_obj_list.length; i++) {
+    var imgObj = img_obj_list[i];
 
     var existingQuantHSLHist = imgObj.quantHSLHist;
 
     var similarity_score = quantizedColourHistogramComparison(newFlagQuantHSLHist,existingQuantHSLHist);
+    similarity_score = Math.round(similarity_score * 100) / 100; // round to 2 decimal places
+    similarity_score *= 100; // express as percentage
+
     imgObj.similarityScore = similarity_score;
-    imgObj.title = imgObj.country + ", Similarity score: " + similarity_score;
+        var img_title = imgObj.country;
+
+        if (isoCountryCodes != null) {
+        var country_code = imgObj.country;
+        img_title = isoCountryCodes[country_code] + " (" + country_code + ")";
+    }
+    imgObj.title = img_title + ", Similarity score: " + similarity_score + "%";
+    if (similarity_score>50) {
+        //imgObj.style.display = "inline";
+        //imgObj.style.visibility = "visible";
+    }
+    else {
+        //imgObj.style.display = "none";
+        //imgObj.style.visibility = "hidden";
+    }
 
     progressVal += progress_step;   
-    console.log("*** i = " + i);
-    console.log("*** pbar = " + $progressBar.progressbar);
+    //console.log("*** i = " + i);
+    //console.log("*** pbar = " + $progressBar.progressbar);
     if ($progressBar.progressbar) {
         $progressBar.progressbar('value',progressVal);
@@ -402 +502 @@
     $progressArea.slideUp();
     }
+
+
 }
 

other-projects/nz-flag-design/trunk/similarity-2d/list-flags.jsp

@@ -6 +6 @@
       File imagesDir = new File(similarityDir,imagesStr);
 
-      ArrayList<File> imageFileList = listFilesForFolder(imagesDir,".gif");
+      ArrayList<File> imageFileList = listFilesForFolderRE(imagesDir,".*\\.(gif|jpg|jpeg|png)$");
 
       File imageUrlBase = new File(imagesStr);