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

Revision 29950, 20.6 KB (checked in by davidb, 5 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 *
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-jsp">
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_pot_pos = selectedColourPotID.replace("colour-pot","");
97                flagCanvasSettings.colourPots[colour_pot_pos] = colour.toHexString();
98        flagCanvasSettings.modified = true;
99        }
100
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
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();
129        var svg_y_dim = 0.45 * la_y_dim;
130    $('#svg-palette').css("height",svg_y_dim+"px");
131
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,
196              show: function() { console.log("Away to show") ; $('#'+selectedColourPickerDivID).css("visibility","hidden") ; console.log("done show")}
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) {
209        //var active_page = $.mobile.activePage.attr("id");
210        //console.log("Choose-Palette fielding Event:   pagebeforeshow() for page " + active_page);
211
212       
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          }
222      //console.log("***!!! returning 'true' for event");
223      //return true;
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
265    $(window).resize(function() {
266        //console.log("choose-palette resize()");
267        //console.log("position top = " + $('#svg-palette').position().top);
268        //console.log("offset top = " + $('#svg-palette').offset().top);
269
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
275    $('#svg-palette').css("height",svg_y_dim+"px");                   
276    });
277
278
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   
300   style="height: 520px;"
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
530            <!-- The Spectrum colour picker -->
531            <div id="picker-group-div" style="position: relative; width: 290px;">
532
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
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>
575
576        <p>Use slider to change the number of colours that will be used in your flag:</p>
577
578        <input id="numColoursSlider" style="color: black;" type="range" min="0" max="7" value="3" steps="7" onchange="showColourPots(this.value)"/>
579
580    </p>
581       
582    <script>
583
584/*
585        // Visibly toggle between which palette circle is currently selected
586        var selectedCircle = "circle1";
587        function newSelectedCircle(circleName)
588        {
589            document.getElementById(selectedCircle).style.stroke = '#000000';
590            document.getElementById(selectedCircle).style.strokeWidth = 1;
591
592            selectedCircle = circleName;
593
594            document.getElementById(selectedCircle).style.stroke = '#ffffff';
595            document.getElementById(selectedCircle).style.strokeWidth = 2;
596        }
597  */
598     
599        // Update the number of circles shown on the palette
600        function showColourPots(newValue)
601        {           
602
603            flagCanvasSettings.colourPots = [];
604
605        for (var i=0; i<numColourPots; i++) {
606                var circle = "colour-pot" + i;
607            if (i<=newValue) {
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;
613        }
614            else {
615                  document.getElementById(circle).style.visibility = 'hidden';
616        }
617            }
618       console.log("*** showColourPots(), flagCanvasSettings.modified being set to 'true'");
619       flagCanvasSettings.modified = true;
620
621        }       
622       
623    </script>
624      <!-- end of putting custom content -->       
625
626    </div> <!-- end story-page-->
627      </div><!-- /content -->
628
629    </div><!-- /page -->
630   
631  </body>
632</html>
Note: See TracBrowser for help on using the browser.