Preset Display Bar - Display your preset, Previous & Next Buttons, etc.

HISEnberg

Dug up this old script which I am going to modify for my own uses but I thought it might be helpful for some beginners or at the very least a time saver for others.

It's a very simple preset display bar (a lot of this looks like it was taken from David's videos, which is a good place to start). The script includes:

Preset Name Display: Display the preset name in a panel
Open/Close Preset Browser
Previous and Next Buttons
A few LAFs and Paint Routines some may find valuable.

It's not much to look at but hopefully useful for someone!

ScreenRecording2025-11-15at8.45.48AM-ezgif.com-video-to-gif-converter.gif

Snippet

HiseSnippet 3016.3ocyZrsaabbcorW2R0jlDz7PebCQPAUBixRRQa4ZXTck1BURlUT1wAFBFC2cH4TsbGhcWJa0DCz+fluf9Ozel9bepO225iomyL6kYuPxkLN.cW.ItyYNWmybNm4ROOtE02m6oUYyKucJUqxGn2+V2fwGNlvb0N4HsJ+J8ddTeZvADOsCtcJw2mZqUoxcdB1gJUuql34+7GNf3PbsnIMoo8BNyhdJaBKHo0d68GYNNcI1zKYST58N6chE28PtCeFHL2Q2TaJw5ZxH54Draanq8Th+XsJeg982cf4Cd3vcG1hRGLv5gDayNTp08ICF7.SRyV1Co6Z2ocasJ26XaV.2qe.If5CD8.t8s8GyeiqjAuf4yF3PwOZp0G3rrYsCGybr6EYY70zpb2dI1o6HsSep9YLaVb6I1qOV.vHACUiVkMVjH0bEDoJJhzckhzmn22xiMMHAhb76D2.p2PBL1nJJx9pswe+yzOjC8vMX6Ijqoc8fOhwn9NllMLZaZt0i1bSX7wOv3Fhmgkavqi8JLdrQDAFQCNjOYJ2E9ndsT8pFPgBIfG+M9zRQDYOqkVTFD3FB+b5aClKYR2szBSBL3u2TBRfcKMIl55DB6Hl+TGxsykJ45YZBcs6fPvBWDjFdbm4Rsh6dFSzojggc50GLKH.ZWgdVdT.wS4VDmS47q220tKk5TGofKLyyGlERMhGE2761r5W+0FOt3GEXFce94Gd4IO679F4fU.dLWGlK0X3LWq.F20HfOZjCUxVTRgIWTu5L+mMk5t0lUAov.dX9wvP.fVI6wijfy45r8PHrSh0S14FFCCCFsUHd4Fh11iNE3R.ZUp9tMEpRzHygDGmAPjJ+MERTF8f6l1wKDq5VQBQCXDxYFcKA1em3uB5LrtR63S0icGAjdaGNwFozyA8QR25CIN9nvicCjtkIGn266G4.oDiOye9xR07BRwtrEHIQixNnuog0LOO.pDSXjNTLvoCRHIBAlwndzfIanQ8L39XiZ01RBMjEEOpi5Ss.LbQizrOh1uS9OJnxuGIWob+NwkEvHNr+BUwCrZZmssCm7.l2n9TeNNjHkS6grLjU7hPjKdTsXhTbewHNnls+zoN2Zb59cKRcxEmJershUkxgnP.B+byp46BLRLh4C4F6F5OWulsG4MWJhVI6CL3F4rWeTCC9f+bhmrHyG2CBWcAwlMCCCuCxTDFv39ybuFhhgVoQd7Yt1Idv.Y11FpRHua6HT6dhGPOvepKTZU8WY91tca0AeE7eaBDh+UlWo7QyqZjPgBdPJz1DemOEL9xjuZeEFEElFbUASMhU.9MTuRq.M2Ee+on.sZiuuGTfxJxlCw2eJhbSB99STjGs8PPjt.cfn1WPsBHtf2Y8HDajxEbKE+uSbwvi9iIfmVDoF.N7tmRtEx9F3MKNEYgVf6aJeVGKf4aMWJ1f1uaVcdNJ6qTnAfVyrzQsgVWY7UFsZnZYwFtJsgBZpYBSGQl46yHtG3Lyqdqj1ot1Rikpc8INPQ2FzgCAwaI1ULBwHr6OkxFMFyyoJUegg416rnQfVc5JdVyQfkhMX4Tjt0arnUVJ1J6XwNMT4R9wgVyYbn4RFG12CJCzvO3VnjjQoishglL99u2XIwYkKOsNNU8nCw2RGsPAy86dXqCeXBlwx2QPpDCBJj9J4Kn3ZwdopmfYp3.fI6qMZ8nrX7spXjMxQFLD7rOVKgRBoHSCyVTwT1U+TfZhoBOEJJqdjL+kITtQrh7U4a7aKrwFFM2tSjYZNb3qJhCeYgDKhUofpvgEODt9bds0sRa8Jkt8tnxad7BdTW.Wu8O47KMt3YO+xSN+3xrJNYGD83EDOFYfCE7iSVF527zSt7XvCSjpT77HUvO6h8O+IQvO7A3K.GJ3Jd8Y.rVBjvFY9OEmzRAuSYXn31ytlvPnBAqGVGsADhJ.5fuwuy3LX4KoJgN0lVfybEnDhQ8jR6RWU2.LnGVOWvXlOtnDQ8lGHZstoZz8L0+sqR7oChK7yXTXf8EDqGpPqC91Hj4hX0g+bww4SpynHLAmnvemuBi4DgW1+4WXw4bFXjwk9LyitzJKH11BDpqLArFwY5XRseOj.zrihtUaB2kaM1iOgDvr.3HoTg6CCCztDq.tm.6G1IbFwRxUTTsPELHzItnkUcPvbgXhknb+xleMl.xjopDo0hq4LrqQYciG2wOKNuarA5R9TiwP9YGLG8BrPsMiJpX0sPKBSP4VKCTyLV4xaf.S6NEWTXxLXNrDvIkxtrTsScvX2EYmZ1orT58f8RUpZuR1tVK014YS87ULYJ0L0wDeSjaLYYoBC0PspcUZ1Nb92Rn46OeGUKWQ1hPIUlmtvcOpTYhHqQRncTAs56yVY1.iLokW48wPtTDwJXRs6DIsiE+ThMhHttgUdmHxJBQ6uvpHBq5VIjkmQItKKOmyL7B1D.kLeP6f2JNarnIN6VxINIK8NYM2IK1lrrIBueV87ptr4z1ayBZe8VBbxZeSVz6Oyq1UZ2hSEYf6CeQim6DlHpjpP6XUncrJ.IhalWvaWbf2l432B8e5jxMGHamX11zrP9l0A5R7bAs.16M2vQ3R+WVfgetW6OeJtwCxEvkYo4uT3IaJMBRUuS1ku+sh9jXnV3J7qlYImgbI0hKks0Hh5xYsxeKbeUVdYNJEgc5EjphsJUkTJ1TDl5AWtPhBfesuGEyt8J0IoQQT5HCobkpKWWNdDoCg+VCJ+vbkOQHoZsOL8wkZidQ0qcDcHYlCRuHApgQMb02feSsxuSBpzLknrL5tfpCDqjM9TVhKOfdCPEkiLETdQSaa4vrttHu8hO60OKaFbkMuPTug5gToXERX33h2+e0ExiAyKIcKz5VzlBrLhglz2soxATdNOf9L25agm0M.wHKngCKDV3wX4fggK.LtAFdKBw5tylLf5Ee7mgcTqxcSekQtW4txHVxy2WoibW7PCwwN42c4N13UAA+c9KXhV3ED.upIgRHz0.wEM4WGdQS56vfhDzX.Q9s5EepdZBsQ8RAo87SNhDPhnqv0mOk5EvPsqxQzaXVT4EZop9QT+qC3SANGer8fEPJEeXz0cg3RcDBwGomZ2azdqJeuU8i2vrCFqUQuxOTQSarHyK9UW.TJVsYZEVdDeBd8w5oOcREl8ulsmBy978hYVKMUlge4StgdhqjJ3kxYJAiEnH.YUIl+Y7I.DhGvhJaLQLoelm3Z.8o583fyMyczSIt1gspsxZCt+tpltO++S0lpyyM32nmK.op9b9bzmZUxpOPvT9ah2aPzJcHFzD22PQbFskpfXzbXFrduVoD8ew7E8bWZk44E+W+S6MGu3+M.8lnnBUtCNOKlyePP3sWSx4tNbBZhujA8UNERsol4XtdkEL8AYbNSRQpT3De4r7OROMvAihtEfUuGPv+KxPV.cRRq+ie7G9wzs1JryhGQ3kM9mani2ikZXDv9fiY3wyGsEggPN9sSIt9PfX+8g7aNylf8Pj5HtKh3jdEiNlPvOGMg30gWX.UPIMCoP.8EfAUvFgz911EyhKn38vpXXGQcnAyAVeJwyZLdy6T.zkbC2CLa3csLVJRDBUvoPaliSORv3H39oLRg55IfczlJ2FmTvOe1DooEQqsnI42eC5FcA3swA.uRbmgL2tclmFqX6PyWI3woLeQkTw5YHGZTz+hwRJYWveSOhsMLMnr3Eatk62BhlDvYbuvQnrPR7JyBIxNmC5luKUbj6s54imWNwK2aBIA1d+s8Thfnk+tl9w5mwsm4PBRe0WwKEbH.XNUp6aJdmRAOjfaUuzvqv8g0bg2G1xJhehdOVf03hkwMJPFgBB94PFCuEwen9whM1HQ.uqd2WttWY3kvd4VGN5LRfGCFp0g4k8gXmVTf6tPFHeLF9FXoexuMiB22m5ZK93GgmPfMwuqDBrYDPsIDKO9qsjNa38T9WJZAjIWw83tp9Y32FMyWX3DlM60VVoIUNDastH1dcQbm0EwNqKh2ecQ7AqKh6tbDwa099yBDmzFLsQS6rdGKxzVoxwt3g8J7V09ecu4xY.

Code

Content.makeFrontInterface(400, 300);

const var cnt_PresetBar = Content.getComponent("cnt_PresetBar");
const var cnt_PresetBrowser = Content.getComponent("cnt_PresetBrowser");

const var btn_PresetNext = Content.getComponent("btn_PresetNext");
const var btn_PresetPrev = Content.getComponent("btn_PresetPrev");
const var pnl_PresetDisplay = Content.getComponent("pnl_PresetDisplay");
const var knb_PresetStateControl = Content.getComponent("knb_PresetStateControl");

const var Laf_Preset_Buttons = Content.createLocalLookAndFeel();

namespace PresetBar
{
	// =======================
	// ====== FUNCTIONS ======
	// =======================
	inline function togglePresetContainer(isOpen)
	{
	    isContainerOpen = isOpen;
	    cnt_PresetBrowser.fadeComponent(isOpen, fadeTime);
	    pnl_PresetDisplay.repaint();
	}

	// Control Callbacks
    inline function onbtn_PresetNextControl(component, value)
    {
        if(value)
        	Engine.loadNextUserPreset(false);
    }

    inline function onbtn_PresetPrevControl(component, value)
    {
        if(value)
        	Engine.loadPreviousUserPreset(false);
    }

	inline function onknb_PresetStateControl(component, value)
	{
	    local currentPreset = Engine.getCurrentUserPresetName();
	    if (currentPreset == "")
	    {
	        pnl_PresetDisplay.set("text", currentPreset);
	    }
	    else
	    {
	        pnl_PresetDisplay.set("text", currentPreset);
	    }
	    pnl_PresetDisplay.repaint();
	}

	// Initialize Callbacks
	btn_PresetNext.setControlCallback(onbtn_PresetNextControl);
	btn_PresetPrev.setControlCallback(onbtn_PresetPrevControl);
	knb_PresetStateControl.setControlCallback(onknb_PresetStateControl);

	// Apply LAF
	btn_PresetNext.setLocalLookAndFeel(Laf_Preset_Buttons);
	btn_PresetPrev.setLocalLookAndFeel(Laf_Preset_Buttons);

	// Buttons
	Laf_Preset_Buttons.registerFunction("drawToggleButton", function(g, obj)
	{
	    var cornerRadius = 4;

	    // Sunken background
	    if (obj.down)
	    {
	        g.setGradientFill([0xFF252525, obj.area[0], obj.area[1],
	                           0xFF303030, obj.area[0], obj.area[1] + obj.area[3], false]);
	    }
	    else if (obj.over)
	    {
	        g.setGradientFill([0xFF181818, obj.area[0], obj.area[1],
	                           0xFF232323, obj.area[0], obj.area[1] + obj.area[3], false]);
	    }
	    else
	    {
	        g.setGradientFill([0xFF0f0f0f, obj.area[0], obj.area[1],
	                           0xFF1a1a1a, obj.area[0], obj.area[1] + obj.area[3], false]);
	    }
	    g.fillRoundedRectangle(obj.area, cornerRadius);

	    // Inset shadow
	    g.beginLayer(true);
	    g.setGradientFill([0x60000000, obj.area[0], obj.area[1],
	                       0x00000000, obj.area[0], obj.area[1] + 8, false]);
	    g.fillRoundedRectangle([obj.area[0] + 1, obj.area[1] + 1, obj.area[2] - 2, obj.area[3] - 2], cornerRadius - 1);
	    g.gaussianBlur(2);
	    g.endLayer();

	    // Glass effect
	    g.beginLayer(true);
	    var glassHeight = obj.area[3] * 0.4;
	    g.setGradientFill([0x25FFFFFF, obj.area[0], obj.area[1],
	                       0x05FFFFFF, obj.area[0], obj.area[1] + glassHeight, false]);
	    g.fillRoundedRectangle([obj.area[0] + 2, obj.area[1] + 2, obj.area[2] - 4, glassHeight], cornerRadius - 2);
	    g.gaussianBlur(1);
	    g.endLayer();

	    // Arrow styling
	    if (obj.over || obj.down)
	    {
	        g.setColour(0xFFDCDCDC);
	    }
	    else
	    {
	        g.setColour(0xFFAFC2C9);
	    }

	    // Draw arrows
	    var centerX = obj.area[0] + obj.area[2] / 2;
	    var centerY = obj.area[1] + obj.area[3] / 2;
	    var arrowSize = 4;

	    if (obj.id == "btn_PresetPrev")
	    {
	        g.drawLine(centerX + arrowSize, centerX - arrowSize, centerY - arrowSize, centerY, 1.5);
	        g.drawLine(centerX - arrowSize, centerX + arrowSize, centerY, centerY + arrowSize, 1.5);
	    }
	    else
	    {
	        g.drawLine(centerX - arrowSize, centerX + arrowSize, centerY - arrowSize, centerY, 1.5);
	        g.drawLine(centerX + arrowSize, centerX - arrowSize, centerY, centerY + arrowSize, 1.5);
	    }
	});

	// ============================
	// ====== PAINT ROUTINES ======
	// ============================

	// Variables
	const var WHITE = 0xFF000000;
	const var ORANGE = 0xFFC7C7C7;
	reg fadeTime = 200;
	reg isHovered = false;
	reg isContainerOpen = false;

	// Paint Routines & Mouse Callbacks
	cnt_PresetBar.setPaintRoutine(function(g)
	{
	    var bounds = this.getLocalBounds(0);
	    var cornerRadius = 8;

	    // Background gradient
	    g.setGradientFill([0xFF353535, bounds[0], bounds[1],
	                       0xFF1a1a1a, bounds[0], bounds[1] + bounds[3], false]);
	    g.fillRoundedRectangle(bounds, cornerRadius);

	    // Noise texture
	    g.beginLayer(true);
	    g.addNoise({
	        "alpha": 0.05,
	        "monochromatic": true,
	        "scaleFactor": 0.95
	    });
	    g.endLayer();

	    // Inset shadow
	    g.setGradientFill([0x50000000, bounds[0], bounds[1],
	                       0x00000000, bounds[0], bounds[1] + 16, false]);
	    g.fillRoundedRectangle([bounds[0] + 2, bounds[1] + 2,
	                           bounds[2] - 4, bounds[3] - 4], cornerRadius - 2);

	    // Top highlight
	    g.setGradientFill([0x30FFFFFF, bounds[0], bounds[1],
	                       0x00FFFFFF, bounds[0], bounds[1] + 6, false]);
	    g.fillRoundedRectangle([bounds[0] + 1, bounds[1] + 1,
	                           bounds[2] - 2, 4], cornerRadius - 1);

	    // Bottom highlight
	    g.setGradientFill([0x00FFFFFF, bounds[0], bounds[1] + bounds[3] - 8,
	                       0x15FFFFFF, bounds[0], bounds[1] + bounds[3], false]);
	    g.fillRoundedRectangle([bounds[0] + 1, bounds[1] + bounds[3] - 3,
	                           bounds[2] - 2, 2], cornerRadius - 1);

	    // Borders
	    g.setColour(0xFF505050);
	    g.drawRoundedRectangle(bounds, cornerRadius, 1);
	    g.setColour(0x30000000);
	    g.drawRoundedRectangle([bounds[0] + 1, bounds[1] + 1,
	                           bounds[2] - 2, bounds[3] - 2], cornerRadius - 1, 1);
	});

	pnl_PresetDisplay.setPaintRoutine(function(g)
	{
	    var a = this.getLocalBounds(0);
	    var cornerRadius = 4;
	    var currentPreset = Engine.getCurrentUserPresetName();

	    // Sunken background
	    if (isContainerOpen)
	    {
	        g.setGradientFill([0xFF252525, a[0], a[1], 0xFF303030, a[0], a[1] + a[3], false]);
	    }
	    else if (isHovered)
	    {
	        g.setGradientFill([0xFF181818, a[0], a[1], 0xFF232323, a[0], a[1] + a[3], false]);
	    }
	    else
	    {
	        g.setGradientFill([0xFF0f0f0f, a[0], a[1], 0xFF1a1a1a, a[0], a[1] + a[3], false]);
	    }
	    g.fillRoundedRectangle(a, cornerRadius);


	    // Inner border
	    g.setColour(0x80000000);
	    g.drawRoundedRectangle([a[0] + 1, a[1] + 1, a[2] - 2, a[3] - 2], cornerRadius - 1, 1);

	    // Glass effect
	    g.beginLayer(true);
	    var glassHeight = a[3] * 0.4;
	    g.setGradientFill([0x25FFFFFF, a[0], a[1], 0x05FFFFFF, a[0], a[1] + glassHeight, false]);
	    g.fillRoundedRectangle([a[0] + 2, a[1] + 2, a[2] - 4, glassHeight], cornerRadius - 2);
	    g.gaussianBlur(1);
	    g.endLayer();

	    // Glass highlight line
	    g.setColour(0x40FFFFFF);
	    g.fillRoundedRectangle([a[0] + 3, a[1] + 3, a[2] - 6, 1], cornerRadius - 3);
	    g.setColour(0x10FFFFFF);
	    g.drawRoundedRectangle([a[0] + 5, a[1] + a[3] - 5, a[2] - 10, 1], cornerRadius - 1, 1);

	    // Text color
	    if (isContainerOpen || isHovered)
	    {
	        g.setColour(0xFFDCDCDC);
	    }
	    else
	    {
	        g.setColour(0xFFAFC2C9);
	    }

	    // Dropdown arrow
	    var arrowX = a[0] + a[2] - 15;
	    var arrowY = a[1] + a[3] / 2;
	    var arrowSize = 4;
	    g.drawLine(arrowX - arrowSize, arrowX, arrowY - 2, arrowY + 2, 1.5);
	    g.drawLine(arrowX, arrowX + arrowSize, arrowY + 2, arrowY - 2, 1.5);

	    // Preset text
	    var textArea = [a[0], a[1], a[2] - 25, a[3]];
	    g.setFont("font", 20);
	    if (currentPreset == "")
	    {
	        g.drawAlignedText("Default", textArea, "centred");
	    }
	    else
	    {
	        g.drawAlignedText(currentPreset, textArea, "centred");
	    }
	});

	pnl_PresetDisplay.setMouseCallback(function(event)
	{
	    if (event.clicked)
	    {
	        togglePresetContainer(!isContainerOpen);
	        this.repaint();
	    }
	    if (event.hover)
	    {
	        isHovered = true;
	        this.repaint();
	    }
	    else
	    {
	        isHovered = false;
	        this.repaint();
	    }
	});
}

Preset Display Bar - Display your preset, Previous & Next Buttons, etc.

Snippet

Code

35

2.0k

12.9k

111.5k