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

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

Changes made during Fieldays event. Background colour remember between reloads (in localStorage) until published; more sophisticated support for handling JSON data
  • Property svn:executable set to *
File size: 20.9 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<!--
18 <style>
19 .ui-slider-track {
20 background-color: #ECECEC;
21 }
22 .ui-slider-handle {
23 background-color: #a05a2c; /* used to be #E7924B; */
24 }
25 </style>
26-->
27
28 </head>
29 <body>
30 <div data-role="page" id="choose-palette-page"
31 class="demo-page"
32 data-dom-cache="true"
33 data-prev="choose-canvas"
34 data-next="iterative-design-jsp">
35
36 <div data-role="content">
37
38 <div data-role="controlgroup" class="control" data-mini="true">
39 <a href="#" class="next right-button test-fwd" style="right:1%;"></a>
40 <a href="#" class="prev left-button idea-back" style="left:1%;"></a>
41 </div>
42
43 <div class="story-page">
44
45 <!-- put custom content here -->
46 <span class="left story-icon research" ></span>
47 <h2>Choose Colour Palette</h2>
48
49 <div class="dialog" id="dialog" title="Colour Palette Selection Panel" widthXX="800px">
50 <style>
51 p { margin: 10px }
52 </style>
53
54 <p style="position: relative; display: inline-block;">
55 Click/touch on a palette circle (paint pot) to select it, and change its colour using the colour picker that appears.
56 </p>
57 <p>
58 User the slider at the bottom of the page to increase/degree the number of colours
59 available on the palette.
60
61 </p>
62 <p>
63 Click <a href="http://www.netstate.com/states/symb/flags/flag_design_principles.htm"
64 target="_blank">here</a> for additional advice on flag
65 design.
66 </a>
67 </div>
68
69 <p>
70 <div id="palette">
71
72
73
74
75 <script>
76 var activatedColourPalette = false;
77
78 var selectedColourPot = null;
79 var selectedColourPotID;
80 var selectedColourPickerID;
81 var selectedColourPickerDivID;
82
83 function colourPotChanged(colour)
84 {
85 if (selectedColourPot==null) {
86 console.warn("colourPotChanged(): No selected colour pot to change. Failed initialization?");
87 return;
88 }
89
90 selectedColourPot.style.fill = colour.toHexString();
91 $('#'+selectedColourPickerID).value = colour;
92 $('#'+selectedColourPickerID).spectrum("set",colour);
93
94
95 if (typeof flagCanvasSettings !== 'undefined') {
96 var colour_pot_pos = selectedColourPotID.replace("colour-pot","");
97 flagCanvasSettings.colourPots[colour_pot_pos] = colour.toHexString();
98 flagCanvasSettings.modified = true;
99 }
100
101 if (selectedColourPotID == "colour-pot0")
102 {
103 // If white is chosen, change the background palette circle text to be black
104 var colour_hsv = colour.toHsv();
105 if ((colour_hsv.s < 0.2) && (colour_hsv.v > 0.8))
106 {
107 document.getElementById("background-flag-text").style.fill = "#000000";
108 }
109 else
110 {
111 document.getElementById("background-flag-text").style.fill = "#ffffff";
112 }
113
114 // Set the canvas background setting to the user's choice
115 if (typeof flagCanvasSettings !== 'undefined') {
116 flagCanvasSettings.backgroundColor = colour.toHexString();
117 if (window.localStorage) {
118 console.log("*** storing bacgkground flag color = " + flagCanvasSettings.backgroundColor);
119 window.localStorage.setItem("flagBackgroundColor",flagCanvasSettings.backgroundColor);
120 }
121 }
122 }
123
124 }
125
126 function activateColourPalette() {
127
128 console.log("ActivateColourPalette()");
129
130 // Page not shown yet, so the y-position of <svg> is still 0
131 // => make height purely a percentage of height
132 var la_y_dim = $(window).height();
133 var svg_y_dim = 0.45 * la_y_dim;
134 $('#svg-palette').css("height",svg_y_dim+"px");
135
136 // init state-keeping variables
137 var $colour_pot = $('#colour-pot1');
138 if ($colour_pot) {
139 selectedColourPot = $colour_pot[0];
140 selectedColourPotID = "colour-pot1";
141 selectedColourPickerID = "colour-picker1";
142 selectedColourPickerDivID = "colour-picker-div1";
143 }
144 else {
145 console.warn("Unable to find 'colour-pot1' for initialization purposes");
146 }
147
148 for (var i=0; i<numColourPots; i++) {
149 var $colour_pot_elem = $('#colour-pot'+i);
150 if ($colour_pot_elem) {
151
152 var swatch_col = colourPotSwatch[i];
153 $colour_pot_elem.css("fill",swatch_col);
154 //console.log("*** outerbevel = " + $('#outerbevel'));
155 //document.getElementById('colour-pot'+i).setAttributeNS(null,"filter", "url(#outerbevel)")
156 $colour_pot_elem.css("filter", "url(#outerbevel)");
157
158 var colour_picker_id = "colour-picker" + i;
159
160 // Code for building the input colour element dynamically
161
162 //var pick_div = document.createElement("div");
163
164 //pick_div.setAttribute("style","position: absolute; left:0px; top:0px;");
165 //pick_div.setAttribute("id", "colour-picker-div"+i);
166
167 //var input_str = '<input type="text" id="'+colour_picker_id+'" name="'+colour_picker_id+'" value="'+swatch_col+'" />';
168
169 //$(pick_div).append(input_str);
170 //$('#picker-group-div').append(pick_div);
171
172 //$('#colour-picker-div'+i).hide();
173
174 $('#'+colour_picker_id).spectrum({
175 color: swatch_col,
176 flat: false,
177 showInput: true,
178 showInitial: true,
179 allowEmpty: false,
180 showAlpha: false,
181 showPalette: true,
182 togglePaletteOnly: false,
183 showSelectionPalette: true,
184 hideAfterPaletteSelect: true,
185 clickoutFiresChange: false,
186 cancelText: "Cancel",
187 chooseText: "Choose",
188 preferredFormat: "hsv",
189 maxSelectionSize: 2,
190 palette: [
191 ["#000", "hsv 0 80 90"],
192 ["#444", "hsv 60 80 90"],
193 ["#666", "hsv 120 80 90"],
194 ["#999", "hsv 180 80 90"],
195 ["#ccc", "hsv 240 80 90"],
196 ["#eee", "hsv 300 80 90"],
197 ["#fff", "hsv 350 80 90"]
198 ],
199 change: colourPotChanged,
200 show: function() { console.log("Away to show") ; $('#'+selectedColourPickerDivID).css("visibility","hidden") ; console.log("done show")}
201 });
202
203
204 }
205 }
206 showColourPots(3);
207 }
208
209 if (jQuery.mobile) {
210 //console.log("Choose-Palette: jquerymobile active, setting up on-pageload event");
211 //$(document).on("pagebeforeshow", function(event) {
212 $(document).on("pageload", function(event,data) {
213 //var active_page = $.mobile.activePage.attr("id");
214 //console.log("Choose-Palette fielding Event: pagebeforeshow() for page " + active_page);
215
216
217
218 //if (active_page == "choose-palette-page") {
219
220 if (!activatedColourPalette) {
221 console.log("Choose-Palette Page: jquerymobile pageload()");
222 activateColourPalette();
223 activatedColourPalette = true;
224 return false;
225 }
226 //console.log("***!!! returning 'true' for event");
227 //return true;
228 //}
229 });
230 }
231 else {
232 //console.log("Choose-Palette: jquerymobile not active, setting up document-ready event");
233 $(document).ready(activateColourPalette)
234 }
235
236
237 function colourpot_clicked(colourPotElem)
238 {
239 if (selectedColourPot != null) {
240 selectedColourPot.style.stroke = 'none';
241 $('#'+selectedColourPickerDivID).hide();
242 }
243
244 selectedColourPot = colourPotElem;
245 selectedColourPotID = colourPotElem.id;
246 selectedColourPickerID = selectedColourPotID.replace("colour-pot","colour-picker");
247 selectedColourPickerDivID = selectedColourPotID.replace("colour-pot","colour-picker-div");
248
249 var colour_hsv = tinycolor(selectedColourPot.style.fill).toHsv();
250 if ((colour_hsv.s < 0.2) && (colour_hsv.v > 0.8)) {
251 selectedColourPot.style.stroke = '#000000';
252 }
253 else {
254 selectedColourPot.style.stroke = '#ffffff';
255 }
256 selectedColourPot.style.strokeWidth = 2;
257
258
259 // Make the chosen colour picker appear
260
261 $('#'+selectedColourPickerDivID).show(10, function() {
262 $('#'+selectedColourPickerID).next().click()
263 });
264
265 return false;
266 }
267
268
269 $(window).resize(function() {
270 //console.log("choose-palette resize()");
271 //console.log("position top = " + $('#svg-palette').position().top);
272 //console.log("offset top = " + $('#svg-palette').offset().top);
273
274 var palette_top = $('#svg-palette').offset().top;
275
276 var la_y_dim = $(window).height() - palette_top;
277 var svg_y_dim = (palette_top==0) ? 0.45 * la_y_dim : 0.65 * la_y_dim;
278
279 $('#svg-palette').css("height",svg_y_dim+"px");
280 });
281
282
283 </script>
284
285<table width="100%">
286 <tr>
287 <td align="right">
288
289<svg
290 xmlns:dc="http://purl.org/dc/elements/1.1/"
291 xmlns:cc="http://creativecommons.org/ns#"
292 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
293 xmlns:svg="http://www.w3.org/2000/svg"
294 xmlns="http://www.w3.org/2000/svg"
295 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
296 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
297
298 xwidth="879"
299 xheight="662"
300
301 xwidth="738"
302 xheight="523"
303
304 style="height: 520px;"
305 XXwidth="95%"
306 viewBox="0 0 879 552"
307
308 xwidth="615"
309 xheight="463"
310
311
312 xviewBox="0 0 879 552"
313
314 id="svg-palette"
315 version="1.1"
316 inkscape:version="0.91 r13725"
317 sodipodi:docname="artist-palette-v03.svg">
318 <defs id="defs3351" >
319
320 <filter id="innerbevel" x0="-50%" y0="-50%" width="200%" height="200%">
321 <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
322 <feOffset dy="-1" dx="-1"/>
323 <feComposite in2="SourceAlpha" operator="arithmetic"
324 k2="-1" k3="1" result="hlDiff"/>
325 <feFlood flood-color="white" flood-opacity=".7"/>
326 <feComposite in2="hlDiff" operator="in"/>
327 <feComposite in2="SourceGraphic" operator="over" result="withGlow"/>
328
329 <feOffset in="blur" dy="3" dx="3"/>
330 <feComposite in2="SourceAlpha" operator="arithmetic"
331 k2="-1" k3="1" result="shadowDiff"/>
332 <feFlood flood-color="black" flood-opacity="1"/>
333 <feComposite in2="shadowDiff" operator="in"/>
334 <feComposite in2="withGlow" operator="over"/>
335 </filter>
336
337
338 <filter id="outerbevel" x0="-50%" y0="-50%" width="200%" height="200%">
339 <feMorphology in="SourceAlpha" operator="dilate" radius="1"/>
340 <feGaussianBlur stdDeviation="1" result="blur"/>
341
342 <feOffset dy="1" dx="1"/>
343 <feComposite in2="SourceAlpha" operator="arithmetic"
344 k2="1" k3="-1" result="hlDiff"/>
345 <feFlood flood-color="white" flood-opacity=".7"/>
346 <feComposite in2="hlDiff" operator="in"/>
347 <feComposite in2="SourceGraphic" operator="over" result="withGlow"/>
348
349 <feOffset in="blur" dy="-1" dx="-1"/>
350 <feComposite in2="SourceAlpha" operator="arithmetic"
351 k2="1" k3="-1" result="shadowDiff"/>
352 <feFlood flood-color="black" flood-opacity="1"/>
353 <feComposite in2="shadowDiff" operator="in"/>
354 <feComposite in2="withGlow" operator="over"/>
355 </filter>
356
357 </defs>
358 <sodipodi:namedview
359 id="base"
360 pagecolor="#ffffff"
361 bordercolor="#666666"
362 borderopacity="1.0"
363 inkscape:pageopacity="0.0"
364 inkscape:pageshadow="2"
365 inkscape:zoom="0.35"
366 inkscape:cx="1235.998"
367 inkscape:cy="611.42857"
368 inkscape:document-units="px"
369 inkscape:current-layer="g4183"
370 showgrid="false"
371 units="px"
372 inkscape:window-width="1920"
373 inkscape:window-height="1018"
374 inkscape:window-x="-8"
375 inkscape:window-y="-8"
376 inkscape:window-maximized="1" />
377 <metadata
378 id="metadata3354">
379 <rdf:RDF>
380 <cc:Work
381 rdf:about="">
382 <dc:format>image/svg+xml</dc:format>
383 <dc:type
384 rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
385 <dc:title></dc:title>
386 </cc:Work>
387 </rdf:RDF>
388 </metadata>
389 <g transform="scale(1.0)"><!-- used to be 0.7 scale -->
390 <g
391 inkscape:label="Layer 1"
392 inkscape:groupmode="layer"
393 id="layer1"
394 transform="translate(0,200)">
395 <g
396 id="palette"
397 transform="scale(0.3333,0.33333)"
398 >
399 <path
400 id="path4181"
401 style="fill:#a05a2c;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
402 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" />
403
404 </g>
405 <g>
406 <ellipse
407 id="colour-pot0"
408 cx="505"
409 cy="84"
410 rx="73"
411 ry="73"
412 filterXX="url(#outerbevel)"
413 style="fill:#d40000;fill-opacity:1;"
414 stylexx="stroke:#000000;stroke-width:1px;"
415 onclick="colourpot_clicked(this)"
416 />
417 <text
418 xml:space="preserve"
419 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"
420 x="514.81232"
421 y="67.527832"
422 id="background-flag-text"
423 sodipodi:linespacing="100%"
424 onclick="colourpot_clicked(document.getElementById('colour-pot0'))"
425 >
426 <tspan
427 sodipodi:role="line"
428 x="514.81232"
429 y="67.527832"
430 id="tspan3463">Flag</tspan>
431 <tspan
432 sodipodi:role="line"
433 x="514.81232"
434 y="90.027832"
435 id="tspan3467">Background</tspan>
436 <tspan
437 sodipodi:role="line"
438 x="514.81232"
439 y="112.52783"
440 id="tspan3469">Colour</tspan>
441 </text>
442 </g>
443
444 <g>
445 <ellipse
446 id="colour-pot1"
447 cx="194"
448 cy="-69"
449 rx="50"
450 ry="50"
451 filterXX="url(#outerbevel)"
452 style="fill:#ffffff;visibility:visible;"
453 onclick="colourpot_clicked(this)"
454 />
455 <ellipse
456 id="colour-pot2"
457 cx="347"
458 cy="-95"
459 rx="50"
460 ry="50"
461 filterXX="url(#outerbevel)"
462 style="fill:#ffffff;fill-opacity:1;visibility:visible;"
463 onclick="colourpot_clicked(this)"
464 />
465 <ellipse
466 id="colour-pot3"
467 cx="501"
468 cy="-76"
469 rx="50"
470 ry="50"
471 filterXX="url(#outerbevel)"
472 style="fill:#29afaf;fill-opacity:1;visibility:visible"
473 onclick="colourpot_clicked(this)"
474 />
475 <ellipse
476 id="colour-pot4"
477 cx="652"
478 cy="-12"
479 rx="50"
480 ry="50"
481 filterXX="url(#outerbevel)"
482 style="fill:#008000;fill-opacity:1;visibility:visible;"
483 onclick="colourpot_clicked(this)"
484 />
485 <ellipse
486 id="colour-pot5"
487 cx="741"
488 cy="112"
489 rx="50"
490 ry="50"
491 filterXX="url(#outerbevel)"
492 style="fill:#800080;fill-opacity:1;visibility:visible;"
493 onclick="colourpot_clicked(this)"
494 />
495 <ellipse
496 id="colour-pot6"
497 cx="618"
498 cy="213"
499 rx="50"
500 ry="50"
501 filterXX="url(#outerbevel)"
502 style="fill:#ffff15;fill-opacity:1;visibility:visible;"
503 onclick="colourpot_clicked(this)"
504 />
505 <ellipse
506 id="colour-pot7"
507 cx="458"
508 cy="242"
509 rx="50"
510 ry="50"
511 filterXX="url(#outerbevel)"
512 style="fill:#ff6600;fill-opacity:1;visibility:visible;"
513 onclick="colourpot_clicked(this)"
514 />
515
516 </g>
517 </g>
518 </g>
519
520</svg>
521
522
523 </td>
524 <td style="width: 300px;" valign="top">
525 <style>
526 .sp-picker-container {
527 width: 200px;
528 }
529 .sp-input-container {
530 width: 130px;
531 }
532 </style>
533
534 <!-- The Spectrum colour picker -->
535 <div id="picker-group-div" style="position: relative; width: 290px;">
536
537 <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div0">
538 <input type="text" id="colour-picker0" name="colour-picker0">
539 </div>
540 <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div1">
541 <input type="text" id="colour-picker1" name="colour-picker1">
542 </div>
543 <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div2">
544 <input type="text" id="colour-picker2" name="colour-picker2">
545 </div>
546 <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div3">
547 <input type="text" id="colour-picker3" name="colour-picker3">
548 </div>
549 <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div4">
550 <input type="text" id="colour-picker4" name="colour-picker4">
551 </div>
552 <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div5">
553 <input type="text" id="colour-picker5" name="colour-picker5">
554 </div>
555 <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div6">
556 <input type="text" id="colour-picker6" name="colour-picker6">
557 </div>
558 <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div7">
559 <input type="text" id="colour-picker7" name="colour-picker7">
560 </div>
561
562
563 </div>
564
565 </td>
566 </tr>
567</table>
568
569 </div> <!-- end of palette -->
570
571 <style>
572 .ui-slider-track {
573 background-color: #ECECEC;
574 }
575 .ui-slider-handle {
576 background-color: #a05a2c; /* used to be #E7924B; */
577 }
578 </style>
579
580 <p>Use slider to change the number of colours that will be used in your flag:</p>
581
582 <input id="numColoursSlider" style="color: black;" type="range" min="0" max="7" value="3" steps="7" onchange="showColourPots(this.value)"/>
583
584 </p>
585
586 <script>
587
588/*
589 // Visibly toggle between which palette circle is currently selected
590 var selectedCircle = "circle1";
591 function newSelectedCircle(circleName)
592 {
593 document.getElementById(selectedCircle).style.stroke = '#000000';
594 document.getElementById(selectedCircle).style.strokeWidth = 1;
595
596 selectedCircle = circleName;
597
598 document.getElementById(selectedCircle).style.stroke = '#ffffff';
599 document.getElementById(selectedCircle).style.strokeWidth = 2;
600 }
601 */
602
603 // Update the number of circles shown on the palette
604 function showColourPots(newValue)
605 {
606
607 flagCanvasSettings.colourPots = [];
608
609 for (var i=0; i<numColourPots; i++) {
610 var circle = "colour-pot" + i;
611 if (i<=newValue) {
612 var colourPot = document.getElementById(circle);
613 colourPot.style.visibility = 'visible';
614 var colourHexStr = tinycolor(colourPot.style.fill).toHexString();
615
616 flagCanvasSettings.colourPots[i] = colourHexStr;
617 }
618 else {
619 document.getElementById(circle).style.visibility = 'hidden';
620 }
621 }
622 console.log("*** showColourPots(), flagCanvasSettings.modified being set to 'true'");
623 flagCanvasSettings.modified = true;
624
625 }
626
627 </script>
628 <!-- end of putting custom content -->
629
630 </div> <!-- end story-page-->
631 </div><!-- /content -->
632
633 </div><!-- /page -->
634
635 </body>
636</html>
Note: See TracBrowser for help on using the repository browser.