Show
Ignore:
Timestamp:
20.03.2015 20:51:01 (4 years ago)
Author:
davidb
Message:

Better resize calcuation for aspect ration page

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

Legend:

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

    r29787 r29803  
    4747    <script src='bgrins-spectrum/spectrum.js'></script> 
    4848    <link rel='stylesheet' href='bgrins-spectrum/spectrum.css' /> 
     49 
     50    <script src="../similarity-2d/js-lib/Colour.js"></script> 
     51    <script src="../similarity-2d/flag-processing.js"></script> 
     52 
     53    <script src="choose-canvas.js" /> 
    4954       
    5055    <!-- css for choose-palette --> 
     56<!-- 
    5157    <style> 
    5258        .ui-slider-track { 
     
    5763        } 
    5864    </style> 
     65--> 
    5966 
    6067    <script> 
     
    6673    <title>Canvas Size</title> 
    6774 
    68     <script> 
    69        
    70       // Variable for the currently selected flag ratio 
    71       var currentRatio = null; 
    72  
    73       $(function() { 
    74         $.getJSON( "../similarity-2d/flag-aspect-ratios-json.jsp", function( data ) { 
    75  
    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); 
    85  
    86             var items = []; 
    87        
    88             var max_ratio = 0; 
    89             $.each( data, function( key, ratio_table ) { 
    90               var ratio_array = key.split(":"); 
    91               var ratio_x = ratio_array[0]; 
    92               var ratio_y = ratio_array[1]; 
    93               var ratio = ratio_y / ratio_x; 
    94  
    95               if (ratio > max_ratio) { 
    96                 max_ratio = ratio; 
    97               } 
    98             }); 
    99  
    100             $.each( data, function( key, ratio_table ) { 
    101               var freq = ratio_table.freq; 
    102               var ratio_array = key.split(":"); 
    103               var ratio_x = ratio_array[0]; 
    104               var ratio_y = ratio_array[1]; 
    105               var ratio = ratio_y / ratio_x; 
    106  
    107               var ratioScale = max_ratio/ratio; 
    108  
    109               var x_dim = Math.round(scale_to_y_dim * ratioScale); 
    110               var y_dim = scale_to_y_dim; 
    111  
    112               var innertext = "<div style='font-size: 180%;'>"+freq + " countries, " + key + "</div>"; 
    113           
    114               var flags = []; 
    115  
    116               var nz_prioritized_flags = ratio_table.flags.sort(); 
    117  
    118               // Promote NZ flag to start of array, but otherwise keep sorted 
    119               var p = nz_prioritized_flags.length-1; 
    120               var found_nz = false; 
    121  
    122               while (p>0) {                 
    123                 var curr; 
    124                 var curr_title; 
    125  
    126                 if (!found_nz) { 
    127                   curr = ratio_table.flags[p]; 
    128                   curr_title = curr.replace(/^.*\//,"").replace(/\.(.*?)$/,""); 
    129                 } 
    130  
    131                 if (curr_title == "nz") { 
    132                    found_nz = true; 
    133  
    134                    // swap with adjacent cell 
    135                    var tmp_m1 = nz_prioritized_flags[p-1]; 
    136                    nz_prioritized_flags[p-1] = curr; 
    137                    nz_prioritized_flags[p] = tmp_m1; 
    138                 } 
    139                 p--; 
    140               } 
    141  
    142               $.each(nz_prioritized_flags, function(index, flag_filename) {                 
    143                 var title = flag_filename.replace(/^.*\//,"").replace(/\.(.*?)$/,""); 
    144  
    145                 flags.push("<img src='../similarity-2d/"+flag_filename+"' style='height: 70px; padding: 3px; ' title='" + title.toUpperCase() + "'/>"); 
    146               }); 
    147  
    148               innertext += flags.join(""); 
    149  
    150               var ratio_id = "ratio-" + key; 
    151               if (found_nz) { 
    152                 currentRatio = ratio_id; 
    153               } 
    154  
    155               var id = " id='" + ratio_id + "'"; 
    156       
    157               var style = "style='width:" + x_dim + "px; height:" + y_dim + "px;"; 
    158               if (found_nz) { 
    159                 style += "border-color:white; border-width:4px;" 
    160               } 
    161               //if (ratio_table.flags.length>4) { 
    162                 style += " overflow-y:scroll;"; 
    163               //} 
    164               style += "'"; 
    165  
    166               var onclick = " onclick='updateCanvasDimensions("+ratio_y + "," + ratio_x + ")'"; 
    167  
    168               items.push( "<div class='ratioDiv'" + id + style+ onclick + ">"+ innertext + "</div>" ); 
    169  
    170             }); 
    171  
    172           $('#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  
    180         }); 
    181       }); 
    182     </script> 
    18375  </head> 
    18476 
     
    208100        <div class="dialog" id="dialog" title="Flat Aspect Ratio Selection Panel" widthXX="800px"> 
    209101            <br><br> 
    210             <h2>Please choose from the following aspect ratios.</h2> 
     102            <h2>Please choose from the following aspect ratios to select the width and height of your flag.</h2> 
    211103            <p> 
    212104          Once chosen, swipe the page or click/press on the right arrow to go onto the next step. 
     105          You can swipe/click back to this page at any time to change your selection. 
    213106        </p> 
    214107 
     
    236129        </div> 
    237130         
    238         <script> 
    239              
    240             function updateCanvasDimensions(height, width) { 
    241  
    242                 // Show feedback by highlighting the chosen square 
    243                 document.getElementById(currentRatio).style.borderColor = 'black'; 
    244                 document.getElementById(currentRatio).style.borderWidth = '1px'; 
    245                 currentRatio = "ratio-" + width + ":" + height; 
    246                 document.getElementById(currentRatio).style.borderColor = 'white'; 
    247                 document.getElementById(currentRatio).style.borderWidth = '4px'; 
    248                  
    249                 // Changing the value of sizeConstant will change the 
    250                 //  size of the svg canvas without affecting the  
    251             //  width/height ratios 
    252  
    253             var sizeConstant = 400; 
    254                  
    255                 var h = sizeConstant; 
    256                 var w = (sizeConstant / height) * width;                 
    257  
    258             if (typeof flagCanvasSettings !== 'undefined') { 
    259                   flagCanvasSettings.width = w; 
    260                   flagCanvasSettings.height = h; 
    261             }                                
    262             } 
    263  
    264  
    265         </script> 
    266          
    267131      <!-- end of putting custom content --> 
    268132