Round Circular Knob Object

[MouseUp]

What I am looking for is a radial round knob object to simulate something like a volume knob on a home stereo...

The knob should NOT turn all the way around but should have limits between about the 7 o'clock position then rotate clockwise and end at 5 o'clock position. I would like to have a handler that allows me to set the low and high values in the script, then when I click in the area of the knob I would like to drag the mouse up and down (vertical motion) to turn the knob anywhere between its limits and send the value to the message box. I would like the knob to NOT jump to the position of the mouse click but to move only when the mouse is dragged (the mouse drag should only add to or subtract from the knob value). Of course, there should be a pointer indicating the position of the knob.

This seems like such a standard type of object that should be included with LiveCode yet I cannot find such an object. Can someone point me in the direction of such a circular round knob?

[jmburnod]

Hi Mouseup,
Tactilemedia made objects should be useful for you
http://www.tactilemedia.com/index.html? ... index.html
Best regards
Jean-Marc

[dunbarx]

Absolutely..

Try to find "radialDialOMatic" from The Inner Path. Full of just what you need.

Craig Newman

[mwieder]

Here's Roger Guay's stack:

http://revonline2.runrev.com/stack/645/RadialDialOmatic

[MouseUp]

Thanks guys. I had a look at radialDialOMatic but unfortunately it's not quite what I am in need of as described above.

I'm going to give it a go and try to make a knob script but it's pushing my LiveCode abilities at the moment.

Let me know if you come up with a knob. Likewise, I've attached my initial progress... Please feel free to modify it and post updates to it here. Let's develop this together and make it something useful!

So far my knob has a few problems:

Clicking towards the top or bottom of it (without dragging) moves the knob slightly. (It shouldn't move unless you drag the mouse).
There is no low and high limit to the rotation. It should stop moving at approx 7 o'clock and 5 o'clock
I can't set the min and max output values yet
The value it transmits is not as desired- it jumps from 0 to 360 degrees at 3 o'clock
Doubleclicking locks it

What I like about it:

It looks very good without using any external graphics. It is all native LiveCode
The drag up and down feels good and is fast
It is easily resizable

(Deleted old file. Please use later version below.)

[dave_probertGA6e24]

Hi MouseUp,

Here's an updated version of your stack with limits, etc.

Enjoy.

Dave

Knob 04.zip

(1.94 KiB) Downloaded 288 times

[bn]

Hi MouseUp,

here is my take on your knob. But actually I don't really see how you do your interface. A knob is something you _TURN_
A slider is something you move up and down.

If e.g. in your knob is at 5 o' clock. The user clicks to the right of the middle of the knob to change its position. The only way the user can change it is by moving the mouse down. Which is not very intuitive.

Actually there has been a debate in interface design whether to use analog thing like a knob in interfaces.

There are certainly circumstances in which you might want to use a knob, but why don't you mimick the analog handling and let the user turn it (I mean the user makes a circle to operate the knob)?

Could it be that the code you use looks very familiar to me?

@Dave, when the knob is in one of the stop positions it somehow is difficult to get it started again. Did not look into that.

Kind regards
Bernd

Knob 05.livecode.zip

(1.61 KiB) Downloaded 265 times

[MouseUp]

Dave and Bernd,

Thank you so much for your wonderful help. This is great!

Bernd, yes I believe your amazing original knob script inspired me to try to make the knob I was looking for. You deserve full credit for that.

I understand what you say about "turning" knobs. Many softwares I have used over the years offer the option of vertical or circular mouse tracking. The mouse tracking method is usually a global setting in the software. Ideally this knob should have a parameter option of vertical, horizontal, and circular mouse tracking. Over the years I have found myself opting for vertical tracking of knobs. I find it to be much more controllable with a mouse- thus my desire for this. Moving a mouse in a circle is more difficult than in a straight line and it often results in a sudden jump to "the other side" of the knob which is very bad. One might ask "Why then use a knob and not a slider?". Well, many more knobs can be fit into a smaller space, and knobs tend to be wider so putting a name under a knob fits better.

Regarding interface design, I find knobs can be smaller than sliders taking up less space on the interface than a slider while still conveying the same information. Also since they are slightly wider than a slider, having a name under a knob fits more compactly.

I think RunRev should offer such an object as this built in to LiveCode (with a parameter setting for vertical, horizontal, or circular tracking).

Thanks again!

[MouseUp]

Bernd,

Your knob is wonderful. The only problem I see is that with fast drags, sometimes it stops at 98 or 99 and then after maybe after 100ms it finally goes to 100. (The same happens at the other end of the range.) Also, I have found a few times that a negative value gets displayed.

[MouseUp]

Dave,

Your knob works pretty well and I really like that you have the min and max values easily changeable. A few problems I found...

* It was getting stuck at the min and max values. This had to do with _my_ error in the script where the initial mouse click was moving the knob slightly. I've fixed that now.

* When I drag all the way down then reverse the drag direction it doesn't respond. Same problem at the max value as well.

* I can move the knob quickly and whip past the min or max and jump the knob to the other side. I will have to look into this...

* If I put the knob all the way up, the next time I click on it it won't move. I need to look into that also...

* The maximum goes to 100 then jumps to 0. (It should remain at 100.)

Attached is the current version of the "Knob 11" based off of Dave's version.

(Deleted old file. Please use later version below.)

[MouseUp]

* It was getting stuck at the min and max values. This had to do with _my_ error in the script where the initial mouse click was moving the knob slightly. FIXED

* When I drag all the way down then reverse the drag direction it doesn't respond. Same problem at the max value as well. Now FIXED, but I need to make some changes so the knob doesn't update all the time causing jitter.

* I can move the knob quickly and whip past the min or max and jump the knob to the other side. I still have to look into this... Perhaps there is a more reliable way to track the mouse position?

* If I put the knob all the way up, the next time I click on it it won't move. FIXED

* The maximum goes to 100 then jumps to 0. (It should remain at 100.) FIXED

* I still need to somehow block Mouse Double Clicks on the knob so that the knob does not freeze.

Attached is the current version of the "Knob 12" based off of Dave's version with parts imported from Bernd's script.

(Deleted old file. Please use later version below.)

[bn]

Hi MouseUp,

The only problem I see is that with fast drags, sometimes it stops at 98 or 99 and then after maybe after 100ms it finally goes to 100. (The same happens at the other end of the range.) Also, I have found a few times that a negative value gets displayed.

I see that also, I did not notice it in cursory testing.

The problem is that if the user drags fast the difference between two points can be larger than the angle of the no-go zone. That is hard to catch because, and here is the other basic flaw of this approach
adding to degrees
degrees go in circles.

That is also the root of the problems you are seeing, it is not the mouse polling. You can use the mouseMove or any other method.

Short of finding a mathematical method for solving this I just cap the max vertical difference to 30 pixel. This is well below the amount needed to jump over the "no-go zone".
It also dampens the effect of the mouse on the knob a bit.

In my current version I don't see negative numbers nor the slow approach to the min and max values anymore.

Feel free to use it if you want.

Kind regards

Bernd

[MouseUp]

Bernd and Dave,

I can't thank you enough. That is some beautiful and complicated work! Making a well designed knob is harder than it seems at first. I tweaked it a bit to give it a little more useful range in the arc. I also improved the graphics a bit. It works really well now. No more jitter. No more jumping across the dead zone. I also added blocking of double-clicks.

Possible Next Tweaks...

* Add a minimum value constant in the header to be able to control the output range more.

* Add a header constant parameter to allow selection of horizontal mouse tracking. Possibly add the choice of circular tracking as well.

Other than that, I think we have a very nice generic knob that folks can plug into their stacks and use. I wonder what it looks like on a PC and Linux. If anyone wants to improve upon this please do.

(Deleted old file. Please use later version of "The Knob" on next page.)

[magice]

Ever since I started following this thread, I have been trying to figure out how to do this with a circular motion instead of an up and down motion. I am close. This stack works well going clockwise, but it seems rough going counter clockwise. I don't need the object for anything, but I am doing this for learning purposes and I am curious why I am having this problem. Any ideas?

[bn]

Hi Magice,

could you post the stack as a zip file? I can not extract a rar without additional software.

I did a cirular motion knob and actually some more circular stuff in the stack "beachballs" on revOnline = user samples. Look at card 3. It is a bit dated and some thing I would do differently today but it works.

Kind regards

Bernd