Skip to content

Commit 689dae9

Browse files
zarocknzzarocknz
authored
Merge pull request #18 from zarocknz/multiwheel-examples
Created 2 part wheel example
2 parents 422890f + c5b1a8d commit 689dae9

File tree

5 files changed

+326
-0
lines changed

5 files changed

+326
-0
lines changed

‎examples/two_part_wheel/index.html‎

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
<!--
2+
Winhweel.js 2-part wheel example by Douglas McKechie @ www.dougtesting.net
3+
See website for tutorials and other documentation.
4+
5+
The MIT License (MIT)
6+
7+
Copyright (c) 2017 Douglas McKechie
8+
9+
Permission is hereby granted, free of charge, to any person obtaining a copy
10+
of this software and associated documentation files (the "Software"), to deal
11+
in the Software without restriction, including without limitation the rights
12+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
13+
copies of the Software, and to permit persons to whom the Software is
14+
furnished to do so, subject to the following conditions:
15+
16+
The above copyright notice and this permission notice shall be included in all
17+
copies or substantial portions of the Software.
18+
19+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
21+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
22+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
23+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
24+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
25+
SOFTWARE.
26+
-->
27+
<html>
28+
<head>
29+
<title>HTML5 Canvas Winning Wheel</title>
30+
<link rel="stylesheet" href="main.css" type="text/css" />
31+
<script type="text/javascript" src="../../Winwheel.js"></script>
32+
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
33+
</head>
34+
<body>
35+
<div align="center">
36+
<h1>Winwheel.js example wheel - 2 part wheel</h1>
37+
<p>
38+
Here is an example of a 2 part wheel, where there are 2 rings of segments. This is achieved by creating a second
39+
Winwheel object and positioning it over the top of the first wheel. One wheel acts as the "primary" and has the
40+
animation applied to it, the other wheel is the "secondary" which we just update during the animation loop to have
41+
the same rotation angle as the primary wheel.
42+
</p>
43+
<br />
44+
<p>Choose a power setting then press the Spin button. You will be alerted to the prize won when the spinning stops.</p>
45+
<br />
46+
<table cellpadding="0" cellspacing="0" border="0">
47+
<tr>
48+
<td>
49+
<div class="power_controls">
50+
<br />
51+
<br />
52+
<table class="power" cellpadding="10" cellspacing="0">
53+
<tr>
54+
<th align="center">Power</th>
55+
</tr>
56+
<tr>
57+
<td width="78" align="center" id="pw3" onClick="powerSelected(3);">High</td>
58+
</tr>
59+
<tr>
60+
<td align="center" id="pw2" onClick="powerSelected(2);">Med</td>
61+
</tr>
62+
<tr>
63+
<td align="center" id="pw1" onClick="powerSelected(1);">Low</td>
64+
</tr>
65+
</table>
66+
<br />
67+
<img id="spin_button" src="spin_off.png" alt="Spin" onClick="startSpin();" />
68+
</div>
69+
</td>
70+
<td width="438" height="582" class="the_wheel" align="center" valign="center">
71+
<canvas id="canvas" width="434" height="434">
72+
<p style="{color: white}" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>
73+
</canvas>
74+
</td>
75+
</tr>
76+
</table>
77+
<script>
78+
// Need to create the SECONDARY wheel first because on construct the variable which keeps track of the wheel to animate will
79+
// be set to the last created wheel, and we want the outer one the primary with the animation etc.
80+
var innerWheel = new Winwheel({
81+
'numSegments' : 4,
82+
'outerRadius' : 110, // Set the outer radius to make the wheel smaller than the outer wheel.
83+
'segments': [
84+
{'fillStyle' : '#eae56f', 'text' : 'Inner 1'},
85+
{'fillStyle' : '#89f26e', 'text' : 'Inner 2'},
86+
{'fillStyle' : '#7de6ef', 'text' : 'Inner 3'},
87+
{'fillStyle' : '#e7706f', 'text' : 'Inner 4'}
88+
]
89+
});
90+
91+
// Define the outer wheel, we will treat this as the PRIMARY which means it clears the canvas when drawing and also
92+
// gets the animaton applied to it. We must callback a function during the animation to move and draw the inner wheel
93+
// so the 2 wheels appear as one thing on the canvas.
94+
var outerWheel = new Winwheel({
95+
'numSegments': 8,
96+
'textMargin' : 0,
97+
'outerRadius' : 210,
98+
'innerRadius' : 110, // Set inner radius to the size of the inner wheel since the inner part of the wheel
99+
'segments': [ // is being drawn by the inner wheel we don't need to draw there.
100+
{'fillStyle' : '#8C8A42', 'text' : 'Outer 1'},
101+
{'fillStyle' : '#F2F0A8', 'text' : 'Outer 2'},
102+
{'fillStyle' : '#519142', 'text' : 'Outer 3'},
103+
{'fillStyle' : '#B7F7A8', 'text' : 'Outer 4'},
104+
{'fillStyle' : '#4B898F', 'text' : 'Outer 5'},
105+
{'fillStyle' : '#B1EFF5', 'text' : 'Outer 6'},
106+
{'fillStyle' : '#8A4342', 'text' : 'Outer 7'},
107+
{'fillStyle' : '#F0A9A8', 'text' : 'Outer 8'}
108+
],
109+
'animation':
110+
{
111+
'type': 'spinToStop', // Define animation more or less as normal, except for the callbackAfter().
112+
'duration': 5,
113+
'spins': 5,
114+
'easing': 'Power3.easeOut',
115+
'callbackAfter' : 'drawInnerWheel()', // Call back after each frame of the animation a function we can draw the inner wheel from.
116+
'callbackFinished': 'alertPrize()'
117+
}
118+
});
119+
120+
// Call draw on the outerWheel then the inner wheel to ensure that both are rendered on the canvas.
121+
outerWheel.draw();
122+
innerWheel.draw(false); // Pass false to stop it clearing the canvas and wiping the outer wheel.
123+
124+
// This function is called after the outer wheel has drawn during the animation.
125+
function drawInnerWheel()
126+
{
127+
// Update the rotationAngle of the innnerWheel to match that of the outer wheel - this is a big part of what
128+
// links them to appear as one 2-part wheel. Call the draw function passing false so the outer wheel is not wiped.
129+
innerWheel.rotationAngle = outerWheel.rotationAngle;
130+
innerWheel.draw(false);
131+
}
132+
133+
// Called when the animation has finished.
134+
function alertPrize()
135+
{
136+
// The the indicated segments from the 2 wheels.
137+
var winningInnerSegment = innerWheel.getIndicatedSegment();
138+
var winningOuterSegment = outerWheel.getIndicatedSegment();
139+
140+
// Alert the combination of prizes won.
141+
alert('You won ' + winningInnerSegment.text + ', ' + winningOuterSegment.text);
142+
143+
// Set things so power and spin button can be clicked again.
144+
wheelSpinning = false;
145+
146+
// Remove all colours from the power level indicators.
147+
document.getElementById('pw1').className = "";
148+
document.getElementById('pw2').className = "";
149+
document.getElementById('pw3').className = "";
150+
}
151+
152+
153+
// ================================================================================================================
154+
// FUNCTIONS FOR power controls below (All this is not necessary to actually create and spin a wheel)....
155+
// Vars used by the code in this page to do power controls.
156+
var wheelPower = 0;
157+
var wheelSpinning = false;
158+
159+
// -------------------------------------------------------
160+
// Function to handle the onClick on the power buttons.
161+
// -------------------------------------------------------
162+
function powerSelected(powerLevel)
163+
{
164+
// Ensure that power can't be changed while wheel is spinning.
165+
if (wheelSpinning == false)
166+
{
167+
// Reset all to grey incase this is not the first time the user has selected the power.
168+
document.getElementById('pw1').className = "";
169+
document.getElementById('pw2').className = "";
170+
document.getElementById('pw3').className = "";
171+
172+
// Now light up all cells below-and-including the one selected by changing the class.
173+
if (powerLevel >= 1)
174+
{
175+
document.getElementById('pw1').className = "pw1";
176+
}
177+
178+
if (powerLevel >= 2)
179+
{
180+
document.getElementById('pw2').className = "pw2";
181+
}
182+
183+
if (powerLevel >= 3)
184+
{
185+
document.getElementById('pw3').className = "pw3";
186+
}
187+
188+
// Set wheelPower var used when spin button is clicked.
189+
wheelPower = powerLevel;
190+
191+
// Light up the spin button by changing it's source image and adding a clickable class to it.
192+
document.getElementById('spin_button').src = "spin_on.png";
193+
document.getElementById('spin_button').className = "clickable";
194+
}
195+
}
196+
197+
// -------------------------------------------------------
198+
// Click handler for spin button.
199+
// -------------------------------------------------------
200+
function startSpin()
201+
{
202+
// Ensure that spinning can't be clicked again while already running.
203+
if (wheelSpinning == false)
204+
{
205+
// Reset things with inner and outer wheel so spinning will work as expected. Without the reset the
206+
// wheel will probably just move a small amount since the rotationAngle would be close to the targetAngle
207+
// figured out by the animation.
208+
outerWheel.stopAnimation(false); // Stop the animation, false as param so does not call callback function.
209+
outerWheel.rotationAngle = 0; // Re-set the wheel angle to 0 degrees.
210+
outerWheel.draw(); // Call draw to render changes to the wheel.
211+
innerWheel.rotationAngle = 0;
212+
innerWheel.draw(false);
213+
214+
// Based on the power level selected adjust the number of spins for the wheel, the more times is has
215+
// to rotate with the duration of the animation the quicker the wheel spins.
216+
if (wheelPower == 1)
217+
{
218+
outerWheel.animation.spins = 3; // Number of spins and/or duration can be altered to make the wheel
219+
outerWheel.animation.duration = 7; // appear to spin faster or slower.
220+
}
221+
else if (wheelPower == 2)
222+
{
223+
outerWheel.animation.spins = 8;
224+
outerWheel.animation.duration = 7;
225+
}
226+
else if (wheelPower == 3)
227+
{
228+
outerWheel.animation.spins = 15;
229+
}
230+
231+
// Disable the spin button so can't click again while wheel is spinning.
232+
document.getElementById('spin_button').src = "spin_off.png";
233+
document.getElementById('spin_button').className = "";
234+
235+
// Begin the spin animation by calling startAnimation on the wheel object.
236+
outerWheel.startAnimation();
237+
238+
// Set to true so that power can't be changed and spin button re-enabled during
239+
// the current animation. The user will have to reset before spinning again.
240+
wheelSpinning = true;
241+
}
242+
}
243+
</script>
244+
</body>
245+
</html>

‎examples/two_part_wheel/main.css‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/*
2+
Description:
3+
Contains all the styles for the winning wheel page.
4+
5+
Verison History:
6+
2012-01-28, Douglas McKechie
7+
- Created based off earlier version.
8+
9+
2015-09-26, Douglas McKechie
10+
- Minor updates for the 2.0 winwheel example.
11+
*/
12+
13+
body
14+
{
15+
font-family: arial;
16+
}
17+
18+
/* Sets the background image for the wheel */
19+
td.the_wheel
20+
{
21+
background-image: url(./wheel_back.png);
22+
background-position: center;
23+
background-repeat: none;
24+
}
25+
26+
/* Do some css reset on selected elements */
27+
h1, p
28+
{
29+
margin: 0;
30+
}
31+
32+
div.power_controls
33+
{
34+
margin-right:70px;
35+
}
36+
37+
div.html5_logo
38+
{
39+
margin-left:70px;
40+
}
41+
42+
/* Styles for the power selection controls */
43+
table.power
44+
{
45+
background-color: #cccccc;
46+
cursor: pointer;
47+
border:1px solid #333333;
48+
}
49+
50+
table.power th
51+
{
52+
background-color: white;
53+
cursor: default;
54+
}
55+
56+
td.pw1
57+
{
58+
background-color: #6fe8f0;
59+
}
60+
61+
td.pw2
62+
{
63+
background-color: #86ef6f;
64+
}
65+
66+
td.pw3
67+
{
68+
background-color: #ef6f6f;
69+
}
70+
71+
/* Style applied to the spin button once a power has been selected */
72+
.clickable
73+
{
74+
cursor: pointer;
75+
}
76+
77+
/* Other misc styles */
78+
.margin_bottom
79+
{
80+
margin-bottom: 5px;
81+
}

‎examples/two_part_wheel/spin_off.png‎

4.26 KB
Loading

‎examples/two_part_wheel/spin_on.png‎

4.66 KB
Loading

‎examples/two_part_wheel/wheel_back.png‎

19.7 KB
Loading

0 commit comments

Comments
 (0)