How to create knob control on Juce?

Getting Started
1

Hi all!

I want to create a knob on juce like http://teragonaudio.com/NotNotchFilter.html .But i do not know where i start. Can you guys give me some feedback?
I also do not know C++ so do i need to learn C++ to design knob control?

Thanks all.

2

maybe from here if you want that specific component ? https://github.com/teragonaudio/TeragonGuiComponents

3

The recommended way in JUCE is to draw your knob using drawing commands using JUCE Graphics (rather than the filmstrip/sprite technique that something like KnobMan uses and the code you linked - @kraken has pointed you to the source for the GUI components for that).

Have a look at the tutorials: https://www.juce.com/tutorials to get started. But you will need to learn C++ along the way.

Here’s a reasonably minimal knob that’s just a circle as a starting point. this uses a custom look-and-feel to draw the circles and the line to show the position/value of the knob. From there you could customise the various elements, add gradients, and so on…

#ifndef MAINCOMPONENT_H_INCLUDED
#define MAINCOMPONENT_H_INCLUDED

#include "../JuceLibraryCode/JuceHeader.h"


class MyKnobLF : public LookAndFeel_V3
{
public:
    void drawRotarySlider (Graphics& g, int x, int y, int width, int height, float sliderPos,
                           const float rotaryStartAngle, const float rotaryEndAngle, Slider& slider)
    {
        const float radius = jmin (width / 2, height / 2) - 4.0f;
        const float centreX = x + width * 0.5f;
        const float centreY = y + height * 0.5f;
        const float rx = centreX - radius;
        const float ry = centreY - radius;
        const float rw = radius * 2.0f;
        const float angle = rotaryStartAngle + sliderPos * (rotaryEndAngle - rotaryStartAngle);
        
        // fill
        g.setColour (Colours::orange);
        g.fillEllipse (rx, ry, rw, rw);
        
        // outline
        g.setColour (Colours::red);
        g.drawEllipse (rx, ry, rw, rw, 1.0f);
        
        Path p;
        const float pointerLength = radius * 0.33f;
        const float pointerThickness = 2.0f;
        p.addRectangle (-pointerThickness * 0.5f, -radius, pointerThickness, pointerLength);
        p.applyTransform (AffineTransform::rotation (angle).translated (centreX, centreY));
        
        // pointer
        g.setColour (Colours::yellow);
        g.fillPath (p);
    }
};

//==============================================================================

class MainContentComponent   : public Component
{
public:
    MainContentComponent()
    {
        addAndMakeVisible (knob);
        knob.setLookAndFeel (&lf);
        knob.setSliderStyle (Slider::Rotary);
        knob.setTextBoxStyle (Slider::NoTextBox, true, 0, 0);
        
        setSize (600, 400);
    }
    
    void paint (Graphics& g) override
    {
        g.fillAll (Colours::black);
    }
    
    void resized() override
    {
        knob.setBounds (10, 10, 120, 120);
    }

private:
    Slider knob;
    MyKnobLF lf;
};

#endif  // MAINCOMPONENT_H_INCLUDED
3 Likes
4

Thank you for your advice.I will try to do it.

5

If i learn C++. Which part of C++ neccessary to learn to use in Juce?
Thank you!