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

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

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