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();
}
});
}
