Custom FLAT Piano Keyboard 2 Method [ Panel Script By @d.healey & Project File ]

[Natan]

@d-healey Thanks David
I Really Need This Customized Keyboard,
The Hise Stock One Ruined My Whole UI ‍️

[d.healey]

@Natanr In what way did it ruin it?

[Natan]

@d-healey
My UI Design Is Based On Minimalistic And Flat Look, The Stock One Looks 3D And Doesn't Sit Well On The Interface.

I Guess Many Users Going To Use A Flat Keyboard Anyway, But The Existing One Is Too Eh!

[d.healey]

You know you can customise the stock keyboard right? https://docs.hise.audio/ui-components/floating-tiles/plugin/keyboard.html

[Natan]

@d-healey Yeah I Did, But It Has Some Unwanted Curves And Bezels Around The Keys, I Need Just Flat With Sharp Corners.

Like The One Below

[d.healey]

@Natanr Are those your own images?

[Natan]

@d-healey No I'm On My Phone.
But It Same

[d.healey]

Have you tried using your own graphics with the stock keyboard?

[Natan]

@d-healey No Way, Is It Possible?
So What PNG And Name I Need?

I Seen That Option, But Couldn't Find Any Words About It On Forum

[d.healey]

@Natanr I sent you the docs - https://forum.hise.audio/topic/3183/custom-keyboard-easier-script/26

[Natan]

@d-healey
Thanks, David, Just Read It

So I Need 24 PNG Files And Need To Place Them Into A Folder Named "Keyboard" On Images Folder.
And The Name Of The PNG In Idle Mode:
up_0.png to up_11.png

And For The Pressed Look
down_0.png to down_11.png

Right?

[d.healey]

@Natanr Something like that, I haven't used it.

[d.healey]

Oh one catch, I don't think setKeyColour will have any effect when using custom graphics.

[Natan]

@d-healey It Works
But, What's Up With The Lines Between The White Keys!!!
They Look Like Kinda Wierd

Keyboard Folder

Result

[d.healey]

I guess you have to draw the lines in the images maybe

[Natan]

@d-healey
Like This?

[d.healey]

Maybe, I have no idea :p

[Natan]

@d-healey
Thanks David :)

I'll Do More Investigation With PNG FIles, And Let You Know

[Natan]

Okey, I Found The Solution!

The Width Of The Png Files For White Keys:

• ( up_0, up_2, up_4, up_5, up_7, up_9, up_11 )
• ( down_0, down_2, down_4, down_5, down_7, down_9, down_11 )

Needs To Be The Exact Size We Used In Floating Tile Data Panel:
Mine Is : "KeyWidth": 14.0,

And Then, To Get That Separation Line Between The White Keys.
You Just Need To Draw A Tiny ( 1 pixel )
Line In The Right & Left Handside Of Your PNG Files, And Make It Black.

Here Is How It Looks

Attached Is The Zip Folder Of the keyboard.zip Png Files, Place It On Your Image Folder, And Open The Below Snippet:

HiseSnippet 1130.3oc4W0saaaCElJNbX1IYXcnXXWJTrKRAxBrbbbR1tnNw+jEz7iWra5tYniQh1lHTjZTTI0nnOb6MXOJ8MX6PQYa4V2LOCjhgMekOmCOje77yGOpiR5SiikJjSwdihnHm0wcGIzCaLjvDnSZhb9RbiDsLz84zQWKIp.zQihHwwz.jiSgiMqxo3pnzeu6YGQ3DgOcpJD5JIymdJKjompsS8my371j.ZOVXtUWs9I9RQCIWl.Hp.tLJh3eCY.8bhYYqfQNeVq.lVp5pIZZLxY0ijAi5NTdmvt9qXwrq4TifGpKrQV0sk7.ChMZQMFx3AcFeyiQHGbmowgB13viwmwBXSzmOdXL3N0i7wCmUtO34kGdkWb34jCdqZg2ivc8UrH8TKFrsF9Dglp5SfTPdXYWKx42wMjvBD5sCI2Paq.gINrY0x01xcucd5OrQo9IBeMSJbkhykZ5EhMeZo2TpXo2Vx88M0u+bsYNGkjyop4Z1j1U2miaJRBulp1x8VBOgNYgv8e1.L9iGfym+8sW6bKTJNQvzWDQEervNJKVA+6EmzjnIlLQlNXcQTklYffSS5sPItMuTD2jFeiVFkt1vHovrCNqqyJprYh1bIQyDC5w.nxfTTI7j1qWmu4YTNg5Yms8fx4w0CF2wrNtZk8qtWsC1Y+xHllFN1vZ3p6TqR48p4saN8UrdbP0CpsWkC1EoouVmeq.C654Atjd6W4WbvuYiRttOAN4WxBzCex265Uc6xakprIKNhSFcgulbK87zrGXWqRnV6mJuC7CTsSMqhejYk2upUtQRLvybrhDMj4GOiuMo8IIb8gQQThxPvLi0i3.IArWWBwTIXo71010Zombv.N8LYfwg9DdblGlNXniVHnbycvp7Ewzqn9Ps0bg.XsMmn6pGwe+MqSqwohOv.TlpzSOoJSLzRDjC.01nzaQ2YBoSx2+5n5CorACmxZV+mpi9Ph.fNRFj.HaVNJCwblAnuZFx.SGuHloGkm39Ag3ZQg6ivcXZ+gyGuqLG7BchOz3M6YfMvs52GpJlB1Uws+4GdN+7P4KrPYMbWlfl95bJP95TY2WBsatGSETkIn5cOOO+GK5yyQK7yy1t8dPOYbjLdlMtKMj0Cn+hyqzzEon+VZmZd8Mftm4Z5cOqMbImqOcI5DUZ4xggxDgdlxiBKbN4evXBq9u5wD9zQNTXwf6eyjLEGiwtrvHNsk3VJGdUMEieENixer1YqqOSJjQCkBle9j9kTshMX.UkG6y8BcnVCOYLUyiqeIkSI4Kf+15mBEdDk4wikLV3s3wh6Ke8MXKbcMMit+2fTuv+OI0uTlXF66LBTnBy4ggwj5Bbo9zrYALCz5rhgOzJW1HaISEAoB+I7KynmQ1Iyn2XieRNiPhuR9Je6n5lZ4OOUCbuEoenVQ7YFYWOT536fe3xaWFEBLhux22Dt+NH9LeeprD9ryR3S0kvmcWBepsD9r2R3y92qOlGiNz7c71VQPQmVoS063zRPfJ4zpdzekXG9j.

Or Download And Use The Below Custom Keyboard Project :
Custom Keyboard.zip

Thanks To @d-healey <3

[d.healey]

And here's a simple example with a panel

HiseSnippet 1456.3oc4X8taaTDDeujbklTRKEUg3iKUP04FWicHMkRHpNwwtDQSiUbZKhRU0l61ydUNu6wcqSpUUkP7Idr30f2h9F.ytqOe24bM0XJfDreH814O67amY1YF21QBWZbrHBYs3gCCoHq22tyPtrWidDFGs6NHqKaeLc3QBRjmGsu.s8vPRbL0CYYM+8UxXs3BH8502aaR.g6RSIgPOVvboOf0mISo1t92xBBZQ7nGx5mQ50puqqf2PDHF.3Yd6pnPh6wjtzGRThMmMx5BM8XRQTGIQRiQVKrsvaXmdhS4F4eLKlcT.UsoFpCbPFxsDAdJDq9F0nGKvqcx8NFgrram5El23Etl8dLO1X5odiOPy.mpQV+g0bmG7pMivyJC7Vv.uqZ2wMhEJS4nv1kr2kKoQ9DHDjEVFYQy88Wvtg.jfKqzmbLsUDrYrFNqWsZY7sqVszFKuzxKoSBp3Q8oQMHAAGAAhXGYz.pgMDmhkX5IvYsqWLdSbSdWFmVwMhBWckK5ArXoiR3Dgp3CAcmac26l8DNgDgaS3zfZvYj.ttTYCQ+PAG13bcC6qazxroRLU1FhHxCDCjfYc7GvckLA2oaI7KUxggk5rOsGSRgi9ovca0x30faXY7cJiuaYbsZOaCifl+1UCvs.LV8EsZUUuJkSBeQD1gAmV0MvL7WiqsJ7uqrh1j3QqzuX9XGs4q.WUIf1XGVobxpVxdr3JdDIohGjlfuwMLT.WviIACnNkvatIXr6AvKV4VTuMz.bK8pD9qNCGyJA5p0qR+jFDSemggU0qhvPd22DXH8KiO+.pqz4oL7MGa2mv7j8.694fOtLFhcEyHg52PYc6AYaOqzF5i9Up+rzqlLkYOwfXZR1bZNiNAMIvjl5.U8fPcHIJlBORLRU4EfkmDK2DvR9DEUn2Hua.y8XpWtv93GDwINXvTkwlWbgAjgOTHUOGwqf0LVesRYcjSDs1DqdUN5dWLH5qt2OJLGHFyUAjtY.RI7mrIV8JcxrDC93.1122e6gMMJ+FNjr.9btyipFbNIiah8IPJ6Fo4Qm8lpUI6AmblZFQzPUoBnVjJiHIpiEbkadetSokd4RKlljXNj8fppPiG0kRI1CGz+HZDDq+L755r5DENSbHkUV6tDdR656qMrBkuKrswIMEFWUiMRDDnNQ0EeB1pFxEyYjhNbMbJCOQ.rNVPnyT9VeWX5Z84ZJ4mQPAeWNSteHcz9zli0Jn4HZTOC3qGs6NfCQ0ubDMPtPZjjofi0NzSfAQLcOWzdGZ7wRQnV1QMZPVumTyc4jdqJOIhAl9h1FuJ5EYmrY33M+zOT+TUsfwD90etdOcIoTJGTGp6HNcbuTj0UrgdM3TBny1lGF1P3MHfHyOAhZrqQLfXStV8p147XlbX1wx9SLVR0BGKoPO+TB2qZ2lIc6ULdmq.7BQv+tw6ng7V1touOz6IErKX256l0I5lMnbYCTtjcGXNFcIVMP9H8d7SHmPw2mxoQJmZs23v2+1U9koc36vod368ckf4OLhviCEw4N3Nz9rCgmMwYI9nXXjR5OdfJJmkdCgpGZArd88ZAWxB0oCQNHRmtrEz8hKykdL+LMkc9WMYjufQtW3egeQv69md+0qTL+zA22xOZYwDL1g0OLf1jeBM.JMqw3GB0h8ICBjITymjumfKB6I3L2rY.GPkQrtcoQYwdgWnsjRn3ZJkqU+.Z.kjMa9Sq+.HKjDA9I5L5KpM89hyKd8w1F3hUuLw+2nB+7++rBu4Gl1cOBjnBSMXCCw0AJr5RAjvgYI.CYaMmp3nYeU0dSkUtmdyuCqQLqo1aMhYsDl+iXi9D2HwycMy9oxkunlBbu45+OYVzdO0dbMjddPPO6pUph5CUDetqqxceKv+TrNqNC57EyfNqMC5b6YPm0mActyLnyWdt5nZFs0.onu4oHPncS8fwVVM4DHSVm0i9CWXWVdB