Tree View ?

[Dalart]

Hello everyone,

Today Im wondering if it is possible to get the user preset category tree view into a viewport ?
Like this:

If this is possible, how is it done ?

Thank you for any help offered !
Dalart

[Christoph Hart]

As much as I love tree structures from
a development perspective, I find it a bit too nerdy for an end user interface which is why I never bothered adding it. If I were you I would use either two columns or one column with a „go to parent directory“ item at the top.

[Dalart]

@Christoph-Hart I hate to come empty handed, but how would I achieve that ?

[Christoph Hart]

Create a JSON object and change the item list in the script callback. Be aware that this is not persistent, so you need to store the currently loaded sound somewhere else.

Content.makeFrontInterface(600, 500);

// Create a JSON object with your data structure like this:
const var myData = 
{
    "Category 1":
    [
        "..",
        "Item 1a",
        "Item 1b"
    ],
    "Category 2":
    [
        "..",
        "Item 2a",
        "Item 2b"
    ],
};

// Create a list of all categories ( = JSON key names)
const var categoryList = [];

for(k in myData)
    categoryList.push(k);

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

// Create another variable that will hold the current 
// list
reg currentList = categoryList;


inline function setItems(category)
{
    if(category == "..")
        currentList = categoryList;
    else
        currentList = myData[category];
    
    Viewport1.set("items", currentList.join("\n"));
}

setItems("..");

inline function onViewport1Control(component, value)
{
    if(currentList == categoryList) // Set a new category
    {
        setItems(categoryList[value]);
    }
    else if (value == 0) // Return to categories
    {
        setItems("..");
    }
    else // Load the sound you want
    {
        Console.print("Load Sound " + currentList[value]);
    }
};

Content.getComponent("Viewport1").setControlCallback(onViewport1Control);

Example preset:

HiseSnippet 1198.3ocsV0uaaaCDmxIpXVadXcX.6eI7eIik4Zm01Mzff4EmjAukOLp6JVQVPAiDsEqkIMnnhmQP.5a0dc1ivdC1NRJKIO6jFOfIf7w8Iu69cj20WJBnIIBIxo5qlOkhb9D2Ay4pntQDFG06Pjym5dJIQQkXKqClOkjjPCQNNa8iZFNU2FY99qu+.RLgGPKXgPuVvBnmvlvTEb624mYwwGSBouhMoj1OsSu.AuqHVjBwyVtsPSIAiIinmQzpUwE47niBYJgbfhnnIfNGHBmOHRLia0+0rD1UwTMQaz.vQV1ntQr3v9Kx0DDxY69EY9V1L+KbOkExx4WTA9Li.bgEkqANUVNj1doPp8cERGKhC0N3NBOmRg211v6wtCBjropBI5X6ic6wAvYHAJ6kCKqtnJ+gqaWAnAW0bBYL8XIPjag+ya0ZG7yZ0pwd07p48jmf6JoPZfI3eZv4mgEW8NZfBOiohvyAPAGRTDbhRlFnRkTbLaLEqhXIunlGfbIJ70DIdx7C0psOtl2M07vvW8tfSGIjywsq+BKqKr+wHsYy56ThrmhNA2lrFdWU2x5xc929c2Gpe2cM9c2B+5c6JUhXFjWhgXRbLNvddLZB1GRPSQZLcNlCMnIMJWDxzb9IZq2GewkF+NTH8GiY7rZTC6wVV2lSSSh7GaAjB28ZFc1TgT0F70B7bDU0ULYpfCD90y0n9JfIWnhf6ufeXDnUDPLhFTg7IB5BARJNHUJA2fM1oy3ZdR5nEryRhxwo4Lp4w3wLNEOLkGnXBNNgpzkzD+E51HuIfMLmId+8MnSV9eSAfbOGnQmaspRiSne.asU3KV3hKyrG9wZg824UslPj6Wmoi856T1UMemfw8q+a75MZrm2s5jNOIM4vdqqNH34dVCWRQrevBrZG.IhSo1JSUcYobfubV2.C3w.pB5C4zY4hVI2WotqM9By4bYiUJc.Vf8MB0mWKyg7RJbkliUhRM428wXy7U7K3mSDDaKUhHkGpe1.OivUq3JnrjHhoMmJY51WiYCLlTG+UkAfUxB6UzO3s.MhlU66B2cuBFk3uJrnguRn1YBE8bteCua7p5c6JRFNbchxbULUtNo5Ybx6wLed5jqnxEcEY5AO6u7bkG8vlqDXKKkTTv6wYpymRynKl7zdMSdPY0U3+9kd5aP5gQY7.8lRkJlNbbNjdMLY2NZpp6gzjwJwTitYfAvVYj94YCtngKJ9HVndxUNVf987k.57lNyyI9yvNoITcS.33JlKmHmuzsXZhWw..TB4ZZOdeIEvc8DvYrPUTtqdOoSDkMJpXMj2eQGzpSYgY8hvzXhZ4E.za5jI..uklzpmlxSXp4k2DZC1Jn0Z2JXsXyCLberaelJHZ8wak0Du.F++c7lsiUM2iFND1onHX2183e8+5BUaPn7RQphwGcJQIYP2l6YoSfWajATHR3b3wKfmSEc+uktklVWYFP4gFh+F9xD1VS6jIr8BgnIj.o3sA1q05s39HCGHl3lEXqBaRCz31HyUcabOAVs7sAA5BwWCQ95sX2M1huYis3oarEOais34arEe6Faw2cOVn2i+GRUhI1qE.i9GYdjyw4Htd2HSGH5e.gePl4B

[Dalart]

@Christoph-Hart

Ok I had time to test the code you provided and it works nicely :)

The only question I have from this point is how to have this code show the userpresets and categories of.

Thank You for your help Christoph-Hart !

[Dalart]

Does anyone else know what I should change here ? Im sure the answer is probably a simple one, I just dont understand where the change needs to occur.

[Dalart]

@Christoph-Hart

Was hoping you could help me with this final edit so this code shows the Categories and UserPresets (with the "go to parent directory“ item at the top) that I add into the preset browser on the HISE toolbar.

Thank you in advance for any help !