HISE Logo Forum
    • Categories
    • Register
    • Login

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

    Scheduled Pinned Locked Moved Scripting
    63 Posts 2 Posters 3.1k Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • d.healeyD
      d.healey
      last edited by d.healey

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

      Libre Wave - Freedom respecting instruments and effects
      My Patreon - HISE tutorials
      YouTube Channel - Public HISE tutorials

      NatanN 1 Reply Last reply Reply Quote 0
      • NatanN
        Natan @d.healey
        last edited by

        @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
        B560E01D-CB6E-4756-9F22-37D817B65076.jpeg

        d.healeyD 1 Reply Last reply Reply Quote 0
        • d.healeyD
          d.healey @Natan
          last edited by

          @Natanr Are those your own images?

          Libre Wave - Freedom respecting instruments and effects
          My Patreon - HISE tutorials
          YouTube Channel - Public HISE tutorials

          NatanN 1 Reply Last reply Reply Quote 0
          • NatanN
            Natan @d.healey
            last edited by

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

            1 Reply Last reply Reply Quote 0
            • d.healeyD
              d.healey
              last edited by

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

              Libre Wave - Freedom respecting instruments and effects
              My Patreon - HISE tutorials
              YouTube Channel - Public HISE tutorials

              NatanN 1 Reply Last reply Reply Quote 0
              • NatanN
                Natan @d.healey
                last edited by

                @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.healeyD 1 Reply Last reply Reply Quote 0
                • d.healeyD
                  d.healey @Natan
                  last edited by

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

                  Libre Wave - Freedom respecting instruments and effects
                  My Patreon - HISE tutorials
                  YouTube Channel - Public HISE tutorials

                  NatanN 1 Reply Last reply Reply Quote 0
                  • NatanN
                    Natan @d.healey
                    last edited by

                    @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.healeyD 1 Reply Last reply Reply Quote 0
                    • d.healeyD
                      d.healey @Natan
                      last edited by

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

                      Libre Wave - Freedom respecting instruments and effects
                      My Patreon - HISE tutorials
                      YouTube Channel - Public HISE tutorials

                      NatanN 1 Reply Last reply Reply Quote 1
                      • d.healeyD
                        d.healey
                        last edited by

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

                        Libre Wave - Freedom respecting instruments and effects
                        My Patreon - HISE tutorials
                        YouTube Channel - Public HISE tutorials

                        1 Reply Last reply Reply Quote 1
                        • NatanN
                          Natan @d.healey
                          last edited by

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

                          Keyboard Folder
                          Whats up.png

                          Result
                          Keys.png

                          1 Reply Last reply Reply Quote 0
                          • d.healeyD
                            d.healey
                            last edited by

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

                            Libre Wave - Freedom respecting instruments and effects
                            My Patreon - HISE tutorials
                            YouTube Channel - Public HISE tutorials

                            NatanN 1 Reply Last reply Reply Quote 0
                            • NatanN
                              Natan @d.healey
                              last edited by

                              @d-healey
                              Like This?
                              Keys + Lines.png

                              1 Reply Last reply Reply Quote 0
                              • d.healeyD
                                d.healey
                                last edited by

                                Maybe, I have no idea :p

                                Libre Wave - Freedom respecting instruments and effects
                                My Patreon - HISE tutorials
                                YouTube Channel - Public HISE tutorials

                                NatanN 1 Reply Last reply Reply Quote 1
                                • NatanN
                                  Natan @d.healey
                                  last edited by

                                  @d-healey
                                  Thanks David :)

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

                                  1 Reply Last reply Reply Quote 1
                                  • NatanN
                                    Natan
                                    last edited by

                                    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,
                                    Keywidth.png

                                    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
                                    up_0.png

                                    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

                                    1 Reply Last reply Reply Quote 1
                                    • d.healeyD
                                      d.healey
                                      last edited by

                                      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

                                      Libre Wave - Freedom respecting instruments and effects
                                      My Patreon - HISE tutorials
                                      YouTube Channel - Public HISE tutorials

                                      NatanN 1 Reply Last reply Reply Quote 4
                                      • NatanN
                                        Natan @d.healey
                                        last edited by Natan

                                        @d-healey said in Custom Keyboard / Easier Script:
                                        Oh! Thanks David

                                        You Rock <3
                                        Thanks For Help

                                        1 Reply Last reply Reply Quote 0
                                        • NatanN
                                          Natan
                                          last edited by

                                          @d-healey Sir How To Make The Piano Keyboard From 0 To 127?
                                          I Changed The Looks To Circle

                                          HiseSnippet 1561.3oc4X01aaaCDVJNpqIsouLTLrOxUrUHu35Jkkl1trf7pcWvZZLhSeYnqnfQh1lHxjZRzIwnn.C6S6m09ar+E8Gv.1NRJYI43j451sArw.jHd2Qxm63wiOLMh3dj3Xdjg4L62OjXXdYql8YhNa1ASYFaukg4UrNjz+.NNx2mzkarQ+PbbLw2vzrzCk1XNyzFp1aWcCb.l4QxDYX7TN0i7HZWpHSZi09NZPPcrOYeZ2bVu3Za6wYaxC38.7TxxwHD6cHtM4wXoYSYYXdgZ9TAOpo.KHwFlSuA2ueyN7iYZ6eJMldP.Q1w0nILQZw04A9RDKkZrYGZfeiT+N1vvzpQVTnjNJbCqcn9zAxyhFWSo.kMh7wCyoNO349WCOmQAuoNM7tjBE6zSPhTn5xY8cKhnREQTowCQmFEFaxYBBSHwi7yHd.XpPglqX0zKhFJ1nmPvYFTeoHZaFOhjH5HbPuBoEFiwbbUqVzSZJ54c3i4RvOzj71UMxEXlVGXtdxzjoQFdtj01.3iZggby7QGssFS86WvJw8p1EeHodDzYvHrcctuSEzccbJu7byN2rpiGU8IsHQahCBN.RQisEQ8HZ0PFbr.QNBlrs8iQqfpwZSYjpdQDXKPtM8HZrvVZbpQUaAGGru8CdP9Y3HbDpAlQBbg4HEcsIhM4cC4Lni8M0puodT5NUiIhFPtpXOdOArr1s5w7DTNytcYzqk1gflbtOtCUPfo9EfusPEzhfGVAcuJnGTA459xk0Fp+caE.WGvnyyqW2Q0JWvhV7HjMElMmkQTz2fbW.967yqVRTRK6KZKjsZ4qBtp.ParMsbAakMQGZbUer.W0GRWQ25VZIPH3oxDA6xnUVAVrUA3EKCKxpF1NmTu9AtxeJi95SoQ2Rgt107ivGWKHfFFSreAE8kCVkmQ8EcfU4Nf2fl+txL.TkQq81tNYZ9VBscGXC9NJ4urxh4WuhAhh8dS1mjfXxGr3wBp1nhGIQpgv26TL48Ojj31IoluQ88aFNmdGduXR5wsrjZ0InzLmrba3BKHWLDGESfiwZqpdB.rgg5WBPsXlrL2TauW.06Pheg7xAmXiSi5vRUAoKIDFf6KqTYujCZdjRwRKVNuqNzV3JHYYikmMWTXXPzU52OIr.HFnUBj14.RYzmsBRVFY3TGM9X.11sUqM5WSO3yXRFNc3L74jxUmSF5JnVXHOd4rc5S6opgjehSmSkhHRnrVFTrTlQjtqi3LYXdWlc4Ye8ryjkjnmjcf59.mAoSIM6w85d.IB1q+BzRppVoC3T6CYpxutyhFdca0RsvRT9gXs0AowXwStxLPNiRGeH0RtTiVSx.sYJ3TAotHcfgvcmE4HXMdbD7z2IkyPNaaFUraHgcVTsxXQX7js2BBB.cByDYfcgjHAUBAysHGA7F02oOi0Vj3CE7PksI29YX9QZhCykdiuL5o3MbQKcjz3j7LN5OnyO8Cqcr77+.A+5OuVGUEpL6+90fZM7iGbAujMBbAHJSvHHe.bC498BvhhDFkrjST.6GEHfHIYvhoh94o07NvhzYrI4Ntv85VMnBuNiFuSMB7JID92LdSH8NmUsVsHdhLvNsU8mOoDvmLnbkT92MAxUpxpJf7Ip9nmgOhfdHgQhjAU2y7sR+1U+kw8sRgi8ak10S.K+9QXVbHOtvD2jzktObrINuvmDCDcI+3dxc47x2jKu2bDpd6p0AmbjioIVzKRktrNbiESTH8nz64ihF4a1l9eg2r8g+z16ewgRiGbGQDzrwod6+0fz3tgAjZriHAP0XEF+Xn7aKbu.Qpzh406vY7vNbF0K+l9dDQDscaRTdrORGZcg.pmlI4FqsGIffym.+4q8HHwCGAwIxDFKbG+Xw4se8oVZ3hjGFQ+2nndo+eVTW+.416fgDUfnfEvUqITK0i.HgAzGjDgLmRVOT22Q1WWLk4q57GPKQoqruYhR2Tk+irFcwdQ7W4oo3IykunRB32L0+0rYr1Q1G4l9+OwxxopiQWnh3q77jg6aCwmQOlElfw7USvXVbBFycmfwrzDLl6MAi49m6XjWFsdOAuq9nHHnQMEWXSyZLLjIqx5M9SjpAwlB
                                          1 Reply Last reply Reply Quote 0
                                          • NatanN
                                            Natan
                                            last edited by Natan

                                            Also By Clicking And Moving The mouse Over The Keys, Notes Gets Stucked :/

                                            d.healeyD 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            28

                                            Online

                                            2.0k

                                            Users

                                            11.0k

                                            Topics

                                            95.7k

                                            Posts