Designing / changing hise output vst basic setting panels / elements?

Casey Kolb

Some of this is customizable, and some of it is not unless you dive into the C++ and change it there.

LookAndFeel customization will be your best friend in this situation. Refer to the documentation here.

If you want to completely remove these startup modals from your plugin, you can set these flags in HISE to false:

HISE_SAMPLE_DIALOG_SHOW_INSTALL_BUTTON=0
HISE_SAMPLE_DIALOG_SHOW_LOCATE_BUTTON=0

If you want to change the actual text of the modal, I think you need to change the C++. I'd just do a big search through the files with part of that text and see where it's hiding.

andioak

@Lunacy-Audio

Thanks! I forgot about that one, also I thought the Look and feel was a bout HISE ui itself. Reading... :)

andioak

@Lunacy-Audio said in Designing / changing hise output vst basic setting panels / elements?:

LookAndFeel customization will be your best friend in this situation. Refer to the documentation here.

Is there a way to get to the initial dialog "choose the sample archive" dialogue inside of HISE itself, I mean while still designing, before the build?

Casey Kolb

Hmm, I don't think so unfortunately, but the elements should follow the same changes as the other LAF customizations you make, so you can always test it out on other modals first. For example, if you're trying to change the comboboxes, you could try customizing other comboboxes first and get those to a point that feels good.

andioak

@Lunacy-Audio

Okay, thanks a bunch. Will give it some effort!

An important detail though:

Is it possible to only trigger some or a class of things or specific items inside of one panel? Or is it a sort of all-or-nothing stock override?

Casey Kolb

Some of the LAF customizations are global while others are specific to certain components. Functions like drawPopupMenuBackground appear to be global based on documentation, but others are component specific.

If you want to target different components in one LAF callback, I think you can use an if (obj == specificComponent) statement to achieve that, where specificComponent is a reference to the component you want to target. For example, if you made a combobox in your GUI that needed to look different from the rest, you could target that component separately in the LAF callback. Hope that makes sense!

andioak

@Lunacy-Audio said in Designing / changing hise output vst basic setting panels / elements?:

I think you can use an if (obj == specificComponent) statement to achieve that

Yes it makes perfect sense, thank you. So like this in the onInit:

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

laf.registerFunction("drawComboBox", function(g, obj)
{
    if (obj == ComboBox1) {
    	// my colors here.
        g.myPaintRoutineHere; // and so on...
    }
});

Right?

I don´t know what the object classes of the initial dialog "choose the sample archive" windows are, I cannot see that in the HISE documentation, but can I output the object parts in the Console? I mean either in HISE or my built plugin?

Or is the object/panel/element classes something we got to go into C++ classes to find?

Casey Kolb

That looks right to me!

Hmm, perhaps you could try printing the object text?

Console.print(obj.get("text"));

Not sure if that will work but worth a shot.

andioak

@Lunacy-Audio said in Designing / changing hise output vst basic setting panels / elements?:

Not sure if that will work but worth a shot.

Okay, that is one option of course, it could end up having the same ID as the text field value, otherwise I guess a search for the "text" output would yield the result in the hise library C++ files!

Or is it as simple as Console.print(obj.get("ID"));? But that´s not a property, it´s the internal Object. Hmm.

andioak

@Lunacy-Audio said in Designing / changing hise output vst basic setting panels / elements?:

That looks right to me!

if (obj == Button1) does not yield any result, as it is the Object reference to the internal UI element.

However if we access the text-field, with if (obj.text == "Button1"), we got a winner!

But if an element is customized among others, like 1 out of 3 buttons, only the one that is painted is visible. The rest are invisible, or not painted at all.

Here we need a default setting to be initiated for all others!

Like this:

const var laf = Engine.createGlobalScriptLookAndFeel();

const var Button1 = Content.getComponent("Button1");
const var Button2 = Content.getComponent("Button2");

laf.registerFunction("drawToggleButton", function(g, obj)
{
    if (obj.text == "Button1")
    {
        g.setXXX(obj.bgColour);   
        
    } else {

    	// here we need a reset to the defaults:
    	g.setDefaults;

    	// or to set all obj.xxxx to their defaults.
    }
    
});

Casey Kolb

Ah yeah, I was going to mention you'll probably need an "else" statement to actually paint the others. Glad the obj.text worked!

andioak

@Lunacy-Audio, @Christoph-Hart, @d-healey

Woooops. After a registration of the Engine.createGlobalScriptLookAndFeel() function drawToggleButton", ... ), the entire set of buttons disappear unless you use a paint routine. Removing the code all together does NOT bring them back!!!

How do we "unregisterFunction" ??

I restarted HISE and still same issue. I cannot start over on my project. What´s the reset options?

UPDATE: solved this below :)

Casey Kolb

This has happened to me too, but do not fret! If anything you just need to rebuild HISE. Though, I'm sure there's a quicker solution.

andioak

@Lunacy-Audio

Okay, 5 mins after, I solved this haha. Here´s how:

Remove the paint routines inside of the:

laf.registerFunction("drawToggleButton", function(g, obj)
{

then recompile all scripts / F5.
then delete that code as well and this line: (or your equivalent)

const var laf = Engine.createGlobalScriptLookAndFeel();

lastly recompile and save, exit HISE and start it again. Upon next start it´s gone. But that did not happen unless I did it in exactly that order.

Casey Kolb

Good to know!

andioak

@Lunacy-Audio said in Designing / changing hise output vst basic setting panels / elements?:

Ah yeah, I was going to mention you'll probably need an "else" statement to actually paint the others. Glad the obj.text worked!

Indeed, the "defaults" for the LookAndFeel overrides, what is the proper way?

laf.registerFunction("drawToggleButton", function(g, obj)
{
    if (obj.text == "Button1")
    {
        g.setXXX(obj.bgColour);   
        
    } else {

    	// WHAT TO PUT HERE ??

    }
    
});

@Christoph-Hart @d-healey Any ideas?

Christoph Hart

As soon as you start customizing LAF you most certainly never want to use the stock appearance anymore so there is no way of having both at the same time.

Also be aware that the obj parameter is not the object but just a plain simple Javascript object that holds relevant information to the paint routine. It basically moves all function parameters into one so that the function signature is consistent for all LAF functions.

andioak

@Christoph-Hart

Thanks for the reply! That clears it right up. But what I mean by "defaults" is the defaults for all other buttons that I also have code for. The "else". But yesterday late I found the trick. My skillset regarding the paintRoutine could be counted on a few fingers, so getting more familiar with that is todays mission. :)

However, I do not know the id:s / obj.text field values of the texts and panels in the basic archive / samples settings of the exported vst-instrument. The images above. I would like those panels/buttons/text in my finished plugin to look slightly different from the rest of my instrument ui, so the override should be easier if I knew the names of the panels! Is there a reference to those? Or do I have to look in the HISE source? Could you point me?

Or is there a better way?

I have been able to distinguish between different buttons, by using if (obj.text == xxx), but for panels I cannot see any id or definitions.

andioak

Re: Installing Samples Dialog....

I read this conversation from Installing Samples Dialog .... earlier this year, (about customizing the basic initial dialogues) and I was just wondering about this:

@tomekslesicki said in Installing Samples Dialog....

how can I change GLOBAL_FONT and GLOBAL_BOLD_FONT to custom fonts?

@Christoph-Hart said in Installing Samples Dialog....

I am currently prepping for a way to define a global look and feel that can be customised via JSON and is applied to all modal windows, confirmation dialogs and context menu popups. I'll let you know when it's ready.

@Christoph-Hart Was this scrapped? I mean the customisation from JSON? Or delayed? Or if it was morphed/moved into LookAndFeel?

Christoph Hart

@andioak said in Designing / changing hise output vst basic setting panels / elements?:

Or if it was morphed/moved into LookAndFeel?

This. It's more powerful this way than a simple JSON system.

Designing / changing hise output vst basic setting panels / elements?

19

1.8k

10.4k

90.7k