Changeset 29805 for other-projects

Show
Ignore:
Timestamp:
21.03.2015 00:07:10 (5 years ago)
Author:
davidb
Message:

Initial version with ranked image similarity running

Location:
other-projects/nz-flag-design/trunk/main-form
Files:
3 modified

Legend:

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

    r29803 r29805  
    5151    <script src="../similarity-2d/flag-processing.js"></script> 
    5252 
    53     <script src="choose-canvas.js" /> 
    54        
    55     <!-- css for choose-palette --> 
    56 <!-- 
    57     <style> 
    58         .ui-slider-track { 
    59             background-color: #ECECEC; 
    60         } 
    61         .ui-slider-handle { 
    62             background-color: #a05a2c; /* used to be #E7924B; */ 
    63         } 
    64     </style> 
    65 --> 
    66  
    67     <script> 
     53    <scriptXXX src="choose-canvas.js" /> 
     54 
     55    <script type="text/javascript"> 
    6856        // Flag settings - used to initialise the svg canvas to the user's preferences 
    6957        var flagCanvasSettings = { backgroundColor: "#000066", width: 800, height: 400 }; 
    7058 
     59 
     60// Variable for the currently selected flag ratio 
     61var currentRatio = null; 
     62 
     63var aspectRatios = null; 
     64var aspectMaxRatio = 0; 
     65 
     66function calcMaxRatio(aspect_ratio_data) 
     67{ 
     68    // work out the maximum ratio       
     69    var max_ratio = 0; 
     70 
     71    $.each(aspect_ratio_data, function(key, ratio_table) { 
     72        var ratio_array = key.split(":"); 
     73        var ratio_x = ratio_array[0]; 
     74        var ratio_y = ratio_array[1]; 
     75        var ratio = ratio_y / ratio_x; 
     76     
     77        if (ratio > max_ratio) { 
     78            max_ratio = ratio; 
     79        } 
     80    }); 
     81 
     82    return max_ratio; 
     83} 
     84 
     85function calcCompleteWidth(aspect_ratio_data,scale) 
     86{ 
     87    // work out the maximum ratio       
     88    var max_width = 0; 
     89 
     90    $.each(aspect_ratio_data, function(key, ratio_table) { 
     91        var ratio_array = key.split(":"); 
     92        var ratio_x = ratio_array[0]; 
     93        var ratio_y = ratio_array[1]; 
     94        var ratio = ratio_y / ratio_x; 
     95     
     96    max_width += (scale*ratio); 
     97    }); 
     98 
     99    return max_width; 
     100} 
     101 
     102 
     103function scaledDivsFitInPage(aspect_ratio_data, scale_to_height, num_of_rows_allowed, la_x_dim) 
     104{ 
     105    var divs_fit = true; 
     106 
     107    var row = 1; 
     108    var total_row_width = 0; 
     109    var total_height = 0; 
     110 
     111    $.each(aspect_ratio_data, function(key, ratio_table) { 
     112        var ratio_array = key.split(":"); 
     113        var ratio_x = ratio_array[0]; 
     114        var ratio_y = ratio_array[1]; 
     115        var ratio = ratio_y / ratio_x; 
     116     
     117    var scaled_div_width = scale_to_height*ratio; 
     118    if (total_row_width + scaled_div_width > la_x_dim) { 
     119        // this div doesn't fit on the current row  
     120        // => start a new row 
     121        total_row_width = scaled_div_width; 
     122        row++; 
     123 
     124        if (row>num_of_rows_allowed) { 
     125        // blow out! 
     126        divs_fit = false; 
     127        return false; // jquery.each equivalent to 'break' 
     128        } 
     129    } 
     130    else { 
     131        total_row_width += scaled_div_width; 
     132        row++; 
     133    } 
     134    }); 
     135 
     136    return divs_fit; 
     137} 
     138 
     139 
     140function calcScaleToHeight(aspectRatios,la_x_dim,la_y_dim)  
     141{ 
     142    // determine scale factor so divs max out (as in, filling in the page) based la_y_dim height,  
     143 
     144    var num_of_rows_allowed = 1; 
     145    var scale_to_height = la_y_dim; // optimized version of true calcuation, la_y_dim / num_of_rows_allowed; 
     146 
     147    //var div_width  = complete_width_100 * (div_height/100) 
     148     
     149    var num_flag_bins = aspectRatios.length; 
     150     
     151    while (!scaledDivsFitInPage(aspectRatios,scale_to_height,num_of_rows_allowed,la_x_dim)) { 
     152         
     153    num_of_rows_allowed++; 
     154     
     155    if (num_of_rows_allowed>num_flag_bins) { 
     156        // needing more rows than there are flag bins is an indication that things 
     157        // just don't fit, and so will need to use a scroll bar. 
     158        // Exiting at this point will naturally achieve this 
     159        break; 
     160    } 
     161 
     162    scale_to_height = la_y_dim/num_of_rows_allowed; 
     163     
     164    // if get to here, then need  
     165     
     166    } 
     167 
     168    console.log("**** num_of_rows = " + num_of_rows_allowed + ", scale to height = " + scale_to_height); 
     169    return scale_to_height; 
     170} 
     171 
     172 
     173$(function() { 
     174    $.getJSON( "../similarity-2d/flag-aspect-ratios-json.jsp", function(data) { 
     175 
     176        aspectRatios = data; 
     177     
     178        //var scale_to_y_dim = 130; 
     179     
     180        // express scale_to_y_dim to use relative to height of window 
     181     
     182    var window_height = $(window).height(); 
     183    var div_top = $('#aspect-ratio-div').offset().top + 20; 
     184 
     185        var la_y_dim = (div_top>0) ? window_height - div_top : window_height * 0.6; 
     186    var la_x_dim = $(window).width() * 0.7; 
     187 
     188        //var scale_to_y_dim = la_y_dim/4; 
     189     
     190        //console.log("*** scale to y dim = " + la_y_dim); 
     191     
     192        //alert("scale_to_y_dim = " + scale_to_y_dim); 
     193 
     194 
     195        aspectMaxRatio = calcMaxRatio(aspectRatios); 
     196    //var complete_width_100 = calcCompleteWidth(aspectRatios,100); // as if every aspect ratio bin is scaled to 100 pixels high 
     197 
     198     
     199    scale_to_y_dim = calcScaleToHeight(aspectRatios,la_x_dim,la_y_dim); 
     200 
     201 
     202        var items = []; 
     203     
     204     
     205        $.each(data, function(key, ratio_table) { 
     206            var freq = ratio_table.freq; 
     207            var ratio_array = key.split(":"); 
     208            var ratio_x = ratio_array[0]; 
     209            var ratio_y = ratio_array[1]; 
     210            var ratio = ratio_y / ratio_x; 
     211         
     212            var ratioScale = aspectMaxRatio/ratio; 
     213         
     214            var x_dim = Math.round(scale_to_y_dim * ratioScale); 
     215            var y_dim = scale_to_y_dim; 
     216         
     217            var innertext = "<div style='font-size: 180%;'>"+freq + " countries, " + key + "</div>"; 
     218             
     219            var flags = []; 
     220         
     221            var nz_prioritized_flags = ratio_table.flags.sort(); 
     222         
     223            // Promote NZ flag to start of array, but otherwise keep sorted 
     224            var p = nz_prioritized_flags.length-1; 
     225            var found_nz = false; 
     226         
     227            while (p>0) {                 
     228                var curr; 
     229                var curr_title; 
     230         
     231                if (!found_nz) { 
     232                    curr = ratio_table.flags[p]; 
     233                    curr_title = curr.replace(/^.*\//,"").replace(/\.(.*?)$/,""); 
     234                } 
     235         
     236                if (curr_title == "nz") { 
     237                    found_nz = true; 
     238 
     239                    // swap with adjacent cell 
     240                    var tmp_m1 = nz_prioritized_flags[p-1]; 
     241                    nz_prioritized_flags[p-1] = curr; 
     242                    nz_prioritized_flags[p] = tmp_m1; 
     243                } 
     244                p--; 
     245            } 
     246         
     247            $.each(nz_prioritized_flags, function(index, flag_filename) {                 
     248                var title = flag_filename.replace(/^.*\//,"").replace(/\.(.*?)$/,""); 
     249         
     250                flags.push("<img src='../similarity-2d/"+flag_filename+"' id='aspect-ratio-"+ title +"' style='height: 70px; padding: 3px; ' title='" + title.toUpperCase() + "'/>"); 
     251            }); 
     252         
     253            innertext += flags.join(""); 
     254         
     255            var ratio_id = "ratio-" + key.replace(":","_"); 
     256            if (found_nz) { 
     257                currentRatio = ratio_id; 
     258            } 
     259         
     260            var id = " id='" + ratio_id + "'"; 
     261         
     262            var style = "style='width:" + x_dim + "px; height:" + y_dim + "px;"; 
     263            if (found_nz) { 
     264                style += "border-color:white; border-width:4px;" 
     265            } 
     266         
     267            style += " overflow-y:scroll;"; 
     268            style += "'"; 
     269         
     270            var onclick = " onclick='updateCanvasDimensions("+ratio_y + "," + ratio_x + ")'"; 
     271         
     272            items.push( "<div class='ratioDiv'" + id + style + onclick + ">"+ innertext + "</div>" ); 
     273         
     274        }); 
     275     
     276        $('#aspect-ratio-div').append("<div class='centredDiv' style='width: 100%'>"+items.join("\n")+"</div>"); 
     277     
     278     
     279        // now change the flag tooltip labels into their country names 
     280        $.getJSON( "../similarity-2d/iso-3166-keyed-by-alpha-2-countrycodes.json", function(data) { 
     281         
     282            $.each( data, function( iso2_key, country_name ) { 
     283        var $img = $('#aspect-ratio-'+iso2_key.toLowerCase()); 
     284        var title = $img.attr("title") + ": " + country_name; 
     285        $img.attr("title",title); 
     286            } 
     287          ) 
     288        }); 
     289     
     290    }); 
     291}); 
     292 
     293 
     294 
     295$(window).resize(function() { 
     296    console.log("choose-canvas resize()"); 
     297 
     298    //console.log("*** aspect ratio div position top = " + $('#aspect-ratio-div').position().top); 
     299     
     300    var window_height = $(window).height(); 
     301    var div_top = $('#aspect-ratio-div').offset().top + 20; 
     302 
     303    //var top = 0; 
     304     
     305    var la_y_dim = window_height - div_top; 
     306    var la_x_dim = $(window).width() * 0.7; 
     307 
     308    var scale_to_y_dim = calcScaleToHeight(aspectRatios,la_x_dim,la_y_dim); 
     309 
     310    // (top==0) ? la_y_dim/4 : la_y_dim/2.8; 
     311     
     312    //console.log("*** scale to y dim = " + la_y_dim); 
     313     
     314    $.each(aspectRatios, function(key, ratio_table) { 
     315        var freq = ratio_table.freq; 
     316        var ratio_array = key.split(":"); 
     317        var ratio_x = ratio_array[0]; 
     318        var ratio_y = ratio_array[1]; 
     319        var ratio = ratio_y / ratio_x; 
     320     
     321        var ratioScale = aspectMaxRatio/ratio; 
     322     
     323        var x_dim = Math.round(scale_to_y_dim * ratioScale); 
     324        var y_dim = scale_to_y_dim; 
     325 
     326        var ratio_id = "ratio-" + key.replace(":","_"); 
     327     
     328        //console.log("*** ratio_id = " + ratio_id + " xdim = " + x_dim + ", ydim = " + y_dim); 
     329     
     330        $('#'+ratio_id).css("width",x_dim + "px"); 
     331        $('#'+ratio_id).css("height",y_dim + "px"); 
     332     
     333     
     334    }); 
     335}); 
     336 
     337 
     338 
     339function updateCanvasDimensions(height, width) { 
     340     
     341    // Show feedback by highlighting the chosen square 
     342    document.getElementById(currentRatio).style.borderColor = 'black'; 
     343                document.getElementById(currentRatio).style.borderWidth = '1px'; 
     344    currentRatio = "ratio-" + width + "_" + height; 
     345    document.getElementById(currentRatio).style.borderColor = 'white'; 
     346    document.getElementById(currentRatio).style.borderWidth = '4px'; 
     347     
     348    // Changing the value of sizeConstant will change the 
     349    //  size of the svg canvas without affecting the  
     350    //  width/height ratios 
     351     
     352    var sizeConstant = 400; 
     353     
     354    var h = sizeConstant; 
     355    var w = (sizeConstant / height) * width;                 
     356     
     357    if (typeof flagCanvasSettings !== 'undefined') { 
     358        flagCanvasSettings.width = w; 
     359        flagCanvasSettings.height = h; 
     360    }                                
     361} 
     362 
     363 
     364 
    71365    </script> 
    72        
     366             
    73367    <title>Canvas Size</title> 
    74368 
  • other-projects/nz-flag-design/trunk/main-form/choose-canvas.js

    r29803 r29805  
     1 
    12// Variable for the currently selected flag ratio 
    23var currentRatio = null; 
  • other-projects/nz-flag-design/trunk/main-form/iterative-design.html

    r29781 r29805  
    77    <!-- jQuery --> 
    88    <script src="lib/jquery-1.11.1.min.js"></script> 
     9 
     10    <script src="../similarity-2d/js-lib/Colour.js"></script> 
     11    <script src="../similarity-2d/flag-processing.js"></script> 
    912 
    1013        <title>Iterative Design</title>  
     
    9497 
    9598                        // Look up jsession id; if not present fall back to use a timestamp 
    96                         //var jsession_id = $.cookie('JSESSIONID') || new Date().getTime(); 
    97                         var jsession_id = $.cookie('JSESSIONID') + "-" + new Date().getTime(); 
     99                        var jsession_id = $.cookie('JSESSIONID') || new Date().getTime(); 
     100                        //var jsession_id = $.cookie('JSESSIONID') + "-" + new Date().getTime(); // quick hack for summer scholarship presentation day 
     101 
    98102                        console.log("jsession id = " + jsession_id); 
    99103                        var imageFilename = "flag-" + jsession_id + ".png"; 
     
    195199 
    196200 
     201        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 
     211          var $iframe = $('#similarity-2d-iframe').contents(); 
     212 
     213          var $flagArea     = $iframe.find('#flagArea'); 
     214          var $progressArea = $iframe.find('#progressArea'); 
     215                  var $progressBar  = $iframe.find('#progressBar'); 
     216 
     217              $progressArea.find('span:first').text("Calculating flag similarity"); 
     218              $progressArea.slideDown(); 
     219 
     220          calcSimilarityValues(outputArray, $flagArea,$progressArea,$progressBar); 
     221           
     222          // And finally reorder them based on this 
     223          sortFlagsBySimilarityValue($iframe) 
     224 
     225              $progressArea.slideUp(); 
     226        } 
     227 
    197228                function activateAccordion() { 
    198229                    console.log("activateAccordion()"); 
     
    212243                                    console.log("onTriggerSlide: this = " + this); 
    213244                                    console.log("onTriggerSlide: id = " + this[0].id); 
     245                                    if (this[0].id == "similarity-2d-div") { 
     246                                        console.log("Triggering flag similarity comparison"); 
     247                                        savePNGAsFile("PNG",null); 
     248 
     249                                setTimeout(rankFlags, 1000); 
     250 
     251                                    } 
    214252                                    if (this[0].id == "render-3d-div") { 
    215253                                        console.log("Triggering SVG-Editor exportPNG()"); 
     
    248286                    var la_y_dim = $(window).height() * 0.67; 
    249287 
    250                     $('#side-by-side') 
    251                     .liteAccordion('resize', { 
    252                         containerWidth  : la_x_dim, 
    253                         containerHeight : la_y_dim 
    254                     }); 
    255  
     288            if ($('#side-by-side').liteAccordion) { 
     289                      $('#side-by-side') 
     290                      .liteAccordion('resize', { 
     291                          containerWidth  : la_x_dim, 
     292                          containerHeight : la_y_dim 
     293                      }); 
     294            } 
    256295                }); 
    257296