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

[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.

[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!

[Chazrox]

Pointer Grips?

[Chazrox]

I just pushed a couple of really cool updates!

Updates:

'Star Body' Layer Elements x 3

Fully Customizable Star knob shapes:

Examples in HISE:

'Pointer Grip' Layer Element

Pointer grip parameters:

Examples in HISE:

Enjoy!

Here's the link again:
https://rox-knob-builder-for-hise.netlify.app/

[resonant]

@Chazrox Phenomenal work! Thank you for this!

[Chazrox]

@resonant Go buck! haha. You're welcome

[Chazrox]

Just a warning...rotation is unstable at point counts around 12 and under. Im working on fixing this now.

[Chazrox]

STABLE!

You can truly get wicked now!

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

Thank you @ustk for the low down on boundaries!

[dannytaurus]

@Chazrox Excellent work!

[Chazrox]

Major Update! :

SVG's has entered the chat!

(I just noticed I knocked the svg a little off center but you get the point lol)

You are now able to import your own SVG file and place it anywhere on the knob.
Aside from free placement, you can also choose whether or not the image will rotate with knob or not.
You can also shift the image around the knobs center to get some cool effects (heart examples shown below).

The process for importing SVG's is easy.

Step 1: Activate 'SVG BODY' layer element in the layers column to the left of the UI.

Step 2. Drop in your raw SVG file into the 'SVG Dropzone' (strictly for UI visual reference)

Step 3. Get 'HiseScript Path Number Array' with HISE's built in 'SVG to Path Converter'. Paste this into the second dropzone that accepts the HiseScript Path Number Array.

Make sure you use the right conversion or else your code will not work. This is the actual path that gets baked into your exported LAF function.

Paste Hise path number here:

From this point you can continue to design the rest of your knob!
These are the available parameters for SVG layers.

Here's an example of how you can offset the SVG and get some unique results:

ENJOY!

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