LAF ScriptSlider?

d.healey

@ustk Yey well done, many much tea for you :D @Christoph-Hart merge merge merge :D

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.

Peek 2021-03-18 17-31.gif

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.

LAF ScriptSlider?

18

1.8k

10.4k

90.6k