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

d.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!!!

d.healey

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

Natan

@d-healey :( Can't Understand This

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

d.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 :/

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

d.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);
        
    }     
});

d.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);   
    }     
});

d.healey

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

Natan

@d-healey Thank You, Sir

LAF ScriptSlider?

24

1.8k

10.4k

90.6k