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

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

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