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

Revision 29808, 20.0 KB (checked in by davidb, 4 years ago)

Further rewording

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