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

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

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