LAF ScriptSlider?

d.healey

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

ulrik

@Natan maybe this:

(1 - obj.valueNormalized)

Natan

@ulrik Thanks For This :) I Really Appreciate Your Help
But How About This One?

Where i Need to Place this Line (1 - obj.valueNormalized)
In This Slider:

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

obj.valueNormalized

goes from 0 - 1, so if you want to reverse it, just subtract the

obj.valueNormalized

from 1, like

(1 - obj.valueNormalized)

In the code you show here, you use the "obj.valueNormalized" so you need to change it....

Natan

@ulrik Thank Ulrik for Explanation, But That Doesn't Help :/

I Added This (1 - obj.valueNormalized)
To this Line
g.fillRoundedRectangle([a[0], a[1], a[2] , a[3]* obj.valueNormalized], 6);

No Glory!!!

HiseSnippet 1010.3ocsV0saaaCElxIrq1qoXAXO.D8J6AWC4l1rEDDL2Da2YzjTi3rfUDTzRKQIyEJRCJ5j3Vj2s8Hs2ftCEssT2bxBLP3E137+mN57cn5qUArzTkF4U9zoiYHumfGLUZFcvHJWh50F48T7QzTCSSbp1e5XZZJKD44s1arJ7JuNJ672+59TAUFvxUgPmo3ArC4IbSt19sdKWH5RCYmxSJ38Ka0KPIOPITS.7rF1GMlFbAMlcL05VILx6QcB4FkdfgZXoHu02WENcvH0URm+mwS4CELqPSz.HQN0cUhPKhsZQGLhKB6O+4NEAYoedWXMWW3GwGwC4Kzm2M9gLCj7HJ1O7JcWvqYQ34e+gmWA3stCdahGDn4iM4VrX66w8jvKpHJ7JnHrb9hJcSI7AJvCooQB8BVWMHrHhpa66Wm7Je+Z6tQkMp.uHRMDAMhrGoiLlKYMBzL3w5MB0PpvkxCUpKdsLrKiIp5BCBnglEysCLcmHCLbkr5yB0zqNDRAUOPvCY5mUmDM2XbchZ3eVaiJeYiJD3bIUSnPQAkMnPEyRq0.OhT0pL0LUvH6sGYqZNCyBzdhajxLtAnLeGF6DrfK2mHX56D0DIzzOgEXnxXAq54zy8+PcB87lY+9hre25CveaWLZ641qG2vRbhMqs6sDw8q5DW4+IR0ljmm0LtjJlvNVoSnB9mYg0JhralUkaps67FKQIOVYXuSVsVkuTobkapP92lhhVpM6LhVIDL8RMa4r56JvpxIICY55jLDuvQX38aYG3amcTj7F3FYK3nR1SxMuaLSdabFzr4bK6YFp.WMYbmmNi63FEQbfh7c32JUCahx.b99nG2B868ZSMz4oAxHTkwLsgae.7ZytD1t4njkwsYoWXTiy7MYrRZqu2l+uE85EEr0IsllKbZqrIcjWE7Y1JFPEnDdXnf0Wkxss7h6YAB23AvbQw0wIz7bideqzIQQ7qssrCQIpPvULtOUBIsPld+eMmy.5dzN6ryWsZymqsZ+JbrZAZcbatlE3.ySv+lRy+Lzm.jlButNkcsYe001UPWwCMixqxtsFw3wixuS3SosP+20bvxVU3DA07safsW6LyfsvEW0YWmIgtyzh8gGj0x2W3tItO2DLZ43szRvKLr8Pi2YWxsAtSTD71KGrqi69GO72ngf0eFtL9HpQaGHwGOIY.LaEv.jHkLgc4fWIKM1I6aksclALYXlfcDblwlVYuYFaN2HJgFnUeLvQ9sWi93LM.ljYeMQY3yZ.YxBVOF62v2xv3eLHv1JdNf8kGyKVgX1ZEh4kqPLuZEhY6UHledEh4WtyXreX0qmXTINZBnnemrsuddcjTXJKahD8OHC8WeM

ulrik

@Natan well then I don't understand what you want, adding the

a[3]* (1 - obj.valueNormalized)

turned it around so it follows your mouse, is it not what you want?

Natan

@ulrik said in LAF ScriptSlider?:

a[3]* (1 - obj.valueNormalized)

It goes from top to bottom ( The white line )
Instead Of
Bottom to Top!

With or Without Thisa[3]* (1 - obj.valueNormalized)

ulrik

@Natan Ok, now I understand

HiseSnippet 1027.3ocsV0saaaCElxIra1qtXAXO.D8J6AGC4l1rEDDL2Da2EzjTi3rfUDDzQKQIyEJRCJ5j3Vjmk8prGo8Fzcnnsk5lS5f2FuvFm++zQmuCUesJfklpzHuxmMcLC48X7foRynCFQ4RzgcPdOAeLM0vzDmp8mNlllxBQddq8JqBuxqixN+wOrOUPkArbUHz4Jd.6HdB2jqse6WyEhdzP1Y7jBd+71GFnjGnDpI.dVC6iFSCthFyNgZcqDF48ntgbiROvPMrTj256qBmNXj5Foy+y4o7gBlUnEZ.jHm5dJQnEwVsnCFwEg8m+bmhfrzOuKrlqK7M3i4g7E5y6FeclARdDE6GdkdH30pH77WJ77WF77J.u0cvaC7f.MerI2hEaeE9PI7hJhBuBJBKmunR+VI7AJvCooYB8JVOMHrHhZa662f7Be+56VsR0JvKhTCQPiH6Q5Ji4RVy.MCdrdkPMjJbo7Hk5pWJC6wXhZtvf.ZpYwb6.SuIx.CWIq8zPM8lifTP0CD7Pl9oMHQyMF2fnF9q0qV4CUqPfy0TMgBEET1jBULKsVC7HRMqxTyTAir2djsp6LLKP6ItYJy3Ffx7cXrSvBtbehfouSUSjPS+TVfgJiErZWPuv+xFD5Esx98YY+t0kveaWLZ649qG2vRbhspu68DwCW8stj7sjZsHal0.tlJlvNQoSnB96Yg0cHi3bbyOm2Ew9cyvwc02cdqmnjmnLr2HqUuxGpTtxcUH+USQQK0lcJRqDBldolsrZ8CEXM4jjgLcCRFhW3HLd+o7G78yeJRuCbC0EbTIOTxMuYLSdejdzLlfkeMCUfqlL10SlwtbCqHNPh9B7qkpgsPY.NeiU21ne5vNTCcdZfLBUYLSa31G.uNrqg8eNRaYbGV5UF03LeSFqj156swmsn2tnfsOs8zbgyZmwEPdUvmaqX.UfR3ggBVeUJ21xKtIFnjiG.yEEWXmPyyM5ssSmDEwu01xNBknBAWw39TIjzBY5s+9bVEn6Q6ryNezpMex2p8ivwpEH9wc3ZVfCLOF+iJM+8PeBPZJ755L1sl8U2ZWRcCOzLJuJ61dDiGOJ+VieIsM5uuHDVGqBmHnlOcGs8hoYFrEt3xP6BOIzclVrO7udw8RGw9GB2Mv84lfQKGukVBdggs+uw6rqAqh6FEAu8xA653d+7+s24sTn.KHMbY7wTi1NPhOYRx.X1JfAHQJYB6xAuRVZrS12Ja6LCXxvLA6H3LisrxdyL1ZtQTBMPqdWfi7aun8Kyz.XRl88FkgO7AjIKX8XreSeKCi+tf.aqXS.6KOlmsBwr0JDyyWgXdwJDy1qPLe2JDy2+fwX+zqWNwnRbzDPQ+tYae875JovTV1DI5OAMri3DC

Natan

@ulrik said in LAF ScriptSlider?:

HiseSnippet 1027.3ocsV0saaaCElxIra1qtXAXO.D8J6AGC4l1rEDDL2Da2EzjTi3rfUDDzQKQIyEJRCJ5j3Vjmk8prGo8Fzcnnsk5lS5f2FuvFm++zQmuCUesJfklpzHuxmMcLC48X7foRynCFQ4RzgcPdOAeLM0vzDmp8mNlllxBQddq8JqBuxqixN+wOrOUPkArbUHz4Jd.6HdB2jqse6WyEhdzP1Y7jBd+71GFnjGnDpI.dVC6iFSCthFyNgZcqDF48ntgbiROvPMrTj256qBmNXj5Foy+y4o7gBlUnEZ.jHm5dJQnEwVsnCFwEg8m+bmhfrzOuKrlqK7M3i4g7E5y6FeclARdDE6GdkdH30pH77WJ77WF77J.u0cvaC7f.MerI2hEaeE9PI7hJhBuBJBKmunR+VI7AJvCooYB8JVOMHrHhZa662f7Be+56VsR0JvKhTCQPiH6Q5Ji4RVy.MCdrdkPMjJbo7Hk5pWJC6wXhZtvf.ZpYwb6.SuIx.CWIq8zPM8lifTP0CD7Pl9oMHQyMF2fnF9q0qV4CUqPfy0TMgBEET1jBULKsVC7HRMqxTyTAir2djsp6LLKP6ItYJy3Ffx7cXrSvBtbehfouSUSjPS+TVfgJiErZWPuv+xFD5Esx98YY+t0kveaWLZ649qG2vRbhspu68DwCW8stj7sjZsHal0.tlJlvNQoSnB96Yg0cHi3bbyOm2Ew9cyvwc02cdqmnjmnLr2HqUuxGpTtxcUH+USQQK0lcJRqDBldolsrZ8CEXM4jjgLcCRFhW3HLd+o7G78yeJRuCbC0EbTIOTxMuYLSdejdzLlfkeMCUfqlL10SlwtbCqHNPh9B7qkpgsPY.NeiU21ne5vNTCcdZfLBUYLSa31G.uNrqg8eNRaYbGV5UF03LeSFqj156swmsn2tnfsOs8zbgyZmwEPdUvmaqX.UfR3ggBVeUJ21xKtIFnjiG.yEEWXmPyyM5ssSmDEwu01xNBknBAWw39TIjzBY5s+9bVEn6Q6ryNezpMex2p8ivwpEH9wc3ZVfCLOF+iJM+8PeBPZJ755L1sl8U2ZWRcCOzLJuJ61dDiGOJ+VieIsM5uuHDVGqBmHnlOcGs8hoYFrEt3xP6BOIzclVrO7udw8RGw9GB2Mv84lfQKGukVBdggs+uw6rqAqh6FEAu8xA653d+7+s24sTn.KHMbY7wTi1NPhOYRx.X1JfAHQJYB6xAuRVZrS12Ja6LCXxvLA6H3LisrxdyL1ZtQTBMPqdWfi7aun8Kyz.XRl88FkgO7AjIKX8XreSeKCi+tf.aqXS.6KOlmsBwr0JDyyWgXdwJDy1qPLe2JDy2+fwX+zqWNwnRbzDPQ+tYae875JovTV1DI5OAMri3DC

Excellent :) Thank you, Man, God bless You

MikeB

@d-healey said in LAF ScriptSlider?:

I'm convinced that LAF is the way to go now for a custom UI without images.

I hope you also make a video about LAF and its possibilities - that would be fantastic

d.healey

@MikeB It's on my list

MikeB

@d-healey Great - can't wait

LAF ScriptSlider?

23

1.7k

11.8k

102.6k