root/other-projects/nz-flag-design/trunk/main-form/choose-palette.html @ 29811

Revision 29811, 20.3 KB (checked in by davidb, 4 years ago)

Additional coding so the colour palette choices now feed through to the svg-editor

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