Drawing circular keyboard keys with fillEllipse

[lijas90]

Hello, I’m trying to draw the keyboard so that the keys are ellipses and get bigger when pressed. I would also like the mouse hover to work. I saw a video from David where he does it with triangles and it works, but I can’t manage to do it with ellipses. I would also like to remove the black background. Thank you very much.

HiseSnippet 1276.3ocuWstaaaCElJIpXw6BVA1u1uH7ur277jrcrSVvvxEa2FzbwHNsc.AAEzRTxbQlTShNIFC4UZOC6IYOC6MX6PJIK4D20BikIDDjyMxOd934vSFDIbnwwhHjQoKlERQFel4vYb43CGSXbzQcQFeg4IjXIMBmn5fYgj3XpKxvX8WnTXr4FH82e8SGPBHbGZtJD5MBlC8X1DlLW6f8dEKHnOwkdAaRAuas2QNB9gh.wT.OqaZgBINWS7omRTtslI5kj3wHiuwbms1xl350wyto8Nib8bnM6X0tUmFjs11yqikcqltc7ZAf7Y8bYRQzPIQRiQFabfvc1vwha4IavaXwrQATkfMZHryIp6KBbUGQkVzgiYAtCxRTwHXUFjm1VOIs8UlmvbYy0mm99RsAbdDESfFqsH7VeA3YWDdVEf2RfjQAHsQBjdt4PmHVnL2hBOep4QbfM8H.OUDJI9hV6O2v7PA3AWVeB4ZZ+HPXdDUZaYUCC+p5tkJUBHqXI9Z5rQBRj6wDO7Ohyh0IhBGoiENjfiEhq2m61mRCpnhqP.0in9L0kq9S4NRlfWoraD412NlIomJjzx0vdYV7qgEi9kpk9sRX36FRDl.6GnpNA1qc0ZmaB1i8AsfCWd0ty05BxmPjiqOgwqPtrwU0vjKadU0bOtC7fbo0U3uEqc.+cX2p3uG2H2kYZWrScoYQWVDCdvkbcFQceNtNgKY+5T5spyVQWYd3JpSQWf0qV.3jTm7qGSkIKRE0RlhV+5JgdAArvXZkKuqFdVMrK7i537n.y.wn.nhZ9Jnx0KaEpoSRRw4DWFgGWwdaqpPP2+wwdGn1iUg89eihVB6nSLolWjQdfiQT2mBhwOhN6CyK3GRLsyIljpwzK+ZJpP4nuZCmDJ3fPkxYNTFhK6uUX5QkqEHacEeQmqTdjeB5AdN6XnucCtlw6XAWcS3LdEE0uYo6KgenIOukZSg7HQP.MZolUubD8uEXE9zIinQ0fLRvT5bGgtiK1x0782xs3KBNIIxBNJ3GwYxyBo7226DnzrO7Wu9ntDIQ0mNUG3WHMRxTPvnK8F3Uxjt1aZ1kFesTDp8MkxfmkkoOyjzmteffHYb+KX.TYPC7RlYbC5t7WTOcuYyE9C+8tk4Jg2OMM9cCDZLk4OVpj5mC0DLTx7UYKVFGCKyy9a3SsR.EOYAse8hZaTzYI8NYtyYiEnyFqckgopePYX2dqBZk+Arcq5V0T55xhCCHyNyQRtgdplKAydjfXp19whagv.U6nEeIKQxtQGs7gSikhIuHhDNl4DuPjcodjoAx8CCojH07JfUYzzDi5lWvRcNjdEfAq5s2Q+s81Vc1wpis1qKD99AzSDtzEVY0K8vK+bNMPAEstWGSeC0AtvU.Ky2MvX+.hbnbVvCVoA8xnfGpGt3FIy2kFY56wcKr2sKcOLn0ilI.lFQ3NE1xEGQQMHWpAnHZg4BTu8yiYxYEGz6+r4V9Xg3yMGvjNiWNFWaIXDJ0dJvX5zdetYOOOfUyA3Fl8+4mlQ6PmKlpJ0gV+QLn11DJFFBkSNzT5V0DyXMUMbhrkRVkAFR4tZAUsXpQakrQpQ6LinIDmHw6bRZcplm7SzZ.Lw0yduI7OA.xXajtcZw77D3R+6bbVbodTfMV0.atpA1ZUCbqUMv1qZfcV0.29CGnpmz9SgdgIkMHDzpP280vnGm.2.02VQ+CslG+wB

[David Healey]

@lijas90 Change the useFlatStyle property to true to remove the black background.

[lijas90]

@David-Healey Thanks!

[ulrik]

@lijas90 just change the area when down maybe?

var keyArea = obj.down ? [x-2, y-2, d+4, d+4] : [x, y, d, d];

[ulrik]

This post is deleted!

[ulrik]

@lijas90

HiseSnippet 1299.3oc0Ws0aZbDEdVauQ0zKpQpO0mFwSPCgBXBfSaUv1.IVwWnAGmJYghF1c1kodYls6NXaZkk5Os9So+D5+f1yL6trKXbZJJ4gtxZEmay4aOm4bw8CDVzvPQ.xH2Yy7oHiOybvLtb7AiILN5vNHiuv7XRnjFfiXs+LeRXH0FYXr4yULL1dKj94ud19DOB2hlxBgNWvrnGwlvjob629kLOudDa5YrIYztd6CsD7CDdho.d1zrBxmXcIwkdBQo1FlnWPBGiL9FycZ1f3TqYSJ0oQkca1zoQSKRMJs9N0qOxlLpVqVVsdRyVHiGz0lIEACjDIMDYr09B6YCFKtlG4fyYgrQdTEQUz.vyQr6I7rUehJtnCFy7r6mDnBQvozOMrsYTX6qLOlYylyOM78kZA3TKxF.M1XQ3s4BvqZV3UIC7VAjLx.oshfzCMGXEv7koRT34SMOjCYSGBjmxBkHcQa78llGH.M3xxSHWR6E.DysnPiJUJggWE+tb4xAIqPI9R5rQBRf8QDG7OfSr0JfBeRGIrHdGIDWtG2tGk5UPYWFCJGPcYpKW8lxsjLAuPd6.x0uYLSROQHo4KgcRj3VBKF8yEy8a4vvyUj.LA7GvpLA7EbtIrsA1GSjiKOgwKPtn1vRXxE6LDbchF2.ZPtnxP7ivZEvOFaWD+s3ZopLSqR0XU1YYUlqG7wrG39XjXCYN7yvWbyiqUBOS8x9Q00uFheJvFXBTveCS8jCTKnCbpq8gkIbI6WlRuVEBh+nzuXN3BJWzAbQwLtM4K2sbHUFcHETGY7mqaYEQWOOleHsPrYEWgMI9ejGTyM2XU1XIiKoisRwqH1LBOrP0VUJB5e66Wpce0w+eM09+vL68kd0g23v+hozkTLfZ+ANy5FPm8NSr3kyrMRyrQ05wwEcNNSwtqxWS7EbfnP9DExC1k7aEbtSyfL2Vz8Sxpbg7ibi.NbQI4KPWT.plbwAK3pqRmxKnt6rctaygWVjiyJkoPdfvyiFrRwp4RAuKCKvmNYDMnDDQ7lRmqHz6cwF5l2eC8ryarhBjYTTvOjyjm5S422THTbzG90qOrCQRTSAh4A54SCjLEDL5PuBlAGMSXayNzvKkBestwoLXnuLdHVzTfddBhjwcOiAPkAiGxYljaP2jNu9j1ylS7GtsulYKGOmwe9qsGSYtiSm6+6+X6X3EgkbluL4PSx0ftO3ugGk5PpdxBb+5E4VKqxR5MxTkSV9PGU1XngopwRdvauQAw7OEWsd4JkT75vB88HyN0RRthdhNmBhcHdgTs7iDWClAr1US9BVDU0ZM0zGLMTJl77.h+XlU3BV1g5Pl5I2y2mRBTaEARkASiDp6BBG0qfvr.DTobic0OsZUo4tUZVUq0YBWWO5wBa5BmrZeBX+BNm5ofhl2qComSsfKdYvxbuAB64QjCjy7V5j52MIErLe3BbfL0K0R32kamw2MxcKrN2c17.14QXOEb4hKBoVWLV.TLsv1GpML3gL4rrqS9Aa6n2WH9Py9Lo03UiwMVAFgRtOFXLdmxO2rqiCjUSA3Vl89oONKPhdkXppjGFADvfZbSnXX.TNYQiS2plYFanZ6DQWQQqh.CnbaMgpVLVXUEsQrvpIBQSHVAh2ZE0BUs05mn4.Xhq2vea3e0.nwUQ51pYiySfK8u0xZwi5NFVacMbm00v5qqgOYcMrw5ZXy00vV+6Fp5Is2TnWXTYCBAsJzceML5xIvMP8sUz+.ZhjwW

[lijas90]

@ulrik Thank you so much.

[lijas90]

@ulrik Do you know now how I can change the color of a key? I’m trying with

Engine.setKeyColour(36, Colours.red);

but it doesn’t work. Thanks!

[David Healey]

@lijas90 In laf you need to set the colour with g.setColour before drawing whatever you're drawing.

For example in the snippet you have g.setColour(Colours.grey); If you want to use the colour that you've assigned with Engine.setKeyColour() you need to get that colour from the obj object in the laf function - did I show this in the video?

[dannytaurus]

@lijas90 You can also use the component colours from the sidebar in your LAF methods:

// doesn't work 👇
g.setColour(obj.bgColour);
// or
g.setColour(obj.itemColour2);
// etc

That gives you a convenient UI place to define colours.

EDIT: thanks for the correction @David-Healey

[David Healey]

@dannytaurus I don't think the colours from floating tiles get through to laf. But for keyboard tiles you have access to individual key colours in obj.

[dannytaurus]

@David-Healey Oh nice. Good to know!

Maybe I'll have a look at that and see if there's a specific reason why.

[lijas90]

@David-Healey In the video you do Engine.setKeyColour(60, Colours.blue) and it seems to work, but I think I forgot about the object. Thanks a lot.