Finally: Fully customize stock UI elements with a scripted LookAndFeel

[d.healey]

@ustk He's active on VI-Control. I'll send him a message there.

[Levitanus]

Hi, I'm ready to sign. Ohhh. How complicated things are... It's just few lines from the JUCE repo)

[Levitanus]

Can't see what should I do

[d.healey]

@Levitanus I think you'll need to wait for Christoph to send you the doc tomorrow.

[Levitanus]

OK, thanks. pianoist@ya.ru for the case

[Christoph Hart]

Actually, if you just pasted some lines over from the JUCE library, you don't need to sign it (because then the JUCE guys have the copyright). I've just seen your name in the commit history and wanted to make sure that everything is cleared before merging.

Alrighty then, we're good to go. @d-healey can you send me the link to the branch I should merge? I kind of lost track :)

[d.healey]

@Christoph-Hart

https://github.com/davidhealey/HISE/tree/develop

There is a pull request open for it.

[Christoph Hart]

Alrighty, done :)

[d.healey]

Woohoo!!!!

[andioak]

@Christoph-Hart

While trying to add a customization I seem to get an infinite loop:

laf.registerFunction("drawToggleButton", function(g, obj)
{
    var blue = "0xFB00A6C9";
    var yellowish = "0xFBB4CF0C";
	  
    if(obj.text == "Button1") // accessing only one of the item for a special color, or anything:
    {
        Console.print("object id is button1"); // this code keeps repeating over and over... ?
        g.setColour(yellowish); // custom color only here.
    } 
    else {
    
        g.setColour(blue); 
        
    }
    
    g.fillRoundedRectangle(obj.area, 4.0);

    if(obj.over)
        g.fillRoundedRectangle(obj.area, 4.0);

    if(obj.down)
        g.fillRoundedRectangle(obj.area, 4.0);
    
    g.setColour(Colours.withAlpha(obj.textColour, obj.value ? 1.0 : 0.3));
    g.setFont("Arial Bold", 12.0);
    g.drawAlignedText(obj.text, obj.area, "centred");

});

The if (obj.text == "Button1") is processed all the time and always returns true, even though there is only one single item with that name.

UPDATE: after testing the same if-types as already used in the hise docs copy-paste that this one is made from, it works if I remove the Console.print() and replace the if statement with this only:

... 

g.setColour(blue);

if(obj.text == "Button2")
        g.setColour(yellowish);

...

Is that how this was intended to be used only? Is there an issue with the Console? Not being handled in that stage?

[Christoph Hart]

Yes that might be possible. In general I would try to avoid as much "global" stuff as possible like external variables or API calls and try to just use local variables.

The execution of these functions will take place directly in the UI rendering which might be at a point where the script processor is not accessible.

[andioak]

@Christoph-Hart

Got it. Will stick to local vars in this case.

[andioak]

@Christoph-Hart

DOUH! Haha, local vars are not permitted inside that function. I get this message when trying to use a local var inside the laf.registerFunction("drawToggleButton", function(g, obj):

Console:
"Cannot define local variables outside of inline functions or callbacks."

I guess reg instead? Works here.

[Christoph Hart]

Nope, not reg, they have global scope :) Just a plain old var since it's a normal Javascript function. local variables are indeed only useable inside inline functions which help when performance is an issue, which is not when it comes to UI skinning.

[andioak]

@Christoph-Hart

Okay, so var it is.