LAF ScriptSlider?



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



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


  • @ustk Woohoo! Thank you both!





  • @d-healey Merge.


Log in to reply
 

3
Online

1.5k
Users

4.6k
Topics

42.1k
Posts