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

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

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