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