Hello! I have created a working effects plugin using the generic interface elements in the interface designer.
Now I want to customise the GUI. I found and adapted some bits of code to generate vector dials that are kinda what I'm after but I run into issues trying to rewire things to replace the existing interface elements.
Is there a best method for doing this kind of thing? I'm still very nooby so I'm almost certainly missing some basic knowledge here.
Here's a bit of code I'm using to render some dials but they only output values of 0-1 without any skewing to match the parameters I want to assign them to.
Thanks for your invaluable help!
inline function createCircularKnob(name, x, y)
{
local widget = Content.addPanel(name, x, y);
Content.setPropertiesFromJSON(name, {
"width": 50,
"height": 50,
"allowCallbacks": "Clicks, Hover & Dragging"
});
widget.setPaintRoutine(function(g)
{
// Draw the knob base
g.setColour(Colours.black); // Solid color for knob
g.fillEllipse([0, 0, this.getWidth(), this.getHeight()]);
// Calculate pointer position
var angle = this.getValue() * 1.5 * Math.PI + Math.PI * 0.75; // Start at 7.5 o'clock, end at 4.5 o'clock
var centerX = this.getWidth() / 2;
var centerY = this.getHeight() / 2;
var radius = this.getWidth() * 0.4; // Pointer radius from center
var pointerX = centerX + Math.cos(angle) * radius;
var pointerY = centerY + Math.sin(angle) * radius;
// Draw the pointer
g.setColour(0xFFFFE092); // Pointer color (#FFE092 with full opacity)
g.fillEllipse([pointerX - 3, pointerY - 3, 6, 6]); // Small circular pointer
});
widget.setMouseCallback(function(event)
{
if(event.clicked)
{
this.data.mouseDownValue = this.getValue();
}
else if (event.drag)
{
var distance = event.dragX - event.dragY;
// Adjust sensitivity
var normalisedDistance = distance / 200.0;
// Calculate and clamp the new value
var newValue = Math.range(this.data.mouseDownValue + normalisedDistance, 0.0, 1.0);
this.setValue(newValue);
this.changed();
this.repaintImmediately();
}
});
return widget;
}
// Render Dials
const var HiQ_Dial = createCircularKnob("HiQ_Dial", 130, 220);
const var LoQ_Dial = createCircularKnob("LoQ_Dial", 190, 220);
const var HiCut_Dial = createCircularKnob("HiCut_Dial", 250, 220);
const var LoCut_Dial = createCircularKnob("LoCut_Dial", 310, 220);