Has anyone made a custom PNG based keyboard ?

[lalalandsynth]

@d-healey The custom graphics one will not allow me to do the custom start and end notes , as far as i can tell , let me have a look at that video

[d.healey]

@lalalandsynth

The custom graphics one will not allow me to do the custom start and end notes , as far as i can tell ,

It's very limited. You can't do key colours either. I wouldn't use it.

[BWSounds]

Is it possible to make a custom keyboard and create a callback for each note and key(off the keyboard) on the onNoteOn and onNoteOff? Might take awhile but maybe?

The keys can be created separately then in HISE placed them together, basically making the keys Buttons.

Maybe…

[d.healey]

@bwsounds said in Has anyone made a custom PNG based keyboard ?:

create a callback for each note and key(off the keyboard) on the onNoteOn and onNoteOff?

What do you mean?

[ustk]

@bwsounds Buttons are not recommended, but you can use a panel with an advanced mouseCB/paintRoutine.
I believe @d-healey made a video about it, but it might come with its own set of issues...

Maybe a panel overlay would work?

[Christoph Hart]

It's very limited. You can't do key colours either. I wouldn't use it.

@d-healey Actually I think the best way would be to have a scriptable look and feel for it. I'm currently pretty busy, but if anyone might want to give it a shot, there's a guide of how to add scriptable look and feels here:

HISE | Glossary | Add UI customisations

How to add customizable UI LookAndFeels

(docs.hise.audio)

The first steps are already done, so you just need to subclass this

HISE/hi_components/keyboard/CustomKeyboard.h at d503b363fd7e449cf9a587607c6c94c913e90546 · christophhart/HISE

The open source framework for sample based instruments - HISE/hi_components/keyboard/CustomKeyboard.h at d503b363fd7e449cf9a587607c6c94c913e90546 · christophhart/HISE

GitHub (github.com)

from the script look and feel and register the methods.

[d.healey]

@christoph-hart said in Has anyone made a custom PNG based keyboard ?:

Actually I think the best way would be to have a scriptable look and feel for it.

Oh that's a very good idea

[Christoph Hart]

@d-healey Ah, I just realized that it won't be of much use unless you can draw images in a look and feel callback which sadly requires my brain skills to implement.

[d.healey]

@christoph-hart Yeah I see what you mean.

[Christoph Hart]

@d-healey Brain Skills -> Applied.

- added image drawing to custom look and feel · christophhart/HISE@f4b0b17

The open source framework for sample based instruments - - added image drawing to custom look and feel · christophhart/HISE@f4b0b17

GitHub (github.com)

[d.healey]

@christoph-hart That was quick! :D

So this can be added to any LAF routine?

[Christoph Hart]

@d-healey Yup.

I also noticed that the keyboard look and feel methods are a bit messy, so I'll do it myself. Oh and I'll remove the non-vector default keyboard during the process, I don't think anyone uses them anymore.

[d.healey]

@christoph-hart Will the Engine.setKeyColour() affect a LAF keyboard or will the LAF override it?

[Christoph Hart]

@d-healey Good call, I'll make sure it will get passed on as property into the call.

BTW, I've just pushed a preliminary version. This is a example use case:

laf.registerFunction("drawWhiteNote", function(g, obj)
{
	g.setColour(obj.hover ? Colours.yellow : Colours.white);
	
	g.fillRect(obj.area);
	g.setColour(Colours.brown);
	g.drawRect(obj.area, 1.0);
	
	g.setColour(0x22FF0000);
	
	if(obj.down)
		g.fillRect(obj.area); 
});

laf.registerFunction("drawBlackNote", function(g, obj)
{
	g.setColour(obj.hover ? Colours.yellow : Colours.black);
	
	obj.area[1] += -4.0;
	obj.area[3] += 4.0;

	g.fillRoundedRectangle(obj.area, 3.0);
});

[Christoph Hart]

And this is how you use it with filmstrips:

const var laf = Engine.createGlobalScriptLookAndFeel();

for(i = 0; i < 12; i++)
{
	// use whatever prefix you want
	var prefix = "{PROJECT_FOLDER}Oink/";

	var d = "down_" + i;
	var u = "up_" + i;

	laf.loadImage(prefix + d + ".png", d);
	laf.loadImage(prefix + u + ".png", u);
}

laf.registerFunction("drawWhiteNote", function(g, obj)
{
	g.setColour(Colours.black);
	
	var x = obj.down ? "down_" : "up_";
	x += obj.noteNumber % 12;
	g.drawImage(x, obj.area, 0,0);
	
        // fill the key color if it's defined
	if(obj.keyColour)
	{
		g.setColour(Colours.withAlpha(obj.keyColour, 0.2));
		g.fillRect(obj.area);	
	}
	
        // draw the hover state
	if(obj.hover)
	{
		g.setColour(0x33000000);
		g.fillRect(obj.area);	
	}
	
        // Add the C octave numbers using the best font available
	if(obj.noteNumber % 12 == 0)
	{
		obj.area[3] -= 4.0;

		g.setFont("Comic Sans MS", 14.0);
		g.setColour(0x77000000);
		g.drawAlignedText("C" + parseInt(obj.noteNumber / 12), obj.area, "centredBottom");
	}
});

laf.registerFunction("drawBlackNote", function(g, obj)
{
	g.setColour(Colours.black);

	var x = obj.down ? "down_" : "up_";
	x += obj.noteNumber % 12;
	g.drawImage(x, obj.area, 0,0);
	
	if(obj.keyColour)
	{
		g.setColour(Colours.withAlpha(obj.keyColour, 0.3));
		g.fillRect(obj.area);	
	}
	
	if(obj.hover)
	{
		g.setColour(0x33FFFFFF);
		g.fillRect(obj.area);	
	}
});

for(i = 60; i < 72; i++)
	Engine.setKeyColour(i, Colours.green);

[d.healey]

@christoph-hart said in Has anyone made a custom PNG based keyboard ?:

var x = obj.down ? "down_" : "up_";

I had no idea you could assign with the ternary operator in this way. I have some edits to make to my scripts!

[DabDab]

@christoph-hart Does it only work with New Layout branch or Develop branch ? Or it will work with Master branch as well?

[Matt_SF]

@dabdab Only new_layout for now

[DabDab]

@matt_sf OK. Thank you :)

[d.healey]

LAF keyboard is great!