LAF ScriptSlider?

Natan

@d-healey I Tried to make this Wrking But No Glory

HiseSnippet 1113.3ocsV81SabCF2Gv0MxV5Vk1G.q9pDFjcIszVoH1RAR5PEnQDVUqPnNm67k3gO6HeN.oUHsOZ6iz9Fz8X6jbWnAJKRbuHfe96uG6G+6wsUxPZZpTg7V83QCnHuu2uyHgt+N8ILAZucQdOz+.RplpvNQaOZ.IMkFg77V9UFAdqtBx98u+11DNQDRyDgPuUxBo6yRX5Losa7ZFm2hDQOlkjy5m1XuPoXGIWNDvyx9AnAjvyH8nGRLlsjOx6AMiXZopilnooHuU1VFMpSe4EBm8ukkx5xolEUQcf.4D2RxiLH1HEsSeFOp8j5NEAQoc1tvxtcgex+.VDap7rciezp.m4Q98CuktM3UMO7Bt6vyKG7VwAuG42ITwFnyzXv124um.NnhIvQPdX4rEsDeE+cjfEBckDxYzVJXwTOJ8rff0waFDTtdwBEK.GDoZLmDi2B2TziInUBUTnrdEW1kvcgbeo7rWJhZQo7RN2.Gpnn8XlFlVCEgZlTT5wQJxE6Cgfn5vYQT0iWGGOQYu0wxt+U4hE9TwBX36bhBSfjBBqPfLVOSrRNTDAp1brL2urXbIiwo5QbJdqsv0J6TLNfludURoZWik01t8bKJWOuMwPW4QlbPiNhFpIhdbZoSHmDb55XxIUs+Vy96SNE9Ss7dey4hooItkUmuClRqOgGe.SLL8nw0nIS+RM7Ftht9rVmpIJ80jcAKR2etwexFz4D9P5gRUBgy9HMB+q3fJaVNytb6WlOaR.jLKzpOqQ1rBFUxBy0pUF+yWuVVa9YeCa1As0xExqx9WJOk9+DaPL+xbWsR.HedHXsYOAu6kyMFRvg5yqV95MY1BZRWlEESayrPYBPuZb7txccqXgI2ivRwgRM8MhRkK7oBqV3pB3qqJNdt5LTBJImSUyUsghVcaNVRLLoKUsN1tYL0PfqZVxP+alLLOWcnigJmgRwdBl9MCnhahhDMlVyPVNFUfoZKU4CGSU5XdPLfQ7a7esP1sJxB3oie96lMP+wd6RzjIgAhHjkATklYJ.ucomCCybLvq5uKM8Lsbf01jARgI+d+vWMoWNMg+YTiQYC+Nsgk.yL.92kJ1Gg7S3nDVTDm1VlxLa54GrBLrC5.Mc4m+lPxhN58MRGFGytzrosOJQFAl562lHfflKRu+elPFBxd.H3yFoYjVFoeF9LRAd7d6xTzPGXlAoovA1wzK0aKuzLyA8kCsfQmxngbhd14olGQLVgIp4GbYFNIfReT9h7dYH6cEtOxuMSG1e93co4fWnW59FuiexRQ+lwwvQSFXWwu06t+eeBBXyzLQuCHZkoay+vgIcfFmPJfDg.3wAYdKYtk5VGXVa1Y5PEQ1El9qwJqZV6MVY0IJQIjPk7Cgt61lGE8sVI.lD12FtJ7HUXMd5kZe+fJAlqOrODFZ1J1.v978o1B3ySV.ed5B3ylKfOOaA744KfOu3V8w7L4WNTKSbWS.AsaZIW87ZJHPWlsiD8e.9dJ0K

David Healey

What have you tried? :p

Natan

@d-healey Haha Cant Understand How This works in Slider Scenario
I Can Do Almost everything In Circle Knob Shapes, But Sliders No Sir!!!

David Healey

https://www.youtube.com/watch?v=WXRhYuVXoOk

Natan

@d-healey :( Can't Understand This

David Healey

@Natan Which part?

Natan

@d-healey The Circle That Moves, I Have no idea how to make it moving from left to right!
Simple to draw but how to make it slide?!!!

Edit:
I'm trying to Create the slider In Look and Feel

David Healey

@Natan Scroll up to my post where I asked for help making a slider bi-directional. Use that as a starting point. All you have to do is draw a circle and change its x position based on the normalized value. Normalized value is always 0 - 1, so just use that as a percentage of the slider's width.

Natan

@d-healey

g.drawEllipse([a[0], a[1], a[2] * obj.valueNormalized, a[3]], 2);

Like This?
But this acts Very Crazy :/

David Healey

@Natan [x, y, w, h]

Natan

@d-healey Haha I See Some Moves :)

        g.drawEllipse([15 * obj.valueNormalized, 15, a[3]/2, a[3]/2], 2);

Natan

@d-healey But It Goes Out of the Bounds!!!

HiseSnippet 1040.3ocsV0saZbDEdVr2zBsDUKkGfU4hJnkfAbrSkrrJwFHEEaGTvMpQVtoC6NKL0yNCZ1AaSh76Veb5k8MH8b1AXWmhcsPx6EvNme+lyb9Ny1Sq7YwwJMwI+ISGyHNeqa+oRynCFQ4RR2VDmG6dDM1vzdVQ6OcLMNlEPbbV6Un.m7qSRd9medepfJ8YohHj2o39rC4QbSpzdMeMWH5PCXmvixX8ya10WIOPITS.7rlaMxXp+4zgrionY4bINOpc.2nz8MTCKl3r99pfo8GotTZs+c7X9.ACWTmzGBjUbGkH.QLJkbvHtHn278cLAhRuzpvZ1pvSbOhGvWHOsZ7cIJ7R8Ha8vI2cAu5YgWs6O7bx.u0svaC299Z9XSpFDaeiaWIbPERgifrvxZKI2emy8.EXgzTMhdNqiFVrviR6TqVEusqUq7tEKTr.bPDa7DzPu87ZKGxkrp9ZFrsdkPMfJrg7Pk57WJC5vXhRV2.GppYC4XCSmIReCWIK8z.M8xCgPP08E7.l9oU7BmqbXEO0f+rbwBepXAO34Bp1iBIEDVkBYLIrnBdnWITXrYpf4s2ddMJaULyQ7YX0Xlw1.kX6fg1EH3RsID59dqZhDJ5uk4anxgBVoSomV6rJdzSqm7aije25L3uFY8Fet87wMrH6x5k2codr4l22768CI0fKnhIriU5Hpf+QVvBTU2dRsLLgk61BAeb7rv9i02YqkGNumggayFP711FZ7c6+e4V2910yd+5x6N+LzSIOVYXuQVpbgOUHegqK38kpBCWpNrcTqDBldopwwC56xwRxIQCX5JdIaqEFB7jaRDcuchX14D9V1QFCUxtRt4MiYxaidRlQoPh5LTAlZRnoOdFM010S3.a7qbesTMnNIAvoi999ljesaKpgNOLPDgrLloMbbC3zhcALH0x9y61hEetQMNw1nwJIlemM9eS5UKR3eDzbZZ1OqYBoBG9+KJM+iP9oBRDOHPv5oh4XQO6PcfcOtOz9jc1eDMM5j22LdRXH+JrncHIRE.l551iJgflIRu+ulSPAYOBD7YTZJIBk9Y3AkBM0Caw0LeKXtARigCrSXWY1WcENuaDiObTl6aNt4k7.ynTA+dSx+clJLYWELQPM2bbOdG2LEXhyNWEmcJgpyzr0gGj6.tuvcC2dbi+nki2bKAuP61CMdmciZQ21ggvoWJXW2syu8ve8IAlzZ3xgGQMZrgz83IQ8gdKeFfDojIvwCN4PhrccMbMVY5yjAIKvVvYJqiqclor9bkjHpuV8AeK8Guy9qSj.XRl7oK4gugBV6sf265VqZMjgw+fuOVJdFf8k6SiUvmsVAed9J3y1qfO6rB97hUvme5N8A+JtWNwnhrzDPPu1IyecbZKoPWVRGI4eA3B.x6L

David Healey

HiseSnippet 1058.3ocsV80aaaCDmxIpcwaoXAXe.H5S1CtdxNscEHHXtIwtKnIoF0YEaHHqiVhxhKTjFTzw1sHe21Go8zds6NIaK4NmrBCD8fs3u6e+3w6NptFsOOIQaHNac9zgbhy231apxFcXDSnHGeDw4QtmxRrbCMC5foCYII7.hiyFuBAb1ZSR5ye+SGvjLkOOGhPdmV3yOQDKr4nca8ZgT1gEvOWDWP6m15Xes5PsTOB3yFtdjgL+qXC3mwP0J4RbdP6.gUa5YYVdBwYyCzAS6EoGqxz+chDQeIGWzfzCbTFbGsL.YLhRNLRHC5NeemP.uzMOKrQVV36bOUDHVfmmM91TAzbKJlObJcWzqQQ548kSOmBzayL5siaOeiXnMWBxsu18XEbPExfifhzJSWRo+oj6gZPCksdL6JdGCrXgEUdtmWM5y77pt21k2tLbPjXoRVHceZa0.ghW22vgs0qj59LYlKOQqu5kpfNbtrRlYfA0M7ABrfoyHkuUnUUdbfgM9DvELSOoHfadbMZ3bgCpQ08+ypaW9iaWlBOWyLTFDT.rNChXpaQAhPZEDLwNUxo6uOsY0LAyLDeFTOgayJfR0s+frEH4x0IDp9dqdjBR5uk6aYpARdkKXW3cYMJ6hFo+1L82cuD9qYQqwmaOdBKONaYip6sRKxeC2nigMZSu8VFLZUfS.PjUzuOMybMSNhel1DyjhOvCnOgVY7pEU8ybzzTGs6kzef1DLKB+eQNNaOgGWskRwvDHsLoFcZM53ZznrTwxajal89MU2a9IJUqNSa4uQUoZ4OVdqx2Tl94hBCWoLr3znkRtYkhwgEl6xvJpQw84lZzzTvBEgtlkaKcu81xhSM7y5UJnnVcrRXeyPt51ZVIyZvv11YrBT0l1z9nYMsY8.DAza9P2Wqz8aPRIb9fve6uH+xwGwrr4tA7HDkgbiUfa.mi3WCiUylErk6Q7jqr5go5FOTqv36ry+aPmrHf+QPqo4Q+xVosX3UA+r1H9.DeljDKBBj7t5DAlzKNhG50G1CJ0JdSPLaRgsSqjQgghIXR6DRrN.T00sKSANUUbWOucEvd..7IDMukBQ+D7fnPI5fiDFteFYVhoIvA147I1CzSvoeQbwfnB29bVqwh.aTNvu2h7emvBy40AijL6xC+wa7lI.Cbwor3jTEjclVLObubivWJc2wsqv5GsZ9VZE7EJ2tu46r6W21scXHb5kS1Mc67q2+WlRf49VgZvoLqAKHcOaTbOn1xmCLQo3Rb7fSIrQNasGtFyL83pfzEXI3LgMv0NyD1XtPRLy2neueV6OdC9Wkh.bRk9gLaAeQErltnu200qtG1gIduuOlJdBv8UaSy0vlcWCad5ZXyyVCad9ZXyOtF17h6zF7a5d4HqNNqMA.51Nc9qiSaECpxRqHI+KPvrviJ

Natan

@d-healey said in LAF ScriptSlider?:

HiseSnippet 1058.3ocsV80aaaCDmxIpcwaoXAXe.H5S1CtdxNscEHHXtIwtKnIoF0YEaHHqiVhxhKTjFTzw1sHe21Go8zds6NIaK4NmrBCD8fs3u6e+3w6NptFsOOIQaHNac9zgbhy231apxFcXDSnHGeDw4QtmxRrbCMC5foCYII7.hiyFuBAb1ZSR5ye+SGvjLkOOGhPdmV3yOQDKr4nca8ZgT1gEvOWDWP6m15Xes5PsTOB3yFtdjgL+qXC3mwP0J4RbdP6.gUa5YYVdBwYyCzAS6EoGqxz+chDQeIGWzfzCbTFbGsL.YLhRNLRHC5NeemP.uzMOKrQVV36bOUDHVfmmM91TAzbKJlObJcWzqQQ548kSOmBzayL5siaOeiXnMWBxsu18XEbPExfifhzJSWRo+oj6gZPCksdL6JdGCrXgEUdtmWM5y77pt21k2tLbPjXoRVHceZa0.ghW22vgs0qj59LYlKOQqu5kpfNbtrRlYfA0M7ABrfoyHkuUnUUdbfgM9DvELSOoHfadbMZ3bgCpQ08+ypaW9iaWlBOWyLTFDT.rNChXpaQAhPZEDLwNUxo6uOsY0LAyLDeFTOgayJfR0s+frEH4x0IDp9dqdjBR5uk6aYpARdkKXW3cYMJ6hFo+1L82cuD9qYQqwmaOdBKONaYip6sRKxeC2nigMZSu8VFLZUfS.PjUzuOMybMSNhel1DyjhOvCnOgVY7pEU8ybzzTGs6kzef1DLKB+eQNNaOgGWskRwvDHsLoFcZM53ZznrTwxajal89MU2a9IJUqNSa4uQUoZ4OVdqx2Tl94hBCWoLr3znkRtYkhwgEl6xvJpQw84lZzzTvBEgtlkaKcu81xhSM7y5UJnnVcrRXeyPt51ZVIyZvv11YrBT0l1z9nYMsY8.DAza9P2Wqz8aPRIb9fve6uH+xwGwrr4tA7HDkgbiUfa.mi3WCiUylErk6Q7jqr5go5FOTqv36ry+aPmrHf+QPqo4Q+xVosX3UA+r1H9.DeljDKBBj7t5DAlzKNhG50G1CJ0JdSPLaRgsSqjQgghIXR6DRrN.T00sKSANUUbWOucEvd..7IDMukBQ+D7fnPI5fiDFteFYVhoIvA147I1CzSvoeQbwfnB29bVqwh.aTNvu2h7emvBy40AijL6xC+wa7lI.Cbwor3jTEjclVLObubivWJc2wsqv5GsZ9VZE7EJ2tu46r6W21scXHb5kS1Mc67q2+WlRf49VgZvoLqAKHcOaTbOn1xmCLQo3Rb7fSIrQNasGtFyL83pfzEXI3LgMv0NyD1XtPRLy2neueV6OdC9Wkh.bRk9gLaAeQErltnu200qtG1gIduuOlJdBv8UaSy0vlcWCad5ZXyyVCad9ZXyOtF17h6zF7a5d4HqNNqMA.51Nc9qiSaECpxRqHI+KPvrviJ

Haha Thank You Sir :) Awesome

Natan

@d-healey Sir, Code you please Let me know How I Can make this Fader Work As It Supposed to

The Mouse direction Is'nt Correct :/
I want this to go from down to top.

laf.registerFunction("drawLinearSlider", function(g, obj)
{
    var a = obj.area;

    if (obj.style == 3)
    {
        g.fillAll(0XFF3f3f3f);

        g.setColour(obj.itemColour1);           
        
        var w = 20;
        var h = 20;
                
        var x = a[2] / 2 - h / 2;
        var y = a[3] * obj.valueNormalized - (w * obj.valueNormalized);

        g.fillRoundedRectangle([x, y, w, h], h);
    
        
        g.setColour(obj.itemColour1);   
        g.fillRoundedRectangle([x, y, w, h], h);
        
    }     
});

David Healey

@Natan

laf.registerFunction("drawLinearSlider", function(g, obj)
{
    var a = obj.area;

    if (obj.style == 3)
    {
        g.fillAll(0XFF3f3f3f);

        g.setColour(obj.itemColour1);           
        
        var w = 20;
        var h = 20;
                
        var x = a[2] / 2 - h / 2;
        var y = a[3] - a[3] * obj.valueNormalized - h + h * obj.valueNormalized;

        g.fillRoundedRectangle([x, y, w, h], h);
    
        
        g.setColour(obj.itemColour1);   
        g.fillRoundedRectangle([x, y, w, h], h);
        
    }     
});

Natan

@d-healey said in LAF ScriptSlider?:

laf.registerFunction("drawLinearSlider", function(g, obj)
{
var a = obj.area;

if (obj.style == 3)
{
    g.fillAll(0XFF3f3f3f);

    g.setColour(obj.itemColour1);           
    
    var w = 20;
    var h = 20;
            
    var x = a[2] / 2 - h / 2;
    var y = a[3] - a[3] * obj.valueNormalized - h + h * obj.valueNormalized;

    g.fillRoundedRectangle([x, y, w, h], h);

    
    g.setColour(obj.itemColour1);   
    g.fillRoundedRectangle([x, y, w, h], h);
    
}

});

Brilliant :) Thank You Sir <3

Natan

@d-healey @ulrik
I Used the gradient Fill To colorize the Handle on The Fader!!!
But Gradient Doesn't move with The Fader!!!!

It shows up On The Faders MAX Value, and When Move it Downward, It changes The Color,
Kinda gradient is fixed to the Background Position?!!!
Why?

Content.makeFrontInterface(600, 500);

const laf = Engine.createGlobalScriptLookAndFeel();

laf.registerFunction("drawLinearSlider", function(g, obj)
{
    var a = obj.area;

    if (obj.style == 3)
    {
        g.fillAll(0XFF3f3f3f);

        g.setColour(obj.itemColour1);           
        
        var w = a[2];
        var h = 44;
                
        var x = 0;
        var y = a[3] - a[3] * obj.valueNormalized - h + h * obj.valueNormalized;
        
        
        g.setGradientFill([0XFF202020,0,0, 0XFF4B4B4B, 0, 45]);  //Base
        g.fillRoundedRectangle([x, y, w, 44],3);   
    }     
});

David Healey

@Natan I don't know much about gradients, you'll need someone smarter ;)

Natan

@d-healey Thank You, Sir

LAF ScriptSlider?

23

2.1k

13.0k

112.9k