Piano Roll UI Component?
-
@clevername27 my immediate objective would be pitch, velocity, note length. Extra MIDI data in the future would be nice but I think this is a pretty reasonable starting place. So in this case there would need to be a footer for the velocity.
-
@HISEnberg Would an Event List work for you?
-
-
@d-healey Oh amazing this looks like exactly what I need. If I pursue this further I will repost here with a piano roll for everyone to use!
-
@HISEnberg The main issue I see is with interaction. Probably the easiest solution is to use child panels, but I'm not sure if you'll hit some issues with potentially 1000s of child panels representing the notes.
I actually started building my own sequencer (notation based) and ran into this issue so put it aside.
-
@d-healey @HISEnberg @clevername27 I wouldn't go with child panels here. I've made an editor ages ago and, to me, just storing the note object in a big object like
{note:x, vel:x, length:x, anything;x...}
and drawing rectangle in the main panel is nice. Then it's a matter of mouse detection in the note area.
The only drawback I have seen since I played a lot with both solutions (child panels and objects) is that the object solution requires you to loop through all notes in the object before deciding if you're hovering one. If you have hundreds of notes, this can add some significant overhead.But child panels can be a nice solution too, we just have to be sure moving it around and changing the length can be handled reliably
-
@d-healey @HISEnberg @clevername27 Actually I am making one with child panels and it works nicely
Still a few things to add and I'll share a basic MIDI editor (to be improved) -
@ustk Do you think there will be any issues with lots of notes?
-
@d-healey It is just that the overhead of the object solution is the fact that it requires you to loop through all notes, while the panel solution can overtask the UI since child panels still are components (and I know from a past experience that too many components can make the interface laggy)
Now, which solution is the less greedy, I don't know... -
Alright so here's a prototype of a MIDI editor using child panels.
- The notes are created in an array of MessageHolders
- Updating the notes doesn't work yet because of an ID tracking issue, if someone as a better idea that'll be nice
- There are still a few bugs and many improvements/additions can be made depending on the use case
As for now, I can't find much more time to finalise it, so, here's the snippet which I hope is a good starting point
HiseSnippet 5641.3oc26jrbiibkjU2z1R1db6H7o4TZEw3fpDKRBRJtTkqoKt.tHwMwEIQ0QGc.BjfDk.AHA.IEkcEy7IL+By7k3y91bZtNm7o4f+C548R.P.PQoRtpxWL6tnHx78d4Ke64B5ZnKRMM0MBE9vAalSCE9WDo+FMqokmJnnEpQkPg+lHsTjTZqaQ4kTr.HKsYtfoIUJT3veUMDpvG70gXe9qeaIAUAMQpWSgBcothHsoxLEKuV69tyUTUqJHQGnLyGzYdWCQcsx5p5KAN5qhjLzbAwaElPaKff8hHgpKXNMT3WFIk7XwTx4Rmmq.WgbYJvwcZ9wYRlRT5zBoSmMsjbp7BYyCH8SrY69VBVTSfnkzk1zep9ZM6A3RESkwpT7AtP8gQ1t4PkmpnJ00U7XFJT3utqmv5qrEV+FlrYa66JzHdX3WnE9EOEKw82.K8BerzO0U+wXIUgMTCFq7OEoUiJMH1svEfQJuzvfpY0mtXIMfV6u9sNcMv.j+9auot9bdMAf8j72LR8w.n8mSC1Q3u5KzbMDNsppnRw4cX2G.nw4HXXTQvRHzK9+95HExjLt1frmmu7kkaN3hZwutT5MipT474UiGWi8+rOr+pIqUWpzcoZMd8clZWVU71ZKKLdbNK822XcwSUWe98mlJ9kbkt58mlMkFOeqSpnu3702l9l2WqXN566cZZAk7zhqtNdN93um1M+hZEtux4xoU0rzSUqv64pUuS4Uk2T9pyJLt7fbMzZUo6cRMlLRtYuLzdWung93EBW0MmdsUMyXJc5kqSMJYNJO8NC0yWJZlbA+IEaITH0zEpWuoS5xS6F+jK6d4n5SKMoxUSoYNQc0YkazslXcE0Ei0SOXP2M8GqubY5h0xK1bHU6L5MhwummOiV8dERNH46i23Fs92JVTpC+4Kydwr1JxoiWucg5iG2KG20k2rrStFK5XsNqN0r9zIiimr280K29lBylJlTtcugF4xYUtv6aro6FYtKuXYi7zUyJZrli6jjo6uN6jSOYxEzAUKWrGcy59S5Nqp3FM0BqqJjKSwSKPE4alejDkNavhgmWnYItTyeOOUcpImQuqJdqQy05YaLc56ue0x4YRWQZyJqKTZNY0r3qtRpa8bSjue0U8ReR7ViJUV89lc0KlqmR5TsGd6YCi28pZ0pUs40UybwFdk6FrTtz4UZIWu0zgqFkj+hNhmZjZV6YY3F1Z7oF0JYnO8hYIkU3EKrbsYoty3WNZ5okyIurb50c6HtPVQkeT1a0u5lytrpk7hazjZLuyhEwyWKYmlF2yq0JeY4BJ2TYxD00wiWZP77EMTkGMesp7fI2sd3fKttd0I02ToTubE6FOdu5MWI259pYybR9Mv+VZYjscs6EDoBcjMiuIemYKmXZQqLdvlqNwJSlqV2YwERKRYIuQS+d9I83xMbg4ra5Ula53IzgbMNK8I22cSGUfLWoNd70Kp1Nc5wJsm1ejxDk4iu8RsZWTkan5hqqeUtUqMxVbzjTMyWmax3dWdwhKSdS+JWK041bm0KSqKNq6v5SzWrYdkx4pYLM+vRVWuT75YRq6z1XRKqloGsYZsjxhiT34RyqdWQ0Qit87RoFPuxjezJsFktp3U55mcBU+pxuWNY40mb57yt.lJ2IU91Su9diyt4ViUY4qsToXxV7kp2WXZt0B8RVuTu7qWVe3zxBVWLNc2MyEKksbm0hMUlJ0otB2fwWr9h5J2G2ZPxzquT9R9LWe28EGbYwFcOeUEcf372pzo1cxCFmYxH8ZUNQ49FCxIrPpQqUmYZMlWVd07bky1PIeol2LePIyNM51k+p0me9IMJT8lVWTd8ssU6pOcyIkpyWRluc03s6U8z9sdulZ+bIGHHWXXMJs6hyKJu39qh2PuZp5W2oX80oMMAK+6GWuSggitRdo9fBZsRsYRm04mKW5rzcF1c5lbitOd23ixloTUyoUm0nzBkgajmKzzhtZ8nIWTYLUbEe+p2Ijur5hxSsRM3lkZqGQKuVLdHLBnclw+qHIFZRMLSLwfNIQEcwkyfn2lI9gt85TqWwVsZztVhenVmdEa+C050oyk78STWwjRtr+fWQpKnIsgTwX4LyWQ5pulZP5oKdK4Uj05F2lXaj2D0zMDzpYnquhZ9XX8JI5LcRTKHaDIIYFf6wwgugf1Xt99JSzDrVZfIlaubVIAH1ta5h+Tp20VelBzOlOyMGx27tJTs80LlJBRqXX4uZC67SARAMfNatN1v+ci+yuI7659tP9xZ901YM+0Q5KZnL2xqGLsxOORCMKpgL3OFHuoMrgdw+ywQJqCPnYEelvszpFvCawHZ9jIiQxlL4wu4P.JScUZbQUpfQTngCS7xD+i5mCO7.VEGs6LfmvWowfN8HIHcaTrcGRuNMad3AEWZMU230jg8Gb9gG.fWr8vhMe8gG7JRE8kP4.jxpJf8mkNQPRJgDUkZQIBDMnHTDHrXTShfAkHorRQhJQTzHVSMnTxbvdv70GnRksHG7p+UxLvT8vC19ALDk.xi8rhppKpXswWuFJSlZilzRCAKEcMbzJ2pBP+UTfvvfPIyDlnQsTLmw5bPulrAwtOjCQ11fpB3uhlPXLn3WBMNW2TwlhGd.HYHi3GPpNrc4AM5z1YtubtDTjja0XDyo5KUkHxJZRdzd7FBcEXvQZTIFY7RKBTJkibhHnAsxdfzBLhgxlqqqJQM9VvabJcCSfIrzReFvZhBppaHlTKD9jGibUog05y3ihDH7wR6I.wPeoljh1DB0vP2ff149lpRFJxVXulpnrCHofIYMkIQHJH2YnbO3UvFMjKHyMzAE7LhBREAKhnN3cpgAqX72bUv0QBYJDX1fCONW4NpZLhoNQhJpLSPkLlJX0W4dpOFBjvWiHNFz.FK0tkJwlVMZAw.ujuEe6ANSOPTwLPg74Thpt.N8vN3uCbkkHSLTjHSoLaAfbboxwlq.+Acx3OzbSfboBc8bcCKWZVOwkj600mgHQYE851CSToAApA+f4JBZf8gtpJIJHfVyzw.KqAqRBwbp.H4.Mo9bzZAaAmgrInoEFT9b5lw5BFRjp.qix9A3z.MOQkJNk+G4PKPjyDj29I+gTgubyh8Jhdc8+LnygvxTMsHqDLXlRNKth7VBawywmPs7VEVzi7u.rivn+dXaanzUSEv0MWBfcYWuhnGsEhcvDcw5JXM0GhhFfWAqQLGiK.wgXCEAm20Q+tjwOMFA956iQfemx82IimLEqCN1WOGby+YfK62o9LvM+dw0mrwfZBwFdRoiGHeJxmmA1OgDxGmhwwp3jrA30uKShLw7RHA15bN4mHjLIhl5kbwO83XvOSEi8bB1ytflHEjTfC6C9ZfeD41hHGCQtcPLCCwLruBfHLE1hJa9Y21VzYXmmgcd1W6fcJ+nmxE+TaI.CetrLBvk096cHAW.ZvskHbaoBiHosm7oSY+8NDIY1.TAeLlWOL578ugQmr1xhrYr+dvgfxdBQa4L6pNN3sjSS9F61fFpamm.ZcqeJ5+Z2bzig.9tX5fyXrjWxA.BYraAS2vxjAMkbKPfYgouV1ltyqISHd+sCzqgYqdKQVP0jBVV9Ls5yewP91k4QypuOfQWolEKe9Of0m0G6LUrLwxEqPLNNDrO2Hr04a1ku21Za9rhxBbBVxrFa2fLnZGpnopnQIxK0DYdLA5M5wG9GN7.YnJknhXSXZ5.ZE6MURPip1TwDzNPxxCXPF2fhQdfB3m0U.22KLBwGNbGp+FaYCPHbkLlVByl2PqO7MrznGvY6EpnPMJMz5dGiQgxOcJjwDzBN8.FLt552fUuXPgEKoQ30l.TGmCNTpptwEKgZcoFLSknLxvXZWdDM5fUXMlZ.v1U2bz9XwG.TzMLdyYXagA3jU00MhFc+12uhrgYju0UvgG9LMhbV1P2hs4aBiQWAEnj2d5KsvIvmgAk2j.J8kQUGhF0UpDcBS.LINTcnZQU0nIuSVli84XlFAlXnXzzwRS4sbugn76gZaUL8KYR3WjPTN4DvXCn6AJxjn97+hKhUGqnYFU4egKEyhDgBFeSrJ.bivYbPxb3+gbvAN7VOpnEjyIFY2QFjWJuzaz8.3JEIL2WLeZqumQwO.+6vGNloXeXPLItjgv5lnfJ4dHXvwK3SXzdjFevQ3wrTO7IFL+hUmHgtBP+7gxK2gMR3.Lx.OZW6QdwxSaqaYL35ovR0IigvzOjKSy9rGtDf9Yyj.rOBOx54IXwOb7a9h6a0ReoIrf6RewbqXDrLrhO7.A77qXKak4agt.rmhKwVsOaw9NtGX5I1xkfDc6M9jMhaXVkHvVlczb.dOwa8mj7asW4b76vIMKv1LcIG5cWrsgcOl7ZW.8OHxx3nvFsSdjAaKEbQaEUEQJax2X6fAkJxiTNJ7CblU112GVh.NkiwndL6AKFh7w19MeQz56NjeNp6cSj7bmNdY8vZc8LZ.78RMi4YOPKtjfkPbWKA7uds5pxw+Fn0s5HYYu1YJAnY3uPiLOqfzl44ayVrsP3s9x15OGKXA5powQ9XxK8mpdKAFADXOgjixDJmvgnEHaoClqwn.OywVV1+fCDG4a1zPCc.idD37ou10Ez7nXjifLYDuFrEwXJPmckBKL45XL1OlMqDaGtjEZLPdXWR7XYQY9y9CfZ+Gy3qUrlVTc9TgssLwfR0bB6wTNSgpwL.OVHrG3NxRg3jGhk5ydagvLfBZSToaS91DEkkvdMwJ6g3lohm7XGuOLrihYEpLvnRQ8FKS7nI8x7hNthfhXWH.GFxQXUhGQ9i+QxucGd8XfYCLa.1duTvdkiG4C7wpKo.ztOhaw9D6XHG3xO24ZSsW1ADSO1n4tImHP6ju4kIiCox.DeX6Yy5ToAN1B3RDtKPZo.T3gYq99s79Sq8EeNZ7GSkK3oa2S4KOtoljfwsfBZyyyZCSj+Ls1Rcps411xI1WIUEXebHNzUUcbKdJpII.kbzRWSG7Uy5YxZy.EUUl.lrCn2Y4SIuB2QzG2v+HQHQiAU5H+l+OpMju5NQoMaSRb2KlXa2pIbjbFjc04GuUSPgEhRdrAyw5Ofyl2doTzfhVa91bkmX.YFGAw86R989B95XkBgG2E22ryL0iJw1gabmUeXaHP2xkbh98zE6vlj6Zm8VmxKXO4nbP4f8982GqXYKLhyjpnuVCrM+s9Kk409W8+aH.a8nGRAjlXpvJEv.jDseyFcSTqWiJG6LjJlrgqn6gTrcXsLTww0lz3QbrXoflEHXLwcjlsC4QsO0C2S5PcCpzgbFj4fHzjs46tlc9BVpXVztlge2uyuX3Xbfla.YbDsHBSvEDYQjEfulwj23XwNQS6CM.OofYB2hG7.6XBb3AL+EQbp.lBkcfEaOnin3d2ap6rM5X7d7HdPnDDsOUFa6QuRSui76IQ20T5kDVHOVxB+JVGCbGmIl40V2fOB4vXsOJ41F9dKIeLHcbrdfS3u0uP9v8hKFcikSzWfBGy.rvbaM4VoySmkAzp6QYum4mg0kT0.Y0rqOyIwwdLXdKdpNz2DrWcCEPWKn10tvMWAbzityNt29AcT.P27nfdkSMY6n27kywSVAUVXHLoil5lOp3ZaDWavrWyCcsybfszjYB2scg1ObhdhiqCjbXx0Xsk9Cc7sOXwMLvBt.mjNwOYBamJiBFJ.zj9npsF7.Otz8W9WJkSa9GoS7Whr6v4MeG8Vxinf7OEGsmErwZe2ZTcG.FM8Wc6VNyYX2yVXr+7KGrikKaQCOxJScnMlvg6M6fGaIKO1hTc3ti2CRvJZ9HXARJOSYVk6G4v6eHPXnmzu0mwX.GRWyQ14vF09mX0oQ2iu7q7qwRXWHTL7zSe1riuhC74Yr1uOA2dcJr8SC3U3WXZ5IZfE272nXNPHEXLV6a1f+K3g1y.e+AHXIxFN+3GM7lyV3uCZA2hDa4BC88sk0eb9wA043h1XX3TYiyF9p8EY2aKVoBg+R91CHC536XH9htgC1ajhlu8TfIDcV9r8Y8E3VPvls5rh177ci5aiF75uLTBAtSDbdMgWSn.O6ZoD02lR308kNdVQ81Dhi8sOC5LCtOFuJK+QXVa.Bxs1swX2T9aXO7qrrMO4pghOeo4zn5rowNsw.8KfkwvtUJNf+uK1D6X3aaYjHg6UuZtAZweDJMeM4HvQ1+VLcBzxejvtLYjA8CzuyN9g8yC0P9vdAUoc2fNOPea04fHaP8F8Iv++va9iyNIOCOrJWwhuiJXV7.4ZfhFAone6.rvYjpW0o24MZWKFoe8NCaVgLnWwxmSJMxwQrQE+Ukn8wJIY1SZiaGM4Cr8l7y2l.WPBL0GL.X+9eIsH.MupxbbIRkrzvMmzPWM516aTLxJA0kTlYRvyRk0NXtyt2d64FY3ipGcr8B7Yzd6x.22.y1C2Gxgtm964ZieRNb6oD+1.WYfuiAAtgKtmY7acOh4Wt8jkgd2tWg6bN0tqDIg6YNyLX8.wWlhGUb3aJ7XhiGNKQwgOw.Zg2w4.bAaJxtcIKu29bHlJ5XrmtQCXimBwnZLuJ+BZDvPg+5fu0B+jm2asfns7wGf5ZMzTr5Lm57bUL7tj8u2y63fi.FeyNb3P.TK1MT8ex4FpVZokktVH7B09Ki3yLKDaJ3+duF5wHQeUEHGiCI7oZ1kD+l2EZXC16UQnvgcXMfcmiW0LTpDtBckhH09FzdPjJTyaszmCBusFGgB+ysG5eo68qE2ge1H+yir0JKzcdi4n2sw+Crp1BENR3qeQnP12IO7o+ivgBEbOtCE9WEIvdbGRwhNy8MI5fexe4u7W9QjjdslBa9O+m+yrlGqa.hjdBRJKM8echsaGkO9aMjuI3O8Ypd7li+6B9mis8li2Dx+b72.OYQuCkgQ1twMAF5e1yTs5Mz+IC+Cck2AqmhhzmcEo6uQSLDTjsG.odmoEcdvY+e8asuCstqsxqmidmel6WX47FRYyb9urhLV7WEweSbOlMv+6+16br7rMyNLh68eLz3IdpWIIocTuXq+3O9i+y6QoCMy.Fktd.6paseQhlDNxe3PB4HXzXwHO50Dtbw4xjJ+o4fuKDC6rhh4bUgMcDsDV4jfFfiUGOq+l5qA7QTSwdtth6i4XOWdook9rZFBympHZF.0JTYgkpVEmOmJXfuRcPu39ev5rjJXgCjpGlC3HbGqyZuwx4ymLWgj43XPMPexDUZKPEGfx3ESzojQjUXsMzjdIUD7F8wKaGMnyppP5CqMp6Pot7tJicamUJk2njxscnDJeic1C+PnsV+CB625uJ60D7A2S+uIBLevqlbvW1N70PzoCzjz+c0GuO9Zfo5l.uUZO+2.ujO8ak1yjE+0Q5pXINc+73K1COho.96.O57dK9KivKKCJbOF7qiT85O0WRwOxvae1fSf0van.d4Q.Gk9fOmH0wRvD02u.ipZ+bR7YTBzmpIwd.cXc5jCeNrSmbtcBgsDMz+AQ6Dd3aH3Oi0BvSZr2OlChzBelvsaNtPgv2PkePTLHod.ho9TQL8mJhY9TQ7zOUDy9ohXtOUDy+wQDCWUz4kV.baBEBhhvBQGN712C0veUn+eje9sKB
-
@ustk Looks nice