Thank you for purchasing our code. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!
In the page head add the below css files:
In the page footer add the below js files:
Place the canvas in the container where you want to display:
Add spin now button to handle spin wheel:
Spin Now!
In JavaScript file or inline code, initalize the wheel. Below code defined in the script.js file. All the option values are declares static value for demo purposes.
theWheel = new Luckywheel({
'numSegments': 3, // Specify number of segments.
'outerRadius': 212, // Set radius to so wheel fits the background.
'innerRadius': 60, // Set inner radius to make wheel hollow.
'textFontSize': 20, // Set font size accordingly.
'textMargin': 0, // Take out default margin.
'segments': [
{ fillStyle: "#FFC252", text: "20%", winresult: "You got 20% Discount",IsCouponCode:"true",CouponCode:"LUCKY20"},
{ fillStyle: "#24CFFF", text: "15%", winresult: "You got 15% Discount",IsCouponCode: "true", CouponCode: "LUCKY15" },
{ fillStyle: "gold", text: "No Discount", winresult: "Sorry Better Luck Next Time", IsCouponCode: "false", CouponCode: "" }
],
'wheelTextColor': "white", // Set font size accordingly.
'WheelStrokeColor': "white",
'WheelStrokeWidth': "3",
'animation': // Define spin to stop animation.
{
'type': 'spinToStop',
'duration': 5,
'spins': 8,
'callbackFinished': alertWinResult
},
});
In JavaScript file or inline code, initalize the wheel. Below code defined in the script.js file. All the option values are received dynamically from JSON file.
//load your JSON from settings.json file
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'settings.json', true);
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
// use of callback (xobj.responseText)
}
};
xobj.send(null);
}
var arrSegmentsList = [];
var theWheel = [];
function init() {
loadJSON(function (response) {
// Parse JSON string into object
actual_JSON = JSON.parse(response);
var segList = actual_JSON.data[0].segmentsList;
cookidy = actual_JSON.data[0].cookiedays;
var segno = 1;
for (i = 0; i < segList.length; i++) {
segmentsForSpin.push(segList[i].txtDisplayText);
var v = parseInt(segList[i].hdnGravityPerc);
var rang = v / 10;
var cntrec = Math.round(rang);
for (var p = 0; p < cntrec; p++) {
arrsp.push(segno);
}
arrSegmentsList.push({
fillStyle: segList[i].txtBackgroundColor,
text: segList[i].txtDisplayText,
winResult: segList[i].txtResultText,
isCouponExist: segList[i].IsCouponCode,
CouponCode: segList[i].CouponCode,
});
segno = segno + 1;
}
strarr = arrsp.join('|');
});
}
init();
var font_size = actual_JSON.data[0].WheelTextSize;
var gameover_text = actual_JSON.data[0].GameOverText;
var wheel_text_color = actual_JSON.data[0].WheelTextColor;
var wheel_stroke_color = actual_JSON.data[0].WheelStrokeColor;
var wheel_stroke_width = actual_JSON.data[0].WheelStrokeWidth;
var wheel_inner_radious = actual_JSON.data[0].InnerRadious;
var wheel_outer_radious = actual_JSON.data[0].OuterRadious;
theWheel = new Luckywheel({
'numSegments': arrSegmentsList.length, // Specify number of segments.
'outerRadius': parseInt(wheel_outer_radious), // Set outer radius
'innerRadius': parseInt(wheel_inner_radious), // Set inner radius
'textFontSize': font_size, // Set font size accordingly.
'textMargin': 0, // Take out default margin.
'segments': arrSegmentsList, // Object of segment list
'wheelTextColor': wheel_text_color, // Set text color accordingly.
'WheelStrokeColor': wheel_stroke_color, // Stroke color between each segment
'WheelStrokeWidth': wheel_stroke_width,
'animation': // Define spin to stop animation.
{
'type': 'spinToStop',
'duration': 5,
'spins': 8,
'callbackFinished': alertWinResult,
'callbackBefore': animbefore,
'callbackAfter': animafter,
'callbackSound': playSpinSound, // Function to call when the tick sound is to be triggered.
},
});
This callback function will call after the spin wheel complete the rotation.
function alertWinResult(selectedSegment) {
jQuery(".spin_pin").rotate(0);
$("#spinWinResult").text(gameover_text);
$(".power_controls").hide();
var response = "";
if (selectedSegment.isCouponExist == "true")
{
response += "" + selectedSegment.winResult + "
";
response += " Your Coupon Code is " + selectedSegment.CouponCode + "
";
}
else
{
response += "" + selectedSegment.winResult + "
";
}
$("#displayprice").html(response);
$('#spin').modal('show');
$(".reset_btn").show();
}
This callback function will call when spin wheel will rotate and it will play sound
var audio = new Audio('spinsound.mp3'); // Create audio object and load spinsound.mp3 file.
function playSpinSound() {
audio.pause();
audio.currentTime = 0;
// Play the sound.
audio.play();
}
Option Name | Type | Default Value |
---|---|---|
numSegments | int | 5 |
outerRadius | int | 212 |
innerRadius | int | 60 |
textFontSize | int | 20 |
textMargin | int | 0 |
segments | array | [{ fillStyle: "#FFC252", text: "20%", winresult: "You got 20% Discount",IsCouponCode:"true",CouponCode:"LUCKY20"}] |
wheelTextColor | string | white |
WheelStrokeColor | string | white |
WheelStrokeWidth | string | 3 |
animation | object | type : 'spinToStop', 'duration': 5, 'spins': 8,, 'callbackFinished': alertWinResult,'callbackSound': playSpinSound |
An example of a JSON file can be found
segmentsList
- an array of objects. The segments list used to add options of Segment Name, Segment background color, Result of segment, gravity of win, set coupon code for each segment if you need. Below are the different object of this array:
txtDisplayText
- String - This property is used to display text of segment name in Spin wheel.
txtResultText
- String - display result text of each segment
txtBackgroundColor
- String - display background color in spin wheel for each segment
ddlGravity
- String - display Gravity of win out of 100
hdnGravityPerc
- String - display percentage of Gravity of win out of 100%
IsCouponCode
- String - Used to check the coupon code added or not.
CouponCode
- String - coupon code of each segment if added.
OuterRadius
- String - Option to set outer radius of each segment
InnerRadius
- String - Option to set inner radius of each segment
WheelStrokeColor
- String - Option to set color for wheel stroke
WheelStrokeWidth
- String - displayed width of wheel stroke
WheelTextColor
- String - displayed text color of segment name in wheel
WheelTextSize
- String - displayed text size of segment name in wheel
GameOverText
- String - displayed game over text after spinned wheel
InvalidSpinText
- String - invalid text of any issue when spin wheel
IntroText
- String - introduction text to display on page
backgroundOption
- Array of object - The background option to set with text or image. Below are the option of background options:
type
- String - type property is used for image or text field
value
- String - displayed the value for text or image selected
centerWheelImage
- String - displayed the image of center image in spin wheel
WheelPinImage
- String - displayed the top pin image in spin wheel
enablediscountbar
- String - discount bar is enabled or not
countdowntime
- String - displayed count down time in minutes
position
- String - display where the position to display discount bar
showdesktop
- String - option used to display on/off spin wheel in desktop or not
desktopintent
- String - option used to display on/off When mouse leaves browser's viewport
DesktopIntervaltext
- String - display interval time in seconds for desktop
showmobile
- String - option used to display on/off spin wheel in mobile or not
mobileintent
- String - displayed on/off value to display intent for mobile viewport
mobileinterval
- String - displayed on/off value in mobile interval
MobileIntervaltext
- String - interval time in seconds for mobile interval text
cookiedays
- String - Cookie days to display spin wheel after days entered
Once again, thank you so much for purchasing this app. As we said at the beginning, we'd be glad to help you if you have any questions relating to this app. No guarantees, but we'll do our best to assist.
Alian Software