“Lucky Spin” Documentation by “Alian Software” v1.0


"Lucky Spin”

Created: January 2018
By: Alian Software
Email: support@aliansoftware.net

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!

Table of Contents

Getting Started - top

Step 1: - top

In the page head add the below css files:

Step 2: - top

In the page footer add the below js files:

Step 3: - top

Place the canvas in the container where you want to display:

Sorry, your browser doesn't support canvas. Please try again.

Step 4: - top

Add spin now button to handle spin wheel:

Spin Now!

Step 5: - top

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();
}

Options - top

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

Features - top

JSON Properties - top

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:


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:

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

Wheel Center & Pin Image - top

Customize Wheel - top

Color Options - top

Segments - top

Enable/Disable Discount - top

Trigger & Placement - top

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

Go To Table of Contents