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

Chazrox

This post is deleted!

Oli Ullmann

@Chazrox
That sounds great! Thanks so much! :-) I'll give it a try this weekend.

One thing immediately comes to mind:
I’m not sure how the shadow is generated in your code. So far, however, generating shadows using LAF hasn’t been particularly efficient. Especially with sliders, which are constantly re-rendered when modulated, this can lead to performance issues when there are many elements in the user interface.

That’s why it would be great if we could choose between two options:

Real HISE shadow
Fake shadow, created using a radial gradient, for example

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

I'm looking forward to trying out your tool! :-)

P.S. This also applies to the inner glow, which I'm sure you're creating using the innerShadow as well...

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

});

Chazrox

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

button creator

Glad you love it! Most definitely working buttons also. I'll let everyone know when thats done. Thanks for giving it a go!

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

15

2.4k

13.9k

120.6k