Changeset 29781 for other-projects/nz-flag-design
- Timestamp:
- 2015-03-13T10:22:19+13:00 (9 years ago)
- Location:
- other-projects/nz-flag-design/trunk/main-form
- Files:
-
- 4 edited
Legend:
- Unmodified
- Added
- Removed
-
other-projects/nz-flag-design/trunk/main-form/choose-canvas.html
r29773 r29781 3 3 <head> 4 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 6 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> 7 <meta http-equiv="Pragma" content="no-cache" /> 8 <meta http-equiv="Expires" content="0" /> 9 10 <!-- 5 11 <meta name="viewport" content="width=device-width, initial-scale=1"/> 12 --> 13 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 14 <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/> 15 <meta name="apple-mobile-web-app-capable" content="yes"/> 16 17 <script src="css/source-sans-pro.js"></script> 18 <link href="css/styles.css" rel="stylesheet"/> 19 <link href="css/storystyle.css" rel="stylesheet"/> 20 21 <link rel="stylesheet" href="lib-slider/css/jquery.mobile-1.3.0.css"/> 22 <link rel="stylesheet" href="lib-slider/css/jqm-demos.css"/> 23 <link rel="stylesheet" href="lib-slider/css/swipe-page.css"/> 24 <link rel="shortcut icon" href="lib-slider/nzflag-icon64-padded.png"/> 25 26 <!-- jQuery --> 27 <script src="lib/jquery-1.11.1.min.js"></script> 28 <script src="lib/jquery.cookie.js"></script> 29 30 <!-- page swipe --> 31 <script src="lib-slider/js/jquery.mobile.demos.js"></script> 32 <script src="lib-slider/js/jquery.mobile-1.3.0.js"></script> 33 <script src="lib-slider/js/swipe-page.js"></script> 34 35 <!-- accordion bars --> 36 <link href="css/liteaccordion.css" rel="stylesheet" /> 37 <script src="js/jquery.easing.1.3.js"></script> 38 <script src="js/liteaccordion-with-resize.jquery.js"></script> 39 40 <!-- canvg library --> 41 <script type="text/javascript" src="lib/canvg/rgbcolor.js"></script> 42 <script type="text/javascript" src="lib/canvg/StackBlur.js"></script> 43 <script type="text/javascript" src="lib/canvg/canvg.js"></script> 44 45 <!-- spectrum for colour palette --> 46 <!-- For documentation see https://bgrins.github.io/spectrum --> 47 <script src='bgrins-spectrum/spectrum.js'></script> 48 <link rel='stylesheet' href='bgrins-spectrum/spectrum.css' /> 49 50 <!-- css for choose-palette --> 51 <style> 52 .ui-slider-track { 53 background-color: #ECECEC; 54 } 55 .ui-slider-handle { 56 background-color: #a05a2c; /* used to be #E7924B; */ 57 } 58 </style> 59 60 <script> 61 // Flag settings - used to initialise the svg canvas to the user's preferences 62 var flagCanvasSettings = { backgroundColor: "#000066", width: 800, height: 400 }; 63 64 </script> 65 6 66 <title>Canvas Size</title> 7 67 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 var scale_to_y_dim = 130; 77 78 var items = []; 79 80 var max_ratio = 0; 81 $.each( data, function( key, ratio_table ) { 82 var ratio_array = key.split(":"); 83 var ratio_x = ratio_array[0]; 84 var ratio_y = ratio_array[1]; 85 var ratio = ratio_y / ratio_x; 86 87 if (ratio > max_ratio) { 88 max_ratio = ratio; 89 } 90 }); 91 92 $.each( data, function( key, ratio_table ) { 93 var freq = ratio_table.freq; 94 var ratio_array = key.split(":"); 95 var ratio_x = ratio_array[0]; 96 var ratio_y = ratio_array[1]; 97 var ratio = ratio_y / ratio_x; 98 99 var ratioScale = max_ratio/ratio; 100 101 var x_dim = Math.round(scale_to_y_dim * ratioScale); 102 var y_dim = scale_to_y_dim; 103 104 var innertext = "<div style='font-size: 180%;'>"+freq + " countries, " + key + "</div>"; 105 106 var flags = []; 107 108 var nz_prioritized_flags = ratio_table.flags.sort(); 109 110 // Promote NZ flag to start of array, but otherwise keep sorted 111 var p = nz_prioritized_flags.length-1; 112 var found_nz = false; 113 114 while (p>0) { 115 var curr; 116 var curr_title; 117 118 if (!found_nz) { 119 curr = ratio_table.flags[p]; 120 curr_title = curr.replace(/^.*\//,"").replace(/\.(.*?)$/,""); 121 } 122 123 if (curr_title == "nz") { 124 found_nz = true; 125 126 // swap with adjacent cell 127 var tmp_m1 = nz_prioritized_flags[p-1]; 128 nz_prioritized_flags[p-1] = curr; 129 nz_prioritized_flags[p] = tmp_m1; 130 } 131 p--; 132 } 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 */ 144 145 $.each(nz_prioritized_flags, function(index, flag_filename) { 146 var title = flag_filename.replace(/^.*\//,"").replace(/\.(.*?)$/,""); 147 148 flags.push("<img src='../similarity-2d/"+flag_filename+"' style='height: 70px; padding: 3px; ' title='" + title.toUpperCase() + "'/>"); 149 }); 150 151 innertext += flags.join(""); 152 153 var ratio_id = "ratio-" + key; 154 if (found_nz) { 155 currentRatio = ratio_id; 156 } 157 158 var id = " id='" + ratio_id + "'"; 159 160 var style = "style='width:" + x_dim + "px; height:" + y_dim + "px;"; 161 if (found_nz) { 162 style += "border-color:white; border-width:4px;" 163 } 164 //if (ratio_table.flags.length>4) { 165 style += " overflow-y:scroll;"; 166 //} 167 style += "'"; 168 169 var onclick = " onclick='updateCanvasDimensions("+ratio_y + "," + ratio_x + ")'"; 170 171 items.push( "<div class='ratioDiv'" + id + style+ onclick + ">"+ innertext + "</div>" ); 172 173 }); 174 175 $('#aspect-ratio-div').append("<div class='centredDiv' style='width: 100%'>"+items.join("\n")+"</div>"); 176 }); 177 }); 178 </script> 8 179 </head> 180 9 181 <body> 10 182 <div data-role="page" id="choose-canvas-page" 11 183 class="demo-page" 12 184 data-dom-cache="true" 13 data-prev="index"14 185 data-next="choose-palette"> 15 186 … … 18 189 <div data-role="controlgroup" class="control" data-mini="true"> 19 190 <a href="#" class="next right-button res-fwd" style="right:1%;"></a> 191 <!-- 20 192 <a href="#" class="prev left-button gen-back" style="left:1%;"></a> 193 --> 21 194 </div> 195 196 <a target="_parent" href="../index.html" class="back-button back-left"></a> 22 197 23 198 <div class="story-page"> … … 30 205 <br><br> 31 206 <h2>Please choose from the following aspect ratios.</h2> 32 <p>If you hover the mouse over a flag size, you will be able to see some countries that currently use that ratio!</p> 207 <p> 208 Once chosen, swipe the page or click/press on the right arrow to go onto the next step. 209 </p> 210 211 <div id="aspect-ratio-div"> 212 </div> 213 214 215 <!-- 33 216 <div class="centredDiv"> 34 217 <div class="ratioDiv flagHover" id="ratio23" onclick="updateCanvasDimensions(2, 3)" title="2:3"></div> … … 46 229 </div> 47 230 <p class="optionline">10:19 5:8 8:11</p> 231 --> 48 232 </div> 49 233 50 234 <script> 51 // Variable for the currently selected flag ratio52 var currentRatio = "ratio12";53 235 54 236 function updateCanvasDimensions(height, width) { 237 55 238 // Show feedback by highlighting the chosen square 56 239 document.getElementById(currentRatio).style.borderColor = 'black'; 57 240 document.getElementById(currentRatio).style.borderWidth = '1px'; 58 currentRatio = "ratio " + height + width;241 currentRatio = "ratio-" + width + ":" + height; 59 242 document.getElementById(currentRatio).style.borderColor = 'white'; 60 document.getElementById(currentRatio).style.borderWidth = ' 2px';243 document.getElementById(currentRatio).style.borderWidth = '4px'; 61 244 62 245 // Changing the value of sizeConstant will change the -
other-projects/nz-flag-design/trunk/main-form/choose-palette.html
r29773 r29781 35 35 <span class="left story-icon research" ></span> 36 36 <h2>Choose Colour Palette</h2> 37 <h3 style="font-size: large; position: relative"> 38 Click on a palette circle to select it, and change its colour using the colour picker to the right 39 </h3> 37 <div> 38 <h3 style="font-size: large; position: relative; display: inline-block;"> 39 Click on a palette circle to select it, and change its colour using the colour picker to the right 40 </h3> 41 42 <a style="font-size: medium; padding-left: 10px;" 43 href="http://www.netstate.com/states/symb/flags/flag_design_principles.htm" target="_blank"> 44 [help] 45 </a> 46 </div> 47 40 48 <p> 41 49 <div id="palette"> … … 242 250 xheight="523" 243 251 244 style=" max-height: 520px"252 style="height: 520px;" 245 253 XXwidth="95%" 246 254 viewBox="0 0 879 552" … … 514 522 <input id="numColoursSlider" type="range" min="0" max="7" value="3" steps="7" onchange="showColourPots(this.value)"/> 515 523 516 <br />517 <h2><a href="http://www.nava.org/flag-design/good-flag-bad-flag/5-basic-principles-flag-design" target="_blank">Help on flag design</a></h2>518 524 </p> 519 525 -
other-projects/nz-flag-design/trunk/main-form/enter-name.html
r29778 r29781 3 3 <head> 4 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 6 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />7 <meta http-equiv="Pragma" content="no-cache" />8 <meta http-equiv="Expires" content="0" />9 10 <!--11 5 <meta name="viewport" content="width=device-width, initial-scale=1"/> 12 -->13 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>14 <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>15 <meta name="apple-mobile-web-app-capable" content="yes"/>16 17 <script src="css/source-sans-pro.js"></script>18 <link href="css/styles.css" rel="stylesheet"/>19 <link href="css/storystyle.css" rel="stylesheet"/>20 21 <link rel="stylesheet" href="lib-slider/css/jquery.mobile-1.3.0.css"/>22 <link rel="stylesheet" href="lib-slider/css/jqm-demos.css"/>23 <link rel="stylesheet" href="lib-slider/css/swipe-page.css"/>24 <link rel="shortcut icon" href="lib-slider/nzflag-icon64.png"/>25 6 26 7 <!-- jQuery --> 27 8 <script src="lib/jquery-1.11.1.min.js"></script> 28 <script src="lib/jquery.cookie.js"></script>29 30 <!-- page swipe -->31 <script src="lib-slider/js/jquery.mobile.demos.js"></script>32 <script src="lib-slider/js/jquery.mobile-1.3.0.js"></script>33 <script src="lib-slider/js/swipe-page.js"></script>34 35 <!-- accordion bars -->36 <link href="css/liteaccordion.css" rel="stylesheet" />37 <script src="js/jquery.easing.1.3.js"></script>38 <script src="js/liteaccordion-with-resize.jquery.js"></script>39 40 <!-- canvg library -->41 <script type="text/javascript" src="lib/canvg/rgbcolor.js"></script>42 <script type="text/javascript" src="lib/canvg/StackBlur.js"></script>43 <script type="text/javascript" src="lib/canvg/canvg.js"></script>44 45 <!-- spectrum for colour palette -->46 <!-- For documentation see https://bgrins.github.io/spectrum -->47 <script src='bgrins-spectrum/spectrum.js'></script>48 <link rel='stylesheet' href='bgrins-spectrum/spectrum.css' />49 50 <!-- css for choose-palette -->51 <style>52 .ui-slider-track {53 background-color: #ECECEC;54 }55 .ui-slider-handle {56 background-color: #a05a2c; /* used to be #E7924B; */57 }58 </style>59 9 60 10 <title>Enter Name</title> 61 62 <script>63 // Flag settings - used to initialise the svg canvas to the user's preferences64 var flagCanvasSettings = { backgroundColor: "#000066", width: 800, height: 400 };65 66 </script>67 68 69 11 </head> 70 12 <body> … … 72 14 class="demo-page" 73 15 data-dom-cache="true" 74 data-next="choose-canvas"> 16 data-prev="iterative-design"> 17 75 18 <div data-role="content"> 76 19 77 <div data-role="controlgroup" class="control" data-mini="true"> 20 <div data-role="controlgroup" class="control" data-mini="true"> 21 <!-- 78 22 <a href="#" class="next right-button idea-fwd" style="right:1%;"></a> 23 --> 79 24 <a href="#" class="prev left-button gen-back" style="left:1%;"></a> 80 25 </div> -
other-projects/nz-flag-design/trunk/main-form/iterative-design.html
r29775 r29781 15 15 class="demo-page" 16 16 data-dom-cache="true" 17 data-prev="choose-palette"> 17 data-prev="choose-palette" 18 data-next="enter-name"> 18 19 19 20 <div data-role="content"> … … 29 30 <h2 id="iterative-design-header">Iterative Design</h2> 30 31 31 <div >32 <div style="padding-top: 10px;"> 32 33 <div id="side-by-side"> 33 34 <ol>
Note:
See TracChangeset
for help on using the changeset viewer.