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

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

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