source: other-projects/nz-flag-design/trunk/main-form/choose-palette.html@ 29767

Last change on this file since 29767 was 29767, checked in by davidb, 9 years ago

Changes in refining the project to be demoed at the end-of-summer presentations. Note this commit was made after the event.
  • Property svn:executable set to *
File size: 7.8 KB
RevLine 
[29549]1<!DOCTYPE html>
2<html id="story">
[29530]3 <head>
[29549]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>
[29767]7
[29530]8 </head>
9 <body>
[29549]10 <div data-role="page" id="choose-palette-page"
11 class="demo-page"
12 data-dom-cache="true"
13 data-prev="choose-canvas"
14 data-next="iterative-design">
[29530]15
[29549]16 <div data-role="content">
[29530]17
[29549]18 <div data-role="controlgroup" class="control" data-mini="true">
19 <a href="#" class="next right-button test-fwd" style="right:1%;"></a>
20 <a href="#" class="prev left-button idea-back" style="left:1%;"></a>
21 </div>
[29530]22
[29549]23 <div class="story-page">
[29530]24
[29549]25 <!-- put custom content here -->
26 <span class="left story-icon research" ></span>
27 <h2>Choose Colour Palette</h2>
[29740]28 <h3 style="font-size: large; position: relative">Click on a palette circle to select it, and change it's colour using the colour picker to the right</h3>
29 <p>
30 <div id="palette">
[29767]31 <img src="images/palette/palette2.png" id="paletteImage" height="460" alt="Palette"></img>
[29740]32
33 <div onclick="newSelectedCircle('circleBackground')" id="paletteCircleBackground" class="paletteCircle">
34 <svg height="104" width="104">
35 <circle id="circleBackground" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="#000066"/>
[29767]36 <text id="circleText1" x="32" y="35" fill="white" font-size="13">FLAG</text>
37 <text id="circleText2" x="5" y="55" fill="white" font-size="12">BACKGROUND</text>
38 <text id="circleText3" x="22" y="75" fill="white" font-size="13">COLOUR</text>
[29740]39 </svg>
40 </div>
41
42 <div onclick="newSelectedCircle('circle1')" id="paletteCircle1" class="paletteCircle">
43 <svg height="104" width="104">
44 <circle id="circle1" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="#CC0000"/>
45 </svg>
46 </div>
47
48 <div onclick="newSelectedCircle('circle2')" id="paletteCircle2" class="paletteCircle">
49 <svg height="104" width="104">
50 <circle id="circle2" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/>
51 </svg>
52 </div>
53
54 <div onclick="newSelectedCircle('circle3')" id="paletteCircle3" class="paletteCircle">
55 <svg height="104" width="104">
56 <circle id="circle3" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/>
57 </svg>
58 </div>
59
60 <div onclick="newSelectedCircle('circle4')" id="paletteCircle4" class="paletteCircle">
61 <svg height="104" width="104">
62 <circle id="circle4" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/>
63 </svg>
64 </div>
65
66 <div onclick="newSelectedCircle('circle5')" id="paletteCircle5" class="paletteCircle">
67 <svg height="104" width="104">
68 <circle id="circle5" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/>
69 </svg>
70 </div>
71
72 <div onclick="newSelectedCircle('circle6')" id="paletteCircle6" class="paletteCircle">
73 <svg height="104" width="104">
74 <circle id="circle6" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/>
75 </svg>
76 </div>
77
78 <div onclick="newSelectedCircle('circle7')" id="paletteCircle7" class="paletteCircle">
79 <svg height="104" width="104">
80 <circle id="circle7" cx="52" cy="52" r="50" stroke="black" stroke-width="1" fill="white"/>
81 </svg>
82 </div>
83
84 <!-- The Spectrum colour picker -->
85 <div id="pickerDiv"><input type='text' id="picker" value='#fffff0'/></div>
86 </div>
87
[29767]88 <p>Use slider to change the number of colours that will be used in your flag:</p>
[29740]89
90 <input id="numColoursSlider" type="range" min="0" max="7" value="2" steps="7" onchange="showCircles(this.value)"/>
[29767]91
92 <br />
93 <h2><a href="http://www.nava.org/flag-design/good-flag-bad-flag/5-basic-principles-flag-design" target="_blank">Help on flag design</a></h2>
[29740]94 </p>
95
96 <script>
97
98 // Visibly toggle between which palette circle is currently selected
99 var selectedCircle = "circle1";
100 function newSelectedCircle(circleName)
101 {
102 document.getElementById(selectedCircle).style.stroke = 'black';
103 document.getElementById(selectedCircle).style.strokeWidth = 1;
104
105 selectedCircle = circleName;
106
107 document.getElementById(selectedCircle).style.stroke = 'white';
108 document.getElementById(selectedCircle).style.strokeWidth = 2;
109 }
110
111 // Fill the currently selected circle when a colour is selected using the colour picker
112 $("#picker").on('change.spectrum', function(e, colour) {
113 document.getElementById(selectedCircle).style.fill = colour;
114
115 if (selectedCircle == "circleBackground")
116 {
117 // If white is chosen, change the background palette circle text to be black
118 if(colour == '#ffffff')
119 {
120 document.getElementById("circleText1").style.fill = "#000000";
121 document.getElementById("circleText2").style.fill = "#000000";
122 document.getElementById("circleText3").style.fill = "#000000";
123 }
124 else
125 {
126 document.getElementById("circleText1").style.fill = "#ffffff";
127 document.getElementById("circleText2").style.fill = "#ffffff";
128 document.getElementById("circleText3").style.fill = "#ffffff";
129 }
130
131 // Set the canvas background setting to the user's choice
132 flagCanvasSettings.backgroundColor = colour;
133 }
134 });
135
136 // Update the number of circles shown on the palette
137 function showCircles(newValue)
138 {
139 for (i = 1; i <= newValue; i++)
140 {
141 var circle = "paletteCircle" + i;
142 document.getElementById(circle).style.display = 'block';
143 }
144
145 if (newValue < 7)
146 {
147 for (i = 7; i > newValue; i--)
148 {
149 var circle = "paletteCircle" + i;
150 document.getElementById(circle).style.display = 'none';
151 }
152 }
153 }
154
155 // Colour picker documentation at https://bgrins.github.io/spectrum
156 $("#picker").spectrum({
157 flat: true,
158 showInput: true,
159 showInitial: true,
160 allowEmpty: false,
161 showAlpha: false,
162 showPalette: true,
163 togglePaletteOnly: false,
164 showSelectionPalette: true,
165 clickoutFiresChange: false,
166 cancelText: "Cancel",
167 chooseText: "Choose",
168 preferredFormat: "hex",
169 maxSelectionSize: 10,
170 palette: [
[29767]171 ["#000", "hsv 0 100 100"],
172 ["#444", "hsv 40 100 100"],
173 ["#666", "hsv 80 100 100"],
174 ["#999", "hsv 120 100 100"],
175 ["#ccc", "hsv 140 100 100"],
176 ["#eee", "hsv 160 100 100"],
177 ["#fff", "hsv 180 100 100"]
[29740]178 ]
179 //selectionPalette: [string]
180 });
181 </script>
[29549]182 <!-- end of putting custom content -->
[29530]183
[29549]184 </div> <!-- end story-page-->
185 </div><!-- /content -->
186
187 </div><!-- /page -->
188
189 </body>
[29530]190</html>
Note: See TracBrowser for help on using the repository browser.