[jQuery] Re: Implementing a Knob Control
thanks riyono On Jan 26, 9:51 pm, Andronicus Riyono riy...@gmail.com wrote: On Tue, Jan 27, 2009 at 8:10 AM, Ricardo Tomasi ricardob...@gmail.comwrote: I have to disagree. Precise circular motion is very hard with a mouse, specially because most computers have cursor acceleration enabled - it's impossible to draw a round shape. The up/down interaction method is much easier to control and a simple explanation should be enough to get someone started. - ricardo I was thinking that I've seen something like this (knob-thingy) on jquery UI draggable, and after some searching, found it (not in jquery ui but in interface.eyecon.ro): http://interface.eyecon.ro/demos/drag_vr.html IMHO, this one is usable :) Best regards, Riyono -- - There's nothing impossible for an open mind -
[jQuery] Re: Implementing a Knob Control
Do you mean a gague control? IE some sort of rotary control vs a slider? From: jquery-en@googlegroups.com on behalf of legofish Sent: Mon 26/01/2009 14:49 To: jQuery (English) Subject: [jQuery] Implementing a Knob Control Hi, I need to implement a knob control for one of my projects (eg. a volume knob). Ideally I would like to use jquery. I have spent some time searching for any resources to get started. Not only I can't find anything in jquery, I can't find anything even resembling a knob implementation in javascript in general. I did find a few sites who sell VB or .net knob controls, but nothing in js. anyway, not sure if anyone can help, but any hints towards a resource or starting point would be much appreciated. This e-mail is intended solely for the addressee and is strictly confidential; if you are not the addressee please destroy the message and all copies. Any opinion or information contained in this email or its attachments that does not relate to the business of Kainos is personal to the sender and is not given by or endorsed by Kainos. Kainos is the trading name of Kainos Software Limited, registered in Northern Ireland under company number: NI19370, having its registered offices at: Kainos House, 4-6 Upper Crescent, Belfast, BT7 1NT, Northern Ireland. Registered in the UK for VAT under number: 454598802 and registered in Ireland for VAT under number: 9950340E. This email has been scanned for all known viruses by MessageLabs but is not guaranteed to be virus free; further terms and conditions may be found on our website - www.kainos.com
[jQuery] Re: Implementing a Knob Control
Legofish, I've got a couple ideas which might get the job done, but they all depend on what style of knob you want. Take a look around a google image search, and see if you can find a good representation of the type of knob you want. Then we can go from there. :) On Jan 26, 10:03 am, James Hughes j.hug...@kainos.com wrote: Do you mean a gague control? IE some sort of rotary control vs a slider? From: jquery-en@googlegroups.com on behalf of legofish Sent: Mon 26/01/2009 14:49 To: jQuery (English) Subject: [jQuery] Implementing a Knob Control Hi, I need to implement a knob control for one of my projects (eg. a volume knob). Ideally I would like to use jquery. I have spent some time searching for any resources to get started. Not only I can't find anything in jquery, I can't find anything even resembling a knob implementation in javascript in general. I did find a few sites who sell VB or .net knob controls, but nothing in js. anyway, not sure if anyone can help, but any hints towards a resource or starting point would be much appreciated. This e-mail is intended solely for the addressee and is strictly confidential; if you are not the addressee please destroy the message and all copies. Any opinion or information contained in this email or its attachments that does not relate to the business of Kainos is personal to the sender and is not given by or endorsed by Kainos. Kainos is the trading name of Kainos Software Limited, registered in Northern Ireland under company number: NI19370, having its registered offices at: Kainos House, 4-6 Upper Crescent, Belfast, BT7 1NT, Northern Ireland. Registered in the UK for VAT under number: 454598802 and registered in Ireland for VAT under number: 9950340E. This email has been scanned for all known viruses by MessageLabs but is not guaranteed to be virus free; further terms and conditions may be found on our website -www.kainos.com
[jQuery] Re: Implementing a Knob Control
James, yes I mean a rotary control. Eric, here's a real-world example of what I'm trying to implement: http://www.niji.or.jp/home/k-nisi/sa-9900-h.jpg I'm looking for control knobs such as those found on a stereo; both continuous ones such as a volume knob, and n-step knobs such as the function knob in that picture, where the knob can only be rotated in n steps. I found some leads which I was going to try. I was going to mix this approach: http://blog.circlecube.com/2008/03/tutorial/interactive-spin-actionscript-tutorial/ with the jquery rotate plugin: http://stackoverflow.com/questions/365820/howto-rotate-image-using-jquery-rotate-plugin Still, your help would be immensely appreciated. Of course I would want the knob image to look like it's rotating, but I also want the control to return a value depending on its position, similar to how a slider returns a value. Thanks again On Jan 26, 10:20 am, Eric Garside gars...@gmail.com wrote: Legofish, I've got a couple ideas which might get the job done, but they all depend on what style of knob you want. Take a look around a google image search, and see if you can find a good representation of the type of knob you want. Then we can go from there. :) On Jan 26, 10:03 am, James Hughes j.hug...@kainos.com wrote: Do you mean a gague control? IE some sort of rotary control vs a slider? From: jquery-en@googlegroups.com on behalf of legofish Sent: Mon 26/01/2009 14:49 To: jQuery (English) Subject: [jQuery] Implementing a Knob Control Hi, I need to implement a knob control for one of my projects (eg. a volume knob). Ideally I would like to use jquery. I have spent some time searching for any resources to get started. Not only I can't find anything in jquery, I can't find anything even resembling a knob implementation in javascript in general. I did find a few sites who sell VB or .net knob controls, but nothing in js. anyway, not sure if anyone can help, but any hints towards a resource or starting point would be much appreciated. This e-mail is intended solely for the addressee and is strictly confidential; if you are not the addressee please destroy the message and all copies. Any opinion or information contained in this email or its attachments that does not relate to the business of Kainos is personal to the sender and is not given by or endorsed by Kainos. Kainos is the trading name of Kainos Software Limited, registered in Northern Ireland under company number: NI19370, having its registered offices at: Kainos House, 4-6 Upper Crescent, Belfast, BT7 1NT, Northern Ireland. Registered in the UK for VAT under number: 454598802 and registered in Ireland for VAT under number: 9950340E. This email has been scanned for all known viruses by MessageLabs but is not guaranteed to be virus free; further terms and conditions may be found on our website -www.kainos.com
[jQuery] Re: Implementing a Knob Control
by the way by this approach I meant the second example on that page. On Jan 26, 1:54 pm, legofish pen...@gmail.com wrote: James, yes I mean a rotary control. Eric, here's a real-world example of what I'm trying to implement: http://www.niji.or.jp/home/k-nisi/sa-9900-h.jpg I'm looking for control knobs such as those found on a stereo; both continuous ones such as a volume knob, and n-step knobs such as the function knob in that picture, where the knob can only be rotated in n steps. I found some leads which I was going to try. I was going to mix this approach:http://blog.circlecube.com/2008/03/tutorial/interactive-spin-actionsc... with the jquery rotate plugin:http://stackoverflow.com/questions/365820/howto-rotate-image-using-jq... Still, your help would be immensely appreciated. Of course I would want the knob image to look like it's rotating, but I also want the control to return a value depending on its position, similar to how a slider returns a value. Thanks again On Jan 26, 10:20 am, Eric Garside gars...@gmail.com wrote: Legofish, I've got a couple ideas which might get the job done, but they all depend on what style of knob you want. Take a look around a google image search, and see if you can find a good representation of the type of knob you want. Then we can go from there. :) On Jan 26, 10:03 am, James Hughes j.hug...@kainos.com wrote: Do you mean a gague control? IE some sort of rotary control vs a slider? From: jquery-en@googlegroups.com on behalf of legofish Sent: Mon 26/01/2009 14:49 To: jQuery (English) Subject: [jQuery] Implementing a Knob Control Hi, I need to implement a knob control for one of my projects (eg. a volume knob). Ideally I would like to use jquery. I have spent some time searching for any resources to get started. Not only I can't find anything in jquery, I can't find anything even resembling a knob implementation in javascript in general. I did find a few sites who sell VB or .net knob controls, but nothing in js. anyway, not sure if anyone can help, but any hints towards a resource or starting point would be much appreciated. This e-mail is intended solely for the addressee and is strictly confidential; if you are not the addressee please destroy the message and all copies. Any opinion or information contained in this email or its attachments that does not relate to the business of Kainos is personal to the sender and is not given by or endorsed by Kainos. Kainos is the trading name of Kainos Software Limited, registered in Northern Ireland under company number: NI19370, having its registered offices at: Kainos House, 4-6 Upper Crescent, Belfast, BT7 1NT, Northern Ireland. Registered in the UK for VAT under number: 454598802 and registered in Ireland for VAT under number: 9950340E. This email has been scanned for all known viruses by MessageLabs but is not guaranteed to be virus free; further terms and conditions may be found on our website -www.kainos.com
[jQuery] Re: Implementing a Knob Control
Canvas is probably the most elegant way to go, especially given the type of knobs you want. My suggestion is to find a decent resolution image of the knob you want, then use jquery and canvas to move the knob, and just keep track of the position. Be aware though, the mouse isn't really well designed for a knob kind of motion. On Jan 26, 1:56 pm, legofish pen...@gmail.com wrote: by the way by this approach I meant the second example on that page. On Jan 26, 1:54 pm, legofish pen...@gmail.com wrote: James, yes I mean a rotary control. Eric, here's a real-world example of what I'm trying to implement: http://www.niji.or.jp/home/k-nisi/sa-9900-h.jpg I'm looking for control knobs such as those found on a stereo; both continuous ones such as a volume knob, and n-step knobs such as the function knob in that picture, where the knob can only be rotated in n steps. I found some leads which I was going to try. I was going to mix this approach:http://blog.circlecube.com/2008/03/tutorial/interactive-spin-actionsc... with the jquery rotate plugin:http://stackoverflow.com/questions/365820/howto-rotate-image-using-jq... Still, your help would be immensely appreciated. Of course I would want the knob image to look like it's rotating, but I also want the control to return a value depending on its position, similar to how a slider returns a value. Thanks again On Jan 26, 10:20 am, Eric Garside gars...@gmail.com wrote: Legofish, I've got a couple ideas which might get the job done, but they all depend on what style of knob you want. Take a look around a google image search, and see if you can find a good representation of the type of knob you want. Then we can go from there. :) On Jan 26, 10:03 am, James Hughes j.hug...@kainos.com wrote: Do you mean a gague control? IE some sort of rotary control vs a slider? From: jquery-en@googlegroups.com on behalf of legofish Sent: Mon 26/01/2009 14:49 To: jQuery (English) Subject: [jQuery] Implementing a Knob Control Hi, I need to implement a knob control for one of my projects (eg. a volume knob). Ideally I would like to use jquery. I have spent some time searching for any resources to get started. Not only I can't find anything in jquery, I can't find anything even resembling a knob implementation in javascript in general. I did find a few sites who sell VB or .net knob controls, but nothing in js. anyway, not sure if anyone can help, but any hints towards a resource or starting point would be much appreciated. This e-mail is intended solely for the addressee and is strictly confidential; if you are not the addressee please destroy the message and all copies. Any opinion or information contained in this email or its attachments that does not relate to the business of Kainos is personal to the sender and is not given by or endorsed by Kainos. Kainos is the trading name of Kainos Software Limited, registered in Northern Ireland under company number: NI19370, having its registered offices at: Kainos House, 4-6 Upper Crescent, Belfast, BT7 1NT, Northern Ireland. Registered in the UK for VAT under number: 454598802 and registered in Ireland for VAT under number: 9950340E. This email has been scanned for all known viruses by MessageLabs but is not guaranteed to be virus free; further terms and conditions may be found on our website -www.kainos.com
[jQuery] Re: Implementing a Knob Control
To add canvas support to IE you can use the following script (slower, but works): http://code.google.com/p/explorercanvas/ On Mon, Jan 26, 2009 at 2:41 PM, Eric Garside gars...@gmail.com wrote: Canvas is probably the most elegant way to go, especially given the type of knobs you want. My suggestion is to find a decent resolution image of the knob you want, then use jquery and canvas to move the knob, and just keep track of the position. Be aware though, the mouse isn't really well designed for a knob kind of motion. On Jan 26, 1:56 pm, legofish pen...@gmail.com wrote: by the way by this approach I meant the second example on that page. On Jan 26, 1:54 pm, legofish pen...@gmail.com wrote: James, yes I mean a rotary control. Eric, here's a real-world example of what I'm trying to implement: http://www.niji.or.jp/home/k-nisi/sa-9900-h.jpg I'm looking for control knobs such as those found on a stereo; both continuous ones such as a volume knob, and n-step knobs such as the function knob in that picture, where the knob can only be rotated in n steps. I found some leads which I was going to try. I was going to mix this approach: http://blog.circlecube.com/2008/03/tutorial/interactive-spin-actionsc... with the jquery rotate plugin: http://stackoverflow.com/questions/365820/howto-rotate-image-using-jq... Still, your help would be immensely appreciated. Of course I would want the knob image to look like it's rotating, but I also want the control to return a value depending on its position, similar to how a slider returns a value. Thanks again On Jan 26, 10:20 am, Eric Garside gars...@gmail.com wrote: Legofish, I've got a couple ideas which might get the job done, but they all depend on what style of knob you want. Take a look around a google image search, and see if you can find a good representation of the type of knob you want. Then we can go from there. :) On Jan 26, 10:03 am, James Hughes j.hug...@kainos.com wrote: Do you mean a gague control? IE some sort of rotary control vs a slider? From: jquery-en@googlegroups.com on behalf of legofish Sent: Mon 26/01/2009 14:49 To: jQuery (English) Subject: [jQuery] Implementing a Knob Control Hi, I need to implement a knob control for one of my projects (eg. a volume knob). Ideally I would like to use jquery. I have spent some time searching for any resources to get started. Not only I can't find anything in jquery, I can't find anything even resembling a knob implementation in javascript in general. I did find a few sites who sell VB or .net knob controls, but nothing in js. anyway, not sure if anyone can help, but any hints towards a resource or starting point would be much appreciated. This e-mail is intended solely for the addressee and is strictly confidential; if you are not the addressee please destroy the message and all copies. Any opinion or information contained in this email or its attachments that does not relate to the business of Kainos is personal to the sender and is not given by or endorsed by Kainos. Kainos is the trading name of Kainos Software Limited, registered in Northern Ireland under company number: NI19370, having its registered offices at: Kainos House, 4-6 Upper Crescent, Belfast, BT7 1NT, Northern Ireland. Registered in the UK for VAT under number: 454598802 and registered in Ireland for VAT under number: 9950340E. This email has been scanned for all known viruses by MessageLabs but is not guaranteed to be virus free; further terms and conditions may be found on our website -www.kainos.com
[jQuery] Re: Implementing a Knob Control
If I could second this from a usability perspective. I've used a flash-based interface that had a rotating knob. Moving that with a mouse was counter-intuitive. Dragging a straight slider (horizontal or vertical) just felt a lot better. JK -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of Eric Garside Sent: Monday, January 26, 2009 11:41 AM To: jQuery (English) Subject: [jQuery] Re: Implementing a Knob Control Canvas is probably the most elegant way to go, especially given the type of knobs you want. My suggestion is to find a decent resolution image of the knob you want, then use jquery and canvas to move the knob, and just keep track of the position. Be aware though, the mouse isn't really well designed for a knob kind of motion. On Jan 26, 1:56 pm, legofish pen...@gmail.com wrote: by the way by this approach I meant the second example on that page. On Jan 26, 1:54 pm, legofish pen...@gmail.com wrote: James, yes I mean a rotary control. Eric, here's a real-world example of what I'm trying to implement: http://www.niji.or.jp/home/k-nisi/sa-9900-h.jpg I'm looking for control knobs such as those found on a stereo; both continuous ones such as a volume knob, and n-step knobs such as the function knob in that picture, where the knob can only be rotated in n steps. I found some leads which I was going to try. I was going to mix this approach:http://blog.circlecube.com/2008/03/tutorial/interactive-spin-action sc... with the jquery rotate plugin:http://stackoverflow.com/questions/365820/howto-rotate-image-using-jq ... Still, your help would be immensely appreciated. Of course I would want the knob image to look like it's rotating, but I also want the control to return a value depending on its position, similar to how a slider returns a value. Thanks again On Jan 26, 10:20 am, Eric Garside gars...@gmail.com wrote: Legofish, I've got a couple ideas which might get the job done, but they all depend on what style of knob you want. Take a look around a google image search, and see if you can find a good representation of the type of knob you want. Then we can go from there. :) On Jan 26, 10:03 am, James Hughes j.hug...@kainos.com wrote: Do you mean a gague control? IE some sort of rotary control vs a slider? From: jquery-en@googlegroups.com on behalf of legofish Sent: Mon 26/01/2009 14:49 To: jQuery (English) Subject: [jQuery] Implementing a Knob Control Hi, I need to implement a knob control for one of my projects (eg. a volume knob). Ideally I would like to use jquery. I have spent some time searching for any resources to get started. Not only I can't find anything in jquery, I can't find anything even resembling a knob implementation in javascript in general. I did find a few sites who sell VB or .net knob controls, but nothing in js. anyway, not sure if anyone can help, but any hints towards a resource or starting point would be much appreciated. This e-mail is intended solely for the addressee and is strictly confidential; if you are not the addressee please destroy the message and all copies. Any opinion or information contained in this email or its attachments that does not relate to the business of Kainos is personal to the sender and is not given by or endorsed by Kainos. Kainos is the trading name of Kainos Software Limited, registered in Northern Ireland under company number: NI19370, having its registered offices at: Kainos House, 4-6 Upper Crescent, Belfast, BT7 1NT, Northern Ireland. Registered in the UK for VAT under number: 454598802 and registered in Ireland for VAT under number: 9950340E. This email has been scanned for all known viruses by MessageLabs but is not guaranteed to be virus free; further terms and conditions may be found on our website -www.kainos.com
[jQuery] Re: Implementing a Knob Control
thanks jay for the IE support link, I was just looking for that. Also thanks Eric for the suggestion, I'm going to try the other approach first and if it ends up being too complex I'll give canvas a shot. Jeffrey, I sort of agree with you, but I also think the main reason why knobs are such a UI nightmare is because they have never been done right. I already have the same interface implemented using a straight slider. I want to create a knob version of the same thing (I like to try and do it the *right* way) and then have the two versions formally tested in usability groups (I'm lucky to have the resources for the tests) and see if there's any merit in using the knobs Anyway, thanks all. On Jan 26, 2:48 pm, Jeffrey Kretz jeffkr...@hotmail.com wrote: If I could second this from a usability perspective. I've used a flash-based interface that had a rotating knob. Moving that with a mouse was counter-intuitive. Dragging a straight slider (horizontal or vertical) just felt a lot better. JK -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of Eric Garside Sent: Monday, January 26, 2009 11:41 AM To: jQuery (English) Subject: [jQuery] Re: Implementing a Knob Control Canvas is probably the most elegant way to go, especially given the type of knobs you want. My suggestion is to find a decent resolution image of the knob you want, then use jquery and canvas to move the knob, and just keep track of the position. Be aware though, the mouse isn't really well designed for a knob kind of motion. On Jan 26, 1:56 pm, legofish pen...@gmail.com wrote: by the way by this approach I meant the second example on that page. On Jan 26, 1:54 pm, legofish pen...@gmail.com wrote: James, yes I mean a rotary control. Eric, here's a real-world example of what I'm trying to implement: http://www.niji.or.jp/home/k-nisi/sa-9900-h.jpg I'm looking for control knobs such as those found on a stereo; both continuous ones such as a volume knob, and n-step knobs such as the function knob in that picture, where the knob can only be rotated in n steps. I found some leads which I was going to try. I was going to mix this approach:http://blog.circlecube.com/2008/03/tutorial/interactive-spin-action sc... with the jquery rotate plugin:http://stackoverflow.com/questions/365820/howto-rotate-image-using-jq ... Still, your help would be immensely appreciated. Of course I would want the knob image to look like it's rotating, but I also want the control to return a value depending on its position, similar to how a slider returns a value. Thanks again On Jan 26, 10:20 am, Eric Garside gars...@gmail.com wrote: Legofish, I've got a couple ideas which might get the job done, but they all depend on what style of knob you want. Take a look around a google image search, and see if you can find a good representation of the type of knob you want. Then we can go from there. :) On Jan 26, 10:03 am, James Hughes j.hug...@kainos.com wrote: Do you mean a gague control? IE some sort of rotary control vs a slider? From: jquery-en@googlegroups.com on behalf of legofish Sent: Mon 26/01/2009 14:49 To: jQuery (English) Subject: [jQuery] Implementing a Knob Control Hi, I need to implement a knob control for one of my projects (eg. a volume knob). Ideally I would like to use jquery. I have spent some time searching for any resources to get started. Not only I can't find anything in jquery, I can't find anything even resembling a knob implementation in javascript in general. I did find a few sites who sell VB or .net knob controls, but nothing in js. anyway, not sure if anyone can help, but any hints towards a resource or starting point would be much appreciated. This e-mail is intended solely for the addressee and is strictly confidential; if you are not the addressee please destroy the message and all copies. Any opinion or information contained in this email or its attachments that does not relate to the business of Kainos is personal to the sender and is not given by or endorsed by Kainos. Kainos is the trading name of Kainos Software Limited, registered in Northern Ireland under company number: NI19370, having its registered offices at: Kainos House, 4-6 Upper Crescent, Belfast, BT7 1NT, Northern Ireland. Registered in the UK for VAT under number: 454598802 and registered in Ireland for VAT under number: 9950340E. This email has been scanned for all known viruses by MessageLabs but is not guaranteed to be virus free; further terms and conditions may be found on our website -www.kainos.com
[jQuery] Re: Implementing a Knob Control
Audio editing software has lots of knobs, and they're not hard to use. The thing is you don't turn them with a circular motion, but you click and drag up/down or right/left just like a slider, the rotary control gives you visual feedback while saving a lot of space. This was real fun: http://jsbin.com/apida/ http://jsbin.com/apida/edit thanks to raphaeljs.com cheers, - ricardo On Jan 26, 5:48 pm, Jeffrey Kretz jeffkr...@hotmail.com wrote: If I could second this from a usability perspective. I've used a flash-based interface that had a rotating knob. Moving that with a mouse was counter-intuitive. Dragging a straight slider (horizontal or vertical) just felt a lot better. JK -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of Eric Garside Sent: Monday, January 26, 2009 11:41 AM To: jQuery (English) Subject: [jQuery] Re: Implementing a Knob Control Canvas is probably the most elegant way to go, especially given the type of knobs you want. My suggestion is to find a decent resolution image of the knob you want, then use jquery and canvas to move the knob, and just keep track of the position. Be aware though, the mouse isn't really well designed for a knob kind of motion. On Jan 26, 1:56 pm, legofish pen...@gmail.com wrote: by the way by this approach I meant the second example on that page. On Jan 26, 1:54 pm, legofish pen...@gmail.com wrote: James, yes I mean a rotary control. Eric, here's a real-world example of what I'm trying to implement: http://www.niji.or.jp/home/k-nisi/sa-9900-h.jpg I'm looking for control knobs such as those found on a stereo; both continuous ones such as a volume knob, and n-step knobs such as the function knob in that picture, where the knob can only be rotated in n steps. I found some leads which I was going to try. I was going to mix this approach:http://blog.circlecube.com/2008/03/tutorial/interactive-spin-action sc... with the jquery rotate plugin:http://stackoverflow.com/questions/365820/howto-rotate-image-using-jq ... Still, your help would be immensely appreciated. Of course I would want the knob image to look like it's rotating, but I also want the control to return a value depending on its position, similar to how a slider returns a value. Thanks again On Jan 26, 10:20 am, Eric Garside gars...@gmail.com wrote: Legofish, I've got a couple ideas which might get the job done, but they all depend on what style of knob you want. Take a look around a google image search, and see if you can find a good representation of the type of knob you want. Then we can go from there. :) On Jan 26, 10:03 am, James Hughes j.hug...@kainos.com wrote: Do you mean a gague control? IE some sort of rotary control vs a slider? From: jquery-en@googlegroups.com on behalf of legofish Sent: Mon 26/01/2009 14:49 To: jQuery (English) Subject: [jQuery] Implementing a Knob Control Hi, I need to implement a knob control for one of my projects (eg. a volume knob). Ideally I would like to use jquery. I have spent some time searching for any resources to get started. Not only I can't find anything in jquery, I can't find anything even resembling a knob implementation in javascript in general. I did find a few sites who sell VB or .net knob controls, but nothing in js. anyway, not sure if anyone can help, but any hints towards a resource or starting point would be much appreciated. This e-mail is intended solely for the addressee and is strictly confidential; if you are not the addressee please destroy the message and all copies. Any opinion or information contained in this email or its attachments that does not relate to the business of Kainos is personal to the sender and is not given by or endorsed by Kainos. Kainos is the trading name of Kainos Software Limited, registered in Northern Ireland under company number: NI19370, having its registered offices at: Kainos House, 4-6 Upper Crescent, Belfast, BT7 1NT, Northern Ireland. Registered in the UK for VAT under number: 454598802 and registered in Ireland for VAT under number: 9950340E. This email has been scanned for all known viruses by MessageLabs but is not guaranteed to be virus free; further terms and conditions may be found on our website -www.kainos.com
[jQuery] Re: Implementing a Knob Control
I can't actually even get the demo posted to work. When I pull left, I expect the knob to continue moving left, but you have to physically drag up and to the left to move it, which is pretty hard to do. What if the knob was set to work like a slider, where a positive vertical or horizontal movement of the mouse increases it, and a negative vertical or horizontal movement decreases it? On Jan 26, 4:14 pm, Ricardo Tomasi ricardob...@gmail.com wrote: Audio editing software has lots of knobs, and they're not hard to use. The thing is you don't turn them with a circular motion, but you click and drag up/down or right/left just like a slider, the rotary control gives you visual feedback while saving a lot of space. This was real fun: http://jsbin.com/apida/http://jsbin.com/apida/edit thanks to raphaeljs.com cheers, - ricardo On Jan 26, 5:48 pm, Jeffrey Kretz jeffkr...@hotmail.com wrote: If I could second this from a usability perspective. I've used a flash-based interface that had a rotating knob. Moving that with a mouse was counter-intuitive. Dragging a straight slider (horizontal or vertical) just felt a lot better. JK -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of Eric Garside Sent: Monday, January 26, 2009 11:41 AM To: jQuery (English) Subject: [jQuery] Re: Implementing a Knob Control Canvas is probably the most elegant way to go, especially given the type of knobs you want. My suggestion is to find a decent resolution image of the knob you want, then use jquery and canvas to move the knob, and just keep track of the position. Be aware though, the mouse isn't really well designed for a knob kind of motion. On Jan 26, 1:56 pm, legofish pen...@gmail.com wrote: by the way by this approach I meant the second example on that page. On Jan 26, 1:54 pm, legofish pen...@gmail.com wrote: James, yes I mean a rotary control. Eric, here's a real-world example of what I'm trying to implement: http://www.niji.or.jp/home/k-nisi/sa-9900-h.jpg I'm looking for control knobs such as those found on a stereo; both continuous ones such as a volume knob, and n-step knobs such as the function knob in that picture, where the knob can only be rotated in n steps. I found some leads which I was going to try. I was going to mix this approach:http://blog.circlecube.com/2008/03/tutorial/interactive-spin-action sc... with the jquery rotate plugin:http://stackoverflow.com/questions/365820/howto-rotate-image-using-jq ... Still, your help would be immensely appreciated. Of course I would want the knob image to look like it's rotating, but I also want the control to return a value depending on its position, similar to how a slider returns a value. Thanks again On Jan 26, 10:20 am, Eric Garside gars...@gmail.com wrote: Legofish, I've got a couple ideas which might get the job done, but they all depend on what style of knob you want. Take a look around a google image search, and see if you can find a good representation of the type of knob you want. Then we can go from there. :) On Jan 26, 10:03 am, James Hughes j.hug...@kainos.com wrote: Do you mean a gague control? IE some sort of rotary control vs a slider? From: jquery-en@googlegroups.com on behalf of legofish Sent: Mon 26/01/2009 14:49 To: jQuery (English) Subject: [jQuery] Implementing a Knob Control Hi, I need to implement a knob control for one of my projects (eg. a volume knob). Ideally I would like to use jquery. I have spent some time searching for any resources to get started. Not only I can't find anything in jquery, I can't find anything even resembling a knob implementation in javascript in general. I did find a few sites who sell VB or .net knob controls, but nothing in js. anyway, not sure if anyone can help, but any hints towards a resource or starting point would be much appreciated. This e-mail is intended solely for the addressee and is strictly confidential; if you are not the addressee please destroy the message and all copies. Any opinion or information contained in this email or its attachments that does not relate to the business of Kainos is personal to the sender and is not given by or endorsed by Kainos. Kainos is the trading name of Kainos Software Limited, registered in Northern Ireland under company number: NI19370, having its registered offices at: Kainos House, 4-6 Upper Crescent, Belfast, BT7 1NT, Northern Ireland. Registered in the UK for VAT under number: 454598802 and registered in Ireland for VAT under number: 9950340E. This email has been scanned for all known viruses
[jQuery] Re: Implementing a Knob Control
thanks ricardo, I wish I had seen the link earlier, I spent most of the day trying to implement something similar. My code is very messy though so I won't post it. I know that audio app users like the paradigm you just explained (knob responding to up-down or left-right mouse movement), but I actually don't like that interaction model very much and I think that's part of the reason average people get frustrated with them. The one I implemented responds to circular motions, so you would drag the knob and move it in a circular trajectory and it follows the movement. I think that's most natural and intuitive. If i clean up my code I'll post a sample here. Thanks again On Jan 26, 4:14 pm, Ricardo Tomasi ricardob...@gmail.com wrote: Audio editing software has lots of knobs, and they're not hard to use. The thing is you don't turn them with a circular motion, but you click and drag up/down or right/left just like a slider, the rotary control gives you visual feedback while saving a lot of space. This was real fun: http://jsbin.com/apida/http://jsbin.com/apida/edit thanks to raphaeljs.com cheers, - ricardo On Jan 26, 5:48 pm, Jeffrey Kretz jeffkr...@hotmail.com wrote: If I could second this from a usability perspective. I've used a flash-based interface that had a rotating knob. Moving that with a mouse was counter-intuitive. Dragging a straight slider (horizontal or vertical) just felt a lot better. JK -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of Eric Garside Sent: Monday, January 26, 2009 11:41 AM To: jQuery (English) Subject: [jQuery] Re: Implementing a Knob Control Canvas is probably the most elegant way to go, especially given the type of knobs you want. My suggestion is to find a decent resolution image of the knob you want, then use jquery and canvas to move the knob, and just keep track of the position. Be aware though, the mouse isn't really well designed for a knob kind of motion. On Jan 26, 1:56 pm, legofish pen...@gmail.com wrote: by the way by this approach I meant the second example on that page. On Jan 26, 1:54 pm, legofish pen...@gmail.com wrote: James, yes I mean a rotary control. Eric, here's a real-world example of what I'm trying to implement: http://www.niji.or.jp/home/k-nisi/sa-9900-h.jpg I'm looking for control knobs such as those found on a stereo; both continuous ones such as a volume knob, and n-step knobs such as the function knob in that picture, where the knob can only be rotated in n steps. I found some leads which I was going to try. I was going to mix this approach:http://blog.circlecube.com/2008/03/tutorial/interactive-spin-action sc... with the jquery rotate plugin:http://stackoverflow.com/questions/365820/howto-rotate-image-using-jq ... Still, your help would be immensely appreciated. Of course I would want the knob image to look like it's rotating, but I also want the control to return a value depending on its position, similar to how a slider returns a value. Thanks again On Jan 26, 10:20 am, Eric Garside gars...@gmail.com wrote: Legofish, I've got a couple ideas which might get the job done, but they all depend on what style of knob you want. Take a look around a google image search, and see if you can find a good representation of the type of knob you want. Then we can go from there. :) On Jan 26, 10:03 am, James Hughes j.hug...@kainos.com wrote: Do you mean a gague control? IE some sort of rotary control vs a slider? From: jquery-en@googlegroups.com on behalf of legofish Sent: Mon 26/01/2009 14:49 To: jQuery (English) Subject: [jQuery] Implementing a Knob Control Hi, I need to implement a knob control for one of my projects (eg. a volume knob). Ideally I would like to use jquery. I have spent some time searching for any resources to get started. Not only I can't find anything in jquery, I can't find anything even resembling a knob implementation in javascript in general. I did find a few sites who sell VB or .net knob controls, but nothing in js. anyway, not sure if anyone can help, but any hints towards a resource or starting point would be much appreciated. This e-mail is intended solely for the addressee and is strictly confidential; if you are not the addressee please destroy the message and all copies. Any opinion or information contained in this email or its attachments that does not relate to the business of Kainos is personal to the sender and is not given by or endorsed by Kainos. Kainos is the trading name of Kainos Software Limited, registered in Northern Ireland under company number
[jQuery] Re: Implementing a Knob Control
That's exactly what's happening, you hold down the mouse button over the knob and drag UP/DOWN to increase/decrease the value. It's very intuitive if you have used any software whith knobs in it's interface. cheers, - ricardo On Jan 26, 7:47 pm, Eric Garside gars...@gmail.com wrote: I can't actually even get the demo posted to work. When I pull left, I expect the knob to continue moving left, but you have to physically drag up and to the left to move it, which is pretty hard to do. What if the knob was set to work like a slider, where a positive vertical or horizontal movement of the mouse increases it, and a negative vertical or horizontal movement decreases it? On Jan 26, 4:14 pm, Ricardo Tomasi ricardob...@gmail.com wrote: Audio editing software has lots of knobs, and they're not hard to use. The thing is you don't turn them with a circular motion, but you click and drag up/down or right/left just like a slider, the rotary control gives you visual feedback while saving a lot of space. This was real fun: http://jsbin.com/apida/http://jsbin.com/apida/edit thanks to raphaeljs.com cheers, - ricardo On Jan 26, 5:48 pm, Jeffrey Kretz jeffkr...@hotmail.com wrote: If I could second this from a usability perspective. I've used a flash-based interface that had a rotating knob. Moving that with a mouse was counter-intuitive. Dragging a straight slider (horizontal or vertical) just felt a lot better. JK -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of Eric Garside Sent: Monday, January 26, 2009 11:41 AM To: jQuery (English) Subject: [jQuery] Re: Implementing a Knob Control Canvas is probably the most elegant way to go, especially given the type of knobs you want. My suggestion is to find a decent resolution image of the knob you want, then use jquery and canvas to move the knob, and just keep track of the position. Be aware though, the mouse isn't really well designed for a knob kind of motion. On Jan 26, 1:56 pm, legofish pen...@gmail.com wrote: by the way by this approach I meant the second example on that page. On Jan 26, 1:54 pm, legofish pen...@gmail.com wrote: James, yes I mean a rotary control. Eric, here's a real-world example of what I'm trying to implement: http://www.niji.or.jp/home/k-nisi/sa-9900-h.jpg I'm looking for control knobs such as those found on a stereo; both continuous ones such as a volume knob, and n-step knobs such as the function knob in that picture, where the knob can only be rotated in n steps. I found some leads which I was going to try. I was going to mix this approach:http://blog.circlecube.com/2008/03/tutorial/interactive-spin-action sc... with the jquery rotate plugin:http://stackoverflow.com/questions/365820/howto-rotate-image-using-jq ... Still, your help would be immensely appreciated. Of course I would want the knob image to look like it's rotating, but I also want the control to return a value depending on its position, similar to how a slider returns a value. Thanks again On Jan 26, 10:20 am, Eric Garside gars...@gmail.com wrote: Legofish, I've got a couple ideas which might get the job done, but they all depend on what style of knob you want. Take a look around a google image search, and see if you can find a good representation of the type of knob you want. Then we can go from there. :) On Jan 26, 10:03 am, James Hughes j.hug...@kainos.com wrote: Do you mean a gague control? IE some sort of rotary control vs a slider? From: jquery-en@googlegroups.com on behalf of legofish Sent: Mon 26/01/2009 14:49 To: jQuery (English) Subject: [jQuery] Implementing a Knob Control Hi, I need to implement a knob control for one of my projects (eg. a volume knob). Ideally I would like to use jquery. I have spent some time searching for any resources to get started. Not only I can't find anything in jquery, I can't find anything even resembling a knob implementation in javascript in general. I did find a few sites who sell VB or .net knob controls, but nothing in js. anyway, not sure if anyone can help, but any hints towards a resource or starting point would be much appreciated. This e-mail is intended solely for the addressee and is strictly confidential; if you are not the addressee please destroy the message and all copies. Any opinion or information contained in this email or its attachments that does not relate to the business of Kainos is personal to the sender and is not given by or endorsed by Kainos
[jQuery] Re: Implementing a Knob Control
I have to disagree. Precise circular motion is very hard with a mouse, specially because most computers have cursor acceleration enabled - it's impossible to draw a round shape. The up/down interaction method is much easier to control and a simple explanation should be enough to get someone started. - ricardo On Jan 26, 7:54 pm, legofish pen...@gmail.com wrote: thanks ricardo, I wish I had seen the link earlier, I spent most of the day trying to implement something similar. My code is very messy though so I won't post it. I know that audio app users like the paradigm you just explained (knob responding to up-down or left-right mouse movement), but I actually don't like that interaction model very much and I think that's part of the reason average people get frustrated with them. The one I implemented responds to circular motions, so you would drag the knob and move it in a circular trajectory and it follows the movement. I think that's most natural and intuitive. If i clean up my code I'll post a sample here. Thanks again On Jan 26, 4:14 pm, Ricardo Tomasi ricardob...@gmail.com wrote: Audio editing software has lots of knobs, and they're not hard to use. The thing is you don't turn them with a circular motion, but you click and drag up/down or right/left just like a slider, the rotary control gives you visual feedback while saving a lot of space. This was real fun: http://jsbin.com/apida/http://jsbin.com/apida/edit thanks to raphaeljs.com cheers, - ricardo On Jan 26, 5:48 pm, Jeffrey Kretz jeffkr...@hotmail.com wrote: If I could second this from a usability perspective. I've used a flash-based interface that had a rotating knob. Moving that with a mouse was counter-intuitive. Dragging a straight slider (horizontal or vertical) just felt a lot better. JK -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of Eric Garside Sent: Monday, January 26, 2009 11:41 AM To: jQuery (English) Subject: [jQuery] Re: Implementing a Knob Control Canvas is probably the most elegant way to go, especially given the type of knobs you want. My suggestion is to find a decent resolution image of the knob you want, then use jquery and canvas to move the knob, and just keep track of the position. Be aware though, the mouse isn't really well designed for a knob kind of motion. On Jan 26, 1:56 pm, legofish pen...@gmail.com wrote: by the way by this approach I meant the second example on that page. On Jan 26, 1:54 pm, legofish pen...@gmail.com wrote: James, yes I mean a rotary control. Eric, here's a real-world example of what I'm trying to implement: http://www.niji.or.jp/home/k-nisi/sa-9900-h.jpg I'm looking for control knobs such as those found on a stereo; both continuous ones such as a volume knob, and n-step knobs such as the function knob in that picture, where the knob can only be rotated in n steps. I found some leads which I was going to try. I was going to mix this approach:http://blog.circlecube.com/2008/03/tutorial/interactive-spin-action sc... with the jquery rotate plugin:http://stackoverflow.com/questions/365820/howto-rotate-image-using-jq ... Still, your help would be immensely appreciated. Of course I would want the knob image to look like it's rotating, but I also want the control to return a value depending on its position, similar to how a slider returns a value. Thanks again On Jan 26, 10:20 am, Eric Garside gars...@gmail.com wrote: Legofish, I've got a couple ideas which might get the job done, but they all depend on what style of knob you want. Take a look around a google image search, and see if you can find a good representation of the type of knob you want. Then we can go from there. :) On Jan 26, 10:03 am, James Hughes j.hug...@kainos.com wrote: Do you mean a gague control? IE some sort of rotary control vs a slider? From: jquery-en@googlegroups.com on behalf of legofish Sent: Mon 26/01/2009 14:49 To: jQuery (English) Subject: [jQuery] Implementing a Knob Control Hi, I need to implement a knob control for one of my projects (eg. a volume knob). Ideally I would like to use jquery. I have spent some time searching for any resources to get started. Not only I can't find anything in jquery, I can't find anything even resembling a knob implementation in javascript in general. I did find a few sites who sell VB or .net knob controls, but nothing in js. anyway, not sure if anyone can help, but any hints towards a resource or starting point would be much appreciated
[jQuery] Re: Implementing a Knob Control
On Tue, Jan 27, 2009 at 8:10 AM, Ricardo Tomasi ricardob...@gmail.comwrote: I have to disagree. Precise circular motion is very hard with a mouse, specially because most computers have cursor acceleration enabled - it's impossible to draw a round shape. The up/down interaction method is much easier to control and a simple explanation should be enough to get someone started. - ricardo I was thinking that I've seen something like this (knob-thingy) on jquery UI draggable, and after some searching, found it (not in jquery ui but in interface.eyecon.ro): http://interface.eyecon.ro/demos/drag_vr.html IMHO, this one is usable :) Best regards, Riyono -- - There's nothing impossible for an open mind -
