I loved it! Are you planning to add a button creator as well?
const var MadeWithRoxKNFH = Content.createLocalLookAndFeel();
MadeWithRoxKNFH.registerFunction("drawRotarySlider", function(g, obj)
{
var a = obj.area;
var range = obj.max - obj.min;
var stableSize = a[2] * (1.0 - 2.0 * 0.15);
var ox = a[0] + (a[2] - stableSize) / 2;
var oy = a[1] + (a[2] - stableSize) / 2;
var cx = ox + stableSize / 2;
var cy = oy + stableSize / 2;
var sw = stableSize / 200.0;
var startOffset = 2.5;
var totalSweep = 2.0 * startOffset;
var endOffset = -startOffset + totalSweep * (obj.value - obj.min) / range;
// ============ COLOUR CONTROL ============
// -- Skirt --
var cSkirtFlat = 0xff121212;
var cSkirtHover = 0xffFFFFFF;
// -- Arc Track --
var cArcTrackOuter = 0x00000000;
var cArcTrackBackground = 0xff000000;
// -- Arc Value Basic --
var cArcBasicGlow = 0x4d007BFF;
var cArcBasicLow = 0xff004FA3;
var cArcBasicHigh = 0xff2D61C8;
// -- Body 1 --
var cFace1Top = 0xff555558;
var cFace1Bot = 0xff2A2A2E;
var cFace1Hover = 0xffFFFFFF;
var cFace1Outline = 0x4d000000;
// -- skirt --
var skirtR = stableSize * 0.49;
var skirtcx = cx + 0 * sw;
var skirtcy = cy + 0 * sw;
g.setColour(cSkirtFlat);
g.fillEllipse([skirtcx - skirtR, skirtcy - skirtR, skirtR * 2, skirtR * 2]);
g.beginLayer(false);
g.setColour(cSkirtFlat);
g.fillEllipse([skirtcx - skirtR, skirtcy - skirtR, skirtR * 2, skirtR * 2]);
var skirtnp = Content.createPath();
skirtnp.addRoundedRectangle([skirtcx - skirtR, skirtcy - skirtR, skirtR * 2, skirtR * 2], skirtR);
g.applyMask(skirtnp, [skirtcx - skirtR, skirtcy - skirtR, skirtR * 2, skirtR * 2], false);
g.rotate(endOffset, [skirtcx, skirtcy]);
g.addNoise({"alpha": 0.03, "monochromatic": false, "area": [skirtcx - skirtR, skirtcy - skirtR, skirtR * 2, skirtR * 2]});
g.rotate(-endOffset, [skirtcx, skirtcy]);
g.endLayer();
if (obj.hover || obj.clicked) {
g.setColour(Colours.withAlpha(cSkirtHover, 0.03));
g.fillEllipse([skirtcx - skirtR, skirtcy - skirtR, skirtR * 2, skirtR * 2]);
}
// -- ARC TRACK --
var trkW = 0.45 * 2;
var Ktrk = Content.createPath();
Ktrk.addArc([(1.0-trkW)/2, (1.0-trkW)/2, trkW, trkW], -startOffset, startOffset);
var arTrk = Ktrk.getBounds(stableSize); arTrk[0]+=ox; arTrk[1]+=oy + stableSize * 0;
g.setColour(cArcTrackOuter);
g.drawPath(Ktrk, arTrk, {Thickness: stableSize * 0.08 + 0 * sw, EndCapStyle: "rounded", JointStyle: "curved"});
g.setColour(cArcTrackBackground);
g.drawPath(Ktrk, arTrk, {Thickness: stableSize * 0.08, EndCapStyle: "rounded", JointStyle: "curved"});
// -- ARC BASIC (gradient) --
var basW = 0.45 * 2;
var basR = stableSize * 0.45;
var Kbas = Content.createPath();
Kbas.addArc([(1.0-basW)/2, (1.0-basW)/2, basW, basW], -startOffset, endOffset);
var arBas = Kbas.getBounds(stableSize); arBas[0]+=ox; arBas[1]+=oy + stableSize * 0;
var basGlowW = stableSize * 0.08 + stableSize * 0.08 * 20 / 10;
g.setColour(cArcBasicGlow);
g.drawPath(Kbas, arBas, {Thickness: basGlowW, EndCapStyle: "rounded", JointStyle: "curved"});
var gx1 = cx + basR * Math.sin(-startOffset);
var gy1 = cy - basR * Math.cos(-startOffset) + stableSize * 0;
var gx2 = cx + basR * Math.sin(startOffset);
var gy2 = cy - basR * Math.cos(startOffset) + stableSize * 0;
g.setGradientFill([cArcBasicLow, gx1, gy1, cArcBasicHigh, gx2, gy2, false]);
g.drawPath(Kbas, arBas, {Thickness: stableSize * 0.08, EndCapStyle: "rounded", JointStyle: "curved"});
// -- face1 --
var face1R = stableSize * 0.41;
var face1cx = cx + 0 * sw;
var face1cy = cy + 0 * sw;
g.setGradientFill([cFace1Top, face1cx, face1cy - face1R + (2 * face1R * (0.5 - 0.5)), cFace1Bot, face1cx, face1cy + face1R + (2 * face1R * (0.5 - 0.5)), false]);
g.fillEllipse([face1cx - face1R, face1cy - face1R, face1R * 2, face1R * 2]);
g.beginLayer(false);
g.setGradientFill([cFace1Top, face1cx, face1cy - face1R + (2 * face1R * (0.5 - 0.5)), cFace1Bot, face1cx, face1cy + face1R + (2 * face1R * (0.5 - 0.5)), false]);
g.fillEllipse([face1cx - face1R, face1cy - face1R, face1R * 2, face1R * 2]);
var face1np = Content.createPath();
face1np.addRoundedRectangle([face1cx - face1R, face1cy - face1R, face1R * 2, face1R * 2], face1R);
g.applyMask(face1np, [face1cx - face1R, face1cy - face1R, face1R * 2, face1R * 2], false);
g.rotate(endOffset, [face1cx, face1cy]);
g.addNoise({"alpha": 0.04, "monochromatic": false, "area": [face1cx - face1R, face1cy - face1R, face1R * 2, face1R * 2]});
g.rotate(-endOffset, [face1cx, face1cy]);
g.endLayer();
if (obj.hover || obj.clicked) {
g.setColour(Colours.withAlpha(cFace1Hover, 0.07));
g.fillEllipse([face1cx - face1R, face1cy - face1R, face1R * 2, face1R * 2]);
}
g.setColour(cFace1Outline);
g.drawEllipse([face1cx - face1R, face1cy - face1R, face1R * 2, face1R * 2], 1);
});
