Painted Button?

[MikeB]

A simple beginner question
How do I get the Paint Routine button to to take the color and shape of the PaintRoutine on click and execute another function?

const var plnTriAngle_Delay1 = Content.getComponent("plnTriAngle_Delay1");
plnTriAngle_Delay1.setPaintRoutine(function(g)
{ 
    // Off Triangle
    g.setColour(0XFF800d9d);
    g.fillTriangle([0, 0, 200, 100],Math.toRadians(180)); 
   
    // On Triangle
    g.setColour(0XFFff7800);
    g.fillTriangle([0, 0, 200, 100],Math.toRadians(180)); 
});

plnTriAngle_Delay1.setMouseCallback(function(event)
{
    if (event.clicked)
    {          
    
       //on click show "On Triangle and make anything?          
    }   
        
});

[d.healey]

To repaint the panel after a change you call the panel's repaint() function.

You can put this in the mouse callback directly or you can trigger the panel's control callback from the mouse callback and trigger the repaint in the control callback

For the different colour just check the panel's value in the paint routine and set the value in either the mouse callback or control callback as appropriate.

[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