Painted Button?

MikeB

Solved - Thank you David

Natan

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

MikeB

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?

Natan

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

MikeB

@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

Natan

@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

MikeB

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

Natan

@MikeB said in Painted Button?:

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

No Problem Glad to Help

MikeB

@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");

});

DanH

@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

DanH

@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

d.healey

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

MikeB

@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

MikeB

@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

MikeB

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

d.healey

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

MikeB

I understood that now - thanks

Painted Button?

17

1.8k

12.0k

104.3k