Painted Button?



  • @MikeB
    Use Look&Feel, The Moethd Of LAF Is Easy To Paint Your Buttons, And Also You Can Make Your Icon Buttons, Clickable, And Super Easier Than Painting The Panels.

    Take A Look:

    HiseSnippet 1546.3ocsX01aaaCDVJIpawadXEXeYeSHexAPKPjR1RZAEMMu3hf0zZrz0shggBEYZasHKZHSmzfhBreZ6mz9GrcGojrjpZPSJlbSpO9v6tm6NRpiYTFOhsbIOSSe6WdyBll9Wab9MohYGMKLNU6zi0z+FiyBWJXYlpgN7lEgKWxFqoqu4SwAz2dKM4y+73CCSBSiXqGRS6U73H1yhmGKVO5nC9o3jjggiYuLddkY6dvoQ7zi3I7U.e1zvVaQXzkgSYOODm1FFZ5O3jwwBd14hPAaILmC4iu47Y7qSUy+UwKiuHggBDsyACoFV6nYwIiGUDqK0zz2Zz5HeSUj+cFmEONtb70YfuUBXtVip4.8MpSospQIxGiRC4IiQC7QnmdE5skhdOz37nr3Eh0HH29JiSSghyjPHsWkVp4psw2uswQbXFoh8lGdIaXFHTpQuA11Vl8ss2c+tcvOP5eovLIbh4iLOIcZbJaunLFDXOMgeQXhxnOiyu7IoiGxXI8JTD+bUXl4H90rrCWID7ziCEgfYJ7txNiBEyjJo7ToJvD+cytcHDaKhcfE0tukquEwOvZfmEw0A9Y.LpMJF..1tfjKLAebjACrBJgc6a46TfP5CFbfS6XA.Ve.hja05nC7s7rKPItAVDhWInMED8KQcbjyOGEkbcqXXOWKGao+jlxxyC.oRBEfxj.hU2NRmBgAAieGqBQvJ4Z5YKiGL4nrKE8D9ScK6IE.yLnHCRc.i3Q.r7rB0pee.TNSW.mVhIMKDJAXlvMObbn.rpVDfVBHhuj+AtXvU3x5X1VU4ZCPBxHpeQjBkdZdg1WNPeB9u7rDkNPRwbBI4mqckDLTFInpRmQnpZUQwIHvx0s.DBaOm1gHNvhAZIlseSbLkTyqMfwBlcwRsApPMmxATqf9EPDx.0BM2hLAD9xELEquoDL6PJSVv5.Bsj1x4AwnOoDz1qHSN.HjiWIHlY5SqtlwkJqW4SfhKnnzhRHFTtE0.bynuSQkmBLTZ3AJNfi3U.h6dBr7IkaY87kqEI1kNAWvEPxqsTWmBW1sSC35qaZ.Rw.Z8FD7qz0as7syOZHOOcKmhfGyP.z9kgjc9BR2xxeqvkmAUCEXXeuBTp73gJZVtp.iF4NAER2NUvBjoLYR2qgZvoadkiWyU0PpQQLBZE0M2Y0.kGeETB2BQ52B+aTpZKrU6MpkqJ7ET4yS1e75.rEi.USvV+A7ViFudYuDd3X3UZyQgdRvpuPpaG3MY6kwlFi8uLbUZjHlm1amwYgW+R9zoILko1wxbRA3TKS9E+4tc67NTeS3AeGE9hLX38BgWhsuZX0uimX1CADr2JLeziL2QRhc1Ug9N0+gOS2aBzyySRR5Y+V67mc22r5DVxDpdefoLbnuG9AlRoup+MzqigtLLebCU85OL.+r6OZtyN6WWgqBSVwZnANdrfMWIRZpVyPP9F7F0Aqxjyt4Z9dL68dTpHyZxSeNWvdQZuc67tNa248cLaBMYRqXXGDY7jDVVqvXOjY2lh8RWM+BVlkoL5KmHzXU8N2dvmVmaQpFZpLQd5oowhWrfkKut2NRK81ok2QDzk2l4LD9lP1i22j2imJ0pECFYaCk.QSR+p8VqcGTm94otSKp+Kmh0drY07HBhxErLQLlL0OlcEz4up00sMNls7RAegLjmufmhwu9W7IDzucsK+0CtoT3f2bv0wiEyVid5AyXwSmIpNBtqDbigb4JFu2AWSq35+Z1s55W+At90eVt1ohqO3pay0+8EMcMLRCW+g2j.tOCe7pjPQ8K4f2lKG.1+T61D3MFRWFKto5s8tC27wt0a9z5tiOQ59PiQwhnYsy2MZguv5z+u4a98H6ZbxjIrHwZxtkwve69dow6.U9Y9JQb5zyBEYwvJHimuZ94vQ5QLfIoorDvQF5afa7Ux1nLlYNmkNVJ7uvSNHAk0yAIEfZyCix3uIRcxAdS0uTNBvoT4kz213LT1r73JCC68r0lCWf9MQQXp3G.t2tNz6gNN2CcbuG5z+dnyf6gNd2Cc7uUcv+1EOYkfOWsMAFXzIxCt00OIMDVkIWQp8e.w2ISC.
    


  • Ok thanks - I tried that
    I already use the LAF method for my buttons
    But I didn't know that you can create different shapes by if-statement.

    What I noticed in your example is that after compiling endless values are created.
    Is that correct?

    Furthermore the question is how would I create it?
    with this method now with a button for example
    to integrate the text On and Off?



  • @MikeB said in Painted Button?:

    What I noticed in your example is that after compiling endless values are created.
    Is that correct?

    What do you mean By Endless Values?

    @MikeB said in Painted Button?:

    Furthermore the question is how would I create it?
    with this method now with a button for example
    to integrate the text On and Off?

    There is more examples On The forum For on/Off Text LAF,



  • @Natan Probably also an early riser 🙂

    If I attach Console.print(value) to a button and press the button it will print once
    Interface: 1 is generated.

    If I attach Console.print(value) to a button in your example it will be generated endlessly.
    Interface: 1
    Interface: 1
    Interface: 1
    Interface: 1
    etc.

    I will look for more examples - thanks



  • @MikeB said in Painted Button?:

    Console.print(value)

    Here it Shows The Correct Value Of Buttons:
    Interface: 1
    Interface: 0
    Interface: 1
    Interface: 0
    Interface: 1
    Interface: 0
    Interface: 1

    Give it a try:

    HiseSnippet 1609.3ocsX01aaaCDVJIZa1aYXEX+.D7mb.zLDkjsjVPQSyKtHX8EikttULLTnHSayEYICY5jFTDf8Sa+j5W2m1tijRVR0MqMEUtI0jO7t64dgTGyn7rX5xkY4Z5sd90KnZ5eiwYWmxmczrHVp1oGqo+sFOIZImlaJm5vqWDsbIcrlt91OBmPu0NZhm29fCiRhRioqmRS6EYrX5iYyY70yN5fehkjLLZL84r4UVs2AmFmkdTVR1JfOaaXqsHJ9hnozmFgKaKCM8u3jwLdV9Y7HNcol9NGlM95ylkcUpb8ufsjcdBEGPzNCTjb5gYIiQFiypczLVx3QE98RMPKiVGE1VFE9dimvFyJmecz36D.lqknZ7Peqaidjpzy9Cmd5Un2NR5cOiyhyYK3qQPt80FmlBIpIQPJnJsjqUaq+okwQYvJR48lGcAcXNLnThtCrssL6aau2961F+.ohkbyjnIl227jzorTZu3bJ3XOJI67nDoRebV1EOLc7PJMoagf3mKixMGkcEM+vUbdV5wQ7HPMEVWpmQQ7YBgjVpTDXg+t4tsIDaKhcnkiceKu.KRPn0.eKhmK7y.XVabXH.X6Ai7fEDfyLXfUXIrWeq.2BDRePgCb2LVHf0GfHJsVGcPfkucAJwKzhP7KAscfgAkntth0qPwQddUTrumkqsvdBUY46CfNBBEhiIgDqcaKLJ3FDz+csJFBZQIousvevfiTuNnkvepqYew.PMCJhfNtfR7I.lJp3X0uO.JVoGf6ThITK3JgXjvS4NtN.rLWDhZBHRff+gdnyUXx5X1VU4ZCPBxHmfBOER8NpDcfXh9D7epnjiy.AEUDRvOO6JAXHMRPQEFi3HyUEImvPKOuBPvs8c2LDwEJFbJwrCZhigjZVsALlvrKJ0FHcUEkCcrB6W.QHCjEZdEQBv8EELE02NDL5PJCVPc.woj1h0A9X.oDz1uHRN.HjqeIHFY56TslwyQjuTKvAKnbbJRgnS4UjCvMiAtEYdGfgBEOPxAbF+BPb2SnU.obKqefnVjXWZDrfKjnxsNdtElb21MfqW2z.zAcn0aPvu5rdqUfs5nAUb5VNEAOlg.n8KcIaUAoWY5eivkmAUCEXXe+BTGwwCUjrrp.8FwNAIxtsqfEJBYhfteCwfS27KmulopgTihnGrQTOkwpAJN9JrDdCDo+F3eiT0lba4diZwpBaAYdUv98mGfsXDHaB55Of2Zz30K8RxhFCuRaNNnq.r5Kj1sM7lrd4zoLrWlgqRi4rrztcFmGc0yylNMgJUUGKyIEfSsLyN+O2a21uAk2Ddv2QguHCltWD7Rr8kSK+MahYWDfSeM27922rifDc1Sh9F4+gOS6MA5+4gIIcsess5Yu8MqtfkTtrOHXICGF3iefkTZq5eCs5XnKCyGzPT+9CCwO68ilc5recAtLJYEsgD37LNctbHooXMcAwavajGrJCN6oj7FL5cS81Jv.oTFRk9BlhDY9hrTXP2NJ7NRIYoIPKHkIGyrTENJbdVR23BIsLEtlLu0BfWlkP6sHmAJUh.J7FgR+eLrLxHT+QQIImCci1socqVjUgbOMiSeVZ28Z+l1sZeSaylPSlrQLkRSn4aDF6WN+1Dra5p4mSyKBAEKDZbrdmoFu+NSq13brL9TYgYomlx3OaAM880uplJnBcttshUv23h9V+VUeqxPnFCZOskgJdpInb06Nn8QHtyml3tME+sOP6WNEqmwFvUdD3kKn4bFF.0OldIbyFY63sLNlt7Bd1BgKqpizz+xO.m90qM4udv0kCN3UGbEaLe1ZzSOXFkMcFu5L3IMfYLDaAQ+8ivzNUL8eM6VM8KeGS+xOIS6VwzGb4sY5+97llFlogoe2aGA2QKa7pjHd8Ktg2VUA.6YpcCI7VPoKY7qqV.7Y41benz8dFiX73YaluasA9B0oet4q5tw6ZbxjIzX9Zxtiwve6y+Eg094rUbV5zmDwyYPEjwSWM+L30TwTfIoozD7bM8svM9xw13XLxbFMcrXv+BOJPBNVWARJ.0lGEmm8pX4IG3su+JwL.mRE+QHZY7DbrY4wUFF18r0lyFydUbLFJ9Af6aVFm6fLt2AY7tCxz+NHyf6fL92AYBtUYv+dLObEOatbaBLwnSDGbqqeRZDTkIpH09O.zJ7kzA
    


  • my mistake - wrong value used - Is still too early here 🙂
    Thanks for your support



  • @MikeB said in Painted Button?:

    my mistake - wrong value used - Is still too early here 🙂
    Thanks for your support

    No Problem👏 Glad to Help



  • @Natan said in Painted Button?:

    There is more examples On The forum For on/Off Text LAF,

    So - now I've read all 532 posts on the subject of LAF.
    In none of them is there an example of a LAF-generated button where I can change the text to "On" and "Off" in addition to the color change.

    You are sure that this is possible.
    Before I continue to search here for hours without success.

    laf.registerFunction("drawToggleButton", function(g, obj)
    {
    
        var a = obj.area;
        
        if (obj.text == "Power")
        {
            g.fillAll(0x00000000); 
            g.setColour(0xFF878787);   
    //Text "off" visible 
            
            obj.down ? g.setColour(0x75F9F9F9): "";
    //Text "on" visible
            obj.value ? g.setColour(obj.itemColour1): "";
            
            g.fillPath(PowerButtonData, obj.area);
        }
            g.setFont("Arial", 15.0);
           g.drawAlignedText("on", [0, 2, a[2], h/2], "centred");
    
    });
    


  • @MikeB You need to use lots of 'if' and 'else if' statements - ran into this the other day, I'll grab a snippet one sec



  • @MikeB

    HiseSnippet 1296.3oc6Y0yaabCFlmsufHkp.azBzUBMDHA3ndR1NMvFFMV1RAN0eHXIGTjk.p63IypSjB2QYaACu0otkr0gNTfLzwL2eAcon+A5Tm5XmaQQJ4wS5NYcVQVAwEwUmArDe+f7gO7k78zKq3xLwddLWfVhZcaiAZejd0tT9QadDhPAauEP6t56h73XWnRTwtsQddXKfl1rOVJPKwb.+m+7KJhbPTSbnH.3oLhIdGRKBOTZkG8kDGmxHKbMRqHVu7i11jQ2j4v5Hvyr5Ff1HylnF38PRylQGncqRVDNysJGwwd.s4Jxr5V8H1ITk8Ok3Qp6fkMxCpJ5Hk3xLGKIhkRAadDwwpRu4sGPzKUBYgYUrvmnuKwhzWdHaLuuBXnGQ4CsYFE7x+1gmQbvSKB7lSAuEzqZ5RZyC0Hw1cz2lJVnrQhkfnvRYKXl+XA8MYBKn7bsPMwkcEM56QlGXXrHbECirqkJYpjel7AtUoxab3N0fEOrVs82KURwxiGGdLxE5frgqCKQaPn3bltXwD9wNr5HG0fsCi0bCpUYL1IirCElmyCyUlTVLtYRuQcry8O.2niCxM8hv7OLWvPKs0E2fHC5J2gZxILZlzVtnSpwZzvAWrCmynBWr6orwhPV8uNapjmkJILxirEwFlQnLGGeJGt95vzJ2ymNqxV0+OCFySXmQr86iiQNcvxNwHantKLlMjySULruO0anZjcsncnxRaw1fCXcnhU+CvlbDUL67cBIHzEgEj7wk02FmVtbokj+EqUijiGzZIytgCoAEaUSPR8YKeRM.JoMEQMtXqzhoQn+mGsqFAaAu2876K1wX2wm4HbbKUyBCLpWWbmKA479kztbJK+jPS4uwDiMDa0izTefc7vW1F6BWXi83v1evrc1AVD0EQu91JOMH8JDjNl4N9v7zvqsLIiHdaxXNIB5uo8+SDmk3EOm9hJQXoAxkDIUxM2DF+m79eSSZLMowzjFSSZbiMogrJEmmcsd0e.xn6w338oYxl7rjIRddR3EUYaGqNY4XbYNNX2XUKKOl6nbLCsSq5X2Eg9g68MDnM2fEh5NiWgnLUUGJhgL51TBe+13f1QqjVuYcOsFf9S1nhBmiQk5O0hwrPQCWILPP0qjkrKvbgob+Jhc2fJho9Qf.h.iIzCJ0CvmchVURvUv8Buatuz6l6KGi6Gt8VHNRVYv.BQPRswtbhboVaK7wDSrpNgIz2B60jyZ6yXsZynR5S61iAmcJPSWyRLZckegJ9Ru85Bqt027qI9KITBSvHkJNtvdPoEjhmed9eKEGdlpTZylm7l.13J.rBJf8wZA.icAfA.e++LLv9tWA9wX.1m9hWDCvdxSNXB.1RJf8y8XreeHPr5pm3yNQg6qR95eJFf0oyuECvZ29am.fsrBX18XrU0FDBIRvObXF6ku70wsT9rm8Cw.rUV4WT.a3JUOu9tLKwAz7AKht7lCBTHNPafpUKqHM0iv6F8lEtBUV2XrK7+3B2EzqP3lGEOdmIF7J1Z99FuA2SQJ8R11hjqgfcN8xe0jdoDWAnHRryIzF6h3tDY70dcZUUDMXhEHgRE+pJYn1LxXUUaCYaIyTESs7a7FwSfx7x1ZAJy2SInExzk8bS0gkxaB419RDXh5egPIz2U1F1+.dccibFfVDKxyMMkTw8EXOdeJLA9rzD3yxSfOqLA97fIvmOeB74gizG4cisQGNqkZahPPkR94pzzJQQhnL+HRv+RIU9zg
    


  • @DanH Nice demo. You could simplify that code a little (Google DRY programming)

    const var laf = Engine.createGlobalScriptLookAndFeel();
    
    laf.registerFunction("drawToggleButton", function(g, obj)
    {    
        obj.value == 0 ? g.setColour(obj.bgColour) : g.setColour(obj.itemColour1);
                
        if (obj.over && !obj.value)
            g.setColour(obj.itemColour2);
        else if (obj.over && obj.value)
            g.setColour(obj.textColour); 
        
        g.fillRoundedRectangle(obj.area, 2);
        g.setColour(0xFFE3E3E3);
        g.setFont("Abel-Regular", 18.0);
        g.drawAlignedText(obj.text, obj.area, "centred"); 
    });
    


  • @DanH
    Thank you. That helps me very much.
    This is exactly what I was looking for.

    But much less lines are enough for me - see snippet

    HiseSnippet 1032.3ocuVs0aaaCElJIpaVctXEn+.H7S1.tdxoWVAJBpsisJLVRrQsSwF1CEzRTxblhTPhNNdAAX+N1y6G3dd6grCkriraUxJ7tP+hOW4GO5b9HGFKcoIIxXjQowKinHiuxbzRgZ5wSILApeWjwiLOkjnnw3LUcVFQRRndHCi8eqVgQoCPoqe+McHbhvklqBgduj4ROgExT4ZG156XbtCwiNlEtg2OuUeWo3XIWNGvy9l1nHh6LR.8Lh1s8LQFOnmGSIiGoHJZBx3fNRukilJWHx7+8rD1DNUKzDMBRTlZGI2SiXsVzwSYbugqO2IHHKCyqB6mUEdh4oLO1s5yqFecpAbdDaVOL169fWyMgmcgvytH3YrA7NHCdO1bjaLKRkaQisGZ1W.en7IvmfMgUlun8908MOVBdHTMBIynNwfvsQT8k110wuv1t1qKaU15azKb2dNsO+jw3NmOd7fyJaAedRT3KHwXNwGeDtmHfInMbiovA9sb4DBOayNQJm0V34Po7p5DBt2HgpxbwA12pUZOgxe56nAy4j3J0wG9pFq1Zsuwz.ltoyYtvUwjhpU7hIKFKCB3zNyUJo.Bweswf5X4jepVYqqv4qxVXLyGWErzPQuTgO5HbkH4BZbkZWk6hdEnwVgnpYJpvErVGqdSR2iKH74zZWkq+1Lm0Qm5zjfLAcN+XO8gghdbNKJgl5KApp5JxckO6Kcb58L8uO0Kc0pMmEHndigyd0JC78qjVkRSacbEWnMHl5UAPRdvWm+WJOg92bXXJZXlXy++OOh653r0oIS35zuWWW60q6XvRwYREcfnZMqqrJYcsE9iM46WnM8.TrjyowEZVSnEeeAVULObBMtNNqcYsivj81TGl2M0wlLatYyya3nTzWvTChnh6huCshDPSsrBUfqpThkGshXIaFCw.9CKyIJwP8bCJEyaxtiNueWhhrNSPRgMJhFqX5yfQW5E.6eFkUIytzjYJYTpugQRgFBFO7yYeuLeO+gVKuU3W9wVqmm.cO.g9s+PqNusTqs7Oaby1ZOTqdvMn+TqVyLj67rYKRcdAySMMeS62ZJkELUsoFcfHiuvLkQAtS6S3ngaJjd.MhZ6qOz2Ytx.zXrEOslKVjvTK27N0+w2oTXKvmIber4PlxcZw3cuBvKzI7eMdWcCcYyd99TWUNXOvz46+2853Bgx6jyULQvoDULCZLMOad3Hn8wkBHQH.ZSPmwd5wrLYasrtxLhJ7REtAVqL1TKarxXy0FQgD2X4GbyFN0uA3KS0.XRj9TnRvax.Yby0ijll1MrQgvSS9fqqtT7T.6EGyg6PLOaGh446PLuXGh4k6PLe6NDyqt2XzuJr8bkLLaLATLrWJ0ngQOAA5xR6HQ+EPWnavG
    


  • @d-healey said in Painted Button?:

    @DanH Nice demo. You could simplify that code a little (Google DRY programming)

    const var laf = Engine.createGlobalScriptLookAndFeel();
    
    laf.registerFunction("drawToggleButton", function(g, obj)
    {    
        obj.value == 0 ? g.setColour(obj.bgColour) : g.setColour(obj.itemColour1);
                
        if (obj.over && !obj.value)
            g.setColour(obj.itemColour2);
        else if (obj.over && obj.value)
            g.setColour(obj.textColour); 
        
        g.fillRoundedRectangle(obj.area, 2);
        g.setColour(0xFFE3E3E3);
        g.setFont("Abel-Regular", 18.0);
        g.drawAlignedText(obj.text, obj.area, "centred"); 
    });
    

    @David
    Now I have already shortened my example and learned from you. (see snippet)
    But your version is of course even more elegant



  • @d-healey
    Whereas your example concerns the general LAF button
    not a second or third one which is defined by "(obj.text == "XXXXX"){
    is created.



  • @MikeB Because all those buttons need the same code. If a particular button needs different code then it's time to use an if statement.



  • I understood that now - thanks


Log in to reply
 

9
Online

1.3k
Users

4.3k
Topics

38.5k
Posts