LAF PNG Keyboard with OctaveNumbers

[VorosMusic]

Hi everyone!
I'm having issues with a custom png keyboard I created.

As far as I know, LAF should work the same with a png based keyboard, but I'm not able to paint anything else. Not OctaveNumbers, neither a hover state rectangle.

Does anyone know, if theres a setting I didn't choose?
Thanks in advance!

[d.healey]

@VorosMusic You'll need to post some code so we can see what you've done

[VorosMusic]

@d-healey

KeyLaF.registerFunction("drawWhiteNote", function(g, obj)
{
 	var x = obj.down ? "down_" : "up_";
 	x += obj.noteNumber % 12;
 	g.drawImage(x, obj.area, 0,0);
 	
 	if(obj.hover)
 		{
 			g.setColour(0x33000000);
 			g.fillRect(obj.area);	
 		}
 		
});

This is part of my white keys function.

[d.healey]

@VorosMusic Have you loaded the images into KeyLaF?

[VorosMusic]

@d-healey
Yes and I also applied the LAF.
The images them selves are working fine, but I cant add any additions like text, or a hover state.

//Load Images
const KeyLaF = Content.createLocalLookAndFeel();
for(i = 0; i < 12; i++)
{
	var prefix = "{PROJECT_FOLDER}keyboard/";
 	
 	var d = "down_" + i;
 	var u = "up_" + i;
 	
 	KeyLaF.loadImage(prefix + d + ".png", d);
 	KeyLaF.loadImage(prefix + u + ".png", u);
}

Keyboard.setLocalLookAndFeel(KeyLaF);

[ustk]

@VorosMusic Have you tried to Console.print(x) in the LAF function to see if it spits out what you want?

[d.healey]

You can also use isImageLoaded within your LAF function to check that the image has actually been loaded correctly. I'm not sure the project_folder wildcard is needed (I can't remember).

[VorosMusic]

@ustk
My console does not print from within my LAF function

//Load Images
const KeyLaF = Content.createLocalLookAndFeel();
for(i = 0; i < 12; i++)
{
	var prefix = "{PROJECT_FOLDER}keyboard/";
 	
 	var d = "down_" + i;
 	var u = "up_" + i;
 	
 	KeyLaF.loadImage(prefix + d + ".png", d);
 	KeyLaF.loadImage(prefix + u + ".png", u);
}


//White Keys
KeyLaF.registerFunction("drawWhiteNote", function(g, obj)
{
	g.setColour(Colour.black);
 	
 	var x = obj.down ? "down_" : "up_";
 	x += obj.noteNumber % 12;
 	g.drawImage(x, obj.area, 0,0);
 	
 	g.setColour(Colours.red);
 	g.fillRect(obj.area);	
});

Keyboard.setLocalLookAndFeel(KeyLaF);

(I know the keys don't look that great yet, they are just for testing purposes!)

This is a simplified example. In the code I wrote to fill the keys red after painting the images, but the remain untouched.
Except I'm missing something obvious?!

[ustk]

@VorosMusic You can put the result in a variable instead of printing, it's normal it doesn't work in the console, my bad...

Have you set the property editor of the keyboard to use custom graphics and probably UseVectorGraphics to false? I don't know which combination works, if ever it is needed since the LAF should take the priority anyway...

[VorosMusic]

@ustk
Good Call!

Turning off custom graphics (unintuitively) fixed my main issue.
Now your mentioned problem comes into play not getting my image names correctly, but I should be able to fix that.

Tank you!