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

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

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