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

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

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