MIDI Player overlay panel LAF

rzrsharpeprod

Good morning,

Is it possible to change how the MIDI player notes look in an overlay panel/floating tile using LAF?
I have had a look around the functions as well as looking on this forum and can't see an obvious candidate.

I would just like to change the look a little, round the edges of the notes, maybe have a colour fade on them if possible but can't seem to find where to do this.

Thanks in advance

HISEnberg

@rzrsharpeprod Yes you have to display them in a panel and use a paint routine. I'll share a script for this shortly!

HISEnberg

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 Panel

rzrsharpeprod

@HISEnberg

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

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

rzrsharpeprod

@HISEnberg

This is doing what I would like for the most part thankyou, I just have 1 issue now.

Because of the way the notes are drawn and the height is calculated, when I use my transpose script all of the notes move as expected except for the lowest notes in the MIDI. They move sound wise but visually they don't. I think this is something to do with the fact that notes are drawn to start at the bottom of the panel but I can't for the life of me figure out how to uncouple it so all the MIDI notes move.

Hopefully this illustrates what I mean:
Original

Transposed up but the lowest notes stay at the bottom of the panel

In this other script example that doesn't look as good and I can't set the note height, all of the notes move together when transposed which is what I am looking for.
Original

Transposed

As I say I know it is something to do with how the note height is calculated being linked to the height of the panel but I can't figure out how to uncouple it so I can still have the nicer note height without it being tethered to the bottom of the panel.
Would you be able to help me please?

HISEnberg

@rzrsharpeprod said in MIDI Player overlay panel LAF:

when I use my transpose script

How are you transposing the notes? If you are using the transpose module it should be automatically get placed after the MIDI Player. Are you using a custom script processor?
I'm not able to recreate the behaviour you described so if you shared a snippet it might help.

If you minimize the range of the min and max Note, I think this should give you the behaviour you want, so change:

var minNote = 127;
var maxNote = 0;

You can also edit this line to simply draw the note’s height in a fixed range (instead of dynamically resizing it

var noteRect = [xPos, yPos, width, noteHeight];

MIDI Player overlay panel LAF

26

1.8k

12.1k

105.7k