LAF ScriptSlider?

[d.healey]

@ustk Do you have example of drawing a knob with the correct middle position?

This is what I'm working with:

    laf.registerFunction("drawRotarySlider", function(g, obj)
    {
        var a = obj.area;
        var width = obj.area[2];
        var height = obj.area[3];
        var stroke = 3;
        var mark = 4;
        var range = obj.max - obj.min;
        var startOffset = 2.5;
        var endOffset = -startOffset + 2.0 * startOffset * (obj.value - obj.min) / range;

        g.setColour(obj.itemColour1);
        g.fillEllipse(a);

        g.setColour(obj.itemColour2);
        g.drawEllipse([stroke / 2, stroke / 2, width - stroke, height - stroke], stroke);

        g.rotate(endOffset, [a[2] / 2, a[2] / 2]);

        g.setColour(obj.textColour);
        g.fillRoundedRectangle([width / 2 - mark / 2, 0, mark, height / 2.5], 1.5);
    });

[Christoph Hart]

laf.registerFunction("drawRotarySlider", function(g, obj)
{
    var a = obj.area;
    var width = obj.area[2];
    var height = obj.area[3];
    var stroke = 3;
    var mark = 4;
    var range = obj.max - obj.min;
    var startOffset = Math.PI * 0.25;
    var fullArc = Math.PI * 1.5;
    var arcPos = startOffset + fullArc * (obj.value - obj.min) / range;

    // 0 = starts in the center
    var intend = width * 0.25;
    
    g.setColour(obj.itemColour1);
    g.fillEllipse(a);
    g.setColour(obj.itemColour2);
    g.drawEllipse([stroke / 2, stroke / 2, width - stroke, height - stroke], stroke);
    
    var p = Content.createPath();
    p.addArc([0, 0, 1.0, 1.0], Math.PI + startOffset + fullArc, Math.PI + startOffset);
    
    /// itemColour3 ?
    g.setColour(0x22FFFFFF);
    
    // Annoyingly the path can't scale proportionally so we need to factor this weird number
    // in to make it non-squashed (change it if you change the intend)
    // someone with more math ambition could calculate it with a middle-school grade formula...
    var magicScaler = 1.4;
    
    g.drawPath(p, [intend/2 + stroke, 
                   intend/2 + stroke, 
                   width - intend - 2 * stroke, 
                   height - magicScaler * intend - 2 * stroke], 
                  intend);
    
    g.rotate(arcPos, [a[2] / 2, a[3] / 2]);
    g.setColour(obj.textColour);
    g.drawLine(width/2, height/2, intend - stroke + width/2, height - stroke, 4.0);
});

[ustk]

@d-healey Sorry but I don't understand what was the problem... Everything seems fine here...

[d.healey]

@ustk If you use it with the attack knob of an ADSR for example the skew is totally off.

[Christoph Hart]

Oops I thought you were talking about the center point of the circle :)

I think the obj.value should be normalized (or at least an obj.normalisedValue should be added) that takes the skew factor into account.

[ustk]

@Christoph-Hart @d-healey There's a valueNormalized but I might have made a mistake (or not), so this is where obj.skew might help.
This is the formula of the valueNormalized I've made:

(s.getValue() - s.getMinimum()) / (s.getMaximum() - s.getMinimum())

so this doesn't take the skew factor, hence 0.5 isn't the middlePosition of 1,000, but half the range (10,000 in the case of a 0-20,000 time knob)

[ustk]

@d-healey @Christoph-Hart This is what you want, but since it complicates too much the formula, I should either add a valueNormalizedWithSkew, or modify the existing valueNormalized... ?

laf.registerFunction("drawRotarySlider", function(g, obj)
{
    var a = obj.area;
    var width = obj.area[2];
    var height = obj.area[3];
    var stroke = 3;
    var mark = 4;
    var startOffset = 2.5;
    
    var valueNormalizedWithSkew = Math.pow(10, (Math.log10(obj.valueNormalized) / (1/obj.skew)));
    
    var endOffset = 5 * valueNormalizedWithSkew - startOffset;

    Console.print(obj.skew);
    g.setColour(obj.itemColour1);
    g.fillEllipse(a);

    g.setColour(obj.itemColour2);
    g.drawEllipse([stroke / 2, stroke / 2, width - stroke, height - stroke], stroke);

    g.rotate(endOffset, [a[2] / 2, a[2] / 2]);

    g.setColour(obj.textColour);
    g.fillRoundedRectangle([width / 2 - mark / 2, 0, mark, height / 2.5], 1.5);
});

[Christoph Hart]

Yeah, valueNormalised should definitely include the "deskewing", otherwise you can just use the normal value.

[ustk]

@Christoph-Hart Alright, correcting...

[ustk]

@Christoph-Hart @d-healey that's fixed and pushed, so you can now do this:

laf.registerFunction("drawRotarySlider", function(g, obj)
{
    var a = obj.area;
    var width = obj.area[2];
    var height = obj.area[3];
    var stroke = 3;
    var mark = 4;
    var startOffset = 2.5;
    var endOffset = 5 * obj.valueNormalized - startOffset;

    g.setColour(obj.itemColour1);
    g.fillEllipse(a);

    g.rotate(endOffset, [a[2] / 2, a[2] / 2]);

    g.setColour(obj.textColour);
    g.fillRoundedRectangle([width / 2 - mark / 2, 0, mark, height / 2.5], 1.5);
});

[d.healey]

@ustk Woohoo! Thank you both!

[d.healey]

@Christoph-Hart Merge?

[Christoph Hart]

@d-healey Merge.

[Natan]

@d-healey @Christoph-Hart so Is This Stable To Build?
https://github.com/christophhart/HISE/commits/scriptnode

The Top One, Is The Latest, Right?
71f75e5 <<< This?

[Christoph Hart]

Yes, that should be fine.

[A Former User]

This post is deleted!

[d.healey]

I'm convinced that LAF is the way to go now for a custom UI without images.

[A Former User]

@d-healey I was experimenting with Lottie graphics yesterday and was totally blown away by its looks and possibilities! I don’t get what LAF is exactly tbh. But it looks really nice too!

[d.healey]

@vewilya I haven't used rlottie much but what I have done with it has looked nice, very smooth animation.

[ustk]

@vewilya Be just careful with Lottie since all actions aren't rendered/compatible with Hise. So complex animations might not work, keep them simple.
Custom LAF is a way to redraw the components (sliders, comboboxes, etc...) with fully customizable graphics (shapes and colours). So you don't necessarily need to recreate the components from script panels for full customizations, the original ones can now give you almost anything you want...