How to Crop button bounding boxes

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?

Chazrox

@David-Healey adjusting the colours exactly how he wants.

Chazrox

@David-Healey just another option for the guy. just sharing.

How to Crop button bounding boxes

4

3.0k

14.0k

121.8k