Has anyone made a custom PNG based keyboard ?

[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!