MAJOR UPDATE // NEW: Online KNOB BUILDER for HISE!! // Factory/User Preset System

David Healey

@Oli-Ullmann said in NEW: Online Knob Builder for HISE!! by Me :):

But I’m sure Sir @David-Healey also has a good idea for how to fake shadows... :-)

I use the built in drop shadow, I haven't hit any issues but maybe you guys are using more than I am.

Oli Ullmann

@David-Healey
Oh, okay, yeah, I had a pretty big project (the one I sent you a while back) with a lot of UI elements, and I had to fake the shadows because otherwise it was causing performance issues...

Chazrox

@Oli-Ullmann

Screenshot 2026-06-25 at 4.05.57 AM.png

    // -- DROP SHADOWS --
    g.drawDropShadow([ox + stableSize * (1 - 0.45) / 2, oy + stableSize * 0.4 - stableSize * 0.35 / 2, stableSize * 0.45, stableSize * 0.35], cShadowsHighlight, stableSize * 0.35);
    g.drawDropShadow([ox + stableSize * (1 - 0.5) / 2, oy + stableSize * 0.65 - stableSize * 0.45 / 2, stableSize * 0.5, stableSize * 0.45], cShadowsShadow, stableSize * 0.35);
    g.drawDropShadow([ox + stableSize * (1 - 0.5) / 2, oy + stableSize * 0.65 - stableSize * 0.45 / 2 + 4, stableSize * 0.5, stableSize * 0.45 + 10], cShadowsShadowSoft, stableSize * 0.35);

Works great with shadows and highlights.

Oli Ullmann

@Chazrox
Yeah, it works great in general! :-) I just had some issues with it, as I mentioned, when I had a lot of UI elements...

Chazrox

@Oli-Ullmann ahh I see. We'll see how this works out. There possibly could be a limit. Probably has to do with the modulation repaints.

Chazrox

Just updated the app to include 'Noise' parameter for all face layer elements WITH rotation. :)

https://rox-knob-builder-for-hise.netlify.app/

David Healey

@Chazrox How are you drawing circular noise?

Chazrox

@David-Healey multiple layers. Theres a 'cap' in front of the ellipse that has noise applied to it.

David Healey

@Chazrox This will probably be useful to you when Christoph merges it: https://github.com/christophhart/HISE/pull/936

And maybe this one: https://github.com/christophhart/HISE/pull/943

Chazrox

@David-Healey Niiice! I can definitely think of some cool ways to use that already..

Chazrox

Update:

https://rox-knob-builder-for-hise.netlify.app/

Just added the option to inherit 'obj.text' for 'Component Label' element. You can still set a text for mockup and placement in the designer ui but ticking the box will inherit obj.text on compile.

Screenshot 2026-06-25 at 5.14.03 AM.png

ILIAM

@Chazrox Thank you so muhc man, This is amazing,
any chance we could have this Offline?

Chazrox

@ILIAM Possibly soon. How are you liking the web version?

thewind433

@Chazrox said in NEW: Online Knob Builder for HISE!! by Me :):

https://rox-knob-builder-for-hise.netlify.app/

THANKS BROTHA

ccbl

Is it possible to do sliders? Or is that a future feature maybe?

Chazrox

@ccbl Working on it.

Anhuarcin

@Chazrox

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);

});