LAF ScriptSlider?



  • @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 😞 Can't Understand This



  • @Natan Which part?



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



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



  • @d-healey

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

    Like This?
    But this acts Very Crazy πŸ˜•



  • @Natan [x, y, w, h]



  • @d-healey Haha I See Some Moves πŸ™‚

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


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


  • 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
    


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



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


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


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



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


  • @Natan I don't know much about gradients, you'll need someone smarter πŸ˜‰



  • @d-healey Thank You, Sir



  • @Natan You have to move the gradient as well, I’ll take Γ  look tomorrow, now it’s bedtime πŸ₯±



  • @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 πŸ‘

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


Log in to reply
 

7
Online

1.3k
Users

4.3k
Topics

38.6k
Posts