Changeset 29805 for other-projects
- Timestamp:
- 2015-03-21T00:07:10+13:00 (9 years ago)
- Location:
- other-projects/nz-flag-design/trunk/main-form
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
other-projects/nz-flag-design/trunk/main-form/choose-canvas.html
r29803 r29805 51 51 <script src="../similarity-2d/flag-processing.js"></script> 52 52 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"> 68 56 // Flag settings - used to initialise the svg canvas to the user's preferences 69 57 var flagCanvasSettings = { backgroundColor: "#000066", width: 800, height: 400 }; 70 58 59 60 // Variable for the currently selected flag ratio 61 var currentRatio = null; 62 63 var aspectRatios = null; 64 var aspectMaxRatio = 0; 65 66 function 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 85 function 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 103 function 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 140 function 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 339 function 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 71 365 </script> 72 366 73 367 <title>Canvas Size</title> 74 368 -
other-projects/nz-flag-design/trunk/main-form/choose-canvas.js
r29803 r29805 1 1 2 // Variable for the currently selected flag ratio 2 3 var currentRatio = null; -
other-projects/nz-flag-design/trunk/main-form/iterative-design.html
r29781 r29805 7 7 <!-- jQuery --> 8 8 <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> 9 12 10 13 <title>Iterative Design</title> … … 94 97 95 98 // 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 98 102 console.log("jsession id = " + jsession_id); 99 103 var imageFilename = "flag-" + jsession_id + ".png"; … … 195 199 196 200 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 197 228 function activateAccordion() { 198 229 console.log("activateAccordion()"); … … 212 243 console.log("onTriggerSlide: this = " + this); 213 244 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 } 214 252 if (this[0].id == "render-3d-div") { 215 253 console.log("Triggering SVG-Editor exportPNG()"); … … 248 286 var la_y_dim = $(window).height() * 0.67; 249 287 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 } 256 295 }); 257 296
Note:
See TracChangeset
for help on using the changeset viewer.