@HISEnberg said in MIDI Player overlay panel LAF:
Here you go, this shows how to display the MIDI data in a panel. I think there is also an example in the HISE docs under MIDI somewhere. My version tries to scale the MIDI data to fill the whole panel, so it should resize the notes depending on how far they are from each other (in pitch, not time) in the MIDI sequence. But this will give you full customization over how the notes are displayed using the paint routine.
HiseSnippet 2161.3ocyXr1Siqb0AVu8RZ2pck5O.28CW4rKXrSBPPnaK4II.IjMIvBrZ6dGrmDOA+B6IgXp1+a89s9mX+OTU0uVs8L1N1NA1GBcuR0BgxbdMmWy4bloqqsJ1yy1kKS1A9NXtL+A999VT8p5HhEWqZbYdFuIQiTi34Xf74p36f77vZbYxr5ALRxr1S3B99W+0JHCjkJNADG2Y1DU7wDSBMAZ28OhXXz.ogGPLSQcw8aoZaU01vdBnNqxKy4fTuFMB2AwHaEdtlHOctLuheq7ETKpsiV97as61pnsw6NDMbnRAshE2tztJE1EUrz1X4s3x7z5ZDpsaeJhh83x7jJ1Z980su0JbCNi3Qtx.yVnv0G14PvMrMzXlHCJWUchgV249IONPJcS7ZqF509S7sAmTL7Du2yCPHjvQZGXlUVT8VcA0S4KodOfJsRJU52MOPFnRPPC6FnJ+Q91sp0RHDhxBJR0IttXKZe7MSvKFA2OB0.WHVjNXerssScKDndZoAyj9U.o8cvKhHyp+JYqbLypAw.GX2yW.TyrQHIoFhh3x7K7JEkkrFr8QkpdlgzfxkkZN3MC1or6A8lluzoiJciZgdFyTFapqzSIemJ96RuZ5VH7YCqV6ldkjNpvssJ29jQUuzsf9M61svwimT.4zz8rxkt8xV0FI207jy6ocadK+iOt01GNQu9QmJcv0GUs.tu6fxGWVhVc312VrRkgRim52s7j1Tc+yaWpfhtdiYRJCqTS+zRSd6fZ05LE0ubkaLeaeyR9ac4EmvwrpvLeS9MO0C65sI10B6Q2rF16ZpsylkmnQrE5iLc.mwlsa2ci5P.0hRPFdavbLazEhDaHmeiZtSLgETJHAfRHMHj71cyuQcMy7anjuzUNlRvIcHcfcrrOYjEhNwE19m1YhYED35iilOe+N1lD.OKcKAXMr0CAlko.QcWZ5BCgoOKjgL.a5Xm.3m2m6KEb+O7J6TJJ3pzn7fAPv0+1K6VwpUOIxXylG1cbkZijp8lxUtqRCpaO8qqn16v1EGewEiLO+5lXkxyFbxzCnie8YM145hnS8OeZs7mK4TW8L+AdzqTPZZmMXX4AjyObl132bwzxM0O4rCNxWt904ct4z563Qk6T+5S6d9AUbtRRZx3Vuw6tdac2wutSy23IctTEqwC0mpcEA45WuUKKsNRSpNEO97AVGHeSsi6fGnXHe4cVGRt7Hc8iv488l42bxc8lVR+j7EOb3NSu9tNct6vCqlJev92z7glDml1NE1nTg++Ii3u8ea7uW4eLXetTk4dRXYtWv2W0k3PSvvRU987sr.iaHBJlktPWHsbqbwZ7UsAJrnRlnqwMbgEwbHVPVdcg7xx41KaVnkjGUXJxUf4lhJdJ7SBAcIkFgoIUYEeY5BruD3NgYGKiOzNoOJHf46OHhp1fcZAKDe4RzwDR1kfI4gocg9Kzd1SnDKr3vIVpThsk3nbY+6YEfuQRCgVrkMLDo5DO1VH9xqFE1Z8k4.YxHJ3eatoPeUjAVfpiCrPAM3Hl.0VfIg.nNHKrQ.wLCwxlBMzAq5mR6PXaQG.SOrJEYMxHfDw2AtQ3u45vaIZTcwbI.ZhIizoh4dejFwjOjtvDDHdk76jBLZVDX4E09SrL7EbXAerVnNSFxTaWr.wKwhBHGvH9mSq0Du5lNTewbB+3OFaYRFXqQTcg+hfbt.1B8orug1tBhL5DHVwzmKFcBgo8VvgkqvtflyV7Nk2uWjxO+KwhaifTJXoXDn0SwejKJloX+QHSnYhQf9BL8w3eE+Cv6UEYnNw.5HKnEkX5fbghLvIAurKaH8fH6B6nx5w5wFyMiTaYPdOK4ILNCbtbfeQZQSQDC1DE8gA+XaTZl2LzwGpCuVPYIdY3h2lXErz5KIzTbk1MTyEcafH7dbgZPDAdg3Lszp1rt1dyi9xueu6g21kLBpQZzILrkJQ4djdK6DzbBxuDAKqQ8vlHmfSvWH3X6QXkHBOXSCfNOh6xboOPlqqIxfbGVKT8EWVMSh3PrINzbec1et4mVduRPLcvciTwubeEqJNSDJy.x7cLW65A6v5g9l0SInGv+4oizruMM2rToPID9qukTV1IGm4r.hQrZzgkaSUAlPwlKUCNgAVoKnftEbwi3hnhysUnajjbtuSMQ.ZKX.8E9hZj7rxkaD7kaOgknRCjxWQMTjjC928Jr7wEJJGnKNQWEHI4iXoQTYCCDWVeNMg4HK0PoaBx.9gxzuZ4lI6k86wemO1gGZgGyZalZuWWXgExRx2uI07XvGYsjSqoPSdKv4LvtKKiVbot0fKlUmMjF1wuv1ooE.n68vNrN5mXM2VgaPBmlDotSvgRHhBgfMIa1487ErCNCdB3bfd+qkEhCKiZ3vGDGa9CWaCCXtkGBMajO2uFihVAsXVGhiFfRNmPXvrEun2S+9tnmZ33PoHz1pkEgdhCNZ8W+V4bQySA+5zVAWS.l2KBFPmC1kRXpSlZ3oDUb3viqwGM6b.sQCgwkIKM.6ylOZIykywFD9E7KEc4lkdDV+zKBpjvkgOy5Y33zCRhXq9m.p4ihAj+zrYy9YF4IIqLne5Se5WVDZdFXNtO+QFXJdFMg3OCegurx8lN947ss0XM3W7MIXubSDBHltvDxrofsfbP+Et792+CUH+0u792oJ9B9tDpp9Cqiq7.5H6s.9MPGiddmmwWe3P37ahB9D9Fm+XeKmuw1GNV+HXHFWBjdwCMa6CQZULql.jI5wRiVgkwGtVlsl4A5iszBVvRHhPpvVmIBoxbjblHUW6OnFdRl8PJ+P.DPmrBth4Z7sYqET3BNcm1OydMvOnptnntGi4erLV3wxXwGKia8XYb6GKi67XYrz2lQVwoxSn1lgGa33Z2sd3qljI945xrJ2+CqyWNGC Content.makeFrontInterface(300, 200); const var MIDIPlayer1 = Synth.getMidiPlayer("MIDI Player1"); const var pnl_MidiDisplay = Content.getComponent("pnl_MidiDisplay"); pnl_MidiDisplay.setPaintRoutine(function(g) { g.fillAll(this.get("bgColour")); // Scale the MIDI data to fill the panel var noteList = MIDIPlayer1.getNoteRectangleList([0, 0, this.getWidth(), this.getHeight()]); var minNote = 127; var maxNote = 0; // Only proceed fill if there is MIDI data if (!MIDIPlayer1.isEmpty() && noteList.length > 0) { for (note in noteList) { var noteNumber = note[1]; minNote = Math.min(minNote, noteNumber); maxNote = Math.max(maxNote, noteNumber); } // Calculate display parameters var noteRange = Math.max(1, maxNote - minNote); var panelHeight = this.getHeight(); var availableSpace = panelHeight / (noteRange + 1); var noteHeight = Math.max(8, availableSpace); // Draw notes for (note in noteList) { // Note data var xPos = note[0]; var originalNoteNum = note[1]; var width = note[2]; // Remap the Y position to fit the display range var normalizedPos = (originalNoteNum - minNote) / noteRange; var yPos = normalizedPos * (panelHeight - noteHeight); var noteRect = [xPos, yPos, width, noteHeight]; var shadowRect = [xPos + 1, yPos + 1, width, noteHeight]; // Draw note g.setColour(this.get("itemColour")); g.fillRoundedRectangle(noteRect, 2.0); // Draw note outline g.setColour(0xAAFFFFFF); g.drawRoundedRectangle(noteRect, 1.0, 1.0); } } // Draw playback position indicator var playbackPos = MIDIPlayer1.getPlaybackPosition() * this.getWidth(); g.setColour(this.get("itemColour2")); g.drawLine(playbackPos, playbackPos, 0.0, this.getHeight(), 2.0); }); MIDIPlayer1.connectToPanel(pnl_MidiDisplay); // Connect to panel MIDIPlayer1.setRepaintOnPositionChange(true); // Repaint Panelgiffy.gif
That's fantastic thankyou, I will have a play with this but it is exactly what I was looking for and opens up a world of options.
Thanks again, much appreciated