Changeset 29781

Show
Ignore:
Timestamp:
13.03.2015 10:22:19 (5 years ago)
Author:
davidb
Message:

HTML changes needed to support reordering of stages/panels, and rewriting of aspect ratio panel so it can be dynamically sized/resized

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

Legend:

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

    r29773 r29781  
    33  <head> 
    44    <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<!-- 
    511    <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       
    666    <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> 
    8179  </head> 
     180 
    9181  <body> 
    10182    <div data-role="page" id="choose-canvas-page"  
    11183     class="demo-page"  
    12184     data-dom-cache="true"  
    13      data-prev="index"  
    14185     data-next="choose-palette"> 
    15186       
     
    18189    <div data-role="controlgroup" class="control" data-mini="true">          
    19190          <a href="#" class="next right-button res-fwd" style="right:1%;"></a> 
     191<!-- 
    20192      <a href="#" class="prev left-button gen-back" style="left:1%;"></a> 
     193--> 
    21194        </div> 
     195 
     196    <a target="_parent" href="../index.html" class="back-button back-left"></a>    
    22197       
    23198    <div class="story-page"> 
     
    30205            <br><br> 
    31206            <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<!-- 
    33216            <div class="centredDiv"> 
    34217                <div class="ratioDiv flagHover" id="ratio23" onclick="updateCanvasDimensions(2, 3)" title="2:3"></div> 
     
    46229            </div>             
    47230            <p class="optionline">10:19 5:8 8:11</p> 
     231--> 
    48232        </div> 
    49233         
    50234        <script> 
    51             // Variable for the currently selected flag ratio 
    52             var currentRatio = "ratio12";        
    53235             
    54236            function updateCanvasDimensions(height, width) { 
     237 
    55238                // Show feedback by highlighting the chosen square 
    56239                document.getElementById(currentRatio).style.borderColor = 'black'; 
    57240                document.getElementById(currentRatio).style.borderWidth = '1px'; 
    58                 currentRatio = "ratio" + height + width; 
     241                currentRatio = "ratio-" + width + ":" + height; 
    59242                document.getElementById(currentRatio).style.borderColor = 'white'; 
    60                 document.getElementById(currentRatio).style.borderWidth = '2px'; 
     243                document.getElementById(currentRatio).style.borderWidth = '4px'; 
    61244                 
    62245                // Changing the value of sizeConstant will change the 
  • other-projects/nz-flag-design/trunk/main-form/choose-palette.html

    r29773 r29781  
    3535      <span class="left story-icon research" ></span> 
    3636      <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 
    4048    <p>         
    4149      <div id="palette"> 
     
    242250   xheight="523" 
    243251    
    244    style="max-height: 520px" 
     252   style="height: 520px;" 
    245253   XXwidth="95%" 
    246254   viewBox="0 0 879 552" 
     
    514522        <input id="numColoursSlider" type="range" min="0" max="7" value="3" steps="7" onchange="showColourPots(this.value)"/> 
    515523 
    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>    
    518524    </p> 
    519525         
  • other-projects/nz-flag-design/trunk/main-form/enter-name.html

    r29778 r29781  
    33  <head> 
    44    <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 <!-- 
    115    <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"/> 
    256 
    267    <!-- jQuery --> 
    278    <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> 
    599       
    6010    <title>Enter Name</title> 
    61  
    62     <script> 
    63         // Flag settings - used to initialise the svg canvas to the user's preferences 
    64         var flagCanvasSettings = { backgroundColor: "#000066", width: 800, height: 400 }; 
    65  
    66     </script> 
    67  
    68  
    6911  </head> 
    7012  <body> 
     
    7214     class="demo-page"  
    7315     data-dom-cache="true"  
    74      data-next="choose-canvas"> 
     16     data-prev="iterative-design"> 
     17 
    7518      <div data-role="content"> 
    7619       
    77     <div data-role="controlgroup" class="control" data-mini="true">          
     20    <div data-role="controlgroup" class="control" data-mini="true">         
     21<!--     
    7822          <a href="#" class="next right-button idea-fwd" style="right:1%;"></a> 
     23--> 
    7924      <a href="#" class="prev left-button gen-back" style="left:1%;"></a> 
    8025        </div>   
  • other-projects/nz-flag-design/trunk/main-form/iterative-design.html

    r29775 r29781  
    1515            class="demo-page"  
    1616            data-dom-cache="true"  
    17             data-prev="choose-palette"> 
     17            data-prev="choose-palette" 
     18        data-next="enter-name"> 
    1819 
    1920            <div data-role="content"> 
     
    2930                    <h2 id="iterative-design-header">Iterative Design</h2> 
    3031 
    31                     <div> 
     32                    <div style="padding-top: 10px;"> 
    3233                        <div id="side-by-side"> 
    3334                            <ol>