Changeset 29773


Ignore:
Timestamp:
2015-03-11T10:12:30+13:00 (9 years ago)
Author:
davidb
Message:

Changes so i) the choose-palette is a single interactive SVG csurface; 2) the JS runs more smoothly when 'started' at one of the later pages; and 3) changes to remove many of the warnings browsers produce when loading the page

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

    r29740 r29773  
    3232            <p>If you hover the mouse over a flag size, you will be able to see some countries that currently use that ratio!</p>
    3333            <div class="centredDiv">
    34                 <div class="ratioDiv flagHover" id="ratio23" onclick="updateCanvasDimentions(2, 3)" title="2:3"></div>
    35                 <div class="ratioDiv" id="ratio12" onclick="updateCanvasDimentions(1, 2)" title="1:2"></div>
    36                 <div class="ratioDiv" id="ratio35" onclick="updateCanvasDimentions(3, 5)" title="3:5"></div>
     34                <div class="ratioDiv flagHover" id="ratio23" onclick="updateCanvasDimensions(2, 3)" title="2:3"></div>
     35                <div class="ratioDiv" style="border-width:2px;" id="ratio12" onclick="updateCanvasDimensions(1, 2)" title="1:2"></div>
     36                <div class="ratioDiv" id="ratio35" onclick="updateCanvasDimensions(3, 5)" title="3:5"></div>
    3737                <div style="clear: both"></div>
    3838            </div>
    … …  
    4040
    4141            <div class="centredDiv">
    42                 <div class="ratioDiv" id="ratio1019" onclick="updateCanvasDimentions(10, 19)" title="10:19"></div>
    43                 <div class="ratioDiv" id="ratio58" onclick="updateCanvasDimentions(5, 8)" title="5:8"></div>
    44                 <div class="ratioDiv" id="ratio811" onclick="updateCanvasDimentions(8, 11)" title="8:11"></div>
     42                <div class="ratioDiv" id="ratio1019" onclick="updateCanvasDimensions(10, 19)" title="10:19"></div>
     43                <div class="ratioDiv" id="ratio58" onclick="updateCanvasDimensions(5, 8)" title="5:8"></div>
     44                <div class="ratioDiv" id="ratio811" onclick="updateCanvasDimensions(8, 11)" title="8:11"></div>
    4545                <div style="clear: both"></div>
    4646            </div>           
    … …  
    5252            var currentRatio = "ratio12";       
    5353           
    54             function updateCanvasDimentions(height, width) {
     54            function updateCanvasDimensions(height, width) {
    5555                // Show feedback by highlighting the chosen square
    5656                document.getElementById(currentRatio).style.borderColor = 'black';
     57                document.getElementById(currentRatio).style.borderWidth = '1px';
    5758                currentRatio = "ratio" + height + width;
    5859                document.getElementById(currentRatio).style.borderColor = 'white';
     60                document.getElementById(currentRatio).style.borderWidth = '2px';
    5961               
    60                 var design_frame = document.getElementById('design-2d-iframe');
    61                 var svgCanvas = design_frame.contentWindow.svgCanvas;
    62                
    63                 // Changing the value of sizeConstant will change the size of the svg canvas without affecting the width/height ratios
    64                 var sizeConstant = 400;
     62                // Changing the value of sizeConstant will change the
     63                //  size of the svg canvas without affecting the
     64            //  width/height ratios
     65
     66            var sizeConstant = 400;
    6567               
    6668                var h = sizeConstant;
    6769                var w = (sizeConstant / height) * width;               
    68                
    69                 flagCanvasSettings.width = w;
    70                 flagCanvasSettings.height = h;
    71                
    72                 // Set the new canvas size
    73                 svgCanvas.setResolution(w, h);
     70
     71            if (typeof flagCanvasSettings !== 'undefined') {
     72                  flagCanvasSettings.width = w;
     73                  flagCanvasSettings.height = h;
     74            }                               
    7475            }
    7576        </script>

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

    r29767 r29773  
    66    <title>Choose Palette</title>   
    77
     8    <!-- jQuery -->
     9    <script src="lib/jquery-1.11.1.min.js"></script>
     10
     11    <!-- Spectrum for colour palette -->
     12    <!--  For documentation see https://bgrins.github.io/spectrum -->
     13    <script src='bgrins-spectrum/spectrum.js'></script>
     14    <link rel='stylesheet' href='bgrins-spectrum/spectrum.css' />
     15
     16    <link rel="shortcut icon" href="lib-slider/nzflag-icon64.png"/>
    817  </head>
    918  <body>
    … …  
    2635      <span class="left story-icon research" ></span>
    2736      <h2>Choose Colour Palette</h2>
    28       <h3 style="font-size: large; position: relative">Click on a palette circle to select it, and change it's colour using the colour picker to the right</h3>
     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>
    2940    <p>       
    30         <div id="palette">
    31             <img src="images/palette/palette2.png" id="paletteImage" height="460" alt="Palette"></img>
    32 
    33             <div onclick="newSelectedCircle('circleBackground')" id="paletteCircleBackground" class="paletteCircle">
    34                 <svg height="104" width="104">
    35                     <circle id="circleBackground" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="#000066"/>
    36              <text id="circleText1" x="32" y="35" fill="white" font-size="13">FLAG</text>
    37                     <text id="circleText2" x="5" y="55" fill="white" font-size="12">BACKGROUND</text>
    38                     <text id="circleText3" x="22" y="75" fill="white" font-size="13">COLOUR</text>
    39                 </svg>
    40             </div>
    41 
    42             <div onclick="newSelectedCircle('circle1')" id="paletteCircle1" class="paletteCircle">
    43                 <svg height="104" width="104">
    44                     <circle id="circle1" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="#CC0000"/>
    45                 </svg>
    46             </div>
    47 
    48             <div onclick="newSelectedCircle('circle2')" id="paletteCircle2" class="paletteCircle">
    49                 <svg height="104" width="104">
    50                     <circle id="circle2" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/>
    51                 </svg>
    52             </div>
    53 
    54             <div onclick="newSelectedCircle('circle3')" id="paletteCircle3" class="paletteCircle">
    55                 <svg height="104" width="104">
    56                     <circle id="circle3" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/>
    57                 </svg>
    58             </div>
    59 
    60             <div onclick="newSelectedCircle('circle4')" id="paletteCircle4" class="paletteCircle">
    61                 <svg height="104" width="104">
    62                     <circle id="circle4" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/>
    63                 </svg>
    64             </div>
    65 
    66             <div onclick="newSelectedCircle('circle5')" id="paletteCircle5" class="paletteCircle">
    67                 <svg height="104" width="104">
    68                     <circle id="circle5" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/>
    69                 </svg>
    70             </div>       
    71 
    72             <div onclick="newSelectedCircle('circle6')" id="paletteCircle6" class="paletteCircle">
    73                 <svg height="104" width="104">
    74                     <circle id="circle6" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/>
    75                 </svg>
    76             </div>
    77 
    78             <div onclick="newSelectedCircle('circle7')" id="paletteCircle7" class="paletteCircle">
    79                 <svg height="104" width="104">
    80                     <circle id="circle7" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/>
    81                 </svg>
    82             </div>
     41      <div id="palette">
     42
     43
     44
     45
     46    <script>
     47      var activatedColourPalette = false;
     48
     49      var colourPotSwatch = [ "#00247d", "#cc142b", "#ffffff", "#29afaf", "#008000", "#800080", "#ffff15", "#ff6600" ]
     50      var numColourPots = colourPotSwatch.length;
     51
     52      var selectedColourPot = null;
     53      var selectedColourPotID;
     54      var selectedColourPickerID;
     55      var selectedColourPickerDivID;
     56
     57      function colourPotChanged(colour)
     58      {
     59            if (selectedColourPot==null) {
     60              console.warn("colourPotChanged(): No selected colour pot to change.  Failed initialization?");
     61              return;
     62            }
     63
     64            selectedColourPot.style.fill = colour.toHexString();
     65            $('#'+selectedColourPickerID).value = colour;
     66            $('#'+selectedColourPickerID).spectrum("set",colour);
     67
     68            if (selectedColourPotID == "colour-pot0")
     69            {
     70                // If white is chosen, change the background palette circle text to be black
     71                var colour_hsv = colour.toHsv();
     72                if ((colour_hsv.s < 0.2) && (colour_hsv.v > 0.8))
     73                {
     74                    document.getElementById("background-flag-text").style.fill = "#000000";
     75                }
     76                else
     77                {
     78                    document.getElementById("background-flag-text").style.fill = "#ffffff";
     79                }
     80
     81                // Set the canvas background setting to the user's choice
     82            if (typeof flagCanvasSettings !== 'undefined') {
     83                  flagCanvasSettings.backgroundColor = colour.toHexString();
     84            }
     85            }
     86
     87      }
     88
     89      function activateColourPalette() {
     90
     91    console.log("ActivateColourPalette()");
     92
     93        // init state-keeping variables
     94        var $colour_pot = $('#colour-pot1');
     95    if ($colour_pot) {
     96          selectedColourPot = $colour_pot[0];
     97          selectedColourPotID = "colour-pot1";
     98          selectedColourPickerID = "colour-picker1";
     99          selectedColourPickerDivID = "colour-picker-div1";
     100        }
     101        else {
     102          console.warn("Unable to find 'colour-pot1' for initialization purposes");
     103        }
     104
     105        for (var i=0; i<numColourPots; i++) {
     106          var $colour_pot_elem = $('#colour-pot'+i);
     107      if ($colour_pot_elem) {
     108                   
     109        var swatch_col = colourPotSwatch[i];
     110            $colour_pot_elem.css("fill",swatch_col);
     111        //console.log("*** outerbevel = " + $('#outerbevel'));
     112        //document.getElementById('colour-pot'+i).setAttributeNS(null,"filter", "url(#outerbevel)")
     113        $colour_pot_elem.css("filter", "url(#outerbevel)");
     114
     115        var colour_picker_id = "colour-picker" + i;
     116
     117        // Code for building the input colour element dynamically
     118
     119        //var pick_div = document.createElement("div");
     120
     121            //pick_div.setAttribute("style","position: absolute; left:0px; top:0px;");
     122            //pick_div.setAttribute("id", "colour-picker-div"+i);
     123
     124            //var input_str = '<input type="text" id="'+colour_picker_id+'" name="'+colour_picker_id+'" value="'+swatch_col+'" />';
     125
     126        //$(pick_div).append(input_str);
     127            //$('#picker-group-div').append(pick_div);
     128
     129            //$('#colour-picker-div'+i).hide();
     130
     131            $('#'+colour_picker_id).spectrum({
     132          color: swatch_col,
     133              flat: false,
     134              showInput: true,
     135              showInitial: true,
     136              allowEmpty: false,
     137              showAlpha: false,
     138              showPalette: true,
     139              togglePaletteOnly: false,
     140              showSelectionPalette: true,
     141          hideAfterPaletteSelect: true,
     142              clickoutFiresChange: false,
     143              cancelText: "Cancel",
     144              chooseText: "Choose",
     145              preferredFormat: "hsv",
     146              maxSelectionSize: 2,
     147              palette: [
     148        ["#000", "hsv  0  80 90"],
     149        ["#444", "hsv  60 80 90"],
     150        ["#666", "hsv 120 80 90"],
     151        ["#999", "hsv 180 80 90"],
     152        ["#ccc", "hsv 240 80 90"],
     153        ["#eee", "hsv 300 80 90"],
     154        ["#fff", "hsv 350 80 90"]
     155              ],
     156          change: colourPotChanged,
     157              show: function() { $('#'+selectedColourPickerDivID).css("visibility","hidden")}
     158            });         
     159
     160
     161          }
     162        }                       
     163      showColourPots(3);
     164    }
     165
     166    if (jQuery.mobile) {
     167      //console.log("Choose-Palette: jquerymobile active, setting up on-pageload event");
     168      //$(document).on("pagebeforeshow", function(event) {
     169      $(document).on("pageload", function(event,data) {
     170      //console.log("Choose-Palette fielding Event:   pagebeforeshow() for page " + active_page);
     171
     172        //var active_page = $.mobile.activePage.attr("id");
     173           
     174        //if (active_page == "choose-palette-page") {
     175
     176          if (!activatedColourPalette) {
     177          console.log("Choose-Palette Page: jquerymobile pageload()");
     178              activateColourPalette();
     179              activatedColourPalette = true;
     180          return false;
     181          }
     182        //}
     183      });
     184    }
     185    else {
     186      //console.log("Choose-Palette: jquerymobile not active, setting up document-ready event");
     187      $(document).ready(activateColourPalette)
     188    }
     189
     190
     191    function colourpot_clicked(colourPotElem)
     192    {
     193      if (selectedColourPot != null) {
     194        selectedColourPot.style.stroke      = 'none';
     195        $('#'+selectedColourPickerDivID).hide();
     196      }
     197 
     198      selectedColourPot = colourPotElem;
     199      selectedColourPotID = colourPotElem.id;
     200      selectedColourPickerID = selectedColourPotID.replace("colour-pot","colour-picker");
     201      selectedColourPickerDivID = selectedColourPotID.replace("colour-pot","colour-picker-div");
     202
     203      var colour_hsv = tinycolor(selectedColourPot.style.fill).toHsv();
     204      if ((colour_hsv.s < 0.2) && (colour_hsv.v > 0.8)) {
     205        selectedColourPot.style.stroke      = '#000000';
     206      }
     207      else {
     208        selectedColourPot.style.stroke      = '#ffffff';
     209      }
     210      selectedColourPot.style.strokeWidth = 2;
     211
     212
     213      // Make the chosen colour picker appear
     214
     215      $('#'+selectedColourPickerDivID).show(10, function() {
     216       $('#'+selectedColourPickerID).next().click()
     217      });
     218
     219      return false;
     220    }
     221
     222
     223  </script>
     224
     225<table width="100%">
     226  <tr>
     227    <td align="right">
     228
     229<svg
     230   xmlns:dc="http://purl.org/dc/elements/1.1/"
     231   xmlns:cc="http://creativecommons.org/ns#"
     232   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     233   xmlns:svg="http://www.w3.org/2000/svg"
     234   xmlns="http://www.w3.org/2000/svg"
     235   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     236   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     237
     238   xwidth="879"
     239   xheight="662"
     240
     241   xwidth="738"
     242   xheight="523"
     243   
     244   style="max-height: 520px"
     245   XXwidth="95%"
     246   viewBox="0 0 879 552"
     247
     248   xwidth="615"
     249   xheight="463"
     250
     251
     252   xviewBox="0 0 879 552"
     253
     254   id="svg-palette"
     255   version="1.1"
     256   inkscape:version="0.91 r13725"
     257   sodipodi:docname="artist-palette-v03.svg">
     258  <defs id="defs3351" >
     259
     260    <filter id="innerbevel" x0="-50%" y0="-50%" width="200%" height="200%">
     261      <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
     262      <feOffset dy="-1" dx="-1"/>
     263      <feComposite in2="SourceAlpha" operator="arithmetic"
     264           k2="-1" k3="1" result="hlDiff"/>
     265      <feFlood flood-color="white" flood-opacity=".7"/>
     266      <feComposite in2="hlDiff" operator="in"/>
     267      <feComposite in2="SourceGraphic" operator="over" result="withGlow"/>
     268     
     269      <feOffset in="blur" dy="3" dx="3"/>
     270      <feComposite in2="SourceAlpha" operator="arithmetic"
     271           k2="-1" k3="1" result="shadowDiff"/>
     272      <feFlood flood-color="black" flood-opacity="1"/>
     273      <feComposite in2="shadowDiff" operator="in"/>
     274      <feComposite in2="withGlow" operator="over"/>
     275    </filter>
     276
     277
     278    <filter id="outerbevel" x0="-50%" y0="-50%" width="200%" height="200%">
     279      <feMorphology in="SourceAlpha" operator="dilate" radius="1"/>
     280      <feGaussianBlur stdDeviation="1" result="blur"/>
     281     
     282      <feOffset dy="1" dx="1"/>
     283      <feComposite in2="SourceAlpha" operator="arithmetic"
     284           k2="1" k3="-1" result="hlDiff"/>
     285      <feFlood flood-color="white" flood-opacity=".7"/>
     286      <feComposite in2="hlDiff" operator="in"/>
     287      <feComposite in2="SourceGraphic" operator="over" result="withGlow"/>
     288           
     289      <feOffset in="blur" dy="-1" dx="-1"/>
     290      <feComposite in2="SourceAlpha" operator="arithmetic"
     291           k2="1" k3="-1" result="shadowDiff"/>
     292      <feFlood flood-color="black" flood-opacity="1"/>
     293      <feComposite in2="shadowDiff" operator="in"/>
     294      <feComposite in2="withGlow" operator="over"/>
     295    </filter>
     296
     297  </defs>
     298  <sodipodi:namedview
     299     id="base"
     300     pagecolor="#ffffff"
     301     bordercolor="#666666"
     302     borderopacity="1.0"
     303     inkscape:pageopacity="0.0"
     304     inkscape:pageshadow="2"
     305     inkscape:zoom="0.35"
     306     inkscape:cx="1235.998"
     307     inkscape:cy="611.42857"
     308     inkscape:document-units="px"
     309     inkscape:current-layer="g4183"
     310     showgrid="false"
     311     units="px"
     312     inkscape:window-width="1920"
     313     inkscape:window-height="1018"
     314     inkscape:window-x="-8"
     315     inkscape:window-y="-8"
     316     inkscape:window-maximized="1" />
     317  <metadata
     318     id="metadata3354">
     319    <rdf:RDF>
     320      <cc:Work
     321         rdf:about="">
     322        <dc:format>image/svg+xml</dc:format>
     323        <dc:type
     324           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
     325        <dc:title></dc:title>
     326      </cc:Work>
     327    </rdf:RDF>
     328  </metadata>
     329  <g transform="scale(1.0)"><!-- used to be 0.7 scale -->
     330    <g
     331       inkscape:label="Layer 1"
     332       inkscape:groupmode="layer"
     333       id="layer1"
     334       transform="translate(0,200)">
     335      <g
     336     id="palette"
     337     transform="scale(0.3333,0.33333)"
     338     >
     339    <path
     340       id="path4181"
     341       style="fill:#a05a2c;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
     342       d="m 914.28571,66.64785 c 0,0 269.72099,113.53716 219.99999,234.28572 C 1066.0363,466.67863 862.85714,366.64785 740,318.07643 617.14286,269.505 516.75361,172.94601 568.57143,95.21928 665.71429,-50.495 914.28571,66.64785 914.28571,66.64785 Z m -85.71428,862.85719 c 0,0 308.57147,99.99986 628.57147,102.85706 320,2.8571 1151.4286,-74.28566 1154.2857,-671.42853 2.8572,-597.14286 -982.8572,-945.71428 -1468.5715,-945.71428 -485.71424,0 -1125.714243,237.14285 -1125.714243,682.857136 C 42.058256,716.73507 843.30354,378.69115 828.57143,929.50504 Z" />
     343   
     344      </g>     
     345      <g>
     346    <ellipse
     347           id="colour-pot0"
     348       cx="505"
     349       cy="84"
     350       rx="73"
     351       ry="73"
     352       filterXX="url(#outerbevel)"
     353       style="fill:#d40000;fill-opacity:1;"
     354       stylexx="stroke:#000000;stroke-width:1px;"
     355       onclick="colourpot_clicked(this)"
     356       />
     357    <text
     358       xml:space="preserve"
     359       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:22.5px;line-height:100%;font-family:sans-serif;-inkscape-font-specification:'Sans, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     360       x="514.81232"
     361       y="67.527832"
     362       id="background-flag-text"
     363       sodipodi:linespacing="100%"
     364       onclick="colourpot_clicked(document.getElementById('colour-pot0'))"
     365       >
     366      <tspan
     367             sodipodi:role="line"
     368             x="514.81232"
     369             y="67.527832"
     370             id="tspan3463">Flag</tspan>
     371      <tspan
     372             sodipodi:role="line"
     373             x="514.81232"
     374             y="90.027832"
     375             id="tspan3467">Background</tspan>
     376      <tspan
     377             sodipodi:role="line"
     378             x="514.81232"
     379             y="112.52783"
     380             id="tspan3469">Colour</tspan>
     381    </text>
     382      </g>
     383
     384      <g>
     385    <ellipse
     386           id="colour-pot1"
     387           cx="194"
     388           cy="-69"
     389           rx="50"
     390           ry="50"
     391       filterXX="url(#outerbevel)"
     392           style="fill:#ffffff;visibility:visible;"
     393       onclick="colourpot_clicked(this)"
     394       />
     395    <ellipse
     396           id="colour-pot2"
     397           cx="347"
     398           cy="-95"
     399           rx="50"
     400           ry="50"
     401       filterXX="url(#outerbevel)"
     402           style="fill:#ffffff;fill-opacity:1;visibility:visible;"
     403       onclick="colourpot_clicked(this)"
     404       />
     405    <ellipse
     406           id="colour-pot3"
     407           cx="501"
     408           cy="-76"
     409           rx="50"
     410           ry="50"
     411       filterXX="url(#outerbevel)"
     412           style="fill:#29afaf;fill-opacity:1;visibility:visible"
     413       onclick="colourpot_clicked(this)"
     414       />
     415    <ellipse
     416           id="colour-pot4"
     417           cx="652"
     418           cy="-12"
     419           rx="50"
     420           ry="50"
     421       filterXX="url(#outerbevel)"
     422           style="fill:#008000;fill-opacity:1;visibility:visible;"
     423       onclick="colourpot_clicked(this)"
     424       />
     425    <ellipse
     426           id="colour-pot5"
     427           cx="741"
     428           cy="112"
     429           rx="50"
     430           ry="50"
     431       filterXX="url(#outerbevel)"
     432           style="fill:#800080;fill-opacity:1;visibility:visible;"
     433       onclick="colourpot_clicked(this)"
     434       />
     435    <ellipse
     436           id="colour-pot6"
     437           cx="618"
     438           cy="213"
     439           rx="50"
     440           ry="50"
     441       filterXX="url(#outerbevel)"
     442           style="fill:#ffff15;fill-opacity:1;visibility:visible;"
     443       onclick="colourpot_clicked(this)"
     444       />
     445    <ellipse
     446           id="colour-pot7"
     447           cx="458"
     448           cy="242"
     449           rx="50"
     450           ry="50"
     451       filterXX="url(#outerbevel)"
     452           style="fill:#ff6600;fill-opacity:1;visibility:visible;"
     453       onclick="colourpot_clicked(this)"
     454       />
     455
     456      </g>
     457    </g>
     458  </g>
     459
     460</svg>
     461
     462
     463    </td>
     464    <td style="width: 300px;" valign="top">
     465      <style>
     466    .sp-picker-container {
     467          width: 200px;
     468    }
     469    .sp-input-container {
     470      width: 130px;
     471    }
     472      </style>
    83473
    84474            <!-- The Spectrum colour picker -->
    85             <div id="pickerDiv"><input type='text' id="picker" value='#fffff0'/></div>
    86         </div>
     475            <div id="picker-group-div" style="position: relative; width: 290px;">
     476
     477          <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div0">
     478        <input type="text" id="colour-picker0" name="colour-picker0">
     479          </div>
     480          <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div1">
     481        <input type="text" id="colour-picker1" name="colour-picker1">
     482          </div>
     483          <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div2">
     484        <input type="text" id="colour-picker2" name="colour-picker2">
     485          </div>
     486          <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div3">
     487        <input type="text" id="colour-picker3" name="colour-picker3">
     488          </div>
     489          <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div4">
     490        <input type="text" id="colour-picker4" name="colour-picker4">
     491          </div>
     492          <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div5">
     493        <input type="text" id="colour-picker5" name="colour-picker5">
     494          </div>
     495          <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div6">
     496        <input type="text" id="colour-picker6" name="colour-picker6">
     497          </div>
     498          <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div7">
     499        <input type="text" id="colour-picker7" name="colour-picker7">
     500          </div>
     501
     502
     503        </div>
     504
     505    </td>
     506  </tr>
     507</table>
     508
     509        </div> <!-- end of palette -->
     510
    87511
    88512        <p>Use slider to change the number of colours that will be used in your flag:</p>
    89513
    90         <input id="numColoursSlider" type="range" min="0" max="7" value="2" steps="7" onchange="showCircles(this.value)"/>
     514        <input id="numColoursSlider" type="range" min="0" max="7" value="3" steps="7" onchange="showColourPots(this.value)"/>
    91515
    92516    <br />
    … …  
    96520    <script>
    97521
     522/*
    98523        // Visibly toggle between which palette circle is currently selected
    99524        var selectedCircle = "circle1";
    100525        function newSelectedCircle(circleName)
    101526        {
    102             document.getElementById(selectedCircle).style.stroke = 'black';
     527            document.getElementById(selectedCircle).style.stroke = '#000000';
    103528            document.getElementById(selectedCircle).style.strokeWidth = 1;
    104529
    105530            selectedCircle = circleName;
    106531
    107             document.getElementById(selectedCircle).style.stroke = 'white';
     532            document.getElementById(selectedCircle).style.stroke = '#ffffff';
    108533            document.getElementById(selectedCircle).style.strokeWidth = 2;
    109534        }
    110        
    111         // Fill the currently selected circle when a colour is selected using the colour picker
    112         $("#picker").on('change.spectrum', function(e, colour) {
    113             document.getElementById(selectedCircle).style.fill = colour;
    114 
    115             if (selectedCircle == "circleBackground")
    116             {
    117                 // If white is chosen, change the background palette circle text to be black
    118                 if(colour == '#ffffff')               
    119                 {
    120                     document.getElementById("circleText1").style.fill = "#000000";
    121                     document.getElementById("circleText2").style.fill = "#000000";
    122                     document.getElementById("circleText3").style.fill = "#000000";
    123                 }
    124                 else
    125                 {
    126                     document.getElementById("circleText1").style.fill = "#ffffff";
    127                     document.getElementById("circleText2").style.fill = "#ffffff";
    128                     document.getElementById("circleText3").style.fill = "#ffffff";
    129                 }
    130 
    131                 // Set the canvas background setting to the user's choice
    132                 flagCanvasSettings.backgroundColor = colour;
    133             }
    134         });
    135        
     535  */
     536     
    136537        // Update the number of circles shown on the palette
    137         function showCircles(newValue)
     538        function showColourPots(newValue)
    138539        {           
    139             for (i = 1; i <= newValue; i++)
    140             {
    141                 var circle = "paletteCircle" + i;
    142                 document.getElementById(circle).style.display = 'block';
    143             }
    144 
    145             if (newValue < 7)
    146             {
    147                 for (i = 7; i > newValue; i--)
    148                 {
    149                     var circle = "paletteCircle" + i;
    150                     document.getElementById(circle).style.display = 'none';
    151                 }
     540        for (var i=0; i<numColourPots; i++) {
     541                var circle = "colour-pot" + i;
     542            if (i<=newValue) {
     543                  document.getElementById(circle).style.visibility = 'visible';
     544        }
     545            else {
     546                  document.getElementById(circle).style.visibility = 'hidden';
     547        }
    152548            }
    153549        }       
    154550       
    155         // Colour picker documentation at https://bgrins.github.io/spectrum
    156         $("#picker").spectrum({
    157             flat: true,
    158             showInput: true,
    159             showInitial: true,
    160             allowEmpty: false,
    161             showAlpha: false,
    162             showPalette: true,
    163             togglePaletteOnly: false,
    164             showSelectionPalette: true,
    165             clickoutFiresChange: false,
    166             cancelText: "Cancel",
    167             chooseText: "Choose",
    168             preferredFormat: "hex",
    169             maxSelectionSize: 10,
    170             palette: [
    171         ["#000", "hsv  0  100 100"],
    172         ["#444", "hsv  40 100 100"],
    173         ["#666", "hsv  80 100 100"],
    174         ["#999", "hsv 120 100 100"],
    175         ["#ccc", "hsv 140 100 100"],
    176         ["#eee", "hsv 160 100 100"],
    177         ["#fff", "hsv 180 100 100"]
    178             ]
    179             //selectionPalette: [string]
    180         });         
    181551    </script>
    182552      <!-- end of putting custom content -->       

  • other-projects/nz-flag-design/trunk/main-form/index.html

    r29767 r29773  
    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
    510<!--
    611    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    … …  
    1722    <link rel="stylesheet" href="lib-slider/css/jqm-demos.css"/>
    1823    <link rel="stylesheet" href="lib-slider/css/swipe-page.css"/>
    19     <link rel="shortcut icon" href="lib-slider/favicon.ico"/>       
     24    <link rel="shortcut icon" href="lib-slider/nzflag-icon64.png"/>
    2025
    2126    <!-- jQuery -->
    … …  
    3944     
    4045    <!-- spectrum for colour palette -->
     46    <!--  For documentation see https://bgrins.github.io/spectrum -->
    4147    <script src='bgrins-spectrum/spectrum.js'></script>
    4248    <link rel='stylesheet' href='bgrins-spectrum/spectrum.css' />
    … …  
    4854        }
    4955        .ui-slider-handle {
    50             background-color: #E7924B;   
     56            background-color: #a05a2c; /* used to be #E7924B; */
    5157        }
    5258    </style>
    … …  
    5763        // Flag settings - used to initialise the svg canvas to the user's preferences
    5864        var flagCanvasSettings = { backgroundColor: "#000066", width: 800, height: 400 };
     65
    5966    </script>
    6067
    … …  
    8794        </p>
    8895        <form>
    89           <input type="text" />
     96          <input type="text" autofocus="autofocus" style="color: white;" />
    9097        </form>
    9198      </div>

  • other-projects/nz-flag-design/trunk/main-form/iterative-design.html

    r29767 r29773  
    126126                function reconfigureSvgCanvas(settings) {
    127127                    console.log("*** entered reconfigureSvgCanvas");
    128                     console.log("*** settings: " + settings.backgroundColor);
     128                    console.log("*** settings: background=" + settings.backgroundColor);
     129                    console.log("*** settings: w x h = " + settings.width + " x " + settings.height);
    129130
    130131                    var design_frame = document.getElementById('design-2d-iframe');
    131132                    var svgCanvas = design_frame.contentWindow.svgCanvas;
    132133                    var svgedit = design_frame.contentWindow.svgedit;
     134
     135                    // Set the new canvas size
     136                    svgCanvas.setResolution(settings.width, settings.height);
    133137
    134138                    var widthVar = settings.width;
    … …  
    186190                    // Centres the canvas (somewhat)
    187191                    //svgCanvas.updateCanvas(100, 100);
     192
    188193                }
    189194
    … …  
    195200                    var la_y_dim = $(window).height() * 0.67;
    196201
    197                     $('#side-by-side').show();
    198 
    199                     $('#side-by-side')
    200                     .liteAccordion({ theme : 'stitch', // 'light',
    201                             rounded         : true,
    202                             //responsive      : true,
    203                             containerWidth  : la_x_dim,
    204                             containerHeight : la_y_dim,
    205                             onTriggerSlide : function() {
    206                                 console.log("onTriggerSlide: this = " + this);
    207                                 console.log("onTriggerSlide: id = " + this[0].id);
    208                                 if (this[0].id == "render-3d-div") {
    209                                     console.log("Triggering SVG-Editor exportPNG()");
    210                                     savePNGAsFile("PNG",null);
     202                    $('#side-by-side').show(10,
     203              function() {
     204                        $('#side-by-side')
     205                          .liteAccordion({ theme : 'stitch', // 'light',
     206                                rounded         : true,
     207                                //responsive      : true,
     208                                containerWidth  : la_x_dim,
     209                                containerHeight : la_y_dim,
     210                                onTriggerSlide : function() {
     211                                    console.log("onTriggerSlide: this = " + this);
     212                                    console.log("onTriggerSlide: id = " + this[0].id);
     213                                    if (this[0].id == "render-3d-div") {
     214                                        console.log("Triggering SVG-Editor exportPNG()");
     215                                        savePNGAsFile("PNG",null);
     216                                    }
    211217                                }
    212                             }
    213                         });
     218                            });
     219            });
    214220                }
    215221
    216222                function activateSVGEditor() {
    217223                    console.log("activateSVGEditor()");
    218                     $('#design-2d-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html?noStorageOnLoad=1");
     224                    $('#design-2d-iframe').attr("src","svg-edit-trunk2/editor/svg-editor.html?noStorageOnLoad=1");
    219225                    $('#design-2d-iframe').load(function() {
    220226                        console.log("*** loaded sgv iframe: " + this);
    … …  
    230236
    231237                $(document).on("pageload",function(event,data){
    232                     console.log( "Iterative Design Page: jquerymobile pageload()" );
     238                    console.log( "Iterative Design Page: jquerymobile pageload()");
    233239                    if (!activatedAccordion) {
    234240                        activateAccordion();       
    … …  
    251257                $(document).on("pagebeforeshow",function(event,data) {
    252258                    var active_page = $.mobile.activePage.attr("id");
    253                     console.log("Event: pagebeforeshow() for page " + active_page);
     259                    console.log("Iterative-Design fielding Event: pagebeforeshow() for page " + active_page);
    254260
    255261                    if (active_page == "iterative-design-page") {
Note: See TracChangeset for help on using the changeset viewer.