Trying to make custom button with LAF

[tiesvdam]

Good day, I've been working for a few hours today on adjusting a knob with LAF. I'm not getting any errors, but I don't see the custom LAF being applied to my knobs. What am I doing wrong? I translated this script from a panel that I had customized, but I got the tip to actually do it via a knob.

//CUSTOM KNOBS MET LAFO (Look And Feel Overhaul)

const var Envelope1 = Synth.getModulator("AHDSR Envelope1");

// Registreer de Look And Feel
Laf.registerFunction("customRotary", function(g, obj)
{
    Console.print("LAF applied to " + obj.text);
    g.setGradientFill([Colours.withAlpha(0xFF636070, 1), 25, 25, 0xFF0b0b0d, 0, 0]);
    g.fillEllipse([7.5, 7.5, obj.area[2] - 15, obj.area[3] - 15]);

    g.setGradientFill([Colours.withAlpha(0xFF636070, 1), 0, 0, 0xFF0b0b0d, 100, 100]);
    g.drawEllipse([7.5, 7.5, obj.area[2] - 15, obj.area[3] - 15], 1);

    var normalizedValue = (obj.value - obj.min) / (obj.max - obj.min);
    var maxRot = Math.toRadians(270);
    var rotation = normalizedValue * maxRot;
    var rotationArea = [obj.area[2] / 2, obj.area[3] / 2];
    
    g.rotate(rotation, rotationArea);
    g.setColour(0xFF90929A);
    g.fillEllipse([13, 25, 2, 2]);
    g.rotate(-1 * rotation, rotationArea);
    
    var startOffset = 2.5;
    var arcThickness = 0.03;
    var arcWidth = 1.0 - 2.0 * arcThickness;
    var p = Content.createPath();
    var endOffset = -startOffset + 2.0 * startOffset * normalizedValue;
    endOffset = Math.max(endOffset, -startOffset + 0.1);
    p.addArc([arcThickness, arcThickness, arcWidth, arcWidth], -startOffset, endOffset);
    g.setColour(Colours.white);

    var backgroundArc = Content.createPath();
    backgroundArc.addArc([arcThickness, arcThickness, arcWidth, arcWidth], -2.5, 2.5);
    g.setColour(0xFF333333);
    g.drawPath(backgroundArc, backgroundArc.getBounds(obj.area[2]), obj.area[2] * arcThickness);
    
    g.setColour(0xFFFF5400);
    g.drawPath(p, p.getBounds(obj.area[2]), obj.area[2] * arcThickness);
});

// Create Knob + Label in one widget
inline function knobPanel(name, x, y, obj)
{
    local control = Content.getComponent(name);
    
    if (!control)
    {
        control = Content.addKnob(name, x, y);
        Console.print(name + " created");
    }
    
    if (!control)
    {
        Console.print("Error: " + name + " could not be created");
        return;
    }
    
    Content.setPropertiesFromJSON(name, {
        "width": obj.width,
        "height": obj.height,
        "min": obj.min,
        "max": obj.max,
        "mode": "Rotary",
        "saveInPreset": true,
        "text": name,
        "popupText": true
    });
    
    // Force LAF application
    control.setLocalLookAndFeel("customRotary");
    
    return control;
}


// Knoppen callbacks
inline function onknb1Control(component, value)
{
    Envelope1.setAttribute(Envelope1.Attack, value);
}
Content.getComponent("firstKnob").setControlCallback(onknb1Control);

inline function onknb2Control(component, value)
{
    Envelope1.setAttribute(Envelope1.Sustain, value);
}
Content.getComponent("sustainKnob").setControlCallback(onknb2Control);

inline function onknb3Control(component, value)
{
    Envelope1.setAttribute(Envelope1.Decay, value);
}
Content.getComponent("decayKnob").setControlCallback(onknb3Control);

inline function onknb4Control(component, value)
{
    Envelope1.setAttribute(Envelope1.Release, value);
}
Content.getComponent("releaseKnob").setControlCallback(onknb4Control);

const var rc20LFO = Synth.getModulator("RC20");
inline function onknb5Control(component, value)
{
    rc20LFO.setIntensity(value);
}
Content.getComponent("rc20").setControlCallback(onknb5Control);

[d.healey]

@tiesvdam That's not quite how look and feel is used.

Check out this video, but replace Engine.createGlobalScriptLookAndFeel() with Content.createLocalLookAndFeel()