Skip to content

Commit f487bb7

Browse files
zarocknzzarocknz
authored
Merge pull request #10 from zarocknz/one-image-per-segment
One image per segment feature
2 parents 8692fbb + 3780158 commit f487bb7

File tree

14 files changed

+510
-6
lines changed

14 files changed

+510
-6
lines changed

‎Winwheel.js‎

Lines changed: 212 additions & 6 deletions
Large diffs are not rendered by default.

‎examples/one_image_per_segment/alex.png‎

36.8 KB
Loading

‎examples/one_image_per_segment/bruce.png‎

38.6 KB
Loading

‎examples/one_image_per_segment/index.html‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
<!--
2+
Winhweel.js one image per segment 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) 2016 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 - one image per segment</h1>
37+
<br />
38+
<p>Here is an example of a wheel created using one image per segment, also includes code drawn text.</p>
39+
<br />
40+
<p>Choose a power setting then press the Spin button.</p>
41+
<br />
42+
<table cellpadding="0" cellspacing="0" border="0">
43+
<tr>
44+
<td>
45+
<div class="power_controls">
46+
<br />
47+
<br />
48+
<table class="power" cellpadding="10" cellspacing="0">
49+
<tr>
50+
<th align="center">Power</th>
51+
</tr>
52+
<tr>
53+
<td width="78" align="center" id="pw3" onClick="powerSelected(3);">High</td>
54+
</tr>
55+
<tr>
56+
<td align="center" id="pw2" onClick="powerSelected(2);">Med</td>
57+
</tr>
58+
<tr>
59+
<td align="center" id="pw1" onClick="powerSelected(1);">Low</td>
60+
</tr>
61+
</table>
62+
<br />
63+
<img id="spin_button" src="spin_off.png" alt="Spin" onClick="startSpin();" />
64+
<br /><br />
65+
&nbsp;&nbsp;<a href="#" onClick="resetWheel(); return false;">Play Again</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(reset)
66+
</div>
67+
</td>
68+
<td width="421" height="564" class="the_wheel" align="center" valign="center">
69+
<canvas id="canvas" width="420" height="420">
70+
<p style="{color: white}" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>
71+
</canvas>
72+
</td>
73+
</tr>
74+
</table>
75+
<script>
76+
// Create new wheel object specifying the parameters at creation time.
77+
var theWheel = new Winwheel({
78+
'numSegments' : 8, // Specify number of segments.
79+
'outerRadius' : 200, // Set outer radius so wheel fits inside the background.
80+
'drawText' : true, // Code drawn text can be used with segment images.
81+
'textFontSize' : 16,
82+
'textOrientation' : 'curved',
83+
'textAlignment' : 'inner',
84+
'textMargin' : '90',
85+
'textFontFamily' : 'monospace',
86+
'textStrokeStyle' : 'black',
87+
'textLineWidth' : 3,
88+
'textFillStyle' : 'white',
89+
'drawMode' : 'segmentImage', // Must be segmentImage to draw wheel using one image per segemnt.
90+
'segments' : // Define segments including image and text.
91+
[
92+
{'image' : 'jane.png', 'text' : 'Jane'},
93+
{'image' : 'tom.png', 'text' : 'Tom'},
94+
{'image' : 'mary.png', 'text' : 'Mary'},
95+
{'image' : 'alex.png', 'text' : 'Alex'},
96+
{'image' : 'sarah.png', 'text' : 'Sarah'},
97+
{'image' : 'bruce.png', 'text' : 'Bruce'},
98+
{'image' : 'rose.png', 'text' : 'Rose'},
99+
{'image' : 'steve.png', 'text' : 'Steve'}
100+
],
101+
'animation' : // Specify the animation to use.
102+
{
103+
'type' : 'spinToStop',
104+
'duration' : 5, // Duration in seconds.
105+
'spins' : 8, // Number of complete spins.
106+
'callbackFinished' : 'alertPrize()'
107+
}
108+
});
109+
110+
// Vars used by the code in this page to do power controls.
111+
var wheelPower = 0;
112+
var wheelSpinning = false;
113+
114+
// -------------------------------------------------------
115+
// Function to handle the onClick on the power buttons.
116+
// -------------------------------------------------------
117+
function powerSelected(powerLevel)
118+
{
119+
// Ensure that power can't be changed while wheel is spinning.
120+
if (wheelSpinning == false)
121+
{
122+
// Reset all to grey incase this is not the first time the user has selected the power.
123+
document.getElementById('pw1').className = "";
124+
document.getElementById('pw2').className = "";
125+
document.getElementById('pw3').className = "";
126+
127+
// Now light up all cells below-and-including the one selected by changing the class.
128+
if (powerLevel >= 1)
129+
{
130+
document.getElementById('pw1').className = "pw1";
131+
}
132+
133+
if (powerLevel >= 2)
134+
{
135+
document.getElementById('pw2').className = "pw2";
136+
}
137+
138+
if (powerLevel >= 3)
139+
{
140+
document.getElementById('pw3').className = "pw3";
141+
}
142+
143+
// Set wheelPower var used when spin button is clicked.
144+
wheelPower = powerLevel;
145+
146+
// Light up the spin button by changing it's source image and adding a clickable class to it.
147+
document.getElementById('spin_button').src = "spin_on.png";
148+
document.getElementById('spin_button').className = "clickable";
149+
}
150+
}
151+
152+
// -------------------------------------------------------
153+
// Click handler for spin button.
154+
// -------------------------------------------------------
155+
function startSpin()
156+
{
157+
// Ensure that spinning can't be clicked again while already running.
158+
if (wheelSpinning == false)
159+
{
160+
// Based on the power level selected adjust the number of spins for the wheel, the more times is has
161+
// to rotate with the duration of the animation the quicker the wheel spins.
162+
if (wheelPower == 1)
163+
{
164+
theWheel.animation.spins = 3;
165+
}
166+
else if (wheelPower == 2)
167+
{
168+
theWheel.animation.spins = 8;
169+
}
170+
else if (wheelPower == 3)
171+
{
172+
theWheel.animation.spins = 15;
173+
}
174+
175+
// Disable the spin button so can't click again while wheel is spinning.
176+
document.getElementById('spin_button').src = "spin_off.png";
177+
document.getElementById('spin_button').className = "";
178+
179+
// Begin the spin animation by calling startAnimation on the wheel object.
180+
theWheel.startAnimation();
181+
182+
// Set to true so that power can't be changed and spin button re-enabled during
183+
// the current animation. The user will have to reset before spinning again.
184+
wheelSpinning = true;
185+
}
186+
}
187+
188+
// -------------------------------------------------------
189+
// Function for reset button.
190+
// -------------------------------------------------------
191+
function resetWheel()
192+
{
193+
theWheel.stopAnimation(false); // Stop the animation, false as param so does not call callback function.
194+
theWheel.rotationAngle = 0; // Re-set the wheel angle to 0 degrees.
195+
theWheel.draw(); // Call draw to render changes to the wheel.
196+
197+
document.getElementById('pw1').className = ""; // Remove all colours from the power level indicators.
198+
document.getElementById('pw2').className = "";
199+
document.getElementById('pw3').className = "";
200+
201+
wheelSpinning = false; // Reset to false to power buttons and spin can be clicked again.
202+
}
203+
204+
// -------------------------------------------------------
205+
// Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters.
206+
// -------------------------------------------------------
207+
function alertPrize()
208+
{
209+
// Get the segment indicated by the pointer on the wheel background which is at 0 degrees.
210+
var winningSegment = theWheel.getIndicatedSegment();
211+
212+
// Do basic alert of the segment text. You would probably want to do something more interesting with this information.
213+
alert(winningSegment.text + ' says Hi');
214+
}
215+
</script>
216+
</body>
217+
</html>

‎examples/one_image_per_segment/jane.png‎

42.1 KB
Loading

‎examples/one_image_per_segment/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: no-repeat;
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/one_image_per_segment/mary.png‎

40.6 KB
Loading

‎examples/one_image_per_segment/rose.png‎

43.1 KB
Loading

‎examples/one_image_per_segment/sarah.png‎

38.6 KB
Loading

‎examples/one_image_per_segment/spin_off.png‎

4.26 KB
Loading

0 commit comments

Comments
 (0)