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

Revision 29767, 7.8 KB (checked in by davidb, 6 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 *
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  </head>
9  <body>
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">
15     
16      <div data-role="content">
17     
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>
22     
23    <div class="story-page">
24     
25      <!-- put custom content here --> 
26      <span class="left story-icon research" ></span>
27      <h2>Choose Colour Palette</h2>
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">
31            <img src="images/palette/palette2.png" id="paletteImage" height="460" alt="Palette"></img>
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"/>
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>
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
88        <p>Use slider to change the number of colours that will be used in your flag:</p>
89
90        <input id="numColoursSlider" type="range" min="0" max="7" value="2" steps="7" onchange="showCircles(this.value)"/>
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>   
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: [
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"]
178            ]
179            //selectionPalette: [string]
180        });         
181    </script>
182      <!-- end of putting custom content -->       
183
184    </div> <!-- end story-page-->
185      </div><!-- /content -->
186
187    </div><!-- /page -->
188   
189  </body>
190</html>
Note: See TracBrowser for help on using the browser.