Changeset 29803 for other-projects/nz-flag-design/trunk

Timestamp:

2015-03-20T20:51:01+13:00 (9 years ago)

Author:

davidb

Message:

Better resize calcuation for aspect ration page

Location:

other-projects/nz-flag-design/trunk/main-form

Files:

• choose-canvas.html (modified) (5 diffs)
• choose-canvas.js (added)

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

@@ -47 +47 @@
     <script src='bgrins-spectrum/spectrum.js'></script>
     <link rel='stylesheet' href='bgrins-spectrum/spectrum.css' />
+
+    <script src="../similarity-2d/js-lib/Colour.js"></script>
+    <script src="../similarity-2d/flag-processing.js"></script>
+
+    <script src="choose-canvas.js" />
       
     <!-- css for choose-palette -->
+<!--
     <style>
         .ui-slider-track {
@@ -57 +63 @@
         }
     </style>
+-->
 
     <script>
@@ -66 +73 @@
     <title>Canvas Size</title>
 
-    <script>
-      
-      // Variable for the currently selected flag ratio
-      var currentRatio = null;
-
-      $(function() {
-        $.getJSON( "../similarity-2d/flag-aspect-ratios-json.jsp", function( data ) {
-
-
-            //var scale_to_y_dim = 130;
-
-            // express scale_to_y_dim to use relative to height of window
-
-            var la_y_dim = $(window).height() - $('#aspect-ratio-div').position().top;
-            var scale_to_y_dim = la_y_dim/4;
-
-            //alert("scale_to_y_dim = " + scale_to_y_dim);
-
-            var items = [];
-      
-            var max_ratio = 0;
-            $.each( data, function( key, ratio_table ) {
-              var ratio_array = key.split(":");
-              var ratio_x = ratio_array[0];
-              var ratio_y = ratio_array[1];
-              var ratio = ratio_y / ratio_x;
-
-              if (ratio > max_ratio) {
-                max_ratio = ratio;
-              }
-            });
-
-            $.each( data, function( key, ratio_table ) {
-              var freq = ratio_table.freq;
-              var ratio_array = key.split(":");
-              var ratio_x = ratio_array[0];
-              var ratio_y = ratio_array[1];
-              var ratio = ratio_y / ratio_x;
-
-              var ratioScale = max_ratio/ratio;
-
-              var x_dim = Math.round(scale_to_y_dim * ratioScale);
-              var y_dim = scale_to_y_dim;
-
-              var innertext = "<div style='font-size: 180%;'>"+freq + " countries, " + key + "</div>";
-         
-              var flags = [];
-
-              var nz_prioritized_flags = ratio_table.flags.sort();
-
-              // Promote NZ flag to start of array, but otherwise keep sorted
-              var p = nz_prioritized_flags.length-1;
-              var found_nz = false;
-
-              while (p>0) {                
-                var curr;
-                var curr_title;
-
-                if (!found_nz) {
-                  curr = ratio_table.flags[p];
-                  curr_title = curr.replace(/^.*\//,"").replace(/\.(.*?)$/,"");
-                }
-
-                if (curr_title == "nz") {
-                   found_nz = true;
-
-                   // swap with adjacent cell
-                   var tmp_m1 = nz_prioritized_flags[p-1];
-                   nz_prioritized_flags[p-1] = curr;
-                   nz_prioritized_flags[p] = tmp_m1;
-                }
-                p--;
-              }
-
-              $.each(nz_prioritized_flags, function(index, flag_filename) {                
-                var title = flag_filename.replace(/^.*\//,"").replace(/\.(.*?)$/,"");
-
-                flags.push("<img src='../similarity-2d/"+flag_filename+"' style='height: 70px; padding: 3px; ' title='" + title.toUpperCase() + "'/>");
-              });
-
-              innertext += flags.join("");
-
-              var ratio_id = "ratio-" + key;
-              if (found_nz) {
-                currentRatio = ratio_id;
-              }
-
-              var id = " id='" + ratio_id + "'";
-     
-              var style = "style='width:" + x_dim + "px; height:" + y_dim + "px;";
-              if (found_nz) {
-                style += "border-color:white; border-width:4px;"
-              }
-              //if (ratio_table.flags.length>4) {
-                style += " overflow-y:scroll;";
-              //}
-              style += "'";
-
-              var onclick = " onclick='updateCanvasDimensions("+ratio_y + "," + ratio_x + ")'";
-
-              items.push( "<div class='ratioDiv'" + id + style+ onclick + ">"+ innertext + "</div>" );
-
-            });
-
-          $('#aspect-ratio-div').append("<div class='centredDiv' style='width: 100%'>"+items.join("\n")+"</div>");
-
-
-          // now change the flag tooltip labels into their country names
-          $.getJSON( "../similarity-2d/iso-3166-keyed-by-alpha-2-countrycodes.json", function( data ) {
-
-          });
-
-        });
-      });
-    </script>
   </head>
 
@@ -208 +100 @@
         <div class="dialog" id="dialog" title="Flat Aspect Ratio Selection Panel" widthXX="800px">
             <br><br>
-            <h2>Please choose from the following aspect ratios.</h2>
+            <h2>Please choose from the following aspect ratios to select the width and height of your flag.</h2>
             <p>
           Once chosen, swipe the page or click/press on the right arrow to go onto the next step.
+          You can swipe/click back to this page at any time to change your selection.
         </p>
 
@@ -236 +129 @@
         </div>
         
-        <script>
-            
-            function updateCanvasDimensions(height, width) {
-
-                // Show feedback by highlighting the chosen square
-                document.getElementById(currentRatio).style.borderColor = 'black';
-                document.getElementById(currentRatio).style.borderWidth = '1px';
-                currentRatio = "ratio-" + width + ":" + height;
-                document.getElementById(currentRatio).style.borderColor = 'white';
-                document.getElementById(currentRatio).style.borderWidth = '4px';
-                
-                // Changing the value of sizeConstant will change the
-                //  size of the svg canvas without affecting the 
-            //  width/height ratios
-
-            var sizeConstant = 400;
-                
-                var h = sizeConstant;
-                var w = (sizeConstant / height) * width;                
-
-            if (typeof flagCanvasSettings !== 'undefined') {
-                  flagCanvasSettings.width = w;
-                  flagCanvasSettings.height = h;
-            }                               
-            }
-
-
-        </script>
-        
       <!-- end of putting custom content -->