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

Revision 29740, 8.3 KB (checked in by davidb, 6 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 *
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  </head>
8  <body>
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">
14     
15      <div data-role="content">
16     
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>
21     
22    <div class="story-page">
23     
24      <!-- put custom content here --> 
25      <span class="left story-icon research" ></span>
26      <h2>Choose Colour Palette</h2>
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>
181      <!-- end of putting custom content -->       
182
183    </div> <!-- end story-page-->
184      </div><!-- /content -->
185
186    </div><!-- /page -->
187   
188  </body>
189</html>
Note: See TracBrowser for help on using the browser.