@d-healey done, final version:
//KNOBS LAF
const var Knob17 = Content.getComponent("Knob17");
const var laf = Content.createLocalLookAndFeel();
laf.registerFunction("drawRotarySlider", function(g, obj)
{
var a = obj.area;
// Draw the background ellipse
g.setColour(obj.bgColour);
g.fillEllipse(a);
// Draw the inner ellipse (smaller)
g.setColour(obj.itemColour1);
var innerMargin = 20; // Increase this value to make the inner ellipse smaller
g.fillEllipse([a[0] + innerMargin, a[1] + innerMargin, a[2] - 2*innerMargin, a[3] - 2*innerMargin]);
// Calculate the rotation angle for the arc
var start = 0; // Starting at 0 radians
var end = 2 * Math.PI * obj.valueNormalized; // Ending at 2π radians for full rotation
// Define the arc path
var p1 = Content.createPath();
var arcThickness = 12; // Thickness of the arc
var arcMargin = 8; //
p1.addArc([arcMargin, arcMargin, a[2] - 2 * arcMargin, a[3] - 2 * arcMargin], start, end);
// Draw the value arc with .textColour
g.setColour(obj.textColour);
g.drawPath(p1, 0, arcThickness); // Modified line with 3 arguments
// Draw the needle
g.rotate(end, [a[2] / 2, a[3] / 2]);
g.setColour(obj.itemColour2);
g.fillRect([a[2] / 2 - 8 / 2, 0, 8, 40]);
});
Knob17.setLocalLookAndFeel(laf);