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

Revision 29924, 20.4 KB (checked in by davidb, 5 years ago)

Minor edits to do with some debugging

  • 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_pot_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() { console.log("Away to show") ; $('#'+selectedColourPickerDivID).css("visibility","hidden") ; console.log("done show")}
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        var active_page = $.mobile.activePage.attr("id");
209        //console.log("Choose-Palette fielding Event:   pagebeforeshow() for page " + active_page);
210
211       
212           
213        //if (active_page == "choose-palette-page") {
214
215          if (!activatedColourPalette) {
216          console.log("Choose-Palette Page: jquerymobile pageload()");
217              activateColourPalette();
218              activatedColourPalette = true;
219          return false;
220          }
221      //console.log("***!!! returning 'true' for event");
222      //return true;
223        //}
224      });
225    }
226    else {
227      //console.log("Choose-Palette: jquerymobile not active, setting up document-ready event");
228      $(document).ready(activateColourPalette)
229    }
230
231
232    function colourpot_clicked(colourPotElem)
233    {
234      if (selectedColourPot != null) {
235        selectedColourPot.style.stroke      = 'none';
236        $('#'+selectedColourPickerDivID).hide();
237      }
238 
239      selectedColourPot = colourPotElem;
240      selectedColourPotID = colourPotElem.id;
241      selectedColourPickerID = selectedColourPotID.replace("colour-pot","colour-picker");
242      selectedColourPickerDivID = selectedColourPotID.replace("colour-pot","colour-picker-div");
243
244      var colour_hsv = tinycolor(selectedColourPot.style.fill).toHsv();
245      if ((colour_hsv.s < 0.2) && (colour_hsv.v > 0.8)) {
246        selectedColourPot.style.stroke      = '#000000';
247      }
248      else {
249        selectedColourPot.style.stroke      = '#ffffff';
250      }
251      selectedColourPot.style.strokeWidth = 2;
252
253
254      // Make the chosen colour picker appear
255
256      $('#'+selectedColourPickerDivID).show(10, function() {
257       $('#'+selectedColourPickerID).next().click()
258      });
259
260      return false;
261    }
262
263
264    $(window).resize(function() {
265        //console.log("choose-palette resize()");
266        //console.log("position top = " + $('#svg-palette').position().top);
267        //console.log("offset top = " + $('#svg-palette').offset().top);
268
269    var palette_top = $('#svg-palette').offset().top;
270
271        var la_y_dim = $(window).height() - palette_top;
272        var svg_y_dim = (palette_top==0) ? 0.45 * la_y_dim : 0.65 * la_y_dim;
273
274    $('#svg-palette').css("height",svg_y_dim+"px");                   
275    });
276
277
278  </script>
279
280<table width="100%">
281  <tr>
282    <td align="right">
283
284<svg
285   xmlns:dc="http://purl.org/dc/elements/1.1/"
286   xmlns:cc="http://creativecommons.org/ns#"
287   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
288   xmlns:svg="http://www.w3.org/2000/svg"
289   xmlns="http://www.w3.org/2000/svg"
290   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
291   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
292
293   xwidth="879"
294   xheight="662"
295
296   xwidth="738"
297   xheight="523"
298   
299   style="height: 520px;"
300   XXwidth="95%"
301   viewBox="0 0 879 552"
302
303   xwidth="615"
304   xheight="463"
305
306
307   xviewBox="0 0 879 552"
308
309   id="svg-palette"
310   version="1.1"
311   inkscape:version="0.91 r13725"
312   sodipodi:docname="artist-palette-v03.svg">
313  <defs id="defs3351" >
314
315    <filter id="innerbevel" x0="-50%" y0="-50%" width="200%" height="200%">
316      <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
317      <feOffset dy="-1" dx="-1"/>
318      <feComposite in2="SourceAlpha" operator="arithmetic"
319           k2="-1" k3="1" result="hlDiff"/>
320      <feFlood flood-color="white" flood-opacity=".7"/>
321      <feComposite in2="hlDiff" operator="in"/>
322      <feComposite in2="SourceGraphic" operator="over" result="withGlow"/>
323     
324      <feOffset in="blur" dy="3" dx="3"/>
325      <feComposite in2="SourceAlpha" operator="arithmetic"
326           k2="-1" k3="1" result="shadowDiff"/>
327      <feFlood flood-color="black" flood-opacity="1"/>
328      <feComposite in2="shadowDiff" operator="in"/>
329      <feComposite in2="withGlow" operator="over"/>
330    </filter>
331
332
333    <filter id="outerbevel" x0="-50%" y0="-50%" width="200%" height="200%">
334      <feMorphology in="SourceAlpha" operator="dilate" radius="1"/>
335      <feGaussianBlur stdDeviation="1" result="blur"/>
336     
337      <feOffset dy="1" dx="1"/>
338      <feComposite in2="SourceAlpha" operator="arithmetic"
339           k2="1" k3="-1" result="hlDiff"/>
340      <feFlood flood-color="white" flood-opacity=".7"/>
341      <feComposite in2="hlDiff" operator="in"/>
342      <feComposite in2="SourceGraphic" operator="over" result="withGlow"/>
343           
344      <feOffset in="blur" dy="-1" dx="-1"/>
345      <feComposite in2="SourceAlpha" operator="arithmetic"
346           k2="1" k3="-1" result="shadowDiff"/>
347      <feFlood flood-color="black" flood-opacity="1"/>
348      <feComposite in2="shadowDiff" operator="in"/>
349      <feComposite in2="withGlow" operator="over"/>
350    </filter>
351
352  </defs>
353  <sodipodi:namedview
354     id="base"
355     pagecolor="#ffffff"
356     bordercolor="#666666"
357     borderopacity="1.0"
358     inkscape:pageopacity="0.0"
359     inkscape:pageshadow="2"
360     inkscape:zoom="0.35"
361     inkscape:cx="1235.998"
362     inkscape:cy="611.42857"
363     inkscape:document-units="px"
364     inkscape:current-layer="g4183"
365     showgrid="false"
366     units="px"
367     inkscape:window-width="1920"
368     inkscape:window-height="1018"
369     inkscape:window-x="-8"
370     inkscape:window-y="-8"
371     inkscape:window-maximized="1" />
372  <metadata
373     id="metadata3354">
374    <rdf:RDF>
375      <cc:Work
376         rdf:about="">
377        <dc:format>image/svg+xml</dc:format>
378        <dc:type
379           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
380        <dc:title></dc:title>
381      </cc:Work>
382    </rdf:RDF>
383  </metadata>
384  <g transform="scale(1.0)"><!-- used to be 0.7 scale -->
385    <g
386       inkscape:label="Layer 1"
387       inkscape:groupmode="layer"
388       id="layer1"
389       transform="translate(0,200)">
390      <g
391     id="palette"
392     transform="scale(0.3333,0.33333)"
393     >
394    <path
395       id="path4181"
396       style="fill:#a05a2c;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
397       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" />
398   
399      </g>     
400      <g>
401    <ellipse
402           id="colour-pot0"
403       cx="505"
404       cy="84"
405       rx="73"
406       ry="73"
407       filterXX="url(#outerbevel)"
408       style="fill:#d40000;fill-opacity:1;"
409       stylexx="stroke:#000000;stroke-width:1px;"
410       onclick="colourpot_clicked(this)"
411       />
412    <text
413       xml:space="preserve"
414       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"
415       x="514.81232"
416       y="67.527832"
417       id="background-flag-text"
418       sodipodi:linespacing="100%"
419       onclick="colourpot_clicked(document.getElementById('colour-pot0'))"
420       >
421      <tspan
422             sodipodi:role="line"
423             x="514.81232"
424             y="67.527832"
425             id="tspan3463">Flag</tspan>
426      <tspan
427             sodipodi:role="line"
428             x="514.81232"
429             y="90.027832"
430             id="tspan3467">Background</tspan>
431      <tspan
432             sodipodi:role="line"
433             x="514.81232"
434             y="112.52783"
435             id="tspan3469">Colour</tspan>
436    </text>
437      </g>
438
439      <g>
440    <ellipse
441           id="colour-pot1"
442           cx="194"
443           cy="-69"
444           rx="50"
445           ry="50"
446       filterXX="url(#outerbevel)"
447           style="fill:#ffffff;visibility:visible;"
448       onclick="colourpot_clicked(this)"
449       />
450    <ellipse
451           id="colour-pot2"
452           cx="347"
453           cy="-95"
454           rx="50"
455           ry="50"
456       filterXX="url(#outerbevel)"
457           style="fill:#ffffff;fill-opacity:1;visibility:visible;"
458       onclick="colourpot_clicked(this)"
459       />
460    <ellipse
461           id="colour-pot3"
462           cx="501"
463           cy="-76"
464           rx="50"
465           ry="50"
466       filterXX="url(#outerbevel)"
467           style="fill:#29afaf;fill-opacity:1;visibility:visible"
468       onclick="colourpot_clicked(this)"
469       />
470    <ellipse
471           id="colour-pot4"
472           cx="652"
473           cy="-12"
474           rx="50"
475           ry="50"
476       filterXX="url(#outerbevel)"
477           style="fill:#008000;fill-opacity:1;visibility:visible;"
478       onclick="colourpot_clicked(this)"
479       />
480    <ellipse
481           id="colour-pot5"
482           cx="741"
483           cy="112"
484           rx="50"
485           ry="50"
486       filterXX="url(#outerbevel)"
487           style="fill:#800080;fill-opacity:1;visibility:visible;"
488       onclick="colourpot_clicked(this)"
489       />
490    <ellipse
491           id="colour-pot6"
492           cx="618"
493           cy="213"
494           rx="50"
495           ry="50"
496       filterXX="url(#outerbevel)"
497           style="fill:#ffff15;fill-opacity:1;visibility:visible;"
498       onclick="colourpot_clicked(this)"
499       />
500    <ellipse
501           id="colour-pot7"
502           cx="458"
503           cy="242"
504           rx="50"
505           ry="50"
506       filterXX="url(#outerbevel)"
507           style="fill:#ff6600;fill-opacity:1;visibility:visible;"
508       onclick="colourpot_clicked(this)"
509       />
510
511      </g>
512    </g>
513  </g>
514
515</svg>
516
517
518    </td>
519    <td style="width: 300px;" valign="top">
520      <style>
521    .sp-picker-container {
522          width: 200px;
523    }
524    .sp-input-container {
525      width: 130px;
526    }
527      </style>
528
529            <!-- The Spectrum colour picker -->
530            <div id="picker-group-div" style="position: relative; width: 290px;">
531
532          <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div0">
533        <input type="text" id="colour-picker0" name="colour-picker0">
534          </div>
535          <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div1">
536        <input type="text" id="colour-picker1" name="colour-picker1">
537          </div>
538          <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div2">
539        <input type="text" id="colour-picker2" name="colour-picker2">
540          </div>
541          <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div3">
542        <input type="text" id="colour-picker3" name="colour-picker3">
543          </div>
544          <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div4">
545        <input type="text" id="colour-picker4" name="colour-picker4">
546          </div>
547          <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div5">
548        <input type="text" id="colour-picker5" name="colour-picker5">
549          </div>
550          <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div6">
551        <input type="text" id="colour-picker6" name="colour-picker6">
552          </div>
553          <div style="position: absolute; left: 0px; top: 0px; display: none;" id="colour-picker-div7">
554        <input type="text" id="colour-picker7" name="colour-picker7">
555          </div>
556
557
558        </div>
559
560    </td>
561  </tr>
562</table>
563
564        </div> <!-- end of palette -->
565
566    <style>
567        .ui-slider-track {
568            background-color: #ECECEC;
569        }
570        .ui-slider-handle {
571            background-color: #a05a2c; /* used to be #E7924B; */
572        }
573    </style>
574
575        <p>Use slider to change the number of colours that will be used in your flag:</p>
576
577        <input id="numColoursSlider" style="color: black;" type="range" min="0" max="7" value="3" steps="7" onchange="showColourPots(this.value)"/>
578
579    </p>
580       
581    <script>
582
583/*
584        // Visibly toggle between which palette circle is currently selected
585        var selectedCircle = "circle1";
586        function newSelectedCircle(circleName)
587        {
588            document.getElementById(selectedCircle).style.stroke = '#000000';
589            document.getElementById(selectedCircle).style.strokeWidth = 1;
590
591            selectedCircle = circleName;
592
593            document.getElementById(selectedCircle).style.stroke = '#ffffff';
594            document.getElementById(selectedCircle).style.strokeWidth = 2;
595        }
596  */
597     
598        // Update the number of circles shown on the palette
599        function showColourPots(newValue)
600        {           
601
602            flagCanvasSettings.colourPots = [];
603
604        for (var i=0; i<numColourPots; i++) {
605                var circle = "colour-pot" + i;
606            if (i<=newValue) {
607                  var colourPot = document.getElementById(circle);
608                  colourPot.style.visibility = 'visible';
609          var colourHexStr = tinycolor(colourPot.style.fill).toHexString();
610
611                  flagCanvasSettings.colourPots[i] = colourHexStr;
612        }
613            else {
614                  document.getElementById(circle).style.visibility = 'hidden';
615        }
616            }
617        }       
618       
619    </script>
620      <!-- end of putting custom content -->       
621
622    </div> <!-- end story-page-->
623      </div><!-- /content -->
624
625    </div><!-- /page -->
626   
627  </body>
628</html>
Note: See TracBrowser for help on using the browser.