UPDATE // NEW: Online Knob Builder for HISE!! // SVG's has entered the chat ! =)

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

[David Healey]

@Chazrox it would be better to use the 64 encoded string rather than the array

[Chazrox]

@David-Healey I tried that first and was running into a couple problems so I tried this method and worked it out. I may try to just add that also as a different import option. Besides making the output code longer, I figured both methods are just as easy to the user. Have you had a chance to out the app? Would love to get some feedback from you!

[ustk]

Since it throws us code, I can really see this as integrated Hise popup or specific tool window

[Chazrox]

@ustk That would be sick! Im slowly building other element designers as well. Just trying to get this one feature complete as possible so I can let it go for a bit.