@Chazrox said in How to Crop button bounding boxes:

@Jeetender Try this. You'll have to use two vertical sliders and style them with this laf to get that look with this script. You can figure out how to customize it by reading the comments.

const var LED_Meter_Rectangle_TempGrade_HardStops = Content.createLocalLookAndFeel();

LED_Meter_Rectangle_TempGrade_HardStops.registerFunction("drawLinearSlider", function(g, obj)
{
    // ---- COLOUR CONTROL ----
    // Every colour this LookAndFeel draws with, in one place. Each name is one control in the
    // designer, so editing a value here changes that control and nothing else. The draw code
    // below only ever references these by name.
    var c_fillColourBot         = 0xFF03B300;
    var c_fillGradMidColour     = 0xFFFF981A;
    var c_fillColourTop         = 0xFFFF0A0A;
    var c_fillColourBot_a35     = 0x5903B300;
    var c_fillGradMidColour_a35 = 0x59FF981A;
    var c_fillColourTop_a35     = 0x59FF0A0A;
    var c_fillColourBot_a55     = 0x8C03B300;
    var c_fillGradMidColour_a55 = 0x8CFF981A;
    var c_fillColourTop_a55     = 0x8CFF0A0A;
    // Per-LED colour tables, sampled along the Fill gradient (one entry per LED).
    var ledColours = [
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillGradMidColour,
        c_fillGradMidColour,
        c_fillGradMidColour,
        c_fillGradMidColour,
        c_fillGradMidColour,
        c_fillGradMidColour,
        c_fillColourTop,
        c_fillColourTop
    ];
    var ledOffColours = [
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillGradMidColour_a35,
        c_fillGradMidColour_a35,
        c_fillGradMidColour_a35,
        c_fillGradMidColour_a35,
        c_fillGradMidColour_a35,
        c_fillGradMidColour_a35,
        c_fillColourTop_a35,
        c_fillColourTop_a35
    ];
    var ledGlowColours = [
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillGradMidColour_a55,
        c_fillGradMidColour_a55,
        c_fillGradMidColour_a55,
        c_fillGradMidColour_a55,
        c_fillGradMidColour_a55,
        c_fillGradMidColour_a55,
        c_fillColourTop_a55,
        c_fillColourTop_a55
    ];

    // ---- GEOMETRY ----
    var a = obj.area;
    var isH = false; // exported from current designer orientation
    var norm = (obj.valueNormalized !== undefined) ? obj.valueNormalized : ((obj.value - obj.min) / (obj.max - obj.min));
    norm = Math.max(0.0, Math.min(1.0, norm));
    // Axis-aware scale: horizontal skins scale from component width; vertical skins scale from component height.
    // This keeps slider element proportions stable when exporting either orientation.
    var scaleBase = isH ? a[2] : a[3];
    var sw = scaleBase / 300.0;
    // Output bounds: master Draw Padding on each edge (px @300 design).
    var padL = sw * 4.0000;
    var padR = sw * 4.0000;
    var padT = sw * 4.0000;
    var padB = sw * 4.0000;
    var dW = Math.max(1.0, a[2] - padL - padR); var dH = Math.max(1.0, a[3] - padT - padB);
    // Position the clamped rect by the pad ratio so a large pad never drifts the slider off-axis.
    var sumX = padL + padR; var sumY = padT + padB;
    var dX = a[0] + (sumX > 0.0 ? (a[2] - dW) * (padL / sumX) : (a[2] - dW) * 0.5);
    var dY = a[1] + (sumY > 0.0 ? (a[3] - dH) * (padT / sumY) : (a[3] - dH) * 0.5);
    var drawBase = isH ? dW : dH;
    var trackThick = drawBase * 0.1500;
    var fillThick = drawBase * 0.1200;
    var hPad = (isH ? dW : dH) * 0.0200;
    var tX, tY, tW, tH;
    if (isH) {
        tX = dX + hPad; tY = dY + dH * 0.5 - trackThick * 0.5;
        tW = dW - hPad * 2; tH = trackThick;
    } else {
        tX = dX + dW * 0.5 - trackThick * 0.5; tY = dY + hPad;
        tW = trackThick; tH = dH - hPad * 2;
    }
    // Fill has its own cross-axis thickness, anchored to the same centre-line as the track
    var fbX, fbY, fbW, fbH;
    if (isH) {
        fbX = tX; fbY = dY + dH * 0.5 - fillThick * 0.5;
        fbW = tW; fbH = fillThick;
    } else {
        fbX = dX + dW * 0.5 - fillThick * 0.5; fbY = tY;
        fbW = fillThick; fbH = tH;
    }
    // Radius from the rail THICKNESS (cross-axis) so the end caps keep one shape at any length.
    var tR = (isH ? tH : tW) * 0.1100;
    var thumbBaseW = drawBase * 0.1314;
    var thumbBaseH = drawBase * 0.0657;
    var thumbW, thumbH;
    if (Math.abs(thumbBaseW - thumbBaseH) < 0.0001) {
        thumbW = thumbBaseW; thumbH = thumbBaseW;
    } else {
        // Rotate width / height with orientation, so a 200x100 vertical handle becomes 100x200 horizontal.
        thumbW = isH ? thumbBaseH : thumbBaseW;
        thumbH = isH ? thumbBaseW : thumbBaseH;
    }
    var thumbSz = Math.max(thumbW, thumbH);
    // Thumb travel range: 0 = left / bottom, 1 = right / top
    var trMin = Math.min(0.0000, 1.0000);
    var trMax = Math.max(0.0000, 1.0000);
    var travelNorm = trMin + (trMax - trMin) * norm;
    // The thumb travels the TRACK RAIL - the same span the fill covers and the ticks sit on - so
    // all three stay in step. Track Pad insets the rail, and therefore the throw, by design.
    var railStart = isH ? tX : tY;
    var railLen = isH ? tW : tH;
    var thumbCX = isH ? railStart + railLen * travelNorm : dX + dW * 0.5;
    var thumbCY = isH ? dY + dH * 0.5 : railStart + railLen * (1.0 - travelNorm);

    // ---- FILL LED SEGMENTS ---- (rectangle shape)
    // Each LED is a solid segment coloured by its slot position in the Fill gradient. Crisp on/off meter.
    var ledN = 23;
    var ledLit = Math.round(norm * ledN);
    var ledAlong = isH ? fbW : fbH;
    var ledPitch = ledAlong / ledN;
    var ledLen = Math.max(0.5, ledPitch * 0.8200);
    var ledThick = Math.max(0.5, fillThick * 1.0000);
    var ledCross = isH ? (fbY + fbH * 0.5) : (fbX + fbW * 0.5);
    // LED Glow - blur the lit segments behind the meter
    if (ledLit > 0) {
        g.beginLayer(false);
        for (var fgi = 0; fgi < ledLit; fgi++) {
            var fgAlong = isH ? (fbX + (fgi + 0.5) * ledPitch) : ((fbY + fbH) - (fgi + 0.5) * ledPitch);
            var fglx = isH ? (fgAlong - ledLen * 0.5) : (ledCross - ledThick * 0.5);
            var fgly = isH ? (ledCross - ledThick * 0.5) : (fgAlong - ledLen * 0.5);
            var fglw = isH ? ledLen : ledThick;
            var fglh = isH ? ledThick : ledLen;
            g.setColour(ledGlowColours[fgi]);
            g.fillRoundedRectangle([fglx, fgly, fglw, fglh], Math.min(fglw, fglh) * 0.1100);
        }
        g.gaussianBlur(Math.round(Math.max(0.0, 5.0 * sw)));
        g.endLayer();
    }
    for (var li = 0; li < ledN; li++) {
        var lAlong = isH ? (fbX + (li + 0.5) * ledPitch) : ((fbY + fbH) - (li + 0.5) * ledPitch);
        var lx = isH ? (lAlong - ledLen * 0.5) : (ledCross - ledThick * 0.5);
        var ly = isH ? (ledCross - ledThick * 0.5) : (lAlong - ledLen * 0.5);
        var lw = isH ? ledLen : ledThick;
        var lh = isH ? ledThick : ledLen;
        var lr = Math.min(lw, lh) * 0.1100;
        var ledDrawn = true;
        if (ledDrawn) {
            if (li < ledLit) {
                g.setColour(ledColours[li]);
                g.fillRoundedRectangle([lx, ly, lw, lh], lr);
            }
            else {
                // Opaque black base first: Off Alpha then blends the dim colour over it, so a
                // low alpha fades toward BLACK instead of letting the background show through.
                g.setColour(0xFF000000);
                g.fillRoundedRectangle([lx, ly, lw, lh], lr);
                g.setColour(ledOffColours[li]);
                g.fillRoundedRectangle([lx, ly, lw, lh], lr);
            }
        }
    }

});

Dont mind the yellow dash lines. Thats just the guidelines from the designer app. Those wont come out in the render.

now this seems to be working fine and much customizable.. thanx a lot brother.

@Jeetender said in Latency issues..:

I made a vst everything works fine, but when i open that vst into any daw like flstudio/live/reaper/reason it gives out latency.. how do i compensate the latency automatically?

i did try this.. but nothing worked, BUT i had a dynamic module in the end of the chain, which had a limiter, i removed it and then the latency was gone after compiling the vst..

@dannytaurus said in This script processor has a network that consumes the parameters:

@Jeetender Check the docs. Looks like you're missing an 's' at the end - setForwardControlsToParameters

https://docs.hise.dev/scripting/scripting-api/dspnetwork/index.html#setforwardcontrolstoparameters

Yes it was missing am 's' at the end, thank you. it works but gives out a warning in almost every script "Warning: 'local' used outside of callback/inline function, treating as 'var' "

@David-Healey you know what david, my screen time for today is beyond limits, i think i should take a break and continue tomarrow.. too much coding for today.. But thank you the plugin is done.

@David-Healey i dont know whats wrong, but deleting panels and remaking them agian solved the problem and now the values are showing perfectly and fine. thank you for you guidance and help.. and after i restart hise, i wont work..

@ulrik said in How to Crop button bounding boxes:

@Jeetender This is a simple Laf version

HiseSnippet 2193.3oc6Y80aabbDeOIcNlrwMwot.8ohEJEETxTL7zerchaQn9GSXijLgnrhCrDTWd2Rxs73sGt6njXcDPereExa8SPeuuEf1OGE8iP+.D.2Y18NdGknjkYiMpcMePP6Lyt6LyNyuY18pGHs4ggx.hQ98F3yIFuuYiAdQcVuCS3QpsAw3Vl62eaVTf3zsXsHqMvmEFxcHFFS+EnHF4lgn98u+70XtLOadJIBYeovluknmHJkZ8Jekv0sJygumnWFoWtRMao25RWYePcl1rLwmY2k0luCCEaJSxWxB6PLl2z1YY6ksuWyksXrV22p483Mef08s3OvdEmO01lYuRSaqkVhQLtwlNhHYPiHVDOjXLyZRmAM5HOwSuA6KBEMc43.KRCXm0jqJccPSDoRVuiv0odheJjPLLqm50lV60ti41BGwP5oduOTwflNirNPioFU8ldD0yJq5UNi5MFUxHiJMiVktsYC6.geTJGTe9Il07h3AsXv4TVUQKKYp+wLlqKAI7hJ0i0kWM.FLbFEtW4xEoKWt7bOLed3rJLhV0UxhDds2S3xWl9aoIStMOZcYOeoGLnvriH0rvr0S1k0JyTrC3faXKoMycKor6pdNU4b2BfzfbkB3sEgfdTsumcjP5UXVm.1I5.y5bV2s4.yYKRakvucQpr4eXt7OKet1kBQ0ACrJ.zJ0rsd.rz.uVPz3tx9dvQ9tb6HlWaWtRLFnPEoKhRkO2wr.ZO1oMbkQgfRCabmR1bg6PIe5RGR+DpZXHucOvhZH9ib5cQsnjOywArejxbnySsb1bzwBK1vkXwC+jEenlYHrQwrtxkKV7NYWlkNToxsjAzBBfQ4GREzeihuW+dPvomG2MDHd26NW9bfCRsD.qKZcJ6wG7ugOUbHcdZm4.iD0Mzq.6gdSB0aRHrIIqBLRs5pk+Bm.hHduzyfbW1ovS0tn4EfcWvZdwbEACcAZ37nFTL1AVToOKbN+xgEoVp09LsdJZoOafyv5Jyo7gzu8aoiPx5vgJL5PPytg9XP4PBP0qvnqxXbJYCUFNUvd3ERVvhTHMJIXJwALpCJheZzj6fR184oubNpyxeFFcNR5JpXWHoDxHm6gIoZTo2NxH9i7Jnx1xeVd54Y0p0X4go9ARWWdvXYi0GBtpIV.h1ZhF1wL297gBBXfiBrZd4.qYw8s0HQYDT5UySD8Het2kUMfDCegfvwZEHZjBB9mFCA2vU3vCHB.o88L+JOYSKhRgiq886WZoOtB4w01fEwRVFXEgcwmGDIPCvXC9wPkTMxdNyM3gcij9vFMDjEpbGEWJRuoYODUa8GXNx4J4zgkd+ScqLHsNbsJwJPRcjyAxRRfOgobib49nmiSJMgFo96964OG0EQxDhhJQYnS8KMLeVdJc1gdyZNy9YzYaH546xoXyEVyVDEnFDyeJvZAK0Pn5rq7juVFzMDZPfCLZwbC4JdMzPkawcvPaf0xkJqX7X+M31rAXDEPsbL0MfC5wQ+wg7FfRaySvJGcS5xOoJyFhu.xVwSodZFEPcwXpXnz1ZrhLxFupJ6hiq8SApTphIkZA+8v7mQNQ3D0I6wRGtncmzFo9W9URQIzt2eP6eyDTbqWXj3kDFToekdBGGWdcYn.y5x1VGTH1GszXZ+ku669aedurMC9MeO.AkNbsJg8a0R.TLMoNqQ5IchiisEM4tDzNfl0LUcT5mFOnT7LwCPGgAPyfPPHxKVdxDmCrRFi+6CdqMGn7+WkC7bs+8hMDCshKc56xhFs+bzIGy.ixy1TL13qGD8OH6sbNeS6yb8ZZ+puSw0UcusYcQjcmwquSMF8Epm7pVeiuBzsL2rUKnwjTkcFypO4Uz8cl9h9q7I47OQs4ue7PZ0mXMta5X7mMSanvOfCHK78j0cYCJDxvrucAcrHsoqztqps8KzERLN0ZnDEriSRljlUtw01qXckdEBzdHBsowp.r1cfdwGIEFnYLEVfPOtLNFiQZv8bTCdN7KloEN1HloUByz1cH6viNAAfvVVh+ehwMQe+O2Dv77g.T9QgJusGh2uOOHTUG48LALlRkIqhXXH3sHNVFNcTzpKcG32Q5IrQRZIRrgU6A8.GkXHoIBqkbPkXSeIKbOlvEyKZzOD5fy4QdMf0Q8BEPrnwNphP2PihMnNCAZtsI1CHD.yCJYOLPd71SZPEdbnejhwKItSIPTZkCrodpBVSYBSG4qRpRptEmgkz9m9983HHydJczcsv8QtPe4j808RBNjIoGxrox2b3a.oJ.8EouATJAqq3MffxZbHCJKgudTD7uoxXdknZdGCJIbpyBNO30z+HkaXLy0FgEMI5aLUD9HSkK+MIEVER7liB+gl0Y+uP.wqCz8qAVv45H+R.CT2o8cfAuCL3cfAuM.F7yR5we09NB4VRrqBk+3NZJTjDE6dlGb4MH7W+g+408iD4es+HQMF3Yus98DF5yUWRZu.lcWvGkcqP0bSOF3ucxJ+tRYD9NkY+HUMT2B.N0BhfkO6hrKGPnB4iPqJzYotEvmYt4mcPcl6B5qQDdvmVhBphOENebOXKlmf0kyvQdNgzER4Q+0zp8i5Gvo65s1AaDzu2Qn5FdvVM1qQ0cOZynN7.Ny8ngrNZwirrVYs5aez5eboSXGSTuAi9bV89K5+0EDUYGYIromSxvyiqNy0CW8E7Uxl4U0WI60b99+suOvONeTubI5nt36lPQRWHIbHpeKVe2nDpilAtszSlbaprAw.xQ617fr59XMnUihfDoTJ2oxtbWNKLS1xupxVvUlXAmOO7kvWX8R+ANG640uvTqtTD1f91w65L8aZuqyaNk3dcrG8X1Axir0OBDFKeSEEvt8TELxYtMNlN5GER8qGfJdjs8nK0El3hS5DWZRm3xS5DWYRm38lzId+IchO3EOQrn0p8ij8zorDx102T8.LFFCaxvXZx+gHAGLe

this is absolutely amazing.. thanx again for the snippet.

@Chazrox said in How to Crop button bounding boxes:

@Jeetender Try this. You'll have to use two vertical sliders and style them with this laf to get that look with this script. You can figure out how to customize it by reading the comments.

const var LED_Meter_Rectangle_TempGrade_HardStops = Content.createLocalLookAndFeel();

LED_Meter_Rectangle_TempGrade_HardStops.registerFunction("drawLinearSlider", function(g, obj)
{
    // ---- COLOUR CONTROL ----
    // Every colour this LookAndFeel draws with, in one place. Each name is one control in the
    // designer, so editing a value here changes that control and nothing else. The draw code
    // below only ever references these by name.
    var c_fillColourBot         = 0xFF03B300;
    var c_fillGradMidColour     = 0xFFFF981A;
    var c_fillColourTop         = 0xFFFF0A0A;
    var c_fillColourBot_a35     = 0x5903B300;
    var c_fillGradMidColour_a35 = 0x59FF981A;
    var c_fillColourTop_a35     = 0x59FF0A0A;
    var c_fillColourBot_a55     = 0x8C03B300;
    var c_fillGradMidColour_a55 = 0x8CFF981A;
    var c_fillColourTop_a55     = 0x8CFF0A0A;
    // Per-LED colour tables, sampled along the Fill gradient (one entry per LED).
    var ledColours = [
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillColourBot,
        c_fillGradMidColour,
        c_fillGradMidColour,
        c_fillGradMidColour,
        c_fillGradMidColour,
        c_fillGradMidColour,
        c_fillGradMidColour,
        c_fillColourTop,
        c_fillColourTop
    ];
    var ledOffColours = [
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillColourBot_a35,
        c_fillGradMidColour_a35,
        c_fillGradMidColour_a35,
        c_fillGradMidColour_a35,
        c_fillGradMidColour_a35,
        c_fillGradMidColour_a35,
        c_fillGradMidColour_a35,
        c_fillColourTop_a35,
        c_fillColourTop_a35
    ];
    var ledGlowColours = [
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillColourBot_a55,
        c_fillGradMidColour_a55,
        c_fillGradMidColour_a55,
        c_fillGradMidColour_a55,
        c_fillGradMidColour_a55,
        c_fillGradMidColour_a55,
        c_fillGradMidColour_a55,
        c_fillColourTop_a55,
        c_fillColourTop_a55
    ];

    // ---- GEOMETRY ----
    var a = obj.area;
    var isH = false; // exported from current designer orientation
    var norm = (obj.valueNormalized !== undefined) ? obj.valueNormalized : ((obj.value - obj.min) / (obj.max - obj.min));
    norm = Math.max(0.0, Math.min(1.0, norm));
    // Axis-aware scale: horizontal skins scale from component width; vertical skins scale from component height.
    // This keeps slider element proportions stable when exporting either orientation.
    var scaleBase = isH ? a[2] : a[3];
    var sw = scaleBase / 300.0;
    // Output bounds: master Draw Padding on each edge (px @300 design).
    var padL = sw * 4.0000;
    var padR = sw * 4.0000;
    var padT = sw * 4.0000;
    var padB = sw * 4.0000;
    var dW = Math.max(1.0, a[2] - padL - padR); var dH = Math.max(1.0, a[3] - padT - padB);
    // Position the clamped rect by the pad ratio so a large pad never drifts the slider off-axis.
    var sumX = padL + padR; var sumY = padT + padB;
    var dX = a[0] + (sumX > 0.0 ? (a[2] - dW) * (padL / sumX) : (a[2] - dW) * 0.5);
    var dY = a[1] + (sumY > 0.0 ? (a[3] - dH) * (padT / sumY) : (a[3] - dH) * 0.5);
    var drawBase = isH ? dW : dH;
    var trackThick = drawBase * 0.1500;
    var fillThick = drawBase * 0.1200;
    var hPad = (isH ? dW : dH) * 0.0200;
    var tX, tY, tW, tH;
    if (isH) {
        tX = dX + hPad; tY = dY + dH * 0.5 - trackThick * 0.5;
        tW = dW - hPad * 2; tH = trackThick;
    } else {
        tX = dX + dW * 0.5 - trackThick * 0.5; tY = dY + hPad;
        tW = trackThick; tH = dH - hPad * 2;
    }
    // Fill has its own cross-axis thickness, anchored to the same centre-line as the track
    var fbX, fbY, fbW, fbH;
    if (isH) {
        fbX = tX; fbY = dY + dH * 0.5 - fillThick * 0.5;
        fbW = tW; fbH = fillThick;
    } else {
        fbX = dX + dW * 0.5 - fillThick * 0.5; fbY = tY;
        fbW = fillThick; fbH = tH;
    }
    // Radius from the rail THICKNESS (cross-axis) so the end caps keep one shape at any length.
    var tR = (isH ? tH : tW) * 0.1100;
    var thumbBaseW = drawBase * 0.1314;
    var thumbBaseH = drawBase * 0.0657;
    var thumbW, thumbH;
    if (Math.abs(thumbBaseW - thumbBaseH) < 0.0001) {
        thumbW = thumbBaseW; thumbH = thumbBaseW;
    } else {
        // Rotate width / height with orientation, so a 200x100 vertical handle becomes 100x200 horizontal.
        thumbW = isH ? thumbBaseH : thumbBaseW;
        thumbH = isH ? thumbBaseW : thumbBaseH;
    }
    var thumbSz = Math.max(thumbW, thumbH);
    // Thumb travel range: 0 = left / bottom, 1 = right / top
    var trMin = Math.min(0.0000, 1.0000);
    var trMax = Math.max(0.0000, 1.0000);
    var travelNorm = trMin + (trMax - trMin) * norm;
    // The thumb travels the TRACK RAIL - the same span the fill covers and the ticks sit on - so
    // all three stay in step. Track Pad insets the rail, and therefore the throw, by design.
    var railStart = isH ? tX : tY;
    var railLen = isH ? tW : tH;
    var thumbCX = isH ? railStart + railLen * travelNorm : dX + dW * 0.5;
    var thumbCY = isH ? dY + dH * 0.5 : railStart + railLen * (1.0 - travelNorm);

    // ---- FILL LED SEGMENTS ---- (rectangle shape)
    // Each LED is a solid segment coloured by its slot position in the Fill gradient. Crisp on/off meter.
    var ledN = 23;
    var ledLit = Math.round(norm * ledN);
    var ledAlong = isH ? fbW : fbH;
    var ledPitch = ledAlong / ledN;
    var ledLen = Math.max(0.5, ledPitch * 0.8200);
    var ledThick = Math.max(0.5, fillThick * 1.0000);
    var ledCross = isH ? (fbY + fbH * 0.5) : (fbX + fbW * 0.5);
    // LED Glow - blur the lit segments behind the meter
    if (ledLit > 0) {
        g.beginLayer(false);
        for (var fgi = 0; fgi < ledLit; fgi++) {
            var fgAlong = isH ? (fbX + (fgi + 0.5) * ledPitch) : ((fbY + fbH) - (fgi + 0.5) * ledPitch);
            var fglx = isH ? (fgAlong - ledLen * 0.5) : (ledCross - ledThick * 0.5);
            var fgly = isH ? (ledCross - ledThick * 0.5) : (fgAlong - ledLen * 0.5);
            var fglw = isH ? ledLen : ledThick;
            var fglh = isH ? ledThick : ledLen;
            g.setColour(ledGlowColours[fgi]);
            g.fillRoundedRectangle([fglx, fgly, fglw, fglh], Math.min(fglw, fglh) * 0.1100);
        }
        g.gaussianBlur(Math.round(Math.max(0.0, 5.0 * sw)));
        g.endLayer();
    }
    for (var li = 0; li < ledN; li++) {
        var lAlong = isH ? (fbX + (li + 0.5) * ledPitch) : ((fbY + fbH) - (li + 0.5) * ledPitch);
        var lx = isH ? (lAlong - ledLen * 0.5) : (ledCross - ledThick * 0.5);
        var ly = isH ? (ledCross - ledThick * 0.5) : (lAlong - ledLen * 0.5);
        var lw = isH ? ledLen : ledThick;
        var lh = isH ? ledThick : ledLen;
        var lr = Math.min(lw, lh) * 0.1100;
        var ledDrawn = true;
        if (ledDrawn) {
            if (li < ledLit) {
                g.setColour(ledColours[li]);
                g.fillRoundedRectangle([lx, ly, lw, lh], lr);
            }
            else {
                // Opaque black base first: Off Alpha then blends the dim colour over it, so a
                // low alpha fades toward BLACK instead of letting the background show through.
                g.setColour(0xFF000000);
                g.fillRoundedRectangle([lx, ly, lw, lh], lr);
                g.setColour(ledOffColours[li]);
                g.fillRoundedRectangle([lx, ly, lw, lh], lr);
            }
        }
    }

});

Dont mind the yellow dash lines. Thats just the guidelines from the designer app. Those wont come out in the render.

now this seems to be working fine and much customizable.. thanx a lot brother.

@David-Healey so can i install faust as i update?

@David-Healey OK david i will update, i just need to confirm i did not install faust at first when i pulled hise, now how can i install faust ?

@David-Healey well i made a panel meter i used in last project. thanx anyways. are there any new modules added to HISE lately, ive been away for like 4 months now.?

@David-Healey ```
HiseSnippet 1788.3oc6Y80aSbDDeu3b.17mBTpTep5DsphVAQwgjPgWvwIwTWhCV4BApZprVe253UducOc2dj3hPpO1uBsppeD568Mj52i9Yne.PhN6d246bhSvXfTfV+.hclcu82L6L+lY2zLP3PBCEAHiRa12mfLNiocetr6xcwTNp9JHihl0nLII3gnp88wggDWjgQg6nTaTbZj92ee6pXFl6PxDgPaInNj0ndTYlzlUtKkwpgcIaR8xM64qT2QvWVvDQ.TJXNKxG6zCuCYcrZZSYh9ZbXWjwWZd81cVbdmx2nM9Fycy12bwEu4BtWuiKdtqSbZ2FOGATO+BcVDYbhUcoRQfsDKIgHioqJb6a2UrKOdC1hFRayHpAkQ1vNGKtlf4pLQkTzxcoL2lo9nPDxvrYlGqPrG6RlMntzAxy7bmWqvJaE4cfFSML7JLD7JmGdylCdi.RF4fzzwP5Bl1NATeYlFEdNsYcNbP1ACmS4gR7bQF+poUmHtijJ3VB95BI4d7q7EkdbohkdRoCnpSmQpaYAWFHXLRvHUqN1CNpEdEdjWaRvUsdDlEQFLQvzF1eYd39q7GmPTkjvk4lnfWmSk2ymvOrCYzxwKR4aSPELUo1ydtDOqMi5RBPTvAdRy6xEsKiz.NKjtZEz8quBVhS+LvWD1EeRfjpL.iUHOBRPhOvJZtBIrmT3CazxBOeAWs+FmQlDgEuo0XBrjx2YSJXnps9CLyKZdzdC19erWk9YXodkD.jFdz.KCn60jf60f.gDn16jl6U7DEKdwmqVDUR7xj9M+Yo8IcNkXDRKEoMzo9DCyGWxx5xC7l0cu7srtrM0ymQrTbFku7UUSnN2krGn5Zk0CgjNlX2GHB5EB48DPQGLKjn0YS1wCP9ZDWa5OnTM+LypUbe+UHN39pHJP5rIRWANnGk76GRrAP6Pf7SNmvBGdS5Q1sF1Ahu.wkSVRSrqK3ZS114RjpBkZf09tbyM4qpsKh5a+cfTKKsRKqxv+98kdBZWpqDXwLMlCbYcIzc5JUiNmABII6Iy71Hzyh8q4BFN6KLB7PN9qDUwi55xHMEgTU1VdV5PIwWYgJY+xOq98G21KO2929TO7d4CqCi5zgBRLMsbqh7DtIwuNz1Dl1N.tWScAB+r3.MvyEG.D7A.2ND7ozkLezDG6uPNi+oAu2F6O6+Ih8edre8f00fJpB2HFVNbYVkyMQgJ5NesMUEOND02OeyJ6u16ziWs2it0fwEtWvrIU5zcz3cpQfWn9waZ7lzIyYMWsSGhiLCrSaV6gugZaovA8WkRy0endyOSxPqZOr7HaX4mx0vhe.AXTHaJZxv8uRHVk0sAfwqZ0lIb5oBjOXWGI7SUUy3JNIIGSRyImXr8JkORuBZCQjhRKliBxOVOxa3TWUNyTpBCwimUMVEiXS3t5AOG9knrrZrQhxxoJyZuAsNQtqh3Q0hRx+GYbJku+iLAtNeH.kzJT6s4Jd9sHAg55GmzD3VlYVzRJtKEoMMIVFNczxZJX886J3TGkn3YjZCK4Ih3xTCIKQnZ5AUpMA87uIlxT4E1QgPGat2iaCeG8EMfXQi00EeNQL6U+lXEAyELU87AAvjfYbFDHOZ6IKnRcbDeWiQOS0NkRQECNvl7zEpfKmXTPoWmTkVUKICKscu31zUifL6ohitqGtkRqClg1Jt2QvgLI8LlOU9TCtFmtvycRc.mMmfxGwU4fxYDHCJufGDybOngfJi3xd04OB.IbpiC1O4UgWS4FFSO1LrJSx5UohvDSqMtUAtno1M+1NH0G8ucCxya1D+u0g8wAa8XjauuNqO7j6pU9+j6i418dcjneLC3W8j9iU.+pS.75AtGyjAeXZO6KE4REqITcIn8GWJVhkRjkpaXRvgyI76O6uF22t0ere6V69bmFwuKv.et9ROaFfc5A9n7akBlqxwf+1M+72PHjp2YL+aGaq6pGN0BjvmO+GYCBvPERFRVMnSw3V5dr4p2Z6lX10huVP312bFK.J9Vv4Ca60vbJtGAqFwcCstVlNqO2pVjLJfXsAu51qDD40RA2vsWydS6ZazZUYWR.AyZMPUq4ZUt7BUa1n0xe5L6heDR+VJwmy52Qwz3z+lIhASUaGo5XZufap98yqN83wq9Bd75oeS830Gy46up22+0yasWLEiwEeWEJRxfjvAr9cvQLYpzgy.aH3hzaGkOHFXN1YGRPdrORCZIoDRjxjboJaPXDbXtrkOqxZvUfvA6OO7kvWT9k9u6vHOu9XyX3ZonMrd+3cZJ7t16z7tSItii8vC6DHZ4D+nNpX4Sok.1MWWvnnYC0XqC7G0AHwAVwVNNC+oNvBmaRW30mzEN+jtvElzEt3jtvaLoK7qdwKTUzZoHovKNkEgZzbU8CpXXLnICiBn+g1D50G

@David-Healey ok, i tried different settings but it did not work.
the red peaks are supposed to stop right at the top.

@David-Healey like in this image, the first image there are red peaks, but as the signal gets loud or i push, the red peaks are supposed to stop at the top of bounding floating tile box.

@David-Healey is there any way to limit the peaks in the matrix peak meter to the panel size? if teh signal gets loud the peaks go outbounds

@David-Healey yea did try it and it worked but still there need to be a way to crop the other side..