LAF ScriptSlider?



  • @ustk said in LAF ScriptSlider?:

    @ulrik The skew factor is not a public component property, it is calculated behind the scene. It's calculated to take the middlePosition property into account. Therefore you can only access it only from obj in the custom LAF
    The skew is rarely necessary since value and valueNormalized should cover all the needs, but I had a special use case where I needed it, so it might be the reason I put it in the custom LAF I don't really remember to be honest... The associated function is getSkewFactor

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



  • @ulrik Ulrik
    Have You Noticed The Message In Console With The Latest Version Of Hise.

    It Says Something About K.clear();
    I Guess This Version Doesn't Like That Line!!!



  • @Natan No, what do you mean?



  • @ulrik said in LAF ScriptSlider?:

    @ulrik ...and search light 😂
    pansliderWpointerAndSearchLight.gif

    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();



  • @Natan Not for me



  • @Natan Me neither...



  • @Natan Not here..



  • @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?



  • @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 🙂



  • @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? 🙂



  • @ustk Yey well done, many much tea for you 😄 @Christoph-Hart merge merge merge 😄



  • @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);
        });
    


  • 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);
    });
    


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



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



  • 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.



  • @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)



  • @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);
    });
    


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



  • @Christoph-Hart Alright, correcting... 😉


Log in to reply
 

6
Online

1.5k
Users

4.6k
Topics

42.1k
Posts