Continously rotating knob/dial

[martincho]

I need to create a continuously rotating knob. I have searched examples and the forum and can’t say I found anything on this. Most of the discussions are related to subclassing LookAndFeel to replace graphics and talk about filmstrip vs. SVG’s vs. raw graphics.

A very long time ago (going back to Windows development with MFC) I wrote what I then called a DataKnob class that did exactly this. Here’s a short video from an old test program:

knob

It was a test application, never mind the raw graphics. It’s two images, one for the larger knob --which never moves-- and the other for the indentation, which is simply repositioned during rotation.

How do I approach this with JUCE? I am OK rotating the entire image (it won’t have a shadow or gradient) or taking a similar approach. I see JUCE has AffineTransform. Is that the best way to rotate a PNG with a transparent background?

What I think I know from reading through posts is that I have to subclass LookAndFeel and then draw the new graphics there.

Can a slider be configured for continuous rotation? How?

If not, I think it can be configured for a range of 359 degrees. Some logic on top of that might be able to fully simulate continuous rotation…don’t know.

If anyone is interested, I am happy to post my old MFC code for the knob here.

Thanks.

[zsliu98]

AFAIK, the best way is to override the function LookAndFeel::drawRotarySlider() (since you do have two images).

https://docs.juce.com/master/structSlider_1_1LookAndFeelMethods.html#ae63a9d8adce084cd5dbe02b960c73a9a

You may provide the slider a rotaryStartAngle and rotaryEndAngle with Slider::setRotaryParameters(). Then you can calculate the rotation angle from the arguments of LookAndFeel::drawRotarySlider() and draw it.

[gregr]

For continuous rotation, check out Slider::setRotaryParameters(), which takes two angles and boolean which you can set to false.

[anon48770766]

If you want an example of how to do this yourself, I used the AffineTransform technique described here:

How to make an "endless" slider

Occasionally its needed to have a slider that can be used to increment/decrement values on drag, so that you could wire it up to function as a ‘trim’ control for other parameters such as a set of EQ or Volume faders that you might want to ‘bump’ a little or ‘trim’ a little. Here’s how to do that with a regular Slider component - note that scrollImage.png is a little .png containing ‘stroke lines’ that render normal trim steps, transformed on movement to give user feedback: // // EndlessSlider…

In my case it was for a ‘trim slider’ with continual rotation on the vertical axes, but you can easily modify the same AffineTransform to do a rotation instead of the translation I use …

[martincho]

Thanks for sharing. I was looking for a video of the trim slider in operation. I can’t find any. Has it been removed from the interface?

Cool microphones and headphones BTW. If your business headphone was offered in a wireless option I would buy one for general use.

[anon48770766]

The new UI hasn’t been released officially, so there is no video of it yet. But you can easily use that code independently and see for yourself - only thing you need to do is modify the Transform to rotate instead of offset …

Re: headphones - thanks for checking them out - the HiX25BT’s are our only wireless headphones at the moment, but stay tuned, there’s always more fun stuff around the corner …