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

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.

andioak

@Christoph-Hart

Yes indeed it is. Just making sure there are no "quick fixes" :)

andioak

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

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

Yet, I cannot trigger any buttons on the plugin´s "Install Samples" using the if(obj.text == "Install Samples") inside the laf.registerFunction("drawToggleButton", function(g, obj)function. Is that considered a drawDialogButton ?

This one:

Screen Shot 2020-11-16 at 23.49.12.png
Here I would like to:

customize the look and line-breaks of the text line and also remove/hide the "install samples" button and customize the positioning of "Choose Samples folder".
- is the text in the image accessible? Is it a panel or an alert window?
or alternatively entirely remove/suppress the entire panel with a flag in HISE settings, the HISE_SAMPLE_DIALOG_SHOW_...=0 and then put the "Choose samples location" in my own settings panel on the UI. Is that possible? Or is that C++?

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

24

1.8k

10.4k

90.7k