LAF ScriptSlider?

Natan

@ulrik ...and search light

HiseSnippet 1541.3ocuXstaaaCEVJMpXwaYnEXO.b9WNsNNxt0sCHKaw4hKLpSpabZ2JBJJnknr3hDo.Eca7FJvdQ56Rej1+2O5NjzxRxwosK6hPPP34F+32g7vCy.A2ijlxEV1qc5zDhk8W4LbJSFteHlxr5c.H2oemtnAXl0dSSvooDeKa6a7HkZ60V0R+8G+3d3HLyijKxx54bpGoOMlJykNX2GSih5h8ImRiKX882smGmsOOhOAfxMbbsRvdmiGSNFqLaEGK6adnOUxECkXII0xd0839SGFxeCyX+yoozQQD0flVCg.YD2kG4qPrRp09gzH+AYK4TKHJCxIfaXHfuw4HpOct7bh3VZEnbOJxG1q7wfWyhvycovycYvyt.7V0.ua6LzSPSj4ZTX6Kc5wjDQ.FRAEgkwVqUNdMm84fELYiX74jtBXvbOp8.W25n1ttar85UVuBjHRknWiEnHb.ZGzgrwTFogmf.KsGEwGgiLgsOmedGleWBIplwUkSIfKYykwmAXY3LC1ZKD5DtDKlhRin9DgQTu.zD.wHbJBq1pgFpUVGkRjHI4BIBy7QwbeBJQvSHBIkjhjbTUv3pqWA.ZCAYLMEVQcmv7jTNqVUeA9MlIyDtp0QAYJGWGwG8KaT42VuBB9T.WfYiI.3A4.IcAZSyeQYaarw7a.toPHkf49TLK2cszmDDnf7NnVMZWxMkEXg2ogTuyYPdCLwsQqsKo7mn9xPPQyFtvj2B98cJ4yh33HHShRmHHno7IHAQSVg.EA782ZrJogWDAKzreIe8vQdShfji1CBvtl0CJPvi0x7lHDPND.WzDRNNASmuH2r3Z9tyPbQY2AUSwg5PjymarklpuD+.lAAsZ0EwJZ+Ph24HZfN.5sC6rSVpWYCno1kTsgQ2rDrgLv99cDd0NqTlXKTq5nkJwjPtaIkWohWVGAmhlSOYLd9JIa0j.rrFoZZIMWY1xvPWeOxcibcEVFF5RSU8qBf3HHc2.OJM22M1dtwuM2ORTJYg43G9LliSTywbWtxH+oBy9UK3ZkBAHOM2qPBllhR4wDYHkM1fbYHvaER54S5+mo3Ra42DNC619JR5l08BD2aWbOu5rZGnJIXZRiwD4d7ILeSpDChOq0KKezcbCXZL2SpMZzXyfLqF2H.tf8vnHZRJYdXx0V1apjDaF1L2DUYScI6j5ygmtZYFhVnrzmN3sJG7NQzwLh+oPdtFvM4wtNppGTxQP7qVdUmuGY.mpt1JKbifh9r93oDQMoPswOSgfqtHt17LSczYEWA5z+BBd4xVHtW7vGFD35ZtbLmgOQkmH9mP7jPsrHRsEC+rxc4TFrUo4klykX08peYGacYYMaC6FKPrvJ0vCWpTOpOcbnjAGjVfbf6Y9aSKORcMAji5BbPsybunc6.8mt3m5GPhq9qTfJMXqhwb4aWq7VkEY2Vi3ri4RxSX0fKrqrVEn9whpBBVpNUiHBdTjhWVhZUSnhOli0XShGoZDwTWMyPnarxs64b0s6UraTOSeQELjy5wnxmjPXWUOpVyZlR0N3LTAlJ0MC90yZFzzeiE0W0t9fNG+pGe7dVZHm2h8Kdu0y5c.VhyBDDyAyalBjc.40PC6ltLWy4.R54Rdh113DNSg.6a8YLsWLeJu0zcmlO+Oa22nJoNWvui2Mjn1YVTRV4LP1MAIePINuNhR5Se5S0RU2R.7ti5gIEpznL4cu6c+oxjXpueDY.OkpRpEeZhpSxLmiK9PlW7dnyuBC2E5nLYH8WIEeqS5jf.5Ep7Ue3EMWpCc3cBbeUuUke7f5ESyTnPSwtzUchy.TNs3r7O9EEKcyzmIbusy.pzKb43ckkfWXS0+03c16yV24vf.nraNXW0o6O+u6iwVJTfR9RnHJztkPk8cNdR7PXKmGAPBiAsi.xrWQcf0L1UMVwLCgZy5Ae.9loroZr8LkMyTZEi8D7W4YNlqdA3Wnk.XhoeH7ZNGoFiZlc51wAtdPsSm9JOOEUrIf8k6SqqgO26Z3y8uF9z9Z3yCtF97vqgOe2G0G0+SfNSj7XywDPvfC0UYssOjggcY5cjV+ETMTxJG

This Show The Error k.clear();

d.healey

@Natan Not for me

ustk

@Natan Me neither...

ulrik

@Natan Not here..

d.healey

@ustk said in LAF ScriptSlider?:

@ulrik textColour isn't working with the stock slider either so this should have something to do with a bug in the slider wrapper somehow, it's not related to custom LAF. I'm checking if I can do something...

Any luck with finding a solution for the textColour property?

ustk

@d-healey said in LAF ScriptSlider?:

Do you have an example of a rotary knob using skew factor?

Not on the top of my head...

Any luck with finding a solution for the textColour property?

I'm having a look before making my evening tea :)

ustk

@d-healey Ok so now the textColour property is available from the custom LAF (although it still doesn't work with stock sliders, but who cares...)
Did I earn my tea? :)

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?

LAF ScriptSlider?

22

1.8k

10.4k

90.7k