Couple of custom LAF keyboard questions?

d.healey

@rzrsharpeprod Use Colours.withAlpha()

rzrsharpeprod

@d-healey said in Couple of custom LAF keyboard questions?:

@rzrsharpeprod Use Colours.withAlpha()

Thankyou David, I just gave that a go.

How would I use that with a Hex code colour? The colour code I am using is 0xFF423874 when fully opaque, but I would so something like 0xAE423874 for the semi transparent version if it were a panel and I could manually select the colour.

I tried

Colours.withAlpha(0xAE423874,0.5);

but it doesn't like that at all

I also tried

Colours.withAlpha(423874,0.5);

and it compiled, but the colour was different (teale rather than a purpley blue) and it was also fully opaque.
Am I doing something silly or is it just the case that a keyboard has to be fully opaque and HISE won't allow it?

d.healey

@rzrsharpeprod said in Couple of custom LAF keyboard questions?:

I tried

Colours.withAlpha(0xAE423874,0.5);

That's correct. The first part is the colour the second part is the opacity. For the colour it doesn't matter what you put the first two values as AE in your case, they will be overwritten by the alpha parameter. If you prefer to just use a hex value then you can skip the withAlpha() function.

rzrsharpeprod

@d-healey said in Couple of custom LAF keyboard questions?:

Colours.withAlpha(0xAE423874,0.5);

That's what I mean though as when I try that I just get an error message.
Found ';' when expecting ','

If I use a hex value instead the opacity isn't applied. Which is making me wonder about keyboards, is it not possible to give them opacity as nothing I try is working? Do they just have to be fully opaque and that is that?

Here is the code for my 'white' keys (although they are actually purplish in this case)

keyboardLaf.registerFunction("drawWhiteNote", function(g, obj)
{
	//normal colour
	g.setColour(obj.hover ? Colours.darkgrey : 0xFF423874);
	g.fillRect(obj.area);
	g.setColour(Colours.white);
	g.drawRect(obj.area, 1.0);
	//down colour
	g.setColour(Colours.lightgrey);
	if(obj.down)
	g.fillRect(obj.area); 
});

This is the part I am trying to change from

g.setColour(obj.hover ? Colours.darkgrey : 0xFF423874);

to

g.setColour(obj.hover ? Colours.darkgrey : 0xAE423874);

It changes the main key colour but not the opacity - this is what make me think keyboards maybe can't have different opacity settings maybe?

I have tried to use Colours.withAlpha like so

g.setColour(obj.hover ? Colours.darkgrey : Colours.withAlpha(0xFF423874,0.5);

but get the following error message

Found ';' when expecting ','

I am not sure what I am doing wrong but I can't get it to work at all

d.healey

@rzrsharpeprod said in Couple of custom LAF keyboard questions?:

Found ';' when expecting ','

You're missing a closing parenthesis

DabDab

@d-healey I have one little question, How can I use g.setGradientFill with the ? operator ?

g.setGradientFill(obj.hover ? [Colours.darkgrey,0,10,Colours.grey,0,100]: [Colours.darkgrey,0,100,Colours.grey,0,10]);

This is not working. I can do it by If-Else but I want to short my line of codes. what am I missing?

d.healey

@DabDab Seems to work here, got a snippet?

rzrsharpeprod

@d-healey Thankyou..,silly mistake.

The code now compiles but the keyboard is not semi transparent at all so I am back to my question again. Is it impossible to make a keyboard semi transparent?

As it stands, neither the hexcode or the colours with alpha method is making is semi transparent, just changing the darkness of the keyboard from lighter to darker as shown below

This code gives me this

g.setColour(obj.hover ? Colours.darkgrey : Colours.withAlpha(0xEA423874,0.9));

And this code gives me this

g.setColour(obj.hover ? Colours.darkgrey : Colours.withAlpha(0xFF423874,0.5));

d.healey

@rzrsharpeprod Post a snippet containing just the keyboard stuff.

rzrsharpeprod

@d-healey

HiseSnippet 1762.3oc0X02SabCF2Gv01jQW2V2+NIKzjJnwBIg.AV2TCuDZQCZiRnsSZZqxbmShGWrO4yAZVUk1Wj8cXeD12l8u6a.6w9tKwWHklhZ6ZiDh77l8O+yO9wONMjBOZTjPhbxczfPJxYd2VC3pt6zkv3n82E4ba2VbVXHUgaKj5+52Cs8fPRTD0G43L680N5jaNj4y+dusIADtGcjJD5IBlG8.VOlZj1F09QVPvdDe5QrdVdWo19dB9Nh.Qe.Ty5VDER7Ngzg9Ph1sYbQNWqtOSIjsTDEMB4L21B+As5JNiG6+SXQriCnZgRnVv.EqdOQfuFwZsnc5xB7ajt3iPHG2FinhYiohuz8PlOan9QTxmYLfGEgMe3LSV3MaF3UxFdEsf2DfjiEjlKFRetaKOIKTMxhFOeh69bEU1l.ztMTh8EMy+Lq6NBvCtpPOxIz8jfvvHVb0hEWFWpXwkta97.0GovmRfM5.0ORGbrfH8w+.NM7NT0NhdgBNHr3BV9rvR2EuxJm0konICxIIVNfz1Z.7jTfVNP3QBNPHNYKt+dTZvhVQmekUdp4KVCPAIsCKB.7d84dJlfu3B9RxYF+dnPQWXYb6TKcVFKN92VJ+KxmakU3BYOR.1yjNkOWmBQ5EfVXQvoBcEmRk36giUEUvmHOoijN.+c3hOu9VUJu5FUq.7BDXaHasI0SYhi.qhX0iFuzwvrJhMpwXlX.dtflmAj4CIDSDWoiS.qSWkFLZ+YsMigNnkdEnAm+k5cvWOqsc.bf5RXM7qikRXnKrfw4z+khnetzuf+le.+sUJT7tYzupQep5IxRqqYIHi.9O9N50ZzcvLUtX+eMTEdLxB+pnKMdMTlUZrdvuPxoEkpiKeJogEbMM9H9hFdK+KyiG2T61Szl9zfTDDPkSzrthn7xBbQd+dGSkKCmTC5SG5HTlHasG2WcsG6RidwGNsbTv2myTOJjxeUELQImngu8382knH5BVI5.+BoRESCAmcomBU+iKekycWZzIJQHLpCqifbtgxX8loE2HbZ.hAkvtgq46kPO295jA1Bmw7UcgUpyxNHTWpNSPK4ClfzxdoWjj6ZpM19bTFsksUidCvS4oAObjMd99Kfmae6ymDdPnyu.dlWkbeTLd1KPPTLdmiXvVoFV2z0JE1FaUpMvVHY6IduHu6vHNti88s1vLuao0qVsZ4RqkEmy6Vo7lU1b8pk2bMjh9bk8.XxFl4WcbeQdLdAXVdplSV36fKYJTbYstcYQgAjAOxSQNk9PStLXtMIHhZref3LHLPUkMLxOfEKtQEi3N8iThd2WRB6x7hxD4tz1j9ApsfFVHRceHYrZJ8ACUSf+DfkhEVaSymM1nX0MKVsjwqiDc5DPOT3mMX8c9PO.bHAPuVL5dbD8IPcEgzBLJYeZpw8BHpVpAAiMRMpO7dywzCmbkpQyR4T8049Vy854eYZhVxt6ebRszjsz868qgtXCDPqKB+9.px1OitItDCPglLMQnaTfGwTCrax6sVSNSKD+b2FLkW2IiwYl.FgxQuKvXRqg2zsd61vF+H.Nm6d+z6l9.sm9uJd5+B2VJ3VrdPQfVjdgv8HFLj2MQpzaiNzCm5NzaHoPII+Vre2xs+t118ANRlU6eUyLUa0SzmmYtRPdSJbvUoO6Mx3Mp0r48kh9giG0+dOSRwQR3TMPE1FdDmBbsxdMtiTDE0FVNlwJx1Ti9xNZtZjllTnmmnr5fBUImA0Ws53nu5Khp2eYdGRTRVlaELyRwiHl8X3YKF4RiIWdL4UGStxXxqMl75iIWcjbLgdHITmYLuaSl2ICvaCIEWnKgqOccI.Ck41OKO2l0Y3zDqw9UVCIbCnrdg1Ddqy0dW87q4lticW9qC+fnPZoo+0h2JFiW2cqGraqlIEPMeGWmeJbXMjlsDwgBtHrqfy7xdH.Rp6zgJsQ7DWFaoTvYvc5KOMSYkcodjAWParyiz7k0h0b.blKv1wG.aJij+5ZlganhPUsVPi.YJtowb.kDMZ9l6OqU2SjsfxaSZ2cJSMtoa7hDaJl9FmW7dMM9SSwZ7NxG1fcdWSZwGC75sbSRX+nfX+T2jyReLPsWZ+gyNU8GN2zUCX5w6UuWw25P4x2miuCGad6wG7m1M84f0sk9+ETaJ5qe9cZKetPegsfdg8n1cGNitiyX4hZYMfZQ49FgygOIFKk1Jo1XoTiHuzgBVaIe27rZmYobc2Tlm8DL9ElQPG2ZHAs+8dAk8HdRwy7h+QozX8FFM.J4les9btGpkwkPlenJHN2hEJh5Asu8LOO8AguEX3IGS4qPLqdEhoxUHl0tBwr9UHlpWgX13RiQ247V8UhdwEIAEMpGmX4TeXh0rn+CHjd.RA

Here you go, I have stripped it down as much as I can so hopefully it still works

This is the line I have been editing.

g.setColour(obj.hover ? Colours.darkgrey : 0xEA423874);

I've been editing the final colour reference 0xEA423874 to try and get the opacity to work. Basically I am hoping to get the keyboard to be semi transparent to partially show the red panel underneath it

d.healey

@rzrsharpeprod Did a bit of testing, looks like you have to enable "UseFlatStyle"

DabDab

@d-healey said in Couple of custom LAF keyboard questions?:

@DabDab Seems to work here, got a snippet?

HiseSnippet 1186.3ocsV82aZaDF9LIdZP6lVk1GfS4u.IF0PHAnQSMI7iVTIInPZ5lpphtXeFtg4NqyGIEUEo8QdZeA1duyXrokTMgV8eX38GOme76899bdnT3RihDRjU9qVDRQVO0dzBtZR6IDFG0uCx5GsGbRO7anKtUPjdnSWDRhhndHKqcdkNGq76hLW+0KOkDP3tzTWHz0BlKc.aFSk5c3wugEDzi3QuhMKS10Otuqf2VDHlC7YGaGTHwcJYL8bhNsb1HquqqGSIjiTDEMBYs6oBuEilHtmGm+0rH1sATsQUzHXghc2SD3oYr1Kp8DVf2vj26HDrJCSqB6DWE9Y6yXdrU9SqF+jI.NEQ15gUt0o2NqQupYomSF5sAJYkgR6FSomYOxUxBUoQz74I184Jpzm.k8rTINWTt+NmcaAjAWUYFYJsmDLVgnX8CbJiq43T5nBbnFGA0apdq9T8V8H0h.ZgOU.igckHE9NhbUa.9WwIK6XppsXVnfCFE2KIg8fkLKvoK8Of3mAqqjBUpABWRv.gX5IbudTZPQC1LHpHoiYQ.o6Mm6pXBdw87jj6e2DlhdtPQ2qL1OIx3xXws+QIXA9TA3V9m+b7qE2Qk339Jbg7iqDQUuRR7X.E5AchEA.UlXR5k32GmWTEOhb5XIcQYmxUcJm3ckGmO7hGI2Mj7GJcDFCLgKT36ExoL9XbDzWn+8z.nIGGSUOnUAJZZzZGFlFuXESVy.13IJ8BaJR4Y9F1qAVJFhO7FcoXNG53uj5pH7wATSNDnXW9fJNFfOXtqqPo+jr2oepewdRlsiRGkuvCERp3XAWuGbAuXInYQGA+4g782XLcWfTDDPkaLrVbP90.VjOe1sTYYnAKXNcUhvDy5ig1O9XXVUB23lxLIJ384L0EgT9iocfV1IC+6s86PTD8r6RePdgTohoofUG5cfPX7jbd6NznoJQnI2kiNfxqZozS7rau.AQAMHWw.pxfg5B1qDg+XVQyEoF8Od4yN9AkAwsiSzUepc8ZMq23vV62zAACPyRB7D65GTqUy5M2uZF+0hQzpdqCaTq0AHE8iprRzlW5b2XYqEJzi+ui4olr2Kv0pWwor1WGVTX.YwEPu3czyMaYPXeRPD0Def3d.lAgw90rXyp0ZXraOORIlACrgSXtQqAsC0mLOPcRXHkH0G8rVTyjErVWB0QADwoxgsLWMa5znkSiplrtRLFlPNS3sNXsLOH6y4z.MWL9daD8ZXjRHyPFkbNMIXu.hxnZt9JMr6JUwOyOzgJUoOkZI96x8x7rOrvCn60U0Uaz+4himP0BAoa8+9wnu7LC3zJg2bfUqeDl9b6kAfAp0N2Pe1.OhoVj8b8+2NW6+JEel8Plxcxl4XtMvQXr6aAGW90.+fcWeeXiOkf6Z26291bzOBzt0i8mQTRFLmaCSLifoMW5xNBsflUNszSrsi1VWAFQ4dFi+AtVFrp11ZYvpIAQyHtRwMtwxn5u236Md.NwMepUd6yz13pHizJfy1ohCZFLSbiqq90+W.0vMio1VfY+s.S8s.yAaAlC2BLM1BLM+pXzxQmLGzAiGG.GC6Zjdsr5xIPmkoKD8uJmsSKA

d.healey

@DabDab You have an if in there, nothing is drawn until you press a key

DabDab

@d-healey But If I use If Else, it is working. I want to use of ? operator. Am I using it correctly for Hover ?

d.healey

@DabDab said in Couple of custom LAF keyboard questions?:

But If I use If Else, it is working.

Show me a snippet

rzrsharpeprod

@d-healey ah that's fantastic thankyou. I'll try that when I fire up the laptop shortly.

Thankyou for testing and finding the solution, it is much appreciated. I don't think I'd ever have found that!

Couple of custom LAF keyboard questions?

30

1.9k

10.7k

93.0k