source: other-projects/nz-flag-design/trunk/main-form/choose-palette.html@ 29773

Last change on this file since 29773 was 29773, checked in by davidb, 9 years ago

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
  • Property svn:executable set to *
File size: 18.4 KB
Line 
1<!DOCTYPE html>
2<html id="story">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <meta name="viewport" content="width=device-width, initial-scale=1"/>
6 <title>Choose Palette</title>
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"/>
17 </head>
18 <body>
19 <div data-role="page" id="choose-palette-page"
20 class="demo-page"
21 data-dom-cache="true"
22 data-prev="choose-canvas"
23 data-next="iterative-design">
24
25 <div data-role="content">
26
27 <div data-role="controlgroup" class="control" data-mini="true">
28 <a href="#" class="next right-button test-fwd" style="right:1%;"></a>
29 <a href="#" class="prev left-button idea-back" style="left:1%;"></a>
30 </div>
31
32 <div class="story-page">
33
34 <!-- put custom content here -->
35 <span class="left story-icon research" ></span>
36 <h2>Choose Colour Palette</h2>
37 <h3 style="font-size: large; position: relative">
38 Click on a palette circle to select it, and change its colour using the colour picker to the right
39 </h3>
40 <p>
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>
473
474 <!-- The Spectrum colour picker -->
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
511
512 <p>Use slider to change the number of colours that will be used in your flag:</p>
513
514 <input id="numColoursSlider" type="range" min="0" max="7" value="3" steps="7" onchange="showColourPots(this.value)"/>
515
516 <br />
517 <h2><a href="http://www.nava.org/flag-design/good-flag-bad-flag/5-basic-principles-flag-design" target="_blank">Help on flag design</a></h2>
518 </p>
519
520 <script>
521
522/*
523 // Visibly toggle between which palette circle is currently selected
524 var selectedCircle = "circle1";
525 function newSelectedCircle(circleName)
526 {
527 document.getElementById(selectedCircle).style.stroke = '#000000';
528 document.getElementById(selectedCircle).style.strokeWidth = 1;
529
530 selectedCircle = circleName;
531
532 document.getElementById(selectedCircle).style.stroke = '#ffffff';
533 document.getElementById(selectedCircle).style.strokeWidth = 2;
534 }
535 */
536
537 // Update the number of circles shown on the palette
538 function showColourPots(newValue)
539 {
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 }
548 }
549 }
550
551 </script>
552 <!-- end of putting custom content -->
553
554 </div> <!-- end story-page-->
555 </div><!-- /content -->
556
557 </div><!-- /page -->
558
559 </body>
560</html>
Note: See TracBrowser for help on using the repository browser.