Simple question: How do I change the color of the button state light?

[VirtualVirgin]

How do I change the color of that state indicator?
It doesn't respond to any of the colors in the property editor.

[d.healey]

@VirtualVirgin You can't. If you want to customise the button beyond the very minimal amount of options provided by the interface designer you need to use an image or custom look and feel.

[ustk]

@VirtualVirgin Not possible, you have to draw it using LAF
https://docs.hise.dev/glossary/custom_lookandfeel.html#generic-ui-elements

[VirtualVirgin]

@d-healey said in Simple question: How do I change the color of the button state light?:

@VirtualVirgin You can't. If you want to customise the button beyond the very minimal amount of options provided by the interface designer you need to use an image or custom look and feel.

Thanks :)
I thought that might be the case but just wanted to see how much milage I could get out of the default button. Making my own set now :)

[VirtualVirgin]

@ustk said in Simple question: How do I change the color of the button state light?:

@VirtualVirgin Not possible, you have to draw it using LAF
https://docs.hise.dev/glossary/custom_lookandfeel.html#generic-ui-elements

Thank you :)

So I am using the exact code that is used in the example here to draw the stock HISE togglebutton.

When I test it, the off an on states seem to effect the alpha value of the text only, but the main color (background colour) remains the same.
How do I get the main color to toggle either between two different alpha values, or two different colors?

Here is the current appearance:
Off-

On-

I would like to make the Off state a muted green.

[d.healey]

@VirtualVirgin Post a snippet

[VirtualVirgin]

@d-healey said in Simple question: How do I change the color of the button state light?:

@VirtualVirgin Post a snippet

HiseSnippet 1837.3ocsX0zaabbFdVIsNRzNwNHI.sGZwBdnfJPfXoLkcTRiMIkDsYJkDgHsZBBJLFt6PxId4LD6NTxpFFHGJJJJPOzi8eQO2Ksmyo.j+H4VxgBn7NyreLKIksEaCOHg48q48ymYlsSH2iDEwCQVE5cwDBx5V1cufIFs2HLkgZsOx5Cr6QFOI.KHNsq2zo+TgfyPMtXBNJh3irrV8QRQs1XMj522+vF3.LyijQBgNkS8HsoiohLpcp86nAAMw9jdzwFRWsVKONaOd.eJ3VqZ6hlf8dFdH4HrTrUrQOFGMBY8g1ddU2k7QC199tauKYG+p82thKda2c289D7Ntd82kf2dPeOWj0MNvmJ3gcEPXDgrVqA2+hti3myzavozHZ+.hbQETWXm0jaxC7kgnjJZuQz.+NI4qHDXkNYYuU0Yu229PpOMkdVV7NJFNYZXl.sVIu6sZN2qho64Z3dKvkrLbo0ztz6Z20KjNQjwQ5O2ztESPBGfg5joqnkEsxedU683fDLQ4w3mQZFBKR0nTEWW2sbtmq6leRgBPwJR3bFNz4zSayGxc9TmDUGRD6wGOgyfEkJpYWTpSh.QDoeMgDJnjHXSF+YcO9nTI2x4ENvuBx+T7bpuXTwO1op6VZBiHzgiDlTFPCTMI.shunyIG+YGrWum17316evIu7zSeZ.Xyxe0jgEAoeI3Efky78.7.vwOfMjxHk8BIPk3QA793.cFoMm+r5L+lDRPIY..hWNjLjFAojlSYdBJmUpneH97d7gCCHMTiIPDLHg4vsb38+pMK7BkuNTF55d7R.4x8GpWr4mjDvCKCgSvI7oLnG7Dhm.y.6pDFCt2VNUK6pBhX4oCT73mQB2TQ3+Ai3CsdKkQRMTZPjEl5+EU9bpXT8fIivJKHHOOV.U9o7Y3foDmG5TorqyG63VdmM0lNybM4xlo5gTbfSCXBERxUx7fgkkEg5AzgLheOv3o6h19ZOtnGz8ER7kMiPqPRQxgyNhKHGyJIqSaT3kEblk0fAKjmrgNjGDPBWHaIBW3qRwRroi6SfbfJ9SEDlhyCMXe0PClHWd54KCA4rVLp33ID1UgmghGJkvHwdEHpPAh7NwfH51ZDEvJ1vVunBR4xln8nmzZer.mXHvlYC4.s8ImAmFnQm1vdeRzyD7IJYigJ.x5s8sSvtvLRfZW+k1G1Z+VcBlByoImKo49byiftvXw+NY1BnciK+1yuTRkJHiMn9MHEUEFSlp+iZZLlTJ+3euVlhaK0Dg9WtRNVqa38uiH9v.s22LfiET1vd.7jJHdOUPTGZANiJtnsZKLb+h0Lb+eSsIPKKSXX9qNGDms6Em7R2A.a2LIjTlxmDPeMZlTSbDpImMnZZBUc1x2VhpUT1tIOlqMtOI..gEgSIRn4hlDKJc9hJxOIhnNtDq.1GfChzh2.GQtWUCVEKV3kIEGaqBv9lTXzqjPBco+w7MgFYralucR4JpJwMUox.0ZiJvu0rB7KpktykxsyuebVAtdgxLnAy4FkqonItPNhdCaIbkRJ8UYto8i.fUmtXVD5ZTkeihraY263ia2ctP6SMCscd8g1aY2iyCht1wVA6GSnBpS28V1PqvUEZum8ozPwTb.7OkEdt43ye4ulu3cM1ccDemDy6ns+rnBewrnBnGTa9rS0ZY4h0sqeFgQCeyBu21FPK8m5oUNKv95GaFXe+Cu1A1GXeJIf6A.BN8BgdtI7HR3LQWM9bQWqEDcO30Ec250.AdaHHIvg4MB4mK8hrv7eFtzg4LEpKlKT1uVNDxYcBSLxG7fS9gEbPw2sPLxae6aeYJZ3J+oUxfC6hOK4tfF3gRNG77IPM.tDPT8HvTSGyxgAJEQ89ivEqt7xHQyYS3tBZwywJiLb8EHdAdUbSUptu+h2hSHLn.uXd6SBHhqfWS7Y7PHCIeFmIuXOqED09jF7PH1xExGMcrNQHc96pHoW+6k00SfFHNv3KUWyys7cm42VWS5.4+fZOZCWhuNbqvzbS7Nr0h9WpVZO6D94cv99Pm8apdcI3PuQMvgMj2mVFoeolwg7v374rbx5glkSRldNtvwklSiqmGqo0X30zpwv0s0O0xX96G+aK87Wx6uPV+J6Ww6uRmSuQo3ipSmSSor.jxW4cPy7++yma3+09hqO9+Z1GeT1kM7yct3ud9aMgtTM5ahcT8+pQIPy+Z76XeHfsCaY9ONf7SnDyfNyWWQ9paXhQjqn7+suXvapK9t1cnBuQK1GWYA9Hbk3eN7wUSta6ACF.uDMyAWyt4m+yyGUAAu7Ud10gXQHE5yrAbptPk1i.6NC5ajOKyZEYOqdsqbsLCzkv7UKtD9EyrhbsULyJILQiwdg7m5oe1k7K4rthB3SL0.0F1GJW6rfWaMFtm7S87xap4Tb6kUw6trJVcYUbmkUw6srJd+kUwO50qn7YL0mJ3i0iMHzgcNP+pIqCXXnCT0sh9I.rf4CB

[VirtualVirgin]

@d-healey said in Simple question: How do I change the color of the button state light?:

@VirtualVirgin Post a snippet

Sorry! I don't know how to post it in this type of package:

[d.healey]

@VirtualVirgin Post a snippet

Sorry! I don't know how to post it in this type of package:

You can use code tags, click this button

[ustk]

@VirtualVirgin just use the alpha for the background as well

laf.registerFunction("drawToggleButton", function(g, obj)
{
    //g.setColour(obj.bgColour);
    g.setColour(Colours.withAlpha(obj.bgColour, obj.value ? 1.0 : 0.5)); // <= this instead
    
    g.fillRoundedRectangle(obj.area, 4.0);
    
    /*
    This is not needed since you do it right above, no matter if the button is clicked/hover or not 
    if(obj.over)
        g.fillRoundedRectangle(obj.area, 4.0);
    
    if(obj.down)
        g.fillRoundedRectangle(obj.area, 4.0);
        */
      
    g.setColour(Colours.withAlpha(obj.textColour, obj.value ? 1.0 : 0.5));
   
    g.setFont("Arial Bold", 14.0);
    g.drawAlignedText(obj.text, obj.area, "centred");
});

[ustk]

@VirtualVirgin And this if you want full colour if value=1 OR over=1

laf.registerFunction("drawToggleButton", function(g, obj)
{
    g.setColour(Colours.withAlpha(obj.bgColour, (obj.value || obj.over) ? 1.0 : 0.5));
    g.fillRoundedRectangle(obj.area, 4.0);
    
    g.setColour(Colours.withAlpha(obj.textColour, obj.value ? 1.0 : 0.5));
    g.setFont("Arial Bold", 14.0);
    g.drawAlignedText(obj.text, obj.area, "centred");
});

[Lawrence]

Being a newbie, I found it easier to just make buttons in Inkscape.

[VirtualVirgin]

@ustk said in Simple question: How do I change the color of the button state light?:

@VirtualVirgin just use the alpha for the background as well

laf.registerFunction("drawToggleButton", function(g, obj)
{
    //g.setColour(obj.bgColour);
    g.setColour(Colours.withAlpha(obj.bgColour, obj.value ? 1.0 : 0.5)); // <= this instead
    
    g.fillRoundedRectangle(obj.area, 4.0);
    
    /*
    This is not needed since you do it right above, no matter if the button is clicked/hover or not 
    if(obj.over)
        g.fillRoundedRectangle(obj.area, 4.0);
    
    if(obj.down)
        g.fillRoundedRectangle(obj.area, 4.0);
        */
      
    g.setColour(Colours.withAlpha(obj.textColour, obj.value ? 1.0 : 0.5));
   
    g.setFont("Arial Bold", 14.0);
    g.drawAlignedText(obj.text, obj.area, "centred");
});

Thanks! This works just as I expected.