Thanks everyone for your input but none of those new suggestions are working for me. Obviously because I'm doing it wrong.
There was a lot of different recommendations and any combination of them seems to break the code from affecting the knobs. As a noob, I'm not sure where and what to place everything...
Heres what I got which compiles okay but does nothing to the knob
.------- PS: I don't know how to make all the code appear in the black box so it overflows at the top and bottom on this page------
Content.makeFrontInterface(1000, 1000);
const comps = Content.getAllComponents("^.(Knob|Button).$");
const ValueLAF = Content.createLocalLookAndFeel();
ValueLAF.registerFunction("drawRotarySlider", function(g, obj)
{
g.setColour(Colours.white);
g.setFont("Arial", 20);
var area = obj.area;
g.drawAlignedText(obj.valueAsText(obj.value, 0), [0, 0, area[2], area[3] - VALUE_Y_POS], "centred");
var a = obj.area;
// Knob Background Colour
g.setColour (obj.bgColour);
g.fillEllipse(a);
// Knob Inner Colour (Item 1)
g.setColour(obj.itemColour1);
g.fillEllipse ([5, 5, a[2] - 10, a[3] -10]);
//Knob Marker Position
var start = 2.5;
var end = start * 2 * obj.valueNormalized - start;
g.rotate (end, [a[2] / 2, a[3] / 2]);
// Knob Marker Colour
g.setColour(obj.itemColour2);
g.fillRoundedRectangle([a[2] / 2 - 5 / 2, 3, 5, 11], 2.5);
});
for (i = 0; i < knobs.length; i++)
{
knobs[i].setLocalLookAndFeel(knb_LAF);
}