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.3k 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.
    • NatanN
      Natan @d.healey
      last edited by

      @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!

      1 Reply Last reply Reply Quote 0
      • 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
                                            • First post
                                              Last post

                                            29

                                            Online

                                            1.7k

                                            Users

                                            11.8k

                                            Topics

                                            102.5k

                                            Posts