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

[David Healey]

@Natanr Don't worry about making multiple buttons yet. Show me your code for one button, let's get that working, then we can make more.

[Natan]

@d-healey

I Used The Same Old Method :(

HiseSnippet 935.3oc2WE0aaaCDlxIpq1cdnEXOzGExSN.oFR1NcEncstwIYyXKIF0sE6sBFJ5XhPQJPR0T2h7Wq+l1+fsiR1wzcxFsdtOzpWr42wOceG4wimFnjDpVKUHupubRJE48i9CmHLi6MFyDn9Gh79I+SvZCUET.cvjTrVSiQdda8aV.upaixe96mc.liED5bHD50RFg9mrDlYN5ft+AiyOFGSeIKwY1c51mHE8jbYFnms7CQoXxk3KnmhsSqhOx6VGEyLR0PC1P0HusOPFOY3X4Uhh4+ZllcNmZGDgFBunB3ik7XqhsnndiY73AyhaMBdKCluJrUwpvO6eBKlcC97Ui6laHXNC20CuJqRdQtxKrT4EVl77bj21Ex6d9CIJVpYtEq1tieeArQMBCaAtxpXtnJebK+dRXFBSyD7kziUvfaXzHJLbufNOZ2GWuV8Zv9f1D7VrJ3TogFF7qAyXdA0zSljJEvfF6jacGKmEYDsRFQkvn0JYzpDFsWIi1kvnyJYzYmhXuds7npolZNQloo8vb94PhXiQYBhgIEMn69g50BfG1nfFzlDNibIMd2BLvTUvIZIm1LUwru8hUHqwqgeu10MQaP2Dsb2zZC5lVK2Ms2fto8xcSmMna57otY1aJPJr95LQicq8gZUqccsfO0znQkZylhojbNUUpYaQO0pH1PjkbNUsGj2xyn2LQ3z+hkW7Wd4E2pejhLdmIJE8ELyYoTwxpIhldLA92q5eH1fs0glhAyKkpLLqD7Nj9Vn.eQUop9GR0WZjofzt4rETVxjas9rZVXAkiXPkoevO+fF5ctWXLwcvUrXy34.M5NlxtXryUI+dWHAPd0rz.s0M8ra45fyD7InykpXpZH68KboTA5KvwrLsKNyPSJt9oE.eq+AdVD1EE84GhsbCw8598XHF4Fh2+KLDe5WyPDPJIDmg9EDhcbCwm7c4tXa2Pb+ug1E+usHAMpIiy3XyhcuYaYcpAnl6BsIYaERnYlItsz9+tktRqt9YJ264OfYHiKWuUJQuPU5u15cZCx08OZzHJwLWra6e7esY6FtTo7BYlgIt3DrQwfjU+SyRFBYCDJnDAjMauWzqhMquXbncrckYHUDmOvdtXpwH6XuoFilYDkfIJ4aHE2FaaA+14HflD4eIRU3ShfwAQn7anAd9gMCQIvWF7FBwtT7.P6kyo0Zvo8ZvoyZvY+0fyCWCN+xZv4Qqji8ixddlQlTbLA.FbTdaKddGIvPVVdFI5egqjnCF

[David Healey]

That's a good start, I'll post a snippet later

[Natan]

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

[David 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!

[David 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

[David Healey]

@Natanr Are those your own images?

[Natan]

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

[David 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

[David 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?

[David Healey]

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

[David 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

[David Healey]

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

[Natan]

@d-healey
Like This?

[David Healey]

Maybe, I have no idea :p