How to instantiate JavaScript Object in C# Xamarin for WebView

Question

I am attempting to use winwheel.js it's a wheel of fortune like prize wheel I want to instantiate and use in Xamarin Android and display it in a WebView.

Here is the object code from the html

var theWheel = new Winwheel({
            "outerRadius"     : 180,        // Set outer radius so wheel fits inside the background.
            "innerRadius"     : 5,         // Make wheel hollow so segments don"t go all way to center.
            "textFontSize"    : 24,         // Set default font size for the segments.
            "textOrientation" : "vertical", // Make text vertial so goes down from the outside of wheel.
            "textAlignment"   : "outer", 
            "centerX"         : 175,
            "centerY"         : 185,                // Align text to outside of wheel.
            "numSegments"     : 2,         // Specify number of segments.
            "segments"        :             // Define segments including colour and text.
            [                               // font size and test colour overridden on backrupt segments.
               {
            "fillStyle" : "#eae56f",
            "text"      : "Data 1 (45%)",
            "size"      : 180,   // Note use of winwheelPercentToDegrees()
            "moreInfo"  : "<p>Data 1 is the biggest slice of the pie at 45% for this year!</p>"
        },
        {
            "fillStyle" : "#89f26e",
            "text"      : "Data 2 (20%)",
            "size"      : 180,
            "moreInfo"  : "<p>Data 2 is selling well making up 20% of our sales.</p>"
        }                ],
            "animation" :           // Specify the animation to use.
            {
                "type"     : "spinToStop",
                "duration" : 8,     // Duration in seconds.
                "spins"    : 3,     // Default number of complete spins.
                "callbackFinished" : alertPrize
            }
        });

Here is a function I am able to call to get the wheel spinning

function startSpin(stopAngle)
        {
            // Ensure that spinning can"t be clicked again while already running.
            if (wheelSpinning == false)
            {
                // Based on the power level selected adjust the number of spins for the wheel, the more times is has
                // to rotate with the duration of the animation the quicker the wheel spins.
                if (wheelPower == 1)
                {
                    theWheel.animation.spins = 3;
                }
                else if (wheelPower == 2)
                {
                    theWheel.animation.spins = 6;
                }
                else if (wheelPower == 3)
                {
                    theWheel.animation.spins = 9;
                }


                // Begin the spin animation by calling startAnimation on the wheel object.
                // Begin the spin animation by calling startAnimation on the wheel object.
                //TheWheel.animation.stopAngle = 97;
                //var stopAt = (91 + Math.floor((Math.random() * 43)))

                theWheel.animation.stopAngle = stopAngle;                                        
                theWheel.startAnimation();

                // Set to true so that power can"t be changed and spin button re-enabled during
                // the current animation. The user will have to reset before spinning again.
                wheelSpinning = true;
            }
        }

I need to adjust the paramaters of the wheel changing number of prize segments and change colors and text.

This is how I set up the webview

webView = (WebView)FindViewById(Resource.Id.webView1);
        webView.Visibility = ViewStates.Invisible;

        webView.Settings.JavaScriptEnabled = true;

        webView.ClearCache(true);
        webView.LoadUrl(secret);

This is how I am able to spin the wheel

webView.EvaluateJavascript(string.Format("startSpin({0})", 92), new 
JavascriptResult());

What I don't understand is how I initially instantiate the wheel so I can make necessary modifications

Please Help
Mark

Yes see comment below your answer thanks again. I marked your answer correct :) — Mark
– Mark, Commented Jan 3, 2019 at 15:54

Lucas Zhang · Accepted Answer · 2018-12-31 09:22:18Z

You can set the parameters in the constructor and pass the value in your application.

function CreateWheel(outerRadius,innerRadius,textFontSize...)
{
  var theWheel = new Winwheel({
        "outerRadius"     : outerRadius,        // Set outer radius so wheel fits inside the background.
        "innerRadius"     : innerRadius,         // Make wheel hollow so segments don"t go all way to center.
        "textFontSize"    : textFontSize,         // Set default font size for the segments.
        "textOrientation" : "vertical", // Make text vertial so goes down from the outside of wheel.
        "textAlignment"   : "outer", 
        "centerX"         : 175,
        "centerY"         : 185,                // Align text to outside of wheel.
        "numSegments"     : 2,         // Specify number of segments.
        "segments"        :             // Define segments including colour and text.
        [                               // font size and test colour overridden on backrupt segments.
           {
        "fillStyle" : "#eae56f",
        "text"      : "Data 1 (45%)",
        "size"      : 180,   // Note use of winwheelPercentToDegrees()
        "moreInfo"  : "<p>Data 1 is the biggest slice of the pie at 45% for this year!</p>"
    },
    {
        "fillStyle" : "#89f26e",
        "text"      : "Data 2 (20%)",
        "size"      : 180,
        "moreInfo"  : "<p>Data 2 is selling well making up 20% of our sales.</p>"
    }                ],
        "animation" :           // Specify the animation to use.
        {
            "type"     : "spinToStop",
            "duration" : 8,     // Duration in seconds.
            "spins"    : 3,     // Default number of complete spins.
            "callbackFinished" : alertPrize
        }
    });
}

And in your project

webView.EvaluateJavascript("CreateWheel(150,5,24)",new JavascriptResult());

Thanks Lucas, putting the instantiation code into a function is the correct answer. However it took me a while to figure out that you need to declare the wheel object outside of the function or it falls out of scope. So declare a global outside the function ..... var theWheel = null ..... and it works

Collectives™ on Stack Overflow

How to instantiate JavaScript Object in C# Xamarin for WebView

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related