Finally: Fully customize stock UI elements with a scripted LookAndFeel

Lindon

@d-healey said in Finally: Fully customize stock UI elements with a scripted LookAndFeel:

@ustk said in Finally: Fully customize stock UI elements with a scripted LookAndFeel:

MidiLearnPanel => column widths

Side request - can you make the midi learn panel even more useful by adding the ability to select the assigned CC from a right click menu? This will be very helpful for users who don't have many hardware controllers but still want to use CC automation in their DAW/host.

Assuming this request didnt get executed? If so add my vote for it please.

Christoph Hart

There you go:

https://github.com/christophhart/HISE/commit/d30e21dd1fb7f10f037986200fef6ab3e293d4bc

Lindon

@Christoph-Hart said in Finally: Fully customize stock UI elements with a scripted LookAndFeel:

There you go:

https://github.com/christophhart/HISE/commit/d30e21dd1fb7f10f037986200fef6ab3e293d4bc

hey @d-healey - is this in your latest commit? If not any chance of adding it?

d.healey

I think at this point it really would be best if Christoph could merge my branch into the official repo.

d.healey

@Christoph-Hart Who else needs to sign the agreement thingy for you to merge? I can send dogs after them if needed :)

ustk

@d-healey We were 3, two of us did it :)
@Levitanus doesn't seem to be an active member for a while...
Maybe Christoph could reach him by email? traditional mail? carrier pigeon?

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.

Finally: Fully customize stock UI elements with a scripted LookAndFeel

23

1.8k

10.4k

90.6k