Ignore:
Timestamp:
2015-03-13T10:22:19+13:00 (9 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 edited

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>
Note: See TracChangeset for help on using the changeset viewer.