Changeset 29773 for other-projects/nz-flag-design
- Timestamp:
- 2015-03-11T10:12:30+13:00 (9 years ago)
- 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 32 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> 33 33 <div class="centredDiv"> 34 <div class="ratioDiv flagHover" id="ratio23" onclick="updateCanvasDimen tions(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="updateCanvasDimen tions(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> 37 37 <div style="clear: both"></div> 38 38 </div> … … 40 40 41 41 <div class="centredDiv"> 42 <div class="ratioDiv" id="ratio1019" onclick="updateCanvasDimen tions(10, 19)" title="10:19"></div>43 <div class="ratioDiv" id="ratio58" onclick="updateCanvasDimen tions(5, 8)" title="5:8"></div>44 <div class="ratioDiv" id="ratio811" onclick="updateCanvasDimen tions(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> 45 45 <div style="clear: both"></div> 46 46 </div> … … 52 52 var currentRatio = "ratio12"; 53 53 54 function updateCanvasDimen tions(height, width) {54 function updateCanvasDimensions(height, width) { 55 55 // Show feedback by highlighting the chosen square 56 56 document.getElementById(currentRatio).style.borderColor = 'black'; 57 document.getElementById(currentRatio).style.borderWidth = '1px'; 57 58 currentRatio = "ratio" + height + width; 58 59 document.getElementById(currentRatio).style.borderColor = 'white'; 60 document.getElementById(currentRatio).style.borderWidth = '2px'; 59 61 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 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; 65 67 66 68 var h = sizeConstant; 67 69 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 } 74 75 } 75 76 </script> -
other-projects/nz-flag-design/trunk/main-form/choose-palette.html
r29767 r29773 6 6 <title>Choose Palette</title> 7 7 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"/> 8 17 </head> 9 18 <body> … … 26 35 <span class="left story-icon research" ></span> 27 36 <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> 29 40 <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> 83 473 84 474 <!-- 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 87 511 88 512 <p>Use slider to change the number of colours that will be used in your flag:</p> 89 513 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)"/> 91 515 92 516 <br /> … … 96 520 <script> 97 521 522 /* 98 523 // Visibly toggle between which palette circle is currently selected 99 524 var selectedCircle = "circle1"; 100 525 function newSelectedCircle(circleName) 101 526 { 102 document.getElementById(selectedCircle).style.stroke = ' black';527 document.getElementById(selectedCircle).style.stroke = '#000000'; 103 528 document.getElementById(selectedCircle).style.strokeWidth = 1; 104 529 105 530 selectedCircle = circleName; 106 531 107 document.getElementById(selectedCircle).style.stroke = ' white';532 document.getElementById(selectedCircle).style.stroke = '#ffffff'; 108 533 document.getElementById(selectedCircle).style.strokeWidth = 2; 109 534 } 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 136 537 // Update the number of circles shown on the palette 137 function showC ircles(newValue)538 function showColourPots(newValue) 138 539 { 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 } 152 548 } 153 549 } 154 550 155 // Colour picker documentation at https://bgrins.github.io/spectrum156 $("#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 });181 551 </script> 182 552 <!-- end of putting custom content --> -
other-projects/nz-flag-design/trunk/main-form/index.html
r29767 r29773 3 3 <head> 4 4 <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 5 10 <!-- 6 11 <meta name="viewport" content="width=device-width, initial-scale=1"/> … … 17 22 <link rel="stylesheet" href="lib-slider/css/jqm-demos.css"/> 18 23 <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"/> 20 25 21 26 <!-- jQuery --> … … 39 44 40 45 <!-- spectrum for colour palette --> 46 <!-- For documentation see https://bgrins.github.io/spectrum --> 41 47 <script src='bgrins-spectrum/spectrum.js'></script> 42 48 <link rel='stylesheet' href='bgrins-spectrum/spectrum.css' /> … … 48 54 } 49 55 .ui-slider-handle { 50 background-color: # E7924B;56 background-color: #a05a2c; /* used to be #E7924B; */ 51 57 } 52 58 </style> … … 57 63 // Flag settings - used to initialise the svg canvas to the user's preferences 58 64 var flagCanvasSettings = { backgroundColor: "#000066", width: 800, height: 400 }; 65 59 66 </script> 60 67 … … 87 94 </p> 88 95 <form> 89 <input type="text" />96 <input type="text" autofocus="autofocus" style="color: white;" /> 90 97 </form> 91 98 </div> -
other-projects/nz-flag-design/trunk/main-form/iterative-design.html
r29767 r29773 126 126 function reconfigureSvgCanvas(settings) { 127 127 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); 129 130 130 131 var design_frame = document.getElementById('design-2d-iframe'); 131 132 var svgCanvas = design_frame.contentWindow.svgCanvas; 132 133 var svgedit = design_frame.contentWindow.svgedit; 134 135 // Set the new canvas size 136 svgCanvas.setResolution(settings.width, settings.height); 133 137 134 138 var widthVar = settings.width; … … 186 190 // Centres the canvas (somewhat) 187 191 //svgCanvas.updateCanvas(100, 100); 192 188 193 } 189 194 … … 195 200 var la_y_dim = $(window).height() * 0.67; 196 201 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 } 211 217 } 212 } 213 218 }); 219 }); 214 220 } 215 221 216 222 function activateSVGEditor() { 217 223 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"); 219 225 $('#design-2d-iframe').load(function() { 220 226 console.log("*** loaded sgv iframe: " + this); … … 230 236 231 237 $(document).on("pageload",function(event,data){ 232 console.log( "Iterative Design Page: jquerymobile pageload()" 238 console.log( "Iterative Design Page: jquerymobile pageload()"); 233 239 if (!activatedAccordion) { 234 240 activateAccordion(); … … 251 257 $(document).on("pagebeforeshow",function(event,data) { 252 258 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); 254 260 255 261 if (active_page == "iterative-design-page") {
Note:
See TracChangeset
for help on using the changeset viewer.