How to make it

Jay

Hello Guys, I was wondering how can I make a preset browser like this one instead of the traditional one, and I know this was done using HISE

Screenshot 2023-07-01 at 3.30.46 PM.png

any help would be appreciate it.

Thanks in advance

Lindon

@Jay build your own preset browser using panels and their associated paint callbacks...

pluginboi

@Jay using panels and filesystem API. this was the starting point for this preset browser.

Custom Mini Preset Browser Example using FileSystem API:

Hey folks!

This seems to be a hot topic with the new FileSystem API, so for those who need a starting place for building a custom mini-preset browser in HiseScript, here's a simple snippet showing how to achieve the most basic steps for:

Loading presets from the user preset directory
Saving a set of controls to a file in the user preset directory with user input for the preset name
Fetching all preset names in a given directory and displaying them in a viewport
Showing the preset directory

HiseSnippet 2295.3ocsZ0ziaabFd3tKCrjsRrcC5odfXOoscqhVWmzFajZ48q1MwqWUK6Ew0wMlhbzpIhhi.GpcsRvhZfdnWxk.zS8TAxgh.TTTzeAEnsW5ugV.+SH28A224CRNbHor1EwBvFly7Ny6y6Gyy7Ny3tQTOLiQiPV0t+rIXj0kr6MKLd3VCcIgn81FYcA6tQXFNFs4rItLF1GYYs7uf2qUsUPhee6s1zMvMzCm0DBcHk3guCYLINq0tc9HRPvtt936SFqI806rmGMbKZ.cJfjksail35Mx8H7cc4hsjMx5M1wmDSi5E6FiYHqU1j5Oq2P5IgR4OjvH8Cv7O1.0ClHYy6RC74Hl2JZqgj.+tIVLCAyR2L6eYo8+116S7Iosm4GtrnCmrQn6OrVZdvaCc30dwgmkF7VQBuqX2yKhLINqGN1tn8dgw3nAtPHPGVRYQKc5aYuEEjHLt0X2Q3cifORGQy2qc60cd21sW6lMp2n967NNbYinALmXpSerCy8XruCIzYhHQnQcHVwhcN1MxoW.waD7W93HmOvIQGGgi2hNdBMD9n4pZxrJWEYidSr6zXxfoAaNMNlFV4LXH2pRfJf513AjPLywMHvwKA1tg9NdPK8gjHly.ZjB4N8inmvvQMpGB4ULHGC6HSt2T1gyWzntC7KChxtuCA9rJzkIh.X7wm0TKFWVAt1Rgnlzvr9U8kLPS0ySgjBKRUliS1PvTnX1Q4.xTpWErfLBo3UCnTQxfRZSU.hz9WX0evjXBz7BfBkjoforY69j3.7BLWB4JYlj8x4rtOkK8qHkISvUmmkdvn4BoCFkyAevnpctGLRywVlp1hShGLW0IEImJkMUsZk8WZLcBcxz.fxLaAQy7B.Kw6pjgkrJ9XB9jIzHX47LmA3XugjviDD.CHP3SrzlyVEOD67.XQsJQ0mDg8.J5YxIlDF.DGNClF5wSLJEIIzA7eATfQQgf6JTwGnh2+RftI.VXIfRVjkAVR5nySHzbURLdLa000muVeFkD1b0OAn2TC7TcGgIdKgDooWRnZcHhFLEWhAHTL.8TQ4g3D7rVK1j.RrDD2rTSufUGPc8ULGf2uoXhdjP6ONIRx+kkbbHuOVS4zkHxo2b91ZE7Sy2hICbZpZMOlYFyVyEFFlLTyG.EXeDZNYnR4OCZNc46Ba1ZsVVNbZvLiIRlNDieZFsc9b3TeXpsIh6YS55NGYFqWybpxuSfPplCbCX34Hn2P2viv9MMEYNTHZKhVD+aNdpEMxNGCXNfe9vonCTW2Q33oQglw1bkYcC8By3gTIBWaciwXVX0MLKISarYdzEfcpvxce2X27dPM.l5B4R0RqGcuoIxxOHidSXPqeppNQnd4igYjkBQYcgb1KwtGPEiPFM+ep3436k.xDQGK1HQr0BaFCn2JV8nZMQh4UR3LOaSIQS9hndhom6xUBp0X1FYr76NTulo5JtOjyWTuVM8E+7c.zlbnDZe9mrlEf55Nq9CaIGDrcUbDmwxXxR1M7QOl2C2q1T3sROv.aMn8Z5a0MYJanPnVwzdwQfau4FBRBPN3OJeh1HfY9z5EMUiMexFPQSlKvYvp0HI+QNqVhGHGF4SyiZ+Xwlg2lcP+OCpzfu8eofdNLmpUIkC8BnTTcF+PiFyiNhEXMaZZcRDrCsBfBsUAHylscdJPoxJ3aU1+4CTsHLQ2U5hJrAsPmEUFWP0rbpFa9cofQFBbVvnpeZcGytFLnz9TTVA7otjt42YQz7FXyvoi6iiR1vHQP3v64uc.6puc.8KuvSVDtlfzv8BIPwD3vpty.jpxcDxZIEp.QiE2cvapt6.I2Jh3irZXqw1hDvleqLVHzy+5I+uagpZJjrrho3J1FbuYSSxUAgdvdaC4Z7azPAO.xSvQwDt2vZa7wDOr79MpYuMlMJlNQfe0NvHq5R02H41ObCwABs+V14N.O5oo58eD0YlNHNg3GOTu2gXxQCytbpN+1N8OJ4Jnp8Fu7kuTzLuTnhsxKyMqUFa5I4a8Z7lgV9c7lsr0rjZ4sj631WYIeekk3jbWDhSYpYPn2maP1V+cKSioC0zXP62YhaDnPMMa5p3VF+ZsxqVz.HB0i744tcNTwPQIYBW01rLcczumd33i6H0dCwPbTRSX6SGCJwMBD0Zo7FI5gc3Lm6oN2C+5sdklnoW4mmyRpUokbI6rZ2zrgm3UgMvOquR5BftHFNylgNnunDzWUAZr+gpSCq.dVYvU47exS5jGj+IhIHedzYGjhS9grVydyHWW2w02hRC5EOcvfr+00pu6zvQy1mFNBOCMkgEvDhz5K7788kqwzz0kpZ4+2ytvYrpLm6sMLaTAytyCVrUMYfMgbQ2.RZKOGwW9k+w1kvQjz7wIaAXsr0JKBcwUrMtOJM69Yali5yvtcdRgbxqWztKyyJy2eS878agvvVatJnOmXVFxups4gNKPxk8Qdn+79Ef96uXPWO.8Ue0e3uURnX3P5KJF2fF9m7VKRKttZ8+kryRvQKFS4ErkmmW2v+05F9cLL7m8qNuFtDiqXCJybIsAc6hAcI0n7nxUF29tF9WvVovytITjyntcx6anieD5rVsP97j+8+4EkUCve9u7eOoJBhxoRrVt53PkUtos1+P8.gIUO52XZHOqaw.glGRG223F+qGThIdu68Munn4LZzWWfF+hmghHqvhdVvq1h9nE1ht8s+qkYQe3G96KgI3gO7aFjXmbVrTD6nfLZQ3subJRJVf200Lzu8y6bdJxSyPk37GnoOp3Job1KLoXkRq0q3iNdY68o97KYK+6gxeDXUGvZ0bO7H+wECYj3Y5OR7qkGIcQg6Ur6Rh8FVNdWpD7xOA0qY7pdx4F16LX.bf7Lvth8te7q+2WFcOJj.Gdz9twQDHMz9tSG2CR18v.RBA5R9QUARU9PEe2l+M2yzCG5K9.NOzKUctA+aKUmajzIZrqWD8SSdZVvodAQK.lBEuseM684e6rQxwFssa2pMZLwm7oddbWwOFvd4i4Zmiw7SNGi45miw7tmiw7dmiw7SOGi4mM2wv+u4vsmFSGKWl.MzcGww2sr1IjWomHiD8+gi7rcn

Hope this is helpful!

A few extra things to consider:

This example saves the preset files in a certain format (key-value pairs), but it's up to you to choose how you'll save your controls and load them from your custom preset files.
This is completely separate from the built-in preset browser, so proceed with caution. The actual HISE user presets are formatted differently.
This doesn't include any protections for overwriting files or checks for invalid files / objects loaded.

Jay

@pluginboi is giving me some errors and is quitting HISE

pluginboi

@Jay Oh weird, I havent opened that snippet in like a year. but I just got to my computer and heres the base script for the presetbrowser in the pic above

HiseSnippet 1540.3ocsW80aaaCDWJMpnwacXEXOOP3mjWScs655FRQwRqSbavVRMpSSKPVQAiDsEWjHEDoZpQQ9Zrua6s8QXeC1tSjxRx1Ks0.SOjXd+m+tiGONJSFvTJYli6VGOKk439kdimIzQChnbgyA6439UdGRUZVFwP5IyRoJEKzw08ZOEI3t0lNEe+8O+DZLUDvpH43bhjGv9UdBWWQczt+BONdHMjcLOolz2e2CBjhAxXYNDOWyqmSJM3b5T1QTTrM7bbu99gbsLarlpYJPlmHCmMNRdgvH+IbE+rXFtnuyXvPFxNCh3wgiJ2qJGG2MGUsyulYm+MdGxC4yoWg.ecACRkF0w.2MtpPp+mQH4VKj1zDR2xabPFOUWwAimuv6.AjPlPAntdnXj0Yi+7FdCjfDBc2D54rgYvh4Z3+fd81l.+oyCa0Bfakl7NZF4n8e0nGeD4QjRMmxzCjIoRArvusgcaTGAjLTPhgA.BSwzOiJBigxiOzh.e28tDLaoHxIDcDijVHCYhLNjkoJDAcmg7PCUvqm1dHM.PwYs2lz9kJVV62.txZvg4h.MWJ.CRASwzAQfCLlPQljISHThJkEvmvYgVeUnLWDyELxjRCTnqIrU.rjXB.eiFcraA7KVFPisVZDUGAg3PdLa7L3jPBhMVMqQDiZqo6TfdXBF4WZ9Gtf0K2.ML8DtnPIkekyAH465ZjFfGcVN6+vVFjGPy2TwehLi3OArH.FktD1o00naZtJpPltZ4XcFWL0uemNOjb4bqjwz4Yh5JY7fQBahJBh3ZIcapgQChpmSvzucuMG.9vkqJaKM4qExzwk4EEAp7HJnpggdMYkYbtfq8qmYM3QgApPDagXc4LxVKLO0r5MP3d0kQUX+kVLB2cvNa.F6H9fAUUHNeeVC5Z03rUWytvXk53SpLMOF56XTkJXwjK355VhTbbs0hvRohiPc5OGfrES.yzCYh7CfJRL8ztsYOs.10LFa.V0QxEL2sejEWI2lzdmcZC+6JLTIp282kbge6eSfx2P+N3+A50KHMsq5BFvucS2CGfZR.P0KKv0QKgksVDkLIfw.plmBsbRj4JFAPr3yf6oJPmJcqBgCQwFXkxuLE3ydGzYsDmzQbEJ6Iz3blgUW..xi01xoBABhnhorPLPtbwfoQXbQDSTqlfqHVUI97trtaaDfVVi.7UrXVflE1YoREovrUvKFxjw9Ak2JrMbTFh1l0Nb.SOl8dMT0LWPra3R4gNcUowPUMl55bZCYMfPGxcH8sMxZzNtHlGiJCNozekVCKHVVGriE4QKafS60vAUs2ZX47yTllhUFqaLSLENncax81tRRCQq+A7RIgVpofpZ+JSaYuuXJ.ycikzvpaNp4Arp9tXwdsfBHUdOv7xVr..yzAlzyGubzlGmWPtP9Eqqpm6kZ1yE9cZ8gVaAdjrHqISVIOqwfiyqjMN2W1UonuHO4LVVYIVofvfQMm155eZSaEXFpolfRwAPO0mmxrqKZgGZ98xyl4XmJB90KOXOplhiqYoAxkxxzbLbb2i8NXdWyvaa4sGSctVlVHqs91wsktf6MKGsCSONbv02vyjHbd+7Qh+qzcmUMe7d617Ljiapmcroc1YO1DJztnEVLsyNOMCP3YjAwzTkkDtes+7EPifmUz75o4bMMqTjiynoo.uSvSCVZuhlkPNFt38Y4Sa4TD.OW7B9zH8fXdv43bmyipGGymB3o6FPsk7hxJLE9FhBvBZKfh4bAOTG43549GvtJhgFCW8sEONXogfgwukgXe3lyjiO9vx.JcZLHLNrqPw0yp+3jOiA06ckCp+oFh2xaDGtVe0w3FqHFghp+OhQ6yato29Sl.83qBvM8F9508sLeD2+BYtF5XdHEZbBkydGkmLFdUW.C7t.J3UX9dC7fkYcObMh.iYhvhE+C7YY1GW6ZY1ujoSBMHS9VaeO7AT2nfBDShh2KtE7vUXMouSQSDPOudc64j.uk6sAA31+NvY8Uqy8VCc990Pm6uF57CqgNOXMz4GWCc9oqTG7YzONWKSLGG.Bi1unapq69BJTYUTE57u.WHz88C

Jay

@pluginboi when opening the snippet is giving me this error

Screenshot 2023-07-02 at 4.02.58 PM.png

pluginboi

@Jay Do you have different sub Preset folders set up in your Userpreset project folder? and then edit this line to be the names of each folder

var presetFolders = ["Factory", "User"];  // update this with your actual folder names

Jay

@pluginboi Thanks a lot.

Jay

@pluginboi what to add, to make it show the selected preset on a label?

Jay

@Jay I figure it out

Jay

@pluginboi I was wondering if you know how to save a preset to a file because I'm using this and is not working

inline function onsaveOkControl(component, value)
{
Engine.saveUserPreset(presetNametoSave);
};
Content.getComponent("saveOk").setControlCallback(onsaveOkControl);

any idea why?

Thanks in advance!!!

pluginboi

@Jay this is how i save them to the 'user' sub folder but you could get rid of the child folder to make it general. I found this in an old thread I think @Dan-Korneff posted about out so he may have more info if you're doing more customization

var pre_folder = FileSystem.getFolder(FileSystem.UserPresets).getChildFile("User");
	
	function save(file)
	{
	    Engine.saveUserPreset(file);
	}


//// Save as Button
inline function onSaveasBTNControl(component, value)
	{
	if (value)
	    	
	 FileSystem.browse(pre_folder, true, "*.preset", save);   
	 
	 PresetHandler.init();
	 populatePanel1(); 
	          
	 UpdatePresetLabel();    	  
	};
	
Content.getComponent("SaveasBTN").setControlCallback(onSaveasBTNControl);

Jay

@pluginboi T h a n k Y o u

Jay

@pluginboi

This is always showing one preset name behind it. Do you think you can help me with this?
note: it's doing it in both examples

namespace UserPresetWidgets
{
	inline function createPresetButton(name, x, y, up)
	{
		local widget = Content.addPanel(name, x, y);
    
		Content.setPropertiesFromJSON(name, {
		"width": 10,
		"height": 15,
		"saveInPreset": false,
		"allowCallbacks": "Clicks & Hover"
		});
    
		widget.data.up = up;
    
		widget.setPaintRoutine(function(g)
		{
			g.setColour(this.data.hover ? 0xFF65B17c : 0xFF2C4433);
			g.fillTriangle([0, 0, this.getWidth(), this.getHeight()], this.data.up ? Math.PI/2 : 1.5 * Math.PI);
		});
    
		widget.setMouseCallback(function(event)
		{
			this.data.hover = event.hover;
    	
			if(event.clicked)
			{
				if(this.data.up)
				{
					convoLbl1.set("text", Engine.getCurrentUserPresetName());
					Engine.loadNextUserPreset(true);
				}
				else
				{
					convoLbl1.set("text", Engine.getCurrentUserPresetName());
					Engine.loadPreviousUserPreset(true);
				}
			}
			this.repaint();
		});
		return widget;
	};
}

const var UpButton = UserPresetWidgets.createPresetButton("UpButton", 749, 10, true);
const var DownButton = UserPresetWidgets.createPresetButton("DownButton", 736, 10, false);





// ============== second attemp

// next
inline function onnextBtnControl(component, value)
{
	convoLbl1.set("text", Engine.getCurrentUserPresetName());
	Engine.loadNextUserPreset(true);
};
Content.getComponent("nextBtn").setControlCallback(onnextBtnControl);

// prev
inline function onprevBtnControl(component, value)
{
	convoLbl1.set("text", Engine.getCurrentUserPresetName());
	Engine.loadPreviousUserPreset(true);
};
Content.getComponent("prevBtn").setControlCallback(onprevBtnControl);

ulrik

@Jay You have to load the preset first, then get the name, you have it the other way around

if(this.data.up)
				{
					//	First load the preset
					Engine.loadNextUserPreset(true);
					//	Then get the loaded preset name
					convoLbl1.set("text", Engine.getCurrentUserPresetName());
				}

Jay

@ulrik Thank you so much, you're right

How to make it

62

1.8k

10.4k

90.6k