dougtesting.net

Create HTML Canvas prize wheels with Winwheel.js

[dougtesting.net @dougtesting]

@nzherald I do some electronics as a hobby. Googled the writing seen on the item in the photo. Looks like a 16 ohm 0.25w toy speaker. So not a battery.

[dougtesting.net @dougtesting]

@lex_courtney Hi. Sounds like its not even loading. Are there any messages in the JS console such as Winwheel not found etc? Please double-check the path the to JS file. Also note the npm version is pretty old, if possible I please use the version you can download from my site.

[dougtesting.net @dougtesting]

I just donated to @Wikipedia. Support free knowledge! #iloveWikipedia https://t.co/xk7CbazCMO

[dougtesting.net @dougtesting]

@Artem9n You will probably need to bind to the resize event of the window and call your function to re-draw the shapes. For example: window.addEventListener("resize", drawMyTriangle);

[dougtesting.net @dougtesting]

Version 2.8.0 of Winwheel.js has been released. This finally allows wheels to be responsive! Check out the tutorial here: https://t.co/Jv3v9ns5pf

[dougtesting.net @dougtesting]

@JO_Interstices Thank you. Yes it is; the power buttons are not essential to the operation of the wheel. The duration and spins properties of the animation can be set when the wheel is created. To spin the wheel just call theWheel.startAnimation(); function

[dougtesting.net @dougtesting]

@Enemy_O Hello. There are currently no options to rotate the text independently of the wheel. If the image is to remain stationary, perhaps use it as a background and make the fillStyle transparent (with rgba) so the background shows though and only the code-drawn text appears to rotate

[dougtesting.net @dougtesting]

@AnnaHoo40508437 Hello. Not in the currently released code. I have experimented with this in the past, most recently in 2018 and it is possible though performance degrades quickly with each additional wheel. https://t.co/48M8l472gW contains the experiment from 2018 if you wanted to try it.

[dougtesting.net @dougtesting]

@iamkadirul Hi. Yes you could show the result in a box after the wheel has stopped. Up to you to make the box though, there is nothing built in for that. As seen in this example https://t.co/q2JJ21OzTr you can get the indicatedSegment.text once the spinning has stopped.

[dougtesting.net @dougtesting]

@jozher1601 Hi. Can't see any issues with the code in the screenshot. Could you open an issue on https://t.co/ZfERDDGzAW with a copy of your code and some more details about the wheel you are creating? I'll take a look!

[dougtesting.net @dougtesting]

@xelakv Hi Alexander. No its not possible to use HTML in labels. Drawing on canvas is like drawing in MS paint. You can only use lines, basic shapes, and text. You can style text by adjusting the font, fillStyle, stokeStyle, line color and width. https://t.co/E20HzDNaaI

[dougtesting.net @dougtesting]

@amiryunas @LambdaSchool Sorry, honestly no idea. Never used react in my life. There must be ways other vanilla JS things are used in React. I would start by learning how that is done.

[dougtesting.net @dougtesting]

@Padgoi Yes, but you will need to code much of the JavaScript for this yourself. All values of the wheel can be altered after it has been created so you could combine this with some onClick events and form fields to let users set the properties of the wheel. See https://t.co/awY8K9WS19

[dougtesting.net @dougtesting]

@legenwario Someone recently opened a pull request on Github about this - perhaps this https://t.co/DUzHZPejxX will help?

[dougtesting.net @dougtesting]

@mmessmore Hi Mark. Yes its possible to adjust the segment sizes making some of them smaller than others. You can do this with the 'size' property which is only really seen in the Pie graphs tutorial https://t.co/OKmsxUrV8k also you should probably read https://t.co/1gJKMQshmx Thanks.

[dougtesting.net @dougtesting]

@hfh0926 If that did not work perhaps open an issue on Github https://t.co/ZfERDDGzAW and post a full copy of your code so I can see what the parameters are.

[dougtesting.net @dougtesting]

@hfh0926 Hi. Just want to check; you changed the outerRadius in the Winwheel.js file? Normally this is specified as a parameter when creating a wheel in the JS of a HTML page like in these examples https://t.co/q2JJ21OzTr perhaps it is still being passed as a parameter there?

[dougtesting.net @dougtesting]

@nhl16guy Kind of, there is no feature for this as such but you could do something similar to the hollow wheel in that the middle of the segment images are transparent so an image in the background shows through the center https://t.co/wi1PibQ7bl

[dougtesting.net @dougtesting]

@nhl16guy Thanks.Yes you can mix images and text. So see an example of this check out https://t.co/glV0RlTcg9

[dougtesting.net @dougtesting]

@samet2211 The alert box is a system object, and not subject to CSS. You would need to create an HTML element and mimic the alert() functionality. The jQuery UI Modal box does a lot of the work for you https://t.co/IbPGVwtBY3