Changeset 29773

Show
Ignore:
Timestamp:
11.03.2015 10:12:30 (5 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 modified

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") {