Skip to content

Commit f45cdd7

Browse files
zarocknzzarocknz
authored
Merge pull request #15 from zarocknz/multiline-text
MAJOR: added Multiline text feature, image wheel example, fix bug in one image per segment.
2 parents 1d06808 + 2e20aba commit f45cdd7

File tree

8 files changed

+799
-462
lines changed

8 files changed

+799
-462
lines changed

‎Winwheel.js‎

Lines changed: 470 additions & 442 deletions
Large diffs are not rendered by default.

‎examples/basic_image_wheel/index.html‎

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

‎examples/basic_image_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/basic_image_wheel/planes.png‎

128 KB
Loading

‎examples/basic_image_wheel/spin_off.png‎

4.26 KB
Loading

‎examples/basic_image_wheel/spin_on.png‎

4.66 KB
Loading

‎examples/basic_image_wheel/wheel_back.png‎

15.4 KB
Loading

0 commit comments

Comments
 (0)