Good Morning! I agree. Here's something I've been doing. Aside from working on my personal plugins, I've been wanting to show my appreciation to the community by designing a set of 3d assets / filmstrips that people can use on their projects.

There are quite a few regulars in here that always get me going when im stuck. I Love it here!

This is just a mockup of one of the kits im working on. All of these assets should be available for anyone to use soon. Dont quote me on "soon". Im sure everyone in here has 10 things going at once lol.

Im still messing around with the faceplate so the actual release might not be exact.

Much Love to the community!
Special Thanks to @Christoph-Hart
and honorable mention to Mr. @d-healey who got me going on all this in the first place!
Im soaking it all in!

Freebie for the community.

Here's the script:

namespace LafRealKeyboard
{
	const var FloatingTile1 = Content.getComponent("FloatingTile1");
	const var Laf_RealKeys = Content.createLocalLookAndFeel();
	
	//! DRAW WHITE NOTE
	Laf_RealKeys.registerFunction("drawWhiteNote", function(g,obj)
	{
		var a = obj.area;
		var WhiteUp = Laf_RealKeys.loadImage("{PROJECT_FOLDER}WHITE KEY - UP 11.png", "WHITE KEY - UP 11.png");
		var WhiteDown = Laf_RealKeys.loadImage("{PROJECT_FOLDER}WHITE KEY - DOWN 11.png", "WHITE KEY - DOWN 11.png");
		
		if (obj.down)
		{
			g.drawImage("WHITE KEY - DOWN 11.png", a, 0, 0);
			g.setColour(Colours.red);			
		}
		if (!obj.down)
		{
			g.drawImage("WHITE KEY - UP 11.png", a, 0, 0);	
		}	
	});
	Content.getComponent("FloatingTile1").setLocalLookAndFeel(Laf_RealKeys);
	
	//! DRAW BLACK NOTE
	Laf_RealKeys.registerFunction("drawBlackNote", function(g,obj)
	{
		var a = obj.area;
		var BlackUp = Laf_RealKeys.loadImage("{PROJECT_FOLDER}BLACK KEY - UP 11.png", "BLACK KEY - UP 11.png");
		var BlackDown = Laf_RealKeys.loadImage("{PROJECT_FOLDER}BLACK KEY - DOWN 11.png", "BLACK KEY - DOWN 11.png");
		
		if (!obj.down)
		{
			g.drawImage("BLACK KEY - UP 11.png", a ,0, 0);	
		}
		if (obj.down)
		{	
			g.drawImage("BLACK KEY - DOWN 11.png", [a[0], a[1], a[2], a[3] + 10] ,0, 0);
		}
	});
	Content.getComponent("FloatingTile1").setLocalLookAndFeel(Laf_RealKeys);
}

Download these images and add them to your projects 'Images' folder. F5. Enjoy.
FILES---> CUSTOM KEYBOARD IMAGES

I've been struggling with this one for a while and finally got a solid working script! I just wanted to share with the community an easy working template.

Functions:
Save
Delete
Rename
Back
Next
Random
Combobox presets with custom name save

Hope this helps someone down the line!

const var PresetList = Content.getComponent("PresetList"); 
const var PresetNameToSave = Content.getComponent("PresetNameToSave");    
const var SaveOk = Content.getComponent("SaveOk");
const var TableEnvelope1Pro = Synth.getTableProcessor("Table Envelope1");

// File path for saving/loading
const var presetFile = FileSystem.getFolder(FileSystem.Desktop).getChildFile("myFile.json");

// Declare object to hold presets
var AttackTablePresets = {};
var lastRandomPresetName = "";

//------------------------ LOAD existing presets on init ------------------------//

if (presetFile.isFile())
{
	AttackTablePresets = presetFile.loadAsObject();

	// Manually extract keys
	var keyList = [];
	for (k in AttackTablePresets)
		keyList.push(k);

	PresetList.set("items", keyList.join("\n"));
}


//------------------------ SAVE PRESET ------------------------//

inline function onSaveOkControl(component, value)
{		
	if (!value)
		return;

	local presetNameNOW = PresetNameToSave.get("text").trim();
	if (presetNameNOW == "")
		return;

	local tableData0 = TableEnvelope1Pro.exportAsBase64(0);

	// Add to object
	AttackTablePresets[presetNameNOW] = tableData0;

	// Save to file
	presetFile.writeObject(AttackTablePresets);

	// Update ComboBox
	local keyList = [];
	for (k in AttackTablePresets)
		keyList.push(k);

	PresetList.set("items", keyList.join("\n"));
	PresetList.setValue(keyList.indexOf(presetNameNOW) + 1);
	PresetNameToSave.set("text", "(Enter Preset Name)");
};

SaveOk.setControlCallback(onSaveOkControl);

//--------------------------COMBOBOX RESTORE TABLE CONTROLS --------------------------//
inline function onPresetListControl(component, value)
{
    if (value <= 0)
        return;

    // Get the selected preset name from the ComboBox using the selected index
    local selectedPresetName = PresetList.getItemText();

    // Look up the table data in the preset object
    local presetData = AttackTablePresets[selectedPresetName];

    // Restore the table if data exists
    if (presetData)
        TableEnvelope1Pro.restoreFromBase64(0, presetData);
};
PresetList.setControlCallback(onPresetListControl);

// ---------------------------DELETE CURRENT PRESET CONTROLS -------------------------------//
const var DeletePresetButton = Content.getComponent("DeletePresetButton");

inline function onDeletePresetButtonControl(component, value)
{
    if (!value)
        return;

    local selectedIndex = PresetList.getValue();
    if (selectedIndex <= 0)
        return;

    // Get preset name
    reg presetNameToDelete = PresetList.getItemText();

    if (!isDefined(AttackTablePresets[presetNameToDelete]))
        return;

    Engine.showYesNoWindow("Delete Preset",
        "Are you sure you want to delete \"" + presetNameToDelete + "\"?",
        function(result) // nested callback
        {
            if (result)  // IF 'YES' 
            {
                var newPresets = {};
                for (k in AttackTablePresets)
                {
                    if (k != presetNameToDelete) 
                        newPresets[k] = AttackTablePresets[k];
                }

                AttackTablePresets = newPresets;

                presetFile.writeObject(AttackTablePresets);

                var keyList = [];
                for (k in AttackTablePresets)
                    keyList.push(k);

                PresetList.set("items", keyList.join("\n"));
                PresetList.setValue(PresetList.getValue() - 1); // Clear selection
            }
        });
};

DeletePresetButton.setControlCallback(onDeletePresetButtonControl);

//------------------------------------RANDOMIZER BUTTON CONTROLS ------------------------//
const var RandomizePresetButton = Content.getComponent("RandomizePresetButton");

inline function onRandomizePresetButtonControl(component, value)
{
	if (!value)
		return;

	// Collect preset names
	local presetNames = [];
	for (k in AttackTablePresets)
		presetNames.push(k);

	local total = presetNames.length;
	if (total == 0)
		return;

	local randomPresetName = "";
	local tries = 10; // safety cap to avoid infinite loop

	while (tries > 0)
	{
		local i = Math.floor(Math.random() * total);
		randomPresetName = presetNames[i];

		// Stop if the new name is different, or only one preset exists
		if (randomPresetName != lastRandomPresetName || total == 1)
			break;

		tries--;
	}

	// Find index of selected name in ComboBox
	local comboIndex = 0;
	for (i = 0; i < presetNames.length; i++)
	{
		if (presetNames[i] == randomPresetName)
		{
			comboIndex = i + 1;
			break;
		}
	}

	if (comboIndex > 0)
		PresetList.setValue(comboIndex);

	// Load the new preset
	local presetData = AttackTablePresets[randomPresetName];
	if (presetData)
		TableEnvelope1Pro.restoreFromBase64(0, presetData);

	// Store the name to avoid repetition next time
	lastRandomPresetName = randomPresetName;
};

RandomizePresetButton.setControlCallback(onRandomizePresetButtonControl);


//--------------------------BACK BUTTON CONTROLS -------------
const var BackPresetButton = Content.getComponent("BackPresetButton");

inline function onBackPresetButtonControl(component, value)
{
	if (!value)
		return;

	local currentIndex = PresetList.getValue();
	local totalItems = 0;

	for (k in AttackTablePresets)
		totalItems++;

	// Wrap to last if we're at the first
	if (currentIndex <= 1)
		currentIndex = totalItems + 1;

	local newIndex = currentIndex - 1;
	PresetList.setValue(newIndex);

	local presetName = PresetList.getItemText();
	local presetData = AttackTablePresets[presetName];

	if (presetData)
		TableEnvelope1Pro.restoreFromBase64(0, presetData);
};
BackPresetButton.setControlCallback(onBackPresetButtonControl);


//-------------------------------NEXT BUTTON CONTROLS ---------------

const var NextPresetButton = Content.getComponent("NextPresetButton");

inline function onNextPresetButtonControl(component, value)
{
	if (!value)
		return;

	local currentIndex = PresetList.getValue();
	local totalItems = 0;

	for (k in AttackTablePresets)
		totalItems++;

	// Wrap to first if we're at the last
	if (currentIndex >= totalItems)
		currentIndex = 0;

	local newIndex = currentIndex + 1;
	PresetList.setValue(newIndex);

	local presetName = PresetList.getItemText();
	local presetData = AttackTablePresets[presetName];

	if (presetData)
		TableEnvelope1Pro.restoreFromBase64(0, presetData);
};
NextPresetButton.setControlCallback(onNextPresetButtonControl);

// -------------------------RENAME PRESET BUTTON CONTROLS-----------------------
const var RenamePresetButton = Content.getComponent("RenamePresetButton");

inline function onRenamePresetButtonControl(component, value)
{
	if (!value)
		return;

	local selectedIndex = PresetList.getValue();
	if (selectedIndex <= 0)
		return;

	local oldName = PresetList.getItemText();
	local newName = PresetNameToSave.get("text").trim();

	if (newName == "" || newName == oldName)
		return;

	// If new name already exists, do nothing (or optionally warn)
	if (isDefined(AttackTablePresets[newName]))
	{
		Console.print("A preset with that name already exists.");
		return;
	}

	// Copy data to new name
	AttackTablePresets[newName] = AttackTablePresets[oldName];

	// Rebuild the object without the old key
	local newPresets = {};
	for (k in AttackTablePresets)
	{
		if (k != oldName)
			newPresets[k] = AttackTablePresets[k];
	}

	AttackTablePresets = newPresets;

	// Save updated object to file
	presetFile.writeObject(AttackTablePresets);

	// Update ComboBox
	local keyList = [];
	for (k in AttackTablePresets)
		keyList.push(k);

	PresetList.set("items", keyList.join("\n"));

	// Select the renamed preset
	PresetList.setValue(keyList.indexOf(newName) + 1);
};
RenamePresetButton.setControlCallback(onRenamePresetButtonControl);

I had the help of @d-healey and @Lindon with making this and a few extra helps from gpt.

Bless!

• ROX

PS> if anybody wants to make improvements and toss it back, have at it! Together we can make the ULtimate Table preset menu. haha.

@rglides SAMPLE:

*HISE Logo for fun. Dont sue me. lol

Ok just sharing my first 3d Knob that I made! This is gonna be fun.

@lalalandsynth how do you get your shadows to show up in the animation? I can seem to get mine to show up on the transparent areas.

@Chazrox man I really figured this one out on my own and im proud of myself. lol

I started digging around and I opened the corresponding .xml file for the project and noticed in one of the lines that it was pointing to a default preset that no longer existed in the expected folder it was supposed to be in. Turns out I DID do something, which was move that folder that the preset was supposed to be in. I deleted that line and everything opened up as normal. fweeww! Sweats! haha.

this thing...

@CyberGen I had some wierd bug regarding midi and I found on the forum somewhere that if your buffer settings in your DAW are 1024 or higher it would break the midi in some way...I thought that it sounded bogus until I tried it and it fixed my problem. Just throwing that out there because it seems your out in the deep like I was so it wont hurt to try!

If you're like me and just need an extra visual helper, you might find this useful.

Drop a panel in your project and name it "Grid1".

namespace GridHelper
{
	const var Grid1 = Content.getComponent("Grid1");
	
	Grid1.setPaintRoutine(function(g) 
	{
		drawPandelGrid();
	});
	
	inline function drawPandelGrid()
	{
		local a = this.getLocalBounds(0);
		
		// Size Controls
		local NumBarsX = 10; // Number of Vertical Lines
		local NumBarsY = 10; // Number of Horizontal Lines
		local BarHeight = 1; // Horizontal Bar Size
		local BarWidth = 1; // Vertical Bar Size
		
		// Colour Controls
		local BarColour = Colours.withAlpha(Colours.black, 0.5); // Bar Colour
		local BackgroundColour = Colours.withAlpha(Colours.pink, 0.5); // Optional Background Colour
		
		// Spacer Logic
		local spacerY = a[3]/NumBarsY; // Horizontal Line Spacing
		local spacerX = a[2]/NumBarsX; // Vertical Line Spacing
		
		// Paint Background		
		g.fillAll(BackgroundColour); // Optional Background Colour
		g.setFont("ArialBOLD", 12);
		g.drawAlignedText("GRIDHELPER1.0", [5,5,100,5], "left");
	
		// Paint Lines
		for (i=0;i<=NumBarsX;i++) // Vertical Lines
		{					
			local x = i * spacerX - (BarWidth/2); // Center Line ON grid
			
			g.setColour(BarColour);
			g.fillRect([x,0,BarWidth,a[3]]);	
		}
		for (i=0;i<=NumBarsY;i++) // Horizontal Lines
		{			
			local y = i * spacerY - (BarHeight/2); // Center Line ON grid
					
			g.setColour(BarColour);
			g.fillRect([0,y,a[2],BarHeight]);
		}
	}
}

Its a snippet from @Morphoice that I modified to have both horizontal and vertical lines, made it modular with the all the controls variables and customizable so you can set a different amount of x or y bars/lines. Comes in handy sometimes when I just want to visualize a certain part of my plugin and make sure its equally spaced to my desired paramaters.

(idk if something like this exists already but I thought it was good excercise regardless). Bless!

@clevername27 agreed. Just resubscribed for my second month and the amount that i've learned so far is insane.

@d-healey That worked great! ok noooooow im done.

**I have 3 other menus. lol

@d-healey

const var FactoryPresets = { [

"Default": [0,0,0,0],
"Rockin": [9,9,9,9]

]};

const var UserSavedPresets = { [

"Dummy1": [0,0,0,0],
"Dumber1": [9,9,9,9]

]};

// I need this....
const var AllPresetsCombined = {[

"Default": [0,0,0,0],
"Rockin": [9,9,9,9],
"Dummy1": [0,0,0,0],
"Dumber1": [9,9,9,9]

]};

this is an actual preset in my FactorySettings

  "DEFAULT": [
    1.0,
    0.0,
    0.0,
    0.0,
    0.0,
    382.0,
    20.0,
    0.0,
    0.0,
    0.0,
    0.0,
    1.0,
    0.0,
    0.0,
    0.0,
    0.0,
    0.0,
    0.0,
    0.0,
    0.0
  ]

@d-healey
Im WILLING! lol

//This is the situation I need, atleast as best as I understood your question. 

objectA[i] + objectB[i] = objectC;

@d-healey how do I combine two objects?

@d-healey can you please just check my homework here please. I think im routing something wrong but I dont see it......yet....

This is my viewport control script:

inline function onvpSynthPresetsControl(component, value)
{
	Console.print(value);
	
	// GET BY INDEX IN CURRENT LIST ------>GET VALUE
	reg currentSynthPreset = vpSynthPresets.get("items").split("\n")[vpSynthPresets.getValue()];
	
	Console.print(value + "name is " + currentSynthPreset + "CURRENTLY SELECTED VPSYNTH");
	
	//Create a list to hold all presets combined.
	local allSynthPresetsNOW = [];
	
	// Declare both lists.	
		// Factory in Local Object
	local factorySynthPresetsNOWB = FactorySynthPresets;	
		// User in AppData Folder
	local presetData = {};	
	presetData = SynthAndFXPresetsFile.loadAsObject();
			
	// Push User Presets to combined list.
	for (p in presetData)
	{
		allSynthPresetsNOW.push(p);
	}

	// Push Factory Presets to combined list. 
	for (f in factorySynthPresetsNOWB)
	{
		allSynthPresetsNOW.push(f);
	}
	
	allSynthPresetsNOW.sortNatural();
		
	// Check 'if preset exists' load presets data from combined list 'allSynthPrestsNOW'. 
	if (allSynthPresetsNOW)
	
								btnHPF.setValue(allSynthPresetsNOW[currentSynthPreset][0]);
								btnLPF.setValue(allSynthPresetsNOW[currentSynthPreset][1]);
								btnReverb.setValue(allSynthPresetsNOW[currentSynthPreset][2]);
								btnDelay.setValue(allSynthPresetsNOW[currentSynthPreset][3]);
								btnLPFMod.setValue(allSynthPresetsNOW[currentSynthPreset][4]);
								knbHPF.setValue(allSynthPresetsNOW[currentSynthPreset][5]);
								knbLPF.setValue(allSynthPresetsNOW[currentSynthPreset][6]);		
								knbReverbAmount.setValue(allSynthPresetsNOW[currentSynthPreset][7]);
								knbLPF1ModSpeed.setValue(allSynthPresetsNOW[currentSynthPreset][8]);
								knbLPF1ModSpeedIntensity.setValue(allSynthPresetsNOW[currentSynthPreset][9]);
								knbReverbSize.setValue(allSynthPresetsNOW[currentSynthPreset][10]);
								knbWaveForm.setValue(allSynthPresetsNOW[currentSynthPreset][11]);
								knbDelay.setValue(allSynthPresetsNOW[currentSynthPreset][12]);
								knbDelayTimes.setValue(allSynthPresetsNOW[currentSynthPreset][13]);								
								btnChorus.setValue(allSynthPresetsNOW[currentSynthPreset][14]);
								btnPhase.setValue(allSynthPresetsNOW[currentSynthPreset][15]);
								knbChorusAmount.setValue(allSynthPresetsNOW[currentSynthPreset][16]);
								knbPhaseAmount.setValue(allSynthPresetsNOW[currentSynthPreset][17]);									
								btnShapeFX.setValue(allSynthPresetsNOW[currentSynthPreset][18]);
								knbShapeFXAmount.setValue(allSynthPresetsNOW[currentSynthPreset][19]);
								
								
								btnShapeFX.changed();
								knbShapeFXAmount.changed();
								btnChorus.changed();
								btnPhase.changed();
								knbChorusAmount.changed();
								knbPhaseAmount.changed();								
								knbDelay.changed();
								knbDelayTimes.changed();
								btnHPF.changed();											
								btnLPF.changed();
								btnReverb.changed();
								btnDelay.changed();
								btnLPFMod.changed();
								knbHPF.changed();	
								knbLPF.changed();
								knbReverbAmount.changed();
								knbLPF1ModSpeed.changed();
								knbLPF1ModSpeedIntensity.changed();
								knbReverbSize.changed();
								
							
								knbHPF.sendRepaintMessage();
								knbLPF.sendRepaintMessage();
								knbWaveForm.changed();				
								knbReverbAmount.sendRepaintMessage();
								knbLPF1ModSpeed.sendRepaintMessage();
								knbLPF1ModSpeedIntensity.sendRepaintMessage();
								knbReverbSize.sendRepaintMessage();
								
								
		
};

Content.getComponent("vpSynthPresets").setControlCallback(onvpSynthPresetsControl);

*** Im just gonna talk this out here...

1. grab current preset name.
2. create an empty object to hold 'combined' keys.
3. declare both objects. 'factory presets' and 'user presets'.
4. loop/grab key/names from both objects and push them to 'combined' preset names.
5. .sortNatural() 'combined' preset list.
6. Check if 'preset/name/key' exists.
7. if object exists, load values by 'preset name'[viewport value] // Should match sorted list.

As far as my brain can figure out right now, this should work...but obviously not.

@d-healey

I dont know if this is the best way but it works.

	// Load object IN ---->
	SynthAndFXPresets = SynthAndFXPresetsFile.loadAsObject();
	
	
	// Extract keys from object ---->
	var keyListSynth = [];
	var factorykeyListSynth = FactorySynthPresets;
	
	for (s in SynthAndFXPresets) 
		keyListSynth.push(s);
	
	for (k in factorykeyListSynth)	
	{
		keyListSynth.push(k);
		Console.print(k);
	}
	
	vpSynthPresets.set("items", keyListSynth.join("\n"));

@d-healey oh, so instead of writing to AppData, should I be just writing to an object in an .include?
If I want those to be "factory settings" AND I want the user to be able to add their own presets, how do I go about that?

concat the arrays of keys is my guess....

How do I disable being able to delete the "factory settings"?

Current script:

//--------------------------  FILE & OBJECT DECLARATION  ------------------------

// File path for saving/loading ---->
const var SynthAndFXPresetsFile = FileSystem.getFolder(FileSystem.AppData).getChildFile("KeyzieSynthAndFXPresets.json");

// Declare object to hold presets ---->
reg SynthAndFXPresets = {};

// LOAD OBJECT AND POPULATE COMBOBOX -------------------------------------------------------------------------------
if (SynthAndFXPresetsFile.isFile())
{

	
	// Load object IN ---->
	SynthAndFXPresets = SynthAndFXPresetsFile.loadAsObject();

	
	// Extract keys from object ---->
	var keyListSynth = [];
	for (s in SynthAndFXPresets) 
		keyListSynth.push(s);
	
	// Set Combobox items with extracted keys ---->
	vpSynthPresets.set("items", keyListSynth.join("\n"));
}

@d-healey

What do you mean by this?

@d-healey said in AppData Folder || My Custom presets dont compile....:

need to be in scripts.

I have a custom preset menu that saves synth parameters. The parameters save and load successfully in HISE but they dont compile with the plugin. I also noticed there's a "Project AppData" Folder and a "HISE AppData" Folder. The one that my presets save to are the folder in my Application support/PluginNAME folder. What folder is best to save these menu presets in so that they compile and load with the plugin? The last DAW test I did, my custom menu presets names show up (probably only because they were last exported with the viewport already populated because when I press "save new preset" on my customMenu all the names clear out. I check the .json file for the presets menu that it creates and all of the parameters say undefined. How is that if they work fine in HISE? Is it a folder issue?

@ustk thats a good one!