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

Revision 29813, 20.8 KB (checked in by davidb, 4 years ago)

Fixed missing param on .replace() call

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