How to Crop button bounding boxes

Jeetender

I put down a button, it had some space on the left nd top sides, now when i test the vst panel, the button works even if i click on the area near the button, is there any way to crop the bounding box from the top and left side too.

David Healey

You need to draw your frames to fit the component dimensions

Jeetender

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

David Healey

@Jeetender if the image is the same size as the component it will fit. There is no cropping control, you're adjusting the width of the component.

David Healey

@David-Healey not sure what you mean about limiting peaks, do you have a snippet you could share?

Jeetender

@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

Jeetender

@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

@Jeetender Try adjusting the skew factor and padding size settings.

Jeetender

@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

@Jeetender post a minimal snippet

Jeetender

@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

@Jeetender I think you'll need to use custom look and feel to achieve what you want.

Jeetender

@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

@Jeetender I don't think anything significant has been added, have a look through the github commits to be sure.

Jeetender

@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

@Jeetender Should be the same as with a fresh setup.

Jeetender

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

David Healey

@Jeetender Yeah

Chazrox

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

David Healey

@Chazrox said in How to Crop button bounding boxes:

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.

If you're using laf anyway why not use the peak meter floating tile?

How to Crop button bounding boxes

6

3.0k

14.0k

121.8k