Custom vectorized piano keyboard with unique octave indicator (Keyboard from VSL)

ustk

@It_Used By placing the SVGs in arrays, you can reduce the switch to a simple if statement:

HiseSnippet 14475.3oMi6ltqrqbklXW0UICWBtArA7CvE8uptoJVbdnZX3lyyyyzsQCxjyjImyjCv+wuw9Qv7H0R5VP5VnO.ar2LIYDqLh05aHh3XuN8pbaaZ8m9M+N+q4xe527+xu06ZbugqIqc7mT3+oey+y+V60xsx8eh8ZNaaqr3m9M+l+Noeb2ey+ve+O8G92+e+exlMjM9p7u7Q+zOEN09pTu8c69e4Ss+un0NLHlUT5299W7zX+WTdMMxMML84IR969sP+zb1q9r5Ryre7X+69s+jb1VyO8a9O8aqfgwpvoPegjWVk+5UERYYEENANATAY0KD5bDBhB5W+zu4+Igh18oUu8r8xse5272yNUb40LcL9G6fv1s17gxebA7O48zy+wOVbZn3GeE+wm9SbMsCE1+ognse5oUr+KCX+c+wAr+2+sFsEs+4O+uLv8+5e3F+7e4M9kCf+l+c+qCu+t+UgG7uL7f9Eg2eiP527KBo+9+XH8+1u060Z679e4N+Hd96+sAJ+qhg+3C8S+69+U+29O+e528Ov7YuYZ8e4mU1+uE77D+t+A9mP6e4mgQAgn.Qv+4+e9YHj+EDne2+.2z70Zacy9+x+3q+iHPH3+9eNrsbbL6m8tdO2LM195m0ayWyVu9c+t+S+y+teG2z3d43N36r9Rw0mKTdtdsJ6U4+3yzIzu+mggf9O9e9e+u6e+u6e9e9m4KqZGK+Ysxq7or0he9e74ubyFqeBEDr+IXHp+if+6+cOYKa6+72r0etZX+O+n+e7y+odptbma587z3yE+i+G9EOy+g+b+vsV9786m0ml5YFKDKKG9ysa++8GVOq5Wzlu9Cuf9zqrgewK8O9KB7WCYqk+rWnzb1dyOWMs9ya6+gwvmd+m+L+O+ieU7LEC9e+M9m9m9m94.6e9OjC7Gt3+5+0+THDo8e6y7eUm+zz+i+GfIn.G8Izn3DE.8sX.kMZJHY7YNXAwZ9h+43ChSHODHcIv7bLZV.npKNbqy6v2Kn7BrwoWwrNdmDo2EAttrBrhnKq1EVeK5PftY95vjWeWKroWgsknenu3tIO1JPU4NMcyvz4hPfxoWgW.ycekISBEGrzGQ+RXt9r3hJmoCwMh3HmHXAwToU5U1EpKnAHnMHFStyHZQv9GUNLVuHGypZnE0xQ20wXP+gZgPxzPw+vzzebjf8Wej.CC8+9HA7H6cLGXrLrtAq7VfUSLeQV4qTaBj1hX5ZugBCu8x897NmlogrAq.1Z4t5ZAddPdlu1f1Kl5ctmtbBGm4Hkh9P2rhgZqqqwqbi6Higo8yd4GT9oty8PpBr.VDqHmKJ7qC2x4.MajhLNucxAJ0Z2s70DUaBTtEUkIGa+bng+scEfFog9CHbbwlHI2okLmItCWXLXWon0I.6FYc6tguph1ZH66gT9n2IPf6.0WAeA9xYWkJ7LsfCa6.FXe5ZsYIe78dp9rddpuIL8i+jTU0FIvRnPNR515qiWZkijAotkoy91JIGrIzicqfGo6gEAGTb0apnzYXBKyIpNKVjK9ffqfOCBCQoc8sVm6WehaOfPERhaKc.d4PWNXgiBHZR75dahQMEp9fRuPZ8PEkHT6imFur2pIiUUXnQv6b4pog8v9u5UfhNp9NZR40cegXYp.6tqCsxVhRp8m57t3Vuj4Bn4MUBH.ooa9D7M9nQ5DzmmPgCCFw0Qf8NrHRImAUnSFj7XBRi7zZlXC7z9IKi1toiBfS5jfnwAn1Ps0WVP2ydW8f9UpV0skfVvpwEWV+TbItHnLusIVC2UH2Gn8Bv+B9vOpG4eJV+0JO+Qg7e6zRTz+TA5fHieGKXLFOnCK3BlJn8Qiy2WQIMrsUuKun+fnQ3Iz4knd2YbHvj9wIHn+o8DepWx4.gAsCaXiXkjPHbpBMKoTfavriJmMtnUDC2l6UMVqKg6C.k11gjf4AzKSBlhn5UKK5mly2fDEUODMe46LEgix4OPJGzYuGOkfKjffBV51881Qv7Ees0D9xZmHu6MggtR8gcQSQscyNjHMSsM1EtHo0z7KX2EeWDtJ6luA9pLoMlggwcl6t9YBWL5YKtoxrfDzwXW6YkJbjFkz1.nue8AoJl4s3gvAnc2SiR46Rh9NQceVkfRhylDyfSKKsJTSq8oeMEt9N.9x00qVS..0KeOMIFBo1AVnD8JNRRpBr8XL9o3VodNDbKrnhODrHQg02xbufIbu8HXi08ULevWOFATfxOsXqeZY6jOjOGa933FS2Pwqn.Y3QPJgANpCvpUrox8uFC5eioaRx+zzcJyMxyzcTOuAq9R.mhXJz4ZlKm3Z3D2DbPOho1NOhnwqFZEsVLJZpS4QWU5JNPRvJSv6bSDjgv.Usu9e+9McicGSuW5.VkOYSaKHzJb4dhF.FxzZHHAbnq.xj6tMYVIvEhFnnSUy4.GS.VwTw5ZPn61cwNOQS.eG8AIGNKMsftQpcjBoMw.nVdblCSdpGTypqumoPdmmweqA0YV+N3nOrEex6r05yWl.CfJAExwffMUWmxky32cRQMuhCrEYdk70soE0IeH8kdFPcAIvZD+FPQAYOztT+3KX0IW6PYzNxp2ctLeuHYQ5RTEB41krVeYNHJ0A1K01Kp+cGCR2FAwZjHHrhBPu.sEHCMMhM5IpXiRMNUvlNHouZSTJRUsUp.4XsUuIC54oWevxAcGqKVkgYg5qqA03h4Vnq63.QuYHq0JEURjgEqhjc.AZIh9L1eMZtCJAaT2UPCT60.A9E7Asdqxlxj6HCfzpT70AnLnrzJ52JnuYaKR+.s3m+2f8+QGw1Oez9b0zq8ruk+76r09+Gi7+4Ef9U48vg9y7dyb2vO7djBBLr1aFlMFLzf4A21MxsJ5bIXA4WlNCzVIH5a6.FbVcIhLw7fTfO.LnUUfpxPfXNrMiC2niGaNQ999tmftfLXc9Eeic3cV44ZE0cU0BIIqlVpEG7atsc3u330pWzm.wtI+hFq7xS0z1jjOwvtv19K7Lwk.MFQIBAjp2RBEd9DzEz8IBfWubme927pPaVAMcm.n7jpFYy0tSRlOfFCzuX05U5kUTjSiqEzAg.8.kGAWxKIQn1..zTHMJT+nTNiitgOjUtBgUuhsPS+JIp7BCa3DHaC03Anzy9.X5ATjFF.ulAzl4I759BRgxOUssGLfx5TBPGhc59hd+KP4qERHXBUnSMXriIj41D3qdinozijSsgW2eDwfb5WDmcfTSTWDc8ucAqR.qBFR.ev2M.0avAAwjAigJ.WLdXNggByDe26X5cMr9nwPe13Pr48ceWL7atkwg0XGsM55dwFM5KlzmzEdr2rh7QZvVlM032JKXzlsuWkfaCL8dRCZB.oaJMo7hzyxdgGrvD2VCjs3L5JFOD2CJKlVKmGqMpbW.xXVINJBB9FDhAb9CmhtlabXW0zrsuVdx5tZrl9XlE0qmxqYw1btodEkgZ0RvY7WeSOh4oy+pKVRfzyJZu9Y5jLBGOgpiLgbg+Hf4Ru4sXOl6GY8WVf+Bvy+X1L7uZ1LBN9eRO6E3M9id12b67r1SPF3mUPj1eVSTYWKf1JM3B+5HbMpzB6eBoq+IAs1QLDDTNcbHzdxKu.zaIf7iVsEI+qq.RYiVGR9Mw2j6zFuYKQ0UVGHfKGvzMe+ZX4CgbcxNCwSRcuVb7ATA..gIaXJwhqKxGH0GkVcEAwzzoOjtkAKALhZOI2mfpujA4y3ftmIniLbczyNuvx2DqXlz2+nL9VX9VfUfY6yao272um1fIVTSSXeMdu8hlt6PTJ1G481mw05K+rwASewJPIWAaDND9T5GYkxuNLbVx6.BcfG5GpkLDOpi5Bgeuwgx5mWeRUJd98lA66W7IxZ2UYIv9jv3ik7j+po.jec.EJj+DfxMmeAOXrWbh.q9lKNX7c.+C.xE1m6SL6aAHvBnT4HkDjNXk6Z9SY1OU3fIfi7fBL1CwYUMZ91S4Hb9rnQtSdUtwyOZ8YaDCkY4LMtqXYX7sOq6U0Qdozxo5oScTTTDGKZyJ8VZZP0sg+PvettSw00vo4w2f+7H2qoAMOexavFAe7TcHTxuLchV1S9dFV44fmb+nQ44oZlNSfHBdiOntCzO7HxRKfd.+MDJaey6E5sW2ONj1S0oIS83wj1n2nCTkdBZRHBKt6Ovt70YNhlHvKxrPZFBC1yGL2buE5rcJQ6qeCzKtfiT9Iu3n+fDS3JLCgF.f6Sah1g.1.dMI4JgO7cYR+blExFvPYVlUDAhXqr.QzzHrQvf5BVaVHhXVWwmWZhQhDXhhfBnecEFDMsKHGAYUdjIR2Ozh4lH8YvaARihNRx4QS9kzSiocRnKholo0XkEI.Actgfmfef7VSb08kggPi+37pTD0GR7gOzYF61VwRy00MbdNvc9iELOye1I9Q2n21BN7b3UfUkdJf4mEKSMO3ALdcCr7lC7P3PeMllObei6Kz+nKar5Tr5SmTfqejC+I6Ewz5XqZxr.OZgMSImR2KLPocPUGIyGh+wEiwHFFsAM5uefCjmzejXtQERVtLE9IiWFB19Qt.uWrraFa0K4qnpm5SlsJXcRcG3qF4CU867L9Zm7FqkSdkNEqOW.LKhGS7gqbsPcVKEzuveYESXiw2JFhK06hw7ofSPVqaUEfN8y9loX6ZDPftd8stinfcxIbTGFpzeUYC5uZYCID8eR4muv8KAv3zzIFVdGVcPh4WiS7KItbfBURX2P1gqJDC2vNhLzRZMfAUUwjRfdL1Afj6Ii.t3Tsg.9.BwE7GNMBR6nfaEICufp3tAa4ZqkY2.yNtQDkFtHs4jz8.qeJW+xxa+8GL4UJthA49AIlMU0OAT8d9i0FIt7ZgGz9B+IVU+wiZFWgPelKNU+A4iicuWpCRowGLQU5OEidSuwpETbF.cNqOLGjbW4O5zdKm3WWAt.Enikg0.WldC6s79FYDwtaY2RubIIh+cz7TcbwdIxD6PcF8mzG4+ZAdF3EWGag5u.9FTRIS94g8VwEyhXh0o+tDcvRyKsjaPBBidGYfnGsjVqICV5wn4koGRFcxHbvLOM2bPaJwqMKp4c+rkzLnOvKWbIyolhInvt.RIaOjPgyRy8EDunhz23M0lHL4LdYwvAQpeE9wn9czto5Gpae0MAm8aiL2Myo9GlaPAdkVUyp3jlNMi6xiR5IiEiRUuvCJycAWzEwKwMXTSrUHRep6snq1H3zvvL9IDwSf0QWiHsiOXyeDZwfolR68GVeI8Fc3ghJKt98NeIAL4rMo8h9vZYnVUUSZbU2nsfQbUUnJH3S4XviuQlZgLEeCdatG8ZbRG.eOOtspqeuRj2ehgGO5JHmkEpTxx2fLFd7Qr5amD8K2LQQiOwVdwCyb1rcmuymS3pIEeAnL9vUnT4mwx2ynHnJxY5K85yjLEbGGa7I48zaaet6QTQzoP3AjlN6uP9K0.jI8IZr0VQtetQtJCMUzc.P4WhYNZ9dWbkUnpg90DUaq5QFWRcbKBpn7EiILLooXSRIHg+MF+W9XtBrtuEY.7NNAVPY7cUW7S1dIHLR4hFUm1kUZ9UhW9uDeT7sxMn9tmYvmc+x2HF7UhXE519TxV0Nwfkw4zBwWLHBbbnOfhrpgiskF3y28NU3Rm5E8UpcN1Fi5TmZ3APb+UE3X+pE3njP+IoIiL92OV6d2ypvpaXZ.VUC2.O5HK6somItt52riDudu2us1CLzBpr8ELF77gpCzBDjCzvsYryUIXh4r8A6zwwQUkSlgu6QrygSq7Ptbaqj42dQihBTen9c9ccrZFGcKWS8Conp7zh3bS+.zFtNNKmn1NYU11PntoB1z2ZPVlGaqVrO29M2Mq6ZrN8za+.qnJFscclyZ7coa1utwKl65G0RQCiU12eYeFSmYDeZqJPc6z9M5EKDL7nET8src5ls9xLXD+YTX5bfGcr6ykavoyzMl85dP9XHVIucRKYIm2Ne7hveKqzv9XI0qiEOapIYymhvXeZKG3HZxO+oEKflBw5gV2BVK7fi9NCqPnCajgasu4q.jI7FjsZP4IMR5qqynwFuXemQ8ICSWS5vPEsq43JSe0hU+UbptOsbxQyIeGMWuwsaKCxMCE4G6OSB7YfhPeMSyVCp35XxYhx8vnSDwqmzvN+h+BiqN1IEzeHqV3wFHyeUxA9utnIh+jueQTtG4DfwiwYTL5VrbAqiWlThAxEeoJ0iwFqlado5Y0669Y9qmOtzMR7DyiklbdvkWhMnah4eEzMk8C32AWqKFNXdIOnYX+CHd2hpG12+.DOH03Ym3PRbqTbrSe3imr06wCvH6ZVd9qN0N6idtSmefv23zzI6l+kLVh6H+ngaEU184lvbG1OIgxlU41wMwU1JMxglVy50UpkQKzlS2XzqTIBkFOpSiKHTHniguQw5BlnDNeaolJOOMb+B0QftX6Vqd2r3gctDJhcNz.NpmZoCZ+qGSNh6EQNEp5GAacm7J6iZMS4t9AXCn27ynHqS.AFyeHHQEBnDJdaRQl1G4A+1awPub9lnBGhbCaQeiXOb+.JccehJjBFVo+QZb1o9pbHAzhKxMWSxzzKnOhFf9eaU8RQqb4kCe9UTVKBuQPFNM0YeJ5Ih8FVZyxc8xbxkk09Mz7MV1r6SE3lhwmxSZgOxQ4CwpZCQD.URPoeF.dErYQpOngjWBrAdVmZ2s9s3dhw4iHHpNH+zyTjtpPxkMqMKyJpocKw.GLduy2UyPGmRyalYI3QiHwsPQzw1EG8N0E+oqqYdvnggliBhv1JdUnO4e.uUO4S7ShogIuoeq0.Ct5h0iArFAAUQ.qI2ktxpgEr0HIlTLltdfqtZLCowgP147I4cfwpEneNhYqqeyzqxlOK7eo7eL4qpmgTS0twtSqU8t9qTuzGcL8RprvuQNUWKV.xakYHHuGQJbyKYYiaBezU109AUew5upDg3WWfD7eF+zRvu3QfTi5xeUIRVKeLgOZzZmqa9zMK.EohJEGdlN.SU.Xr.XY1MbfJ8UvxBs526GU+rBhynfP6uP9g7n83iZLaY9Tlv1oiq67mK0Mhh+xWyoKOwnZh9kkkcDbPJX36WchXxurpp2tO3FBh5hiOBip9dqmvp3li8EMlUcnZ5GkO14lOkOsSXrBRwGNcpRhdVdOBIsZPexBvrGDk8Kja5udx4jkqPOGCH7P7E+nBfEtgx8gk5deb1RrmHXXPhxFxSYdgqrcYTMYC3BmlwBQNBwScF.dj0ymls2HKf9NIdBX8iteKzfdId.omRQPVTDoU5ApE1dBDPNdX1LGv8RHgmTlAhwFg1E0lRWpEjwmac5wQxuQMRDrGHfVz66eKwMiHEvUDpiMz5ds3xu7zSkuQ8dk0Mi1nDfbsbZ.bYw8x3yxTOXSlYv8dHDv5zvjgyT.okzi+DxwSdQyQdlldAyjS8RxwzSzFsTRrx2gJHy0QmgMkeJmCGeqlhkDODLjNpc9T+bJchXrf3mbiYVau9Jo25iYMNMw0yfSpz4Scr33xiFUzQ7ExJ4vQpoOFmQNBRfhJOtvZNOTS6XsskD.kejW6jywKYrEDzd.Vwyla9haxCnR9cMIszQ.iyqt.riwJxyRMp1OZy.GhX1i4AKdrxdzaUiGnCDsXqp0ifFR2d3hMBNeUTshuUD8Lll5MYsalya+Jfe6J8Rn646bX1I43sDwjFC+WFTzYosCeLL3NPCEHFrFzuslDghM3MwyetDwDWk2LBdeC.ttoxEWyMKQVXx.Se.jUfMBDsPbWTaSzX7YWne+qBbQaqmyxkvLechjSwIOWXMyPvzoTjJiUjbeu61.NYoG17J3Pj52JWQi4WCXubIMxqVPqMz3FM42mpQawa4MCIInOEx79ZniS+1AeABXZliVk7KWh+H6CIHtfGOweMIH4utBIr+zh2.Gwb+9QgDaOkL6CkRFHJhK0cbR4BAWEDG7xaol2sfyuhRdrJpjmbFK8RmuR.E7qA3i3J8GERzclFFSi5fbNNFXbrmWrdeyYdfxwHvNTXVekeXT50zEmd3vdQgQJ.8Ec8tJg.aQAu9h+T9g4DmZ1WJyltnxvwHV93CI7qKKFEerrFd8r9Yv2fqFuLe+Q7a2EBeuOijQgs74QSGGSkbRWkO7qrdP5cyWGxW6v4hQlh.TPuohJCqQRmOekArhaH4kniG1eZ1pG84Vb4aIDjNWualgDXUkCqahx4TBdkfd9mo6gna+HDi9CT2M+ArzxEyLnMjCZ3qzgn4cp4l.z0gE0hi4X8bVY64QvYzZ1x5yudOpOWACM.jIgxQ0MfAIF4UnCyq4RXVMLHE8sswAaHq74XP032hGqdbTjDKstk1mWYVo4dHnhfbYqpSoHouRGP+UIjmq5T+GqYjWxe851Q8qN0SA+mWznMQeGQvXrUJLF8ClKaPwgX3MKSlSIPc5tjVE2Isc+zIfR5xnNh2fy8fchfuYd3P2nh1kfyca+RnmRcFh2CumSmSlKCYHsMdg06A04t.d0JE1YWynYh1qcoWx8PwpEFudwTGTsFCm0JH9G8E6fBx4dCJHUkyvv3C50o+8qSPOl7oPfcjvraupYtdkf+nbMFinu7Ae55Wv5F0wJrZdWclFAhv49Fr5GG01Bxdmw0S6IE1NtcJ+f5OV5hSwuH1suWNo5oWZ5Rydse15kF3+obb9.2g1uuFkQwC5JfxvBNAI.e9BgnMEGsW2AeTZuJL4y3kwvAQ7NgKJkklbyc18s+P+m1OBT2BadCY4EHEqdaumuek3JgjOGwZDH8gDZv8S27N9zZKbzzKWW.JhNCEwuCHSD8YJaCI7Zyl3TYTlpAFvuzm61dccQ6DDbPU9oWm7Mz7ELFv6cuXpWzt2lZ.KPksWbOliuWv1uSDdxLvJ915+IOpzcNaucOzYXICqK8JpMmtclz7c3s91NVZhPCzr+N5zHIbFBb+iVL6eLzyvq504mT22p8NCO8wZdFQNYTQg6au2QR0lLKprFsCoPIO3no8euzIZ6irauyrW1oHi6v62jeQgoSB3xanZkwsi+AS6SxTvaMKBgokCgo7HbsAMoE+sXrsvT7bcxvhfoqAo5cr840VlJzlT+3b6s0T6GQZr3ffOZutrC.4kbMD0YSrqckeDBdq3suJ6IngR+3AOi2Lk18apOiVNfGGKOBLY5H83hUy90jvrM+wgZm0i45x6TWeN6E6thwiAW8WdwMYegX7cExhO8S2sVpZ6fsiy8aTKOfT7bu9Nztay6fgyZT4YnrNvCMv.pNZYzCquZYZlE0Uxsnyd.YD4vr20QWHL1EAJQ3bZKYE3ciyJ8FLbQ9sjrbLF8BvDas26SRP7iKJdbWE5uxsxn5SWv6d96eIquiGaAuhIwd7aIx7x7rULltONWschGXI7TOpBVqV2C3xwWz3QWi36TbbQhduFwHwvxImI3iItgMTDwL2FFTIboWVcbw3HILgxtdrDmQuKjuCNd2X0DSFvNmJxntbdGWbHL7eem1+EGjm+HbyeDs4+q+xNf86+E6evu+WrP1+9ewpy86+EF4+8+Bea+9eg.0e+ufJ62+Kv19+9+7+isc++gv4WeSfIH9yaI2J+s3iR2Ow8Nr7VO7fxPDkn.0AAN8CJ53qyUonG2XJc1Y6c18gKZRNffx1AFeiAqD.sY9dEmKx8B+bn2BEmBpWmSGS7Fs0mMnUQSUvLkTmouUbhiEjwfsepGJ8HrQVXaadadNM4nRw228Fk+1SHvciQk0s0xxz1MTKBysMnw8Agp1cdQZwQUwIOs6wKxjihuU97or+fo7WX7hDx2.WgvuHtzoPHlKkuKsF1rMoF1LuPWoxxOsHidSDR1bjaP6XSnqDaJ4wNIZXaZ4tNVkmp6TwTzsNBEKL4mr2SeiJLcltd1PyKyJyMvLj.lk7l7SbF3Nzq8rrWYXjv52uxPL5RRIu1pHVR1KewE8EJ5E29pvRlby.DM7GhLBf20GDK8PF6Qhb6vhDXYsYzv5d3jm67zjuvhS+TBP4I8DqL3TzoC0K.Oi370m2mtWSoCUfJoNkB71stNVNlpxu4cLlL7rAwraaE8JrmSNYMLcv.Yb57qMCEFfjiTBLdHPmpRyKtsSqUjMrRGy676+.c8PVrAjsgCUugfHccajCzUtSkfCDM91RGTZ9fS0QdpshkEzggGzlm8PG8vIt5qsbuO6g8DOnoke4T5rvnv6RnDwSM16kNTWTEbikZY1rHANAnkt2bi1VXPvJ7oxqynCeV+9vG83kGbiP+7VUONF.shn0PqEc1YCrBBWo75jRPf.bVp2R0gSDxEN1QLmoMzH+hZMBHsvp.1Oca2W816sI5fG1G46agffuoq7e1BrORhOWC6s+tSJsukZXbGyXVFx1ox7USVCbhq9TfvAOw2.gcb4EtRWO1ngUNvKUv9B5ZSy.qwt4LKOYbblLDPewKJ0ZgwfgHzppM8345c1hqB1ZoFEHsfUkzXLm8xfADhlzXx+F6y3udQJF7e9jZbybqwAFaLX7KOuXJvxKPbr8Pym4vnLwzeFIbkUx5E2SNU.mjquSs4A4XrsA0o9RwPM6T6IIbLfluaofOOS8MMNNVQgO90mG0utFBNhH9ypyElFA0eAZest7NIPnxYwAEVgpnnuY1WYGHxpe2NP2TsYSYWKf5H0AzKxEjHAV.o7F57wq.Rg0kaJViX3i7ubjCVhORbIuOnLFP.6eyz0pSlf0z5LIjfTI.6M91d8l53GAoK2Q663Z65QjY9PtwqCfy9v6DTGjiEzBCg2L7vwEl.1JdZ3FgE6CDjenHEc+PY+tLIehxuwDgpjDykoZmyNl7EJds6ONeWfn7OCAcj9oedGMKv1M2MfUIPQNmNie.tF.AAO9cZJTbzuhF8HsVaNnoH8SfpXCZgBcBMetFUAdRNh2nZ4zXv3aM9TezakJPgJa9dIiDVgMvT+BPERtuZJNUTnnPZoXlCKDKU9RzrJew.1vi2qidwpwZLmy+tisl4cA7xvFTsqGQqn3A7b8BQRonP6ONAP9GHwJ5EGEUccmFdKjRTfi5HrZENZb+M1A0e8jKRr+zo9JDl2+3gAPMCWgU1wTh2AfE.IXFyQ3RtzOcvxZ0YLzg2geZMAtHA3CHnXWDGCKX5yeAF4uzkrTfsV+LT8V2XIDToPRlSFGM.Z9qn1mPZTEtklfrY72PjsAnWK1Rgl19tCEwSIubDrFrO7EriLkA4CctsmqOhS75zBLEtpY3FFD4V0MTRvjcRXES70jUCFWyGzUNYClUGZ1xO8UXzscRGCWeb+341vyn3r49BSNg0kWLf2nyTFEONgtmpI4JAh3sIfGjQPdYXQwm0RC56Sfv2uLfs8bFPLAPgOxbBHvgrnIuFjOsJTm+RaAjYDAkCPKDX8Avz9MTTidkN9WL5TsY6ef6c18T5Gen.2eorSB13d2oD642TD+vtLjqz9BqSoMYNpL+6SFEx8OV.Cw4zQ3coR7HHhnBpqHfOhk1HdjIIy3Hk.njMZsQzjMIKaka.IxsGj8wbXCwy5VkCmuo0PReju7h.amBgrLi.6hl5Xz8fNCGRRKS+Bc.Z6HbZE3qj4OXTb3lFDghPOeFgNY0luWSUk+dh41qD7XkquW0yUSdRdjDzWvZE7PPdROzz0ywuQtIkJef4nmavY6Ytrw2yupohD8j0MDjgIU0kUTzcfp7UXg0.RikJw6qTSq28E.KsnGnWWQHRsFc5vPpQXsA5DnANuvxnBSPDAQKGEEE0T5mDqEcU4NY+NA5EHj73645J12QuZjA7w8cGr6hXBSdADN3vJs32LT7Pq0dGCF7BouVkZeJO8Q7p00.Fpb3v0xBJV8Cd3WAir+bj19ciyYNxy8ck+PPi9DKuH8DXjCDedzhUdzH5TokBpoy2LFawclertMZolLJRV4StCeZCaXcdv9HNY7.K4YXnvR2MPUVg9T.xzB2U028R3Edhb7wZNrUkD5NvEQOqDOxxXVwZhRAahlxiz7bHppUd9SICNhNouHbM687NkWKebkDmX.rPF.pDIzIWZ.0t07rdDt+E3zqOYmsKF6cRTM2rbmn+vDkfWEMC3eicH9WGVfh7OsGwhgh2mOtjAHUTYAuXM.uLcrx+vaBHqR4RbCQl.Cof36pnPMSKQZD..7YIMl+EKXF32G2xM5PsrFtCUGmBp94eicNEY0+JXj2MIWLxzaFzC62YYO8tAko6V8KulhIGf6p8Soxh4xGI5XYGUUq6ceiLUbKs6WxBXr9BltvfO4DZc4Srlg5NWLLU1MtRYUi9ybrBFI5qsPSdRx15wbl4ycMqLWBFjf8CUJbC9cZQqUL31crStNjxdruFhm37c2rDp8DTCG7eBOcgI12Zq2LNSsFR7qmBagPHjNOELZ8GRPXGiEedpDA5wbgLFvuHBx5eFTw6mnC.1gD20hBAv19bAOQr8tFfIhZNTr31EpzQCHSCncXnfuj.KkvYon98rHvaeGuIoMUfcrBn0MS7nDpKhvF50CLmEbjzvfnWuaJUj4pPc8BuB9PGlN6lmrbzZOTt61GW.Gfbt2htT1Ht+kPiC35PCIbZoWpeAOwRD.Fk9Uh2Aww7Rr+QdxSj83jJlvbmZRMabOdeVHgm3ZpPu5cZRgRJmEWzNdzBDTdFdDoaMLMA9FbQ9fFzYZFIz7FKHqOdLGur76gUFN8SPEHUYa0lA8nyXGlQiyuIWcFNUX0JgxIbx25IbRSxYnwLd791S8EEjOoCDLp8M40B7R5dq407FZqLsJQ50s8puvuvbjPJ1nvgmWLRHUVb89Lir7pfZK80D0L5NhK8RiVQsEYJg91xmaZ2oUZYyi9lMnxGDZH0f8r7n9y266ffvpy000r9Isx7OHWpB9ffmftN90LNGcOXcaL7F1dlpFq2iS4TY3otVwyry8Db0PWJFG31.HhpsUok9nwqZIlQJVKu1Jc0SBaB8YpUJaRZ1N.2Nt6wKayigljUdLle+HK+plRtgbyZqVDmN2B66sbJKnJyaGaYDGDTQctZmBPwptO2TEi9Jm8sTI9NnwoRsMj9Gew.kYUAumZZY7Xvzq682dloYPzUa0iecaeA.eUazzqTuJcNpcverFuNM.8oqGMoEPGTNzrv0J+UlseTjp4XvWXcgg8P496az6X04o4cH2DjlvqbCzWn+gcKN1fJ9wd7fDqz34j3zGw2iJcx187rOljdeBX80ae+EWXQc1Gma7Lrhn2T1seSgLLpdQjT+NBL+g.2u1HU7i.dc0gFnbvaUX+h3sc4wGTrFbgfy+FqwK1+FfX3H+4C5xD6MG+i1l35.V9sG2sKDCEi.TAf4iDCJYCNdjzjRU4Oha58EwwfZzldbjp9sxC70ONrKq7f3Zmc1vSu77I3gS36a58DDUS+tZCdnfynIa4q6eG+Ndp4Q0h4E+rx9qinnHc8GoUmMmlKcMMnM6VtdtD5OlaavM5mVeUjbVsHIqgeVPYtMpyfW2rWj81esA70j2p+gLU6aMbzXBabSI.5ZMLDD7Vpl06pnVtPvGelDoTdUedgV9l.r+pk2uiSWSQ9spFqbiaS46nwanWqTaWJ2aHXBCTai0nsvNHVMoHo3KacXq2YU6sQuvIXHiiPje4N73c1msLgSsTD1vBoWe8EokV1FcytHPJzQtNQV.rkBQZvCH.fEA9f0IsVM0EJf.v.PX696WkKtQ34KYc5hrudSEokIBalFAZ2pDNGGm9cCYBxqmWwSegrRfnKUMk8DLsWYQ8YDd0JPWd5KG+yWFaJekCyk0pt33lcm2kSusQh9b8DOD5rcoJTfBG0rLOuluBlxYq.eu1mVRfJmcnToRGqyWKPrvfrwfIpraH7J9Ot7XvX59ZA9oimIzZOghMZm6KzTf8NGWMeCFvhpzkK476K2J1qp3jJvowgZkQoNNU8Y5p9JBcg1LaTe5y2BZpJxTRMveCSAQEktwdsLF8J9spwldZJe11v996iDe+F8V4VUZQG1qn0HWW2ygo.51BP+gGfuOE+M2a++Mjy+W9OwAFu+5ibd9LLgG47pl7byg0nbODxZZ2GwuWaNJ7GjmHybIt1b9FoAVyAVvWAVIBVvXqFMy+NG+qa7YxS5j1W9c9Gs7p0KvonKmDWuMSh252lN1wIxRPayF4TdKC2IKmRJWWKXO66zIXG+Co7ttnxWb8t8VcUXmSolFo2jn0Lo7BFJXcGt85vwJxOjwc4y9O1uCmGdzw+1Hx0liWvbsq4AA99Ytp5ge12yzqow1oUotU+gO1fl.abKrjPjXDOkDKC5ZpYcZGXhFECQCZyVCC3lNKyKXf.OoNlFaKlyBfXSlidJzuIBBHuq90mnWj9.e1hdjdT2gksMRoA+FVS3wX8jr22F+UB0IvGlMM+Y6Z0SVA4T4ufAeWOFxgqNX2lwb+7ic4LjFqPmlz5h.Ol90bNPEvxcVj9m7r9L5UZTqhx8ODpvj6.8iXKQ.T9jNTeB5Wbohd.X2ejEWzJguWpmt.6EhgMENCgQjDs4CPJElofp+gNhDMZKbVkrfLgCDj8GCysRou+18viNnsid1duTApHoGMmezvpary2qvzqvpYAl7PmUAx4OX3ZlzLFqvpDdFgIx6YhJp0m2XezrB5nvxqq0gwNJa63OLdbV9J3JcFl5fBAiNL3jZ4jBCInL9jXt.PEFoIPJy5ioo21mhMU5Ab.rb3HPQ4G2bGMoOxeGRX5XrAA+NWUOzvBd315lnlJ+HK+GR4kKmd0ms85wfOCmL0t8Y8RDsL7ZmhTm8iqlLROPJrG19.3zC5Uy58jJnv2r7MujzgtPpCDImnAhA6TG5YhmaE2CBHS5aZ1pXKRV0Ljslc.DLa2mfAsEgHe2Rotvr2XEmbG5OGORzKnhvL2WFSyOWAxau+I0T6lFekD020.tJERu+yvfllU9gAIZYpf5XuNnoerchpRUI7EBeivqXwLDVjzVwqI0TpNb5Vy6HN6unFOnWDIeQDlNzazOgD6X+TVHZ+9Y9J.OYhvFhV1JI3waklZ4I2eiSvv+VB3+S6v4fs38SQerlgl3+Zffld6u0wC+Aff3Ocq+qAB5F.Ak.OXrex68V0d6Uov1InFLXKjT6xavGWoFCG6Yl8MdpKXxD6tt+a20fzzO78K+fUvhEjYjOcl0aUb9MccaB5SJlTF50OvJjzVUbbtQcXaUa7qaFUq9laCJ2080YPRsWsTl4p2CJO8dD6fi6VVM08T4Q6Wx5gqc3drBl+Dau1p+CKpqY1dWknrZdrRPqxiDD2QPiC2og7A9DFAiAdyyb6gKiGCzmyDAATQAuasFSwHyLrD2tIxlRKznQoKlKSrrVSVtnNkdzprKyuhr.TTKWpjpRqQ8guD+UMcpUvldg1mBnCTu46EmqCtHbLRfj2HsVqCuab3BvvKdj7rMdregvtsRQTFNxcDc+Mbau+R0+ghKN25YdC4M513jUIMWmwGXFk08iEi.n1WqeDnqncKWQHbxvnvP4lWFd8NPAG3iKPRlv4K77SUnRsRhGTcbbXg5Qr2X392gZvAjSHTe+f4UO2h7wRrzN+P8b6C7dPTIN7AhEfEDtCmGTiw63qYQ3Rp7O6K6BhfUUOiYOvz3Ji5Q4G8RS8rrc4eelR6UU+di55KNp6DiwLp1Lx7jQbt5bp3wKn4He3Z8NyVGqJa0+7fUMrSPVMjm4hMYG77AMQ06NVG.ncFx.XtTidbetf7PmnEHX4tqTXY7c7CHiLxbiW+IIjkcZTY4mRJxG+LpPmXzQcVRakTqDKtznCeDdujEs.VU+iCl53XJr9Uk.nByyObxP9BR7x+X4.Z2.aDAu6ZbSZEwpCA.WmmH0hXi8Pdyp8B98AIi5WQGyphlUUHUlPEbw.2Yn0Kk9JFMAmNwwNYyMfN632lxsmn68fPuE7zC7LaWSCf55sG5B6JWecSwhA7kERbMpZckcWWZp16q7f5EXUoCX+NNM2Bjip9K7QfMX+Fo9h6B7wpKKepbIu49r7YnrFygH5Zde7YJEAJtcAb7uhFbFWv7Lqi8AKIWb6O1kFrY.sRo4oNl3EkR9vdhm1Esc3Mu5fCVpmT8wfP91gITjhWLVpcrdRHuPMdfXb1MLS1nF+7ASjnfIc3zgycuNqMeikXHpSCY4SBhBThR5N5TxRyzmGW5uX95OqwwAUsdj09tP4CncSM4JUlrPD+H6yzL4CpLE3eiymw+FZ2g9SmAqvDVeHNv32uybX00ZJ.2TI.rKGn2ZB9h3kwmYlm39QV7LPt+rihPGH6DT5VYDsM.DkGTloBwd2jUO3D2+vNwgUTakyItJcT08U5yk4dByBhsTZFdtutl2VWCCkqbC547lZpJPSwR6748pqJFdBwDs1oHWg3fx4UcNb8syIroGZAj3Yu9NoksIVnlu4zbuWdaTlYcAcg1hsBTZHoVcUil+Q5j2y.mgkcQEuttoArZn56w8xTOfTas9iEsWCEaesEzkKQMyApyoBydsXkTZAHdfTmUtPDM1YzRkg3TVtGA7LcSuoQWnjKV6FS9B.qP4wXQanOb5ahukzvwqI.jPTgVunoGnYS9ZhaDyQIZLsVtoPTWPzcEKQ85LmhfzvDHR64dwRffsCp9ZZaxOVnmcMRZtYsLrY7d2U00n+00Yt4OLD1mVOxO6DON90+AlXvMfhey957DoDyYU+NYtbS2qmbMvARRQ2SZUlgaVIPAZVRRSxJ0XZoDodM4itOmpc5P8vpmd7jsz0MaJbRgmnJIX5PlNuDZumbkTTaT0KIKbYddNwAOQcHqMRQgyHCCEyHxlsH7uQRjST1E9hGGGBVLlvCbePaLTpkm5LbGu8xtT14XVb.ERxTdqzbcJID0wKjLflsJ4w.mA64FccCW5WUc5qsF2Lp+25.m7qmKSS8myk+H42KAFKZkx9iESid06lCQq9xpw8ys4KixgWejUHFVgndD+2A.TFA8UFUEjjop7AmJjlZbOXoX7lZGuX6xN+pUw1R0+ki5sbxShcz3WzpiltevOqkhZ64PZy8HZuG8OrBaZBGbxJgUJ4Jlh6drVNp3EbKRkocLBaxBNqYkQZ3E42X1pmBip4cqLc9hgxXtB4Oe4G3XAq46MgAOz4psc7FTI7egeyvxyAWw8VcRN6atC2SeoDeVoHfcJnEW8kOQ9oua0UtSZ5MsUZ+3yaFLFm3J3yd42olu+0U5GMbtckNMTXIcXQ3RTzvmhyzWVueKLOTSLm0u+9cBIh5P7YwzvoU4bYew3NRtiVpbVPgE5lxGJ.qx0F3WKzGDKjv69e3wl.zNEJrh.TmgeuGk.+ZBwCGIhH.oPl9yBNGzNvdZbH7YXaZj067YZuOkgFz4vk6VosBuUBApKttDK8KTeWT7Rd8B+KsZvw186Wet+bk94stAGFEA+QbjXgEQJzTwII1nOEdwW+OB.RPJOpOr1AzAvdqsLRbfbxELjritTCbRdV7YYqMA4whBddRW1cxGfOmW0J1Q.3C8kxPX6jDJA.NKmWtcvzb.w0FugflBKSvahnP3HDSIFfIFKCVvITJMAksmZMrq5Ldqj8ErU218yCMdynxUudnOXZqdNrdhGebQbif6iyXCO3uNpmhlge4YD7OitaI37wIA6cc1+x1vMnDta2LH7X4oSa36i8MS4BG0x.hsLyRoYxyjk7H0Ge9IaQbiIBsHMi8OJq1eGk2f9hLUJ8yF9aACQrviSq6LfIkc82T6wP3.qetzKRtjgGmRdKmAAfPmgADQ8wPsRqM02uh7VkCTDryFbDDbzFTma6ztCE0ER2ut1.z9JbzznJLTslVeKFT1hAT+oShQwzokjrtyu3z56ZaKT8Rx774f4GHeIbcyPh.FzkAIzw4xe8BeW+SlhtYbSc1zRaIpBEYkckSOztP9vHuC192g.0WeQZ5OTHLeXcley4HlKOy9kgseQI3ijbfIrRhwElqZiSWCiQmndoPRCPWfHASICoXs+ak2dxkekdLOKnCxT4WEshUQCJ73dhVYf1QN+UrKak1oR4Gy1ouBfo0pAy9e8nR2Jnvx0iK6ZEXE8QGT+DydkMsxHCoEkbkqIT9+esb01aZiDD1DUe5vUHc2WuOsJRmTP0GGlzzlToJcjXLMogPdARi.EUYrWCtwrqq85Bjn7i39mc+ixM6ZahMP50C09APryrOdFO6LiWvlmYLGPXqCtJh5LfzaZsy1uy1i54E0dVXKKiy0GL8y3l6a3UYOXC.M6g8acickN5MLZOdmteZpwn5uu46Mu4zKcGN6ridwwGQ16vp8N37ICNZ7dW94wu.5lXLootY3YTsYc7sp2sIQ63c8Lu81suP2lnoE08PsgyFzCJONama6AsAXWMkdxS8H0jzOse1mhE0b2tb0b2eS0b2VC0b+9fp49oSTy88mTysaD0b8ySeLazCLmfD+A4mLxkgQDJ71WbMQGW2nRIkLLuSk.7P2PFNvHhXwbojs1zF.+ANrS.TaphbR0LTEQG7oxkTtqjRQWGzVvnJbyVFA1jS6NBh3AAgFaWNBvTEuSo374xciShFO.Gf9cjVMzaeKpZYPewgU3FkewmLAy9sfS.XmFTZvhn+S.cYzefpcsvkpXBW7JgeifCG1KDuzQMNXsvjA+6d3EGvZ6pQ9eecT9CN0Jcy64eHCIKUIDyVhmjxrzJRSWHcXfmo0M++SG1mC6qlNvKD3d7obq.UAomA8ql4LuuV1AYiI829ZHJs60BZg4aO2BdkI3se5pbpir5U4k.wi3qDx5DwA.IAHDkvCYsIaUVARsTtWAsnJGmUpiumr.pmGNXkp4r5VvWC3VDQ1mJzdxKBOehREdVd5PS9ooCsrr0lU7VDyLQJ4PhKqsOl7Tb3lTx9JgO08PcSlImC0RjAyyGGvb4tPAc7WbsvwLpVQYcb3MLpuXtIDKlTgmyRn.tXpTyviZxfuGXGWvUcskJTRNyZjzzrzi2rrCRLersTjmiXvvTNwq3OYaa+.etP6uwOJ8gGd32xKsVhXwjY3orGmbp4Dm0aztf7cJHzlf09fqMazluAUqpJWhtanum4r1BRKIteAnzwDRSE5OlNA.wm+KEiema7PsD7GDExniaFX5Ox0JLGTcriYjGqtuO1LfSYf4zJplE78Fj1.ZpV40B4cnCG5gaQsyOcN+5cvHSBA6wstPV2P7kXKHUJi4YAQ3TkFdlrKXy7V3HcZi4LD2BxgTx.1iVoVp7FD6L19UJ2KMgGEmur9O+8eIsL078KxvYQD3C4YJPNeJln.pWxwRebtxiD5xlkkuE+tQefeqt3uJepKyZzp8wMVgOBUU+H7wDRWrjbCGGXY9QG7YxFW8iggEkNmFwqpgqkF3B0vxPEwEPEkENY8m2upvF7x33wU4i4QfKvDaw.d4XhRM93BIJ0RUJM1zJf9Qq3tjbZc7mER.ehHn.yhxs3iQZRhNmYiyigpfOZYk+PsDvZqKvsWWfubcAty5B7UqKvWut.28+FHuIU8HneXbYijDz6Pz.tPgFDSHCTjsJ8ufeNSpR

It could even be reduced further, but let's not go down the rabbit hole...

It_Used

@ustk my experience in js is a week (aproximitely), hence such mistakes. I looked at the snippet, and I want to thank you for providing an example. Any information is important to me, thank you very much again. ️

ustk

@It_Used A week only and you did awesome stuff that is working! You’re promised to a great dev life

Optimisation takes time. It’ll come when you’ll be used to using different techniques to achieve the same goal, and a new logic will arise at the same time where you’ll be able to chose the best solution for your use case (which might not be someone else’s)

Tell me if you need explanation about what I’ve done, because I tend to contract my code instead of writing it step by step, which might be confusing…

It_Used

@ustk No, thanks, I already understand everything. Thanks again for the help ️!

It_Used

@ustk Now I really need help, in general, the problem is as follows, it turned out that when zooming vertically and horizontally, the keyboard breaks and is displayed incorrectly, to put it mildly. I decided to completely rewrite the rendering on stock components, without using svg, since I simply did not find a way to stretch it vertically and horizontally. Everything was rewritten successfully, except for the black key, in the up state, more specifically, the lower border of the key.
If you can, could you check my code again and give me some advice, thank you. ️

Script:

/*

	Author: It_Used
	Date: 13.08.25 | 02:20
	Modified: 14.08.25 | 21:32
	Copyright:(c)2025, Vienna Symphonic Library
	ModReason: Attempt to fix issue - The keyboard breaks when chenge scaling by vertically. SVG does not have stretches.

*/

/////SVG's\\\\\
// White key up reference: "350.nT6K8ClUATpB.XC0AQBHKx1.vO1dzj4s2UDoXRMAUr4pFSj8+qIjjSF7.vjS.RIgnmfM.fC.3.fkVMQgKgii68FH6du52RwZniaIsR6GCaVwQEFxv96pDvImabCa79uWVS4E2Qk9utTSN1ZyBEfBuv9CLl7DWnHxXgY3kH23.eTjvv9BG1OneJ95Jk85XBr+H24jTVMACSRXKbmjZPGhZqM6CBgwWz8SM4KUNojzL.5PjsRRIPzUd3OzjjzI1C3kNkxPD.lFjk96z3Nx.6l9ivs2eWCBEbb3Lb2gC6JA.DYsYeOEEs2+UZqppu9o.D8qUwpSI3r50BcHpk1FTDjSRYInIsP52dmzFVb6vD67Hb2386cbd.BLDChw1ujDpZAxV4ckPGfWJQ.3wwqWb4JLWWqf.GlvDRrK8YioquihhHuQjQEugrAng85KIcHiIefVsZPlJ.9iZvVlXgEuLkA".
// Black key up reference: "454.nT6K8Cl0BTdC.XO1MMBHsUOhXDdaecZP62idX9gSldMStetkbPQhQxMgNoEfPo.lELD.DA.Q.7Tg3BMuXRZZIH1l692jtpTVfofgg0ZFXcuSszRUkHi6IUEUKqU5C9e1YukYUGfMoP39Ea4cRhNm39+VNcinXrDDKSvCdrwy3Ea3Q1e+cQ+UfNmmiA+f7Ctfidr.kBf763Q9UnkQ7.uagCmCO.ApWSzxo6ikBKZEhkXRZZ8q3sLxkB8XUoHBnzzSqCTKLgdrZ3ZZmnk1KkxAIXK+OyEgamqktLtaYDkuTSZzyUBLIM1GyHljFolaokYWb+PnKB2eKyZWOSJZ0geonOVA.zHAw1lW5DViOxtyunyYgwKxPG+h9uD4+c9Xi+Y3r2S2GFrnUHmkewu.cMB910x6z93QUqQvCnkWU0JHErU00xjD1.BXDoPjcbPDRBWK7aB.BFZ3ra8RExhTNsOv5xNTkS3xmlA3gKFTAiEKdHCPIzmrjaLTFRHHyxqHgS.dIIB.ebZ8BWdgcuFPldF+wGRbfzOjgzIWq8muQXjBofQJx0HQ+FbCHGQwfBaK7vQoJXkFPzAfHciyYqGTrBwgPQN.xakVF.".
// White key down reference: "181.nT6K8CFU.zUA.HZhf3APq.K.jjKLgLQTSFTdlWXHv1Tbqko9gk.7aLubPcD.IrYDcfhw65y9jgABGBT.+CUw6C6KdWQOQvuOHcLKNvAXfY4kfjY8fDPxYyHhYNgXOPBEkfRoHjANRY6cr40Pc+pA1798bKrI0xK+tBUnK2bOSPwaYi4Vs8I06lTAGcYyHRvC..DPd.WDJtWk6qxPtvzUjCXX8pxC0hfFBlJL3OBGrkIdgEulkA".
// Black key down reference: "389.nT6K8CVnAz8B.XlEGIBHuQeG7UyZN98YHo2fo.ykk+FrsyoenEIF4RS9TIDhPslZ6.fO.3C.cDhc4t+q3jjBCJEJJp0pf58F0NKcRQE2PpDscyo7A+O6r2tJICnfRHbyzZ2MJJgQb+e6htNjTbDh0I.jJmM7KU9pKsqZh6llFVuztHb+sqZMvyXzf0vCPf4TEsK59pKpxIDGcRdV8q3sKxUB8pRKl.5Mk3BAmbRdBf.i.Z2jzTBZAWktVmjmFZefx.D5UcXBZqnc1qj9Pj6u0t+qXQ3lwZGqh614PxWJT53MkfSxi8AzgSxSbM8B.7DgXWvqLhJBGhuwtyz3MBTXGrn.SiaXLSyel07WYow+ev2f3eEb1WnFceMTkSHmjmEy2r1cg1GOjVc.l.BLH.wNsGUR3agei.fPCcWQrUpKiBAVFvFVqCoG.0hA3sWdLRxPrM.urDANOte8hVNB33hNrJBIam9gmzhAf.i97uAAjbXi2S7WHXQtE4fEA.+PZvVjCPdq3x.".

Content.makeFrontInterface(1498, 500);

// Change both-key spacing (white).
reg KeySpacing = 1;

// Declare keyboard.
const var fltKeyboard = Content.getComponent("fltKeyboard");

// Create LookAndFeel.
const keyboardLaf = Content.createLocalLookAndFeel();
fltKeyboard.setLocalLookAndFeel(keyboardLaf);

keyboardLaf.registerFunction("drawKeyboardBackground", function(g, obj)
{
	// Draw background.
	g.fillAll(Colours.black);
});

// Draw white note via LAF.
keyboardLaf.registerFunction("drawWhiteNote", function(g, obj)
{	

	if (!obj.down)
	{
		/////IS UP KEY\\\\\
		
		// Set bottom key bounds colour.
		g.setColour(Colours.withAlpha(0x9E9E9E, 100));
		
		// Draw bottom key bounds.
		g.fillRect([obj.area[0], obj.area[1] + 25, obj.area[2] - KeySpacing, obj.area[3] - 30]);
		
		// Set key colour.
		g.setColour(Colours.withAlpha(0xBABABA, 100));
		
		// Draw key.
		g.fillRoundedRectangle([obj.area[0], obj.area[1] + 3, obj.area[2] - KeySpacing, obj.area[3] - 15], 2.50); // x, y, w, h
		
	}
	else
	{
		/////IS DOWN KEY\\\\\
		
		// Set top key colour.
		g.setColour(Colours.withAlpha(0x666666, 100));
		
		// Draw key top bounds.
		g.fillRoundedRectangle([obj.area[0], obj.area[1] + 3, obj.area[2] - KeySpacing, obj.area[3] - 15], 2.50);
	
		// Set colour for a key.
		g.setGradientFill([Colours.withAlpha(0xD9D9D9, 100), obj.area[0], obj.area[1] + 5, Colours.withAlpha(0x737373, 100), obj.area[0], obj.area[1] + 90]);
		
		// Draw key.
		g.fillRoundedRectangle([obj.area[0], obj.area[1] + 5, obj.area[2] - KeySpacing, obj.area[3] - 7], 2.50); // x, y, w, h
		
	}
	
});


// Draw black note via LAF.
keyboardLaf.registerFunction("drawBlackNote", function(g, obj)
{
	if (!obj.down)
	{

		/////IS UP KEY\\\\\
						
		// Set key background colour.
		g.setColour(Colours.black);
		
		// Draw key backdround.
		g.fillRoundedRectangle(obj.area, {CornerSize: 4, Rounded:[0, 0, 1, 1]}); // [x, y, w, h].
		
		// Set colour for key top.
		g.setGradientFill([Colours.withAlpha(0x4C4C4C, 100), obj.area[0], obj.area[1] + 2, Colours.withAlpha(0x323232, 100), obj.area[0], obj.area[1] + 53]); // [Colour1, x, y, Colour2, x, y].
		
		// Draw key top.
		g.fillRoundedRectangle([obj.area[0] + 2, obj.area[1] + 2, obj.area[2] - 4, obj.area[3] - 10], 2); // [x, y, w, h].*/
		
		
		
		// -- This is a problem zone, idk how render a bottom bounds of black key. Currently snapped to top, broken when stretch by vertical. :( -- \\
		
		// Set key bottom colour.
 		g.setGradientFill([Colours.withAlpha(0x252525, 100), obj.area[0], obj.area[1] + 55, Colours.withAlpha(0x0D0D0D, 100), obj.area[0], obj.area[1] + 61]); // [Colour1, x, y, Colour2, x, y].
 		
 		// Draw key bottom bounds.
 		g.fillRoundedRectangle([obj.area[0] + 2, obj.area[1] + 50, obj.area[2] - 4, obj.area[3] - 50.5], {CornerSize: 2, Rounded:[1, 1, 1, 1]}); // [x, y, w, h].
 		
	}
	else
	{
	
		/////IS DOWN KEY\\\\\
						
		// Set key background colour.
		g.setColour(Colours.black);
		
		// Draw key backdround.
		g.fillRoundedRectangle(obj.area, {CornerSize: 4, Rounded:[0, 0, 1, 1]}); // [x, y, w, h].
		
		// Set colour for key top.
		g.setGradientFill([Colours.withAlpha(0x3E3E3E, 100), obj.area[0], obj.area[1] + 4, Colours.withAlpha(0x262626, 100), obj.area[0], obj.area[1] + 52]); // [Colour1, x, y, Colour2, x, y].
		
		// Draw key top.
		g.fillRoundedRectangle([obj.area[0] + 2, obj.area[1] + 4, obj.area[2] - 4, obj.area[3] - 7], 2); // [x, y, w, h].*/
		
	}

});

Snippet:

HiseSnippet 3553.3oc6Yk0jaijblTi3FaSuSD6FgC+v9DrdwsF1SM3fmxwFV3ff2jfD7VqhIvQgaBPhCdMV+N7+H+6w+CFWEOZRNcqQ8H6I7KFfsBUUlUVeYVYlUhpjBCzfQQAgoRmc3tkvTo+SYj24GawaoX6mpgPpz+wLJ5abW3kha2RknHndpzo+lZXpou60oN77e8uwo3o3qAuzUpTiCr0fssWXGeoWo22x1ySTQGNzdwUbm+8MzB74C7BRPH4axPlZohlqhIrqBlsWkIUckHqTo+tLzzFZkIIKyvTfTQgQWQIOEjoBznngVAxJj5pEHQuESk9OTU2NNHTNVIFFkJ8q4Bz2IaErw+3DL1NxV0ChaPkRFMyG6VLvSGqh3dSwaY6oKc1DEkBIEoKFru4nA6eLSGac6G6+hg6Oef.wkQbsAL8qtEdeyMvi5Z3QdE7dFHk9JH85iP5ujQVKzdY7EJX77OjogeLLzPAsNcMTNxapW8e9Ok4G9trea16XShsBBeGQi3ebDhmr2Ifv36HnX.jkAzEH92IHoeGMIhyNA51F1PcDw7ORjl5cLzHh7AK2EZaZE+t60dKMIcgGHFaC88UHj2sXoUfusFQaa0PkvcGjz.nRTf+6HXiigKVFSDGPXXukvNJJAR78DCsfDtvcpAJg5DpgPE2HhMVPeBMz+XBIhzT7r8MIT2QrFFFaiZ5sCPHOtFgd.LhvOHlvRYMhw3PXLZPQfuEose2OjM6OfePL9uD82wOn1DSrriOLeDIKIBgFvPHx+9cDuA42A7GVrUYduQrCWxAlxSx1mqdqsTf08nz26jOhdjPvzAcXGEleonrS4bqZ33HKVBr1QFLngo+BiN.Cd.Cvvcbm9lsLssKVVrdQ8jBzC1L22VoQzfh03UFuoeUwsqqTbov5FKTT4UJUIYxX47Uo66VIIdnbWp463pZvkrtBeauRBS7qucp4LF25zL.3Pm0qqvUipmOrYkBMcKWXJWXt5z4cFNtCKu7fosTW3LWpl07UcJxyYtYx9xxcx2ZT2.m8sAEjbhFLngz9Q5L8163ruAEOiaW2sRB.OQG2JE2yzcKnnWE60QzvI7bUUUYZqRaxWrIKPXVzLXupUinyMZ9pkKSpD.DJuZzlkxMXBKPxoUeoKk3PAG4AyZ32HRp.s9h8hiUKtVnXo5pzLkKpopC3ZKvasgJwQX4b1siyq4JUyXRy9.lMaVMQMey1Slrx.TyasvfvVkmYGrJw1xpdRem9USLCY8MKWnUCs51MfFiilK40DTwd95wdSMqlz1k8M.7pNmGJsyyspmuP9yq5jbC04AS6Q0oCW8nQ8rlJnq.0lKUj1VeZESYO8NxwvXWUo9V821wraPUCo.fW01B.AVPePoglLbcRlNX97F0o7JVg1Id4vwFAFlljyEmpkHGsevH251EaLp5nVqFUfuBjZVh6rQ0L5DHwTopRdsAVcWvTI23tZ19SCEDZIulWObyNlpJL8of4z5majQ2EKrYyYThO1vVOD3xYTpHS+Ji7c6WBjnXxufuGfc4D48aCJZ6x0ZdUKWLxJuhIp8VWtxSGETmye+d4U7Ca01TObNy74K7coZ4tkswzV45sqpoxhUtwsiUlI3lLTd99ci3Z2nCUsc08bPoTUBbmMQMmjeKNZXqcymzSt4bRSXfeuwrf80Y2P4MofvX6dai2k3ual4lVakpkypRhP9bZUlZmaFSHsLcMwP+Q0W3B2j.z5vUghbaw8UX5OZU+079tSFQ1rd0vQjjacDn.bSEBjbzTkDFvMoUIEN.m3blPkxCpt0ZX2ndqKrs6PWYlsK7XYLaINj0tZK857RM1uHzQo8PwA0qua6p5lx.8FM3.P04k4lnapkHJ4oKlaSsApF664XtuwjUkWjzepCWfQ+laIq2OmnJe8Z82Xvozpz59AMm5JJsm0ntl8tYqpMLjaioT+tfsJtiEAGc.uj1QGsUvMtfTkoN4BJNBreDKn9bKCFVoUfV.GGzJS69CkEGp6MYZ80TCUW4FTwzETRochpjl.nQ3LAMCqMEKrqhiIKWMtgfb7i1TjuXK8I860ecRu5Zsa0cM6TiY4cMblU1PPZ6rc0sl00bZOItptFCBp6v1cvrhZg4IkzxsjkpTkxpsBaPtsUtXtQ9snU6IKsQYlc9wQkaPVzaHaMMjTFrlG.DjzASDZFOws3psRwq2Oxge5zxK2xSZYHx40rMSOtZgtMzQwkdOMt7IlElxUNYVF6ytuLJerW0ZM3PQ9vZkFsad2JkmUOf1H.ry0MmXXzt.ne0Fh4GHWYXCAKoHu4EAF8.L7.MAKs7w4Vw33vw2rZylKIWZTnrHY2VZC5WkVZoPj1tfRr45ULjNtYCdeiA0U2seNcmlMM6qlCVzJtqyPUAKxF.mlK5Tp0nJKaEsZtUQTgOiS1GWWMGpYm06lt2fbMujQ9gUiZU.w0xsMDpoMPeLN1q01QbkWNnkGnPGWFN1EpCz4L.1f4zN6GxMmcha73ENKDmCM1BDJLRaJ27U9ZTqbpH4TLgDoGS6y3sYdsUVEoxKscRygEX53ZHu0tL6dS4sxpcP1qRBlSmrdUaqlb0rR1DuaOSGtgSqE5CjsUl1VdGzirzjYAaxAWSav.qpRMwWTC1AE4TGgfp6nCozLop0yYrFvCkqtNXS2nZiFvfpfyFXHwqMoe3nksr4XGKtVb7J9fZ.RKVlnI5sGrUJrCHITfsauXXYqwc4XXr5F1jqgxhJlK1awhT6JkRXYcTmZSKWZR8o8iql2nJKHmDJGtCuj9Jls3Pnr7AnZb7iAKTbghgnFOVyy8T4qT9AhBjju8eEukOApRMbcCpAwVeO10JBUyIt.h62fCBeKHaHzjnEbm7o9+aDTGGn.TySI7R0HfrnhWihIVqDRX3E25bQJ+MhynwDFyGrXYfOpw8u4JddyYrfpmAE32NHvk0WWDB8NKzySRaEiqDn1A9aGfJx4pwbORZWIbPDL9Irbk7vy8UMAH80NBYsDS70hsC7u+M5gJaNKMNTHnYXPhu9adfv3LKlOPDn571r+T16vVFD+DpOxHH6cl.CTE+rdd2er59HfJNVFM0e5jpeXLGL43RzfDqsUHZyJBdAP6P1xtnA8rH5trYuy1f39+YTS.NuwaydGBl2cnZuFxDijHZUc1wJ9t6tCDHjgwXGh3fEGx1nh0hHBsCPGoMH0IBuTha9nBswN1h0aokx8jaqTE+9.AExKCoemE6Q6xuTtGEH19L.pEe+Gv3D4Wo7AxOdPGN1f5iD4HvEO+XOzeDUN7EGyqnvfovP9wqlZrFgmxWtNvwheedc.IoqPMVKf5Xvihj7f+pZ.yKWAnJfFMMn.JPk.MwaefX2CDadfv5.V9T16fdQvaWKE5Mo6yuZFGr72n9W7vymU+OHwmr.96uoH6UJ0QkgvHHjP4xZBRspEpni9FqXQDlt+COm1ITA+dT6tZ1dJJQdbO23KwfeeAiuxMtg+Oz642f6eoufyywDOOl44P5neyYdNTPxmMyyyk24yl3A+ban5kDneAu1yoRehKJVB5mSA+4r2mMaOP7S7Ag9vPY68nJpx+.wIVe2GHef.8iB86ie5n87CWLneDbSf1U9jmhR9M3UlmG+9B7pneduRFZ76Kwql4imTjihAoaG0niMoO17JU65v9Wny6QX9DbeqCb9mDpiAK8yXk+te3HXdDReO9vPriHP+THVFFn5AWPrGUbwCD15tDVAaPUHifGN4voMcNsQVfwI+cbjHAeRHhuXOToO9JKWB0wG4BRMefPMLvE5e73UNcbIWetJ.h2cOFE+hTsG2Y6v7c1uk3E6APW.+9RVA+LIlHEvuu.ATj5E5Bf.O9uaBrt1bdR89p7GJP9EcHJPBvY+uI3j9pfSpiQle1fShe4tk+J6W9+mDBmDoJ98E3Ak+48.oKheeItvz+eSRn7eQetR+54f9TV7tmnBqyl87tdDA938A64e+gM9x9orD+RRFFOKM72xDF34ACeVx3aHH7Waf26mrPEF9.56t7RfOxXpzu91iVOym+n0u9j+0N9oUWwXfeCe63dKg9et6CH0ouGC8+F0PPIVAed7m5Cw2Rb9RLDRK.WaqAOd572kQ.F4hVIOv6ouJLU5+T7oqS334wK5EnDiJuYnMBp15oR+sYt5S6Rs85qZY2kF1ueisdr0icX8e79S343jmMyihP077Etb2ePWW+mOL7X3hK89y+7O+WusW5Scef4X313KLeFLGLCupa5L+TVBh2flsIX.8FTtKxGv8HXGszSYWOjS6ZX2CKgHhFJnrTGn2N.+ImntNxdc6isnnKcnMeRDJCLJXdoksVzMiT.Znj3Eyh1JSIDecT2P8PIaHYM.YVCvhGf1IASXXfIJ3oSf9s7iu7F7QD3C8vS+g9FEAGih1BBuZ9iCSfmIJ5oDKGuyCdc+cjp93m6eyDHUE4hFFeYRnO2eUe8ql5hY+TJKH9lTtrNO68od5897myfzhDDFt8ZnvWV2IBn.nat6G7oi3GYGu65Ky6+0tapWJD+KYjrQkX77X7UOCFQgY+dfwS2n22lopgAZY9B.ecFwo+9b8coPIwwg4cThCsQA0YPQDxnHJM3IG.bBrzuBmp4XaRbarEPFUh2gF3vwSDovsSehH0YhoVnnEF7iZGSahuyv+3gdPXx+v8qdWlN31DToNjJ8Z67BTTvOpocqndx.o+ZGHyW6.y+0NvBesCr3W6.K80Nvxe4AhSRwlfRHdLrIUJTxiCIfSmtpuBxC7f2Zp+a.pBei2.

ustk

@It_Used Because your Y position for the gradient and rectangle is fixed. But you want it to move so it follows the height (bottom) of the black key.
Instead of going from the top, do it from the bottom obj.area[3]

// Set key bottom colour.
g.setGradientFill([Colours.withAlpha(0x252525, 100), obj.area[0], obj.area[3] - 10, Colours.withAlpha(0x0D0D0D, 100), obj.area[0], obj.area[3]]); // [Colour1, x, y, Colour2, x, y].
 		
// Draw key bottom bounds.
g.fillRoundedRectangle([obj.area[0] + 2, obj.area[3] - 10, obj.area[2] - 4, 10], {CornerSize: 2, Rounded:[1, 1, 1, 1]}); // [x, y, w, h].

It_Used

@ustk thank you, my dear people, I did not know that you can use height in the y position. Thank you very much again. ️

It_Used

19.08.25 Update. Wtat's new?

Fully rewritten to stock graphics pipeline. Do not use SVG anymore (More freedom for customize).
Fixed issue with scaling by Vertical and Horizontal (When keys and octave-marks incorrectly shows).
Some core optimisations.

Many thanks to this wonderful people - @ustk for help! ️

Script:

/*

	Author: It_Used, ustk
	Date: 19.08.25 | 03:26
	Copyright:(c)2025, Vienna Symphonic Library

*/

Content.makeFrontInterface(1140, 500);

// Change both-key spacing (white).
reg KeySpacing = 2;

// Change octave-mark visible.
reg ShowOctaveMark = 1;

// Octaves array.
const var Octaves = ["-2", "-1", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];

// Key for octave center (add +-12 to change).
const var OctCenter = 60;

// Declare keyboard.
const var fltKeyboard = Content.getComponent("fltKeyboard");

// Create LookAndFeel.
const keyboardLaf = Content.createLocalLookAndFeel();
fltKeyboard.setLocalLookAndFeel(keyboardLaf);

keyboardLaf.registerFunction("drawKeyboardBackground", function(g, obj)
{
    // Draw background.
    g.fillAll(Colours.black);
});

// Draw white note via LAF.
keyboardLaf.registerFunction("drawWhiteNote", function(g, obj)
{	
    var mark_proportion = 0.75;
    var font_proportion = 12.0 / 15.0;
    var text_y_proportion = 1.5 / 15.0;
    
    var mark_width = obj.area[2] * mark_proportion;
    var mark_height = mark_width;
    var font_size = mark_width * font_proportion;
    var text_y_offset = mark_width * text_y_proportion;

    if (!obj.down)
    {
        // Up key.
        
        // Bottom bounds.
        g.setColour(Colours.withAlpha(0x9E9E9E, 100));
        g.fillRect([obj.area[0], obj.area[1] + 25, obj.area[2] - KeySpacing, obj.area[3] - 30]);
        
        // Key body.
        g.setColour(Colours.withAlpha(0xBABABA, 100));
        g.fillRoundedRectangle([obj.area[0], obj.area[1] + 3, obj.area[2] - KeySpacing, obj.area[3] - 15], 2.50);
        
        if (ShowOctaveMark && obj.noteNumber % 12 == 0)
        {
            var is_center = (OctCenter == obj.noteNumber);
            var bg_color = is_center ? Colours.withAlpha(0xB26776, 100) : Colours.withAlpha(0x6B6B6B, 100);
            
            var mark_x = obj.area[0] + (obj.area[2] - mark_width - KeySpacing) / 2;
            var mark_y = obj.area[1] + obj.area[3] - 30;
            
            g.setColour(bg_color);
            g.fillEllipse([mark_x, mark_y, mark_width, mark_height]);
            
            g.setFont("Inria Sans", font_size);
            g.setColour(Colours.withAlpha(0xBABABA, 100));
            g.drawAlignedText(Octaves[Math.floor(obj.noteNumber / 12) + 1], [mark_x, mark_y + text_y_offset, mark_width, mark_height], "centred");
        }
    }
    else
    {
        // Down key.
        
        // Top bounds.
        g.setColour(Colours.withAlpha(0x666666, 100));
        g.fillRoundedRectangle([obj.area[0], obj.area[1] + 3, obj.area[2] - KeySpacing, obj.area[3] - 15], 2.50);
    
        // Key body gradient.
        g.setGradientFill([Colours.withAlpha(0xD9D9D9, 100), obj.area[0], obj.area[1] + 5, Colours.withAlpha(0x737373, 100), obj.area[0], obj.area[1] + 90]);
        g.fillRoundedRectangle([obj.area[0], obj.area[1] + 5, obj.area[2] - KeySpacing, obj.area[3] - 7], 2.50);
        
        if (ShowOctaveMark && obj.noteNumber % 12 == 0)
        {
            var is_center = (OctCenter == obj.noteNumber);
            var bg_color = is_center ? Colours.withAlpha(0xB26776, 100) : Colours.withAlpha(0x575757, 100);
            
            var mark_x = obj.area[0] + (obj.area[2] - mark_width - KeySpacing) / 2;
            var mark_y = obj.area[1] + obj.area[3] - 20;
            
            g.setColour(bg_color);
            g.fillEllipse([mark_x, mark_y, mark_width, mark_height]);
            
            g.setFont("Inria Sans", font_size);
            g.setColour(Colours.withAlpha(0xBABABA, 100));
            g.drawAlignedText(Octaves[Math.floor(obj.noteNumber / 12) + 1], [mark_x, mark_y + text_y_offset, mark_width, mark_height], "centred");
        }
    }
});

// Draw black note via LAF.
keyboardLaf.registerFunction("drawBlackNote", function(g, obj)
{
    if (!obj.down)
    {
        // Up key.
        
        // Background.
        g.setColour(Colours.black);
        g.fillRoundedRectangle(obj.area, {CornerSize: 4, Rounded: [0, 0, 1, 1]});
        
        // Top gradient.
        g.setGradientFill([Colours.withAlpha(0x4C4C4C, 100), obj.area[0], obj.area[1] + 2, Colours.withAlpha(0x323232, 100), obj.area[0], obj.area[1] + 53]);
        g.fillRoundedRectangle([obj.area[0] + 2, obj.area[1] + 2, obj.area[2] - 4, obj.area[3] - 10], 2);
        
        // Bottom gradient.
        g.setGradientFill([Colours.withAlpha(0x252525, 100), obj.area[0], obj.area[3] - 6, Colours.withAlpha(0x0D0D0D, 100), obj.area[0], obj.area[3]]);
        g.fillRoundedRectangle([obj.area[0] + 2, obj.area[3] - 6, obj.area[2] - 4, 6], {CornerSize: 2, Rounded: [1, 1, 1, 1]});
    }
    else
    {
        // Down key.
        
        // Background.
        g.setColour(Colours.black);
        g.fillRoundedRectangle(obj.area, {CornerSize: 4, Rounded: [0, 0, 1, 1]});
        
        // Top gradient.
        g.setGradientFill([Colours.withAlpha(0x3E3E3E, 100), obj.area[0], obj.area[1] + 4, Colours.withAlpha(0x262626, 100), obj.area[0], obj.area[1] + 52]);
        g.fillRoundedRectangle([obj.area[0] + 2, obj.area[1] + 4, obj.area[2] - 4, obj.area[3] - 7], 2);
    }
});

Snippet:

HiseSnippet 2126.3oc6YstaiiaEVNSzhMdm.rKP6+YCPWXOqiij7s3DDrIwNd2fIYlf0YlsEAAAzRz1rQVzPhNYbmlGh9l0Gk9FzdN5hMkhykw6rnKZqYfh44B4GO7vOQSdluvlEDH70xk+7oiYZ4dod2odxgsFR4dZG2VK2WpSct85QtZGNcLMHf4nkK2K9ATat0VUK7y+76Oj5R8rYyEoo8dA2lcBeDWNW5Y6+ZtqaGpC6b9HEqqt+w1BuVBWwD.IuP2PaL09Z5.1annYqnq8izfgZ4dkNyoeCCaSpikAqQCnRcyZ8Y8pVkY1neid8ZRsptMcaSsbewQNbovuqjJYAZ4V8PgyztCE25E0AumGv64xvJlZcgdNRbGgqCNDQoZsFxccNKIDEnAsxYyCXuHJf86zOk6vmIedf6qCUPl6gZ.L2Jog2KRAOSU3Yn.uE.obJPZ0HH8M5cs84iky0f34qzO1Sx76Sg4IUnDYq1Ju42qu0qVO+54W6fIxgB+cHGKu5cfQkHSBjWCxaCXcGhYyxFaW1pF4uQLpriUcPQKw3o97ACk6TvtnkgUsRj2yYddTR2oiFOT3wsImv64S8mhcvq1Be1R.vwSVdD8ZVGenxL3UvzrpQIRMCih6hVt0VDHr5MfQ5IjC27Z1TR.jfv8FPJb6PtjUr7548YCHulMsarh8HVY7UXKo2v1bD0+ZxMQg2X2v39aC0dJpbOhYhqQRCHTee5TvZHKMPRtg5OSydjK1XSqMJQ1XSS7oA9H7agBqfOphOpgOpiOZfO1FezLz3HWL23xjdEFFj9B+XDSrYXfgTf53P9tMMsHRAwNbLULKjZEY5dj5FIMValsK0mQfnVOA02IkK8ckuNVN3TxLx.lrkXzXgGTovFJ1rw74CeFjLPNQHt9.OmNLl6r1MoiNg1WoMsCc3DgM0UwoBXCpzAkCXx6YiRCF0+JBJCye7.XL2YhmsjK7JrgiO81j16PfFYfuXhmCDi6mXxfRDQu+Rw0y+w0ySfOXTBbhzal0kiTLnbefu5.W2BQbSAk64B1fn3tYghPWCSCIdB3wMbJ4jC5T94fyeFc6MfWKFdqEACblBSauZruXrvGMBhrFkaTa24FzGBzoMvzprAYKhYsxFJ1IYePd0zLVVtVZCyzu2xcjCA6.XUFxknWXcI4UYgztYbZHCYD.ul2DYga.+uxRY.zpYFG2G4h98grjrtcugU3zC5JuOove.QtCvtVLRV7De7j+6FiIskmKKk1CERoXDP8.4EAJFM.SVixKlkdbKWN7.2wCoEL9PyivRIhIPiUbWU+vjpehYKKbwr.pwkklGcMuj7cDjDUMduoB6lhlJnlJFWp1CofORlzCd4xm.xO7.r7fHGCDLGb..bPtrGcTT44OHLqAdaUtlwhGJ3zXFh5u8aCaBbU2alLpGP78GgjdxdvZihycTYtNIShGbkcBSYAEZy8xzdpHIw2dCtxFhYnqyalumrv3nU8FMpGEGI6rPSpeHVhLISmc+tNLg+CpqCMvXbgzQXkkEpg6hvJbqcefFcpZiFNwkMA6QAmZBUR7I6vIJ44HWW93.HmIZrTJt6Kof5RpzGWV7o63NB70TG64CDucodAHWZB6x8Qwxk5G4KRYefKefGy4bfuoP7l.t3TpbX49tBgegLIj.qpUQHbZB41YFyfzTLZObL.1d.lm4yhdAbBdtK5qw+i4FvVD4Vaf06wn2NWL9Smaqd3m+iyPrPhNx.epCG2yQlwyODKuC.wBWrngU6lXIZXUh7HfF3lWj+Mpfkmg+MSSXuDgsOg2Nz3+A4Uq0.K+lmW05+yq9aYd0LaxOby+e5ax+PzsGdS9el1kZ1e6xCMqL6Wv7DjOIIpkHerkv2i42El12gTsDI1zcHW.+Hc3OS3uKu6A2.J9BlkmRtZKr7LnTsVLkbEKr7bnzq7oRIG0o2CEoYMpduWhgcs0CFsh+0FKe.ypFVd7AbHPpu3.lQar7T9+KLVk.f6EqpeYl7MK07MynjsT4a+B29y+sttoxQX4Yj2WcwoAV0wxyYci0mi0MUex0MMTW1LmaNgPkH7PJ125UnX9Oles72kmjUU+9KTGdBU9BWWl+BUimTs+i4XAuvWIUBdqu6D1LC0xsZ5i38Kd3i3U8DnsiNvLECEdG6wkucLKt9ieF0Zwm3F7s2cbapjhmQbrLvtwLeIGgSt1ra31rnSLdM81rfqkhwg1FezeZ4doL9HtiNi3NtBpD1xy4b.1b.Aqqqb1cZeP83+mNuBe+v28NSv+3uueLdh5775yZhdCRtDfWpW0Z6pMp2rx1FZbIaThhuRuZMqlaWc6JlJxsh7nY0l0aX0rlFtC.06SHLPrxayo+QH+YCn+9YDRa.7KFkPIs4AicoSi13QzdL.k8o.qRn9SD3YJBhLsBq+i73pFaGVu0j.f1FVVNdH2NHkqsY8oSbkGLdLi5i2RRJsgaN.ZqeBhrBPiQ4Z0BUbtX.rv4TgSZ6w6T.OPaOlK18gxdW.68vJMguR+K8mvRT1wkJ6Jm5xTke5YGM6XcS0AmcDjw5Km2IVIxOxyQoqqm+NsnMRMep9Ouu18uNhuVGFES.Lj91Qv6PJVArdJ0URf2DfW.WNU8Nl9rckIOWH9M5mwk1CWLFWYAXDVo8qAFiuno00OpeeXZdN.WUuye5WmaURCHvwU5vFv84v5ZcXIQWXwjMKNA.Zb8bqfrMQ0Mv5XDnKyyIrx+B9DqzDqmKVoYhRsQTaewU1Qrn3UY8kgR.L4EdseqoeJVmXpExrpFmGAqBtx1NcScOGsVVGqrrNVcYcr1x5X8k0wFKqia+zNhjTGLAHDiV1noAjGgLv4xcjGEx.CyV092vq1OFJ

ustk

@It_Used Instead of repeating the octave marker code, since the only value that changes between down and ~~down~~ is y, you can just call it once like this...

Note that I also get rid of the Octaves array. Since it only contains numbers starting at -2, you can just use array index - 2

    if (!obj.down)
    {
        // Up key.
        
        // Bottom bounds.
        g.setColour(Colours.withAlpha(0x9E9E9E, 100));
        g.fillRect([obj.area[0], obj.area[1] + 25, obj.area[2] - KeySpacing, obj.area[3] - 30]);
        
        // Key body.
        g.setColour(Colours.withAlpha(0xBABABA, 100));
        g.fillRoundedRectangle([obj.area[0], obj.area[1] + 3, obj.area[2] - KeySpacing, obj.area[3] - 15], 2.50);
    }
    else
    {
        // Down key.
        
        // Top bounds.
        g.setColour(Colours.withAlpha(0x666666, 100));
        g.fillRoundedRectangle([obj.area[0], obj.area[1] + 3, obj.area[2] - KeySpacing, obj.area[3] - 15], 2.50);
    
        // Key body gradient.
        g.setGradientFill([Colours.withAlpha(0xD9D9D9, 100), obj.area[0], obj.area[1] + 5, Colours.withAlpha(0x737373, 100), obj.area[0], obj.area[1] + 90]);
        g.fillRoundedRectangle([obj.area[0], obj.area[1] + 5, obj.area[2] - KeySpacing, obj.area[3] - 7], 2.50);
    }
    
    if (ShowOctaveMark && obj.noteNumber % 12 == 0)
    {
        var is_center = (OctCenter == obj.noteNumber);
        var bg_color = is_center ? Colours.withAlpha(0xB26776, 100) : Colours.withAlpha(0x575757, 100);
        
        var mark_x = obj.area[0] + (obj.area[2] - mark_width - KeySpacing) / 2;
        var mark_y = obj.area[1] + obj.area[3] - (obj.down ? 20 : 30); // decide y position here
        
        g.setColour(bg_color);
        g.fillEllipse([mark_x, mark_y, mark_width, mark_height]);
        
        g.setFont("Inria Sans", font_size);
        g.setColour(Colours.withAlpha(0xBABABA, 100));
        
        var oct = parseInt(Math.floor(obj.noteNumber / 12) - 1); // original array index - 2 (parseInt removes the decimal)
        g.drawAlignedText(oct, [mark_x, mark_y + text_y_offset, mark_width, mark_height], "centred");
    }
});

ustk

@It_Used Also, KeySpacing and ShowOctaveMark can be const var

And this:

var is_center = (OctCenter == obj.noteNumber);
var bg_color = is_center ? Colours.withAlpha(0xB26776, 100) : Colours.withAlpha(0x575757, 100);

can be

var bg_color = Colours.withAlpha((OctCenter == obj.noteNumber) ? 0xB26776 : 0x575757, 100);

or directly

g.setColour(Colours.withAlpha((OctCenter == obj.noteNumber) ? 0xB26776 : 0x575757, 100));

Custom vectorized piano keyboard with unique octave indicator (Keyboard from VSL)

19.08.25 Update. Wtat's new?

30

1.9k

12.3k

107.3k