LAF ScriptSlider?

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

ulrik

@Natan You have to move the gradient as well, I’ll take à look tomorrow, now it’s bedtime 🥱

Natan

@d-healey Sir, Trying to add a 4 Pixel Margin to the top and down,
And tried And failed, Can you give me a little Help Here :clapping_hands:

EDIT:
Okey, I Managed to add the margins, Just need A Little Help With Gradient Thingy
@ulrik

Natan

Anyone can Help me with this!!!
It works Upside Down Again :/

Content.makeFrontInterface(600, 500);

const laf = Engine.createGlobalScriptLookAndFeel();

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

    if (obj.style == 3)
    {
        g.setColour(obj.bgColour);
        g.fillRoundedRectangle([a[0], a[1], a[2], a[3]], 6);
            
        g.setColour(obj.itemColour1);           
        g.fillRoundedRectangle([a[0], a[1], a[2] , a[3]* obj.valueNormalized], 6);
    }     
});

HiseSnippet 1007.3ocsV0saaaCElxIrc1qtXAX2saH5U1CdFxMsoKHHXtIwtynIoFwYAqHnniVhRlKTjFTzIwsHua6QZuAcGJZaot4jEXfvKrw4+Ocz46P0WqBXooJMxq7oSGyPdOAOXpzLZ+QTtD06.j2SwGQSMLMwoZuoiooorPjm2Zuwpvq75nrye+K6QETY.KWEBclhGvNjmvM4Z629sbgnKMjcJOof2uncu.kbekPMAvyZXezXZvEzX1wTqakvHuG0IjaT5AFpgkh7VeOU3zAiTWIc9eFOkOTvrBsPCfD4T2UIBsH1pEs+HtHr+7m6TDjk94cg0bcguGeDOjuPed236xLPxinX+vqzcAuVEgm+8GddEf25N3sAdPflO1jawhsuE2SBunhnvqfhvx4KpzUkv6q.OjllIzKXc0fvhHpskueCxK88quS0JUq.uHRMDAMhrKoiLlKYMCzL3w5MB0PpvkxCUpKdsLrKiIp4BCBnolEysCLcmHCLbkr1yB0zqNDRAUOPvCY5m0fDM2XbChZ3eVuZkOWsBANWR0DJTTPYSJTwrzZMviH0rJSMSELxt6R1rtyvr.sm3loLia.Jy2gwNAK3x8IBl9NQMQBM8SXAFpLVvpcN8b+OzfPOuU1uOO62M+.72VEi1dt85wMrDmXq56bKQb+pNwU9eLqObIULgcrRmPE7OwBKhoalk+apuy7VJQIOVYXuSVqdkOWobkapP92lhhVpM6zgVIDL8RMaYq56JvZxIICY5FjL.uvQXr8q4E3amWTj1F3FVK3nR1SxMuaLSdarEzrIbKuYFp.WMYrlmNi03FBQbfb7X7akpgsPY.NeSTi1neq2ATCcdZfLBUYLSa31G.uCXWB60bjwx3CXoWXTiy7MYrRZqu2F+uE85EEr8IsmlKbZ6rYbjWE7Y1JFPEnDdXnf0Wkxss7haXAp13AvXQwEwIz7bide6zIQQ7qssrCQIpPvULtOUBIsPld+eMms.5dz1au8WrZymnsZ+BbrZABc7AbMKvAlmf+Ukl+InOAHMEdccJ6ZydpqsKethGZFAEz6Gf3Fw3wixuI3ORai9uK2fUrpvIBp4q26ZurYlAaQKtfytDSBcloE6AOHKiuuvcCbetIXzxwaokfWXP6gFuytZqJtSTD7lKGrqi696O72igfkdFtL9HpQaGFwGOIY.LWEv.jHkLgcwfWIKE1I6aksclALYXlfc7alwVVYuYFaM2HJgFnUeLvQ7sWd9MYZ.LIy9FhxvGy.xjELdL1uoukcw+XPfsU7S.1WdLOeEhYyUHlWrBw7xUHlsVgXd0JDyOemwX+bpWOwnRbzDPQ+NYad875HovTV1DI5eLGQV+I

ulrik

@Natan It wasn't easy but I think this will work
Now I changed some of your original code but I've made some comments how I was thinking.
I hope you can use it

HiseSnippet 1091.3ocsV0maaaCEmJIpq1accEnG.h9W1attxItaCvHnNe4ffljZTmEzgffBZIJKNSQZPQaG2gbm1QXGkcBF1MX6QJYK6F0hTCLIX.+9j+dO99PcUReZRhTgbJcwrQTjy231alPGcPDgIPmbHx4gtcUzDpFs+rQjjDZ.xwYyiMRcJsEx97OuZeBmH7o4rPnKkLe5orXlNma21ulw4cHAzKXwKocy1m3KEGH4xw.R1z0CMh3OjLfdNwn1FtHmGbT.SKU8zDMMAzYeYvrdQxohT8ujkv5yoFhFndfiRYiNHhwC5NOJSPHms5lGyalFyO08LV.aA+7X+6rBv4VrbNvYiUgzVq.oFeJH0QxCLN3S.Omkf2Vov6It87UrQ5bIFr80tmHzTUHAR6KCqTcQa7Ga5dfDzPnqGSFR6n.hEVT4kdd0vM87p15QkgTehFyIg3cwGIFvDz59JJDTGyk8I7TGdpTNbOQPGJkWoZqxkA0qqnCXIfG6LV3qYRQkmEnHSOEb.Q0iyBnpmUCGNW3fZXY+eqZ4euLFdlPTXBbf.q5D3zZY4xBwULbRzy3T7t6h2opkepMlmA0CgRn837JduqSmcBMuUaMWZ467Gy4LENGxUaeMDqKyNxxdmqasBWSVnYyV3W7BbHTnBpQYChzqZpBTJB+bbHbxfh91JWrhHFPqg0QT7PgreRlo3XlXbhks0iI2wkfKv8j39RcTluRv9TykENhLgh0fLJNVNgFfIboX.dJCTcgGWAa2.Xya0XZVFbiveuMgOgvGSOWphIb1G.eBAB9GfeEJs0cSpCpCCDNVQBX.H6.2GUtxbazru4sFFJsTfOUE6OPNn61dlWqtly1nakFfQEXP0qqZSy6SRneTcvakiEP2zao9ZH2yoUt5lZ3Y0vSAudcMn5oUFpuMM.tsZq40iXo3bol9FQESIYox2VF+whBCKTlosRI4bppPwlQapOmgUDii6SU0v13bghP+9pCTdv8afheZW9RJJEmHX52LhlQmOxoQAibPYiILCexPHnp1N54ayF8j1MiXfSd7JrZfrAQ1n7+5CO8ueE5WN4PhlL2cfmgSaDUoYlfx4P5DXwP5jsRtGRSFpkir5FORJL3v4qt2G9M46Pdc6YKH9yKZOkEnixk9qsS64x4vZaGxfbJ6doAb9DNrf5NCegU.xfwbhd08BlEfYBf61UF.aFxJRX5YKuf7KXYgWgKKJ7l6dB2m31ko8iJFuaT.dg6t+uwa1p2G4dTXHz8lC1sb67t0cO6W.TfIGZlXvYDshAUQtmONtGL20mBHQHnb3fbc1vzcjR6YnMYldTQfk3egmLgMLzNYBaLWHJl3qju2Osmxrb+gVN.lD1uqoj6YFZ7hlHWWu5dnX3aNduuuIU7b.6Eay1qgM6rF1zbMr4kqgM+3ZXyOsF17yeVaLet2di0x3z1DfQ2irCybbNRPfpLaEI5+.PENFbJ

LAF ScriptSlider?

28

1.8k

10.4k

90.7k