Just created a new jquery plugin just for fun recently. Part of the algorithms are taken from some other places. What I did here is just playing around with the HTML5 canvas, but somehow I also package that as a jquery plugin.
Here is the demo below:-
Try to enter the things you want to put on the wheel, for example,
Press Add to add more items. After adding all your items, you can click the spin.
Note:
Feel free to modify the source as you will. There is an array of applications that can be based on this plugin. For example, you can integrate that with Yelp to create where to go to lunch today. This plugin is just a simple demonstration of what HTML5 is capable of, but HTML5 is far powerful that just that.
Here is the demo below:-
Try to enter the things you want to put on the wheel, for example,
- Where to go to lunch today
- Who is going to wash dishes today
- Who is paying for lunch today
- ... etc
Press Add to add more items. After adding all your items, you can click the spin.
Note:
Feel free to modify the source as you will. There is an array of applications that can be based on this plugin. For example, you can integrate that with Yelp to create where to go to lunch today. This plugin is just a simple demonstration of what HTML5 is capable of, but HTML5 is far powerful that just that.
IE User Note:
It is recommended you use the latest (modern) browsers, like Chrome / Firefox / IE9, because HTML5 is still relatively new stuff, older browser may not support those at this point. There are some libraries that can make your browser to recognize HTML5 tags, in our case of canvas, you can take a look at the Google's ExplorerCanvas.
Nice. How difficult would it be to modify this code to allow the user to hover over the wheel and "spin" or drag the wheel using his/her mouse?
ReplyDeleteHi Jim,
ReplyDeleteDepends on how fancy you want that to be. And it will require quite some code modifications. You may want to look at jquery draggable and the next step you can detect the mouse move direction ( basically you need to capture at least 2 points from the mouse move to make sure the direction is up or down, left or right ). And then after the mouse move, you can trigger the spin function.
Since you have access to the code, you can take a look at some of the functions there. And feel free to let me know how things work out for you.
I got nuttin???
ReplyDeleteIs it possible to make out not html5 version, but normal version that can see on all browser?
ReplyDeleteIs the slices able to customise to be a mixture of images and texts.
Is there a way to control where the wheel stops?
1) Well, as long as there is a drawing library that can mimic Canvas / SVG, it is possible to create that without HTML5
ReplyDelete2) Yes, it is possible to use both images and texts
3) Yes, you can change the math inside to control how the wheel behave
Is there any way of how to pass an image instead of text
ReplyDeleteHi Roy. New to HTML5 here and playing around with the wheel code. How would you add sound to this that plays when the spin button is pressed and stops when the wheel stops?
ReplyDeletethanks man!
Hi Jason,
ReplyDeleteHere is a tutorial on how to use javascript to interact with html5 audio - http://www.position-absolute.com/articles/introduction-to-the-html5-audio-tag-javascript-manipulation/
And for this spin wheel case,
[ For spin button click ]
For example, you can add an Event listener on "Spin wheel" button, and inside the callback, you can add javascript to interact with your audio.
But for a better solution, you can create a separate js module that do audio manipulation, and your new js module can still listen to the same "spin wheel button" click event.
Even better solution is trigger a custom event and then add a event listener, in this way, you can keep your code clean and decouple.
[ For wheel stops ]
You can trigger an event inside "stopRotateWheel" function, for example "wheelStopEvent", and then you have a listener that listen to that event, and use js to interact with the audio.
thanks for taking the time to respond to my post, Roy. Looks like I have some learning to do!
ReplyDeleteNo problem, you can always send me message if you have javascript or html5 question. I don't guarantee I know all the answers though :)
ReplyDeleteHi Roy,
ReplyDeleteI just look up the keyword spinning wheel and i found this post.
Is it possible to get the value from the pointed arrow.
Hi Ahmad,
ReplyDeleteYou can look at the source code, and look at the function "stopRotateWheel". Technically speaking, it is not the same as "getting the value from the pointed arrow" , however, it has the same visual result though.
The arrow is just a canvas, and the value return is based on translating the "arc degree" to index of the array you defined earlier in pplArray.
Hope it helps :)
Hello, How can I increase the number of items at the beginning? I mean more 12 items on the wheel at the beginning. I try increase the pplArray array, it is not work. If I want it have 60 items at beginning. How should I modify?
ReplyDeleteThanks!!
Hi Maxmas,
ReplyDeleteIf you look at the declared variables, there are
pplLength = 12, pplArray = params.pplArray;
Somehow I hardcoded the number there as an example
The best way to do is rearrange the variables to look something like below
pplArray = params.pplArray, pplLength = pplArray.length
So basically makes the pplLength to reads the actually 'length' of the array.
Hope it helps :)
I updated the source code to reflect that change.
DeleteHey! Looks the code! We're using it in one of our projects. Question though - this looks quite blurry on the iPad. Any ideas?
ReplyDeletehow to add images?
ReplyDeleteHii,
ReplyDeleteAm trying link this. I can see the whell but remaining face is coming empty means white color is appear how to ficx this
$('.canvas').spinwheel({
pplArray : ["1","2"]
});
this is very nice example. Keep up the good work.
ReplyDeleteIts really helpfull. thanks for sharing
ReplyDelete