- Timestamp:
- 2015-02-13T16:09:07+13:00 (9 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
other-projects/nz-flag-design/trunk/main-form/choose-palette.html
r29549 r29740 25 25 <span class="left story-icon research" ></span> 26 26 <h2>Choose Colour Palette</h2> 27 <p> 28 ... 29 </p> 27 <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> 28 <p> 29 <div id="palette"> 30 <img src="images/palette/palette2.png" id="paletteImage" height="500" alt="Palette"></img> 31 32 <div onclick="newSelectedCircle('circleBackground')" id="paletteCircleBackground" class="paletteCircle"> 33 <svg height="104" width="104"> 34 <circle id="circleBackground" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="#000066"/> 35 <text id="circleText1" x="32" y="35" fill="white" font-size="15">FLAG</text> 36 <text id="circleText2" x="5" y="55" fill="white" font-size="13">BACKGROUND</text> 37 <text id="circleText3" x="22" y="75" fill="white" font-size="15">COLOUR</text> 38 </svg> 39 </div> 40 41 <div onclick="newSelectedCircle('circle1')" id="paletteCircle1" class="paletteCircle"> 42 <svg height="104" width="104"> 43 <circle id="circle1" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="#CC0000"/> 44 </svg> 45 </div> 46 47 <div onclick="newSelectedCircle('circle2')" id="paletteCircle2" class="paletteCircle"> 48 <svg height="104" width="104"> 49 <circle id="circle2" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/> 50 </svg> 51 </div> 52 53 <div onclick="newSelectedCircle('circle3')" id="paletteCircle3" class="paletteCircle"> 54 <svg height="104" width="104"> 55 <circle id="circle3" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/> 56 </svg> 57 </div> 58 59 <div onclick="newSelectedCircle('circle4')" id="paletteCircle4" class="paletteCircle"> 60 <svg height="104" width="104"> 61 <circle id="circle4" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/> 62 </svg> 63 </div> 64 65 <div onclick="newSelectedCircle('circle5')" id="paletteCircle5" class="paletteCircle"> 66 <svg height="104" width="104"> 67 <circle id="circle5" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/> 68 </svg> 69 </div> 70 71 <div onclick="newSelectedCircle('circle6')" id="paletteCircle6" class="paletteCircle"> 72 <svg height="104" width="104"> 73 <circle id="circle6" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/> 74 </svg> 75 </div> 76 77 <div onclick="newSelectedCircle('circle7')" id="paletteCircle7" class="paletteCircle"> 78 <svg height="104" width="104"> 79 <circle id="circle7" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/> 80 </svg> 81 </div> 82 83 <!-- The Spectrum colour picker --> 84 <div id="pickerDiv"><input type='text' id="picker" value='#fffff0'/></div> 85 </div> 86 87 <h2>Use this slider to change the number of colours that will be used in your flag!</h2> 88 89 <input id="numColoursSlider" type="range" min="0" max="7" value="2" steps="7" onchange="showCircles(this.value)"/> 90 <h2>Advice for flag design!</h2> 91 </p> 92 93 <script> 94 // Flag settings - used to initialise the svg canvas to the user's preferences 95 var flagCanvasSettings = { backgroundColor: "#000066", width: 800, height: 400 }; 96 97 // Visibly toggle between which palette circle is currently selected 98 var selectedCircle = "circle1"; 99 function newSelectedCircle(circleName) 100 { 101 document.getElementById(selectedCircle).style.stroke = 'black'; 102 document.getElementById(selectedCircle).style.strokeWidth = 1; 103 104 selectedCircle = circleName; 105 106 document.getElementById(selectedCircle).style.stroke = 'white'; 107 document.getElementById(selectedCircle).style.strokeWidth = 2; 108 } 109 110 // Fill the currently selected circle when a colour is selected using the colour picker 111 $("#picker").on('change.spectrum', function(e, colour) { 112 document.getElementById(selectedCircle).style.fill = colour; 113 114 if (selectedCircle == "circleBackground") 115 { 116 // If white is chosen, change the background palette circle text to be black 117 if(colour == '#ffffff') 118 { 119 document.getElementById("circleText1").style.fill = "#000000"; 120 document.getElementById("circleText2").style.fill = "#000000"; 121 document.getElementById("circleText3").style.fill = "#000000"; 122 } 123 else 124 { 125 document.getElementById("circleText1").style.fill = "#ffffff"; 126 document.getElementById("circleText2").style.fill = "#ffffff"; 127 document.getElementById("circleText3").style.fill = "#ffffff"; 128 } 129 130 // Set the canvas background setting to the user's choice 131 flagCanvasSettings.backgroundColor = colour; 132 } 133 }); 134 135 // Update the number of circles shown on the palette 136 function showCircles(newValue) 137 { 138 for (i = 1; i <= newValue; i++) 139 { 140 var circle = "paletteCircle" + i; 141 document.getElementById(circle).style.display = 'block'; 142 } 143 144 if (newValue < 7) 145 { 146 for (i = 7; i > newValue; i--) 147 { 148 var circle = "paletteCircle" + i; 149 document.getElementById(circle).style.display = 'none'; 150 } 151 } 152 } 153 154 // Colour picker documentation at https://bgrins.github.io/spectrum 155 $("#picker").spectrum({ 156 flat: true, 157 showInput: true, 158 showInitial: true, 159 allowEmpty: false, 160 showAlpha: false, 161 showPalette: true, 162 togglePaletteOnly: false, 163 showSelectionPalette: true, 164 clickoutFiresChange: false, 165 cancelText: "Cancel", 166 chooseText: "Choose", 167 preferredFormat: "hex", 168 maxSelectionSize: 10, 169 palette: [ 170 ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"], 171 ["000066", "#CC0000", "000066", "#CC0000", "000066", "#CC0000", "000066", "#CC0000"], 172 ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"], 173 ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"], 174 ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"], 175 ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"], 176 ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"] 177 ] 178 //selectionPalette: [string] 179 }); 180 </script> 30 181 <!-- end of putting custom content --> 31 182
Note:
See TracChangeset
for help on using the changeset viewer.
